⌈⌋ ⎇ branch:  Bitrhythm


Hex Artifact Content

Artifact c15b3e662e3d8710b190d07f9bbbd67bfe5a5c77786cc2b0bb88b1972c57c67c:


0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c  'use strict';..l
0010: 65 74 20 64 6f 6d 20 3d 20 72 65 71 75 69 72 65  et dom = require
0020: 28 27 2e 2e 2f 75 74 69 6c 2f 64 6f 6d 27 29 3b  ('../util/dom');
0030: 0a 6c 65 74 20 49 6e 74 65 72 66 61 63 65 20 3d  .let Interface =
0040: 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 63 6f 72   require('../cor
0050: 65 2f 69 6e 74 65 72 66 61 63 65 27 29 3b 0a 0a  e/interface');..
0060: 2f 2a 2a 0a 20 2a 20 4f 73 63 69 6c 6c 6f 73 63  /**. * Oscillosc
0070: 6f 70 65 0a 20 2a 0a 20 2a 20 40 64 65 73 63 72  ope. *. * @descr
0080: 69 70 74 69 6f 6e 20 56 69 73 75 61 6c 69 7a 65  iption Visualize
0090: 73 20 61 20 77 61 76 65 66 6f 72 6d 27 73 20 73  s a waveform's s
00a0: 74 72 65 61 6d 20 6f 66 20 76 61 6c 75 65 73 2e  tream of values.
00b0: 0a 20 2a 0a 20 2a 20 40 64 65 6d 6f 20 3c 73 70  . *. * @demo <sp
00c0: 61 6e 20 6e 65 78 75 73 2d 75 69 3d 22 6f 73 63  an nexus-ui="osc
00d0: 69 6c 6c 6f 73 63 6f 70 65 22 3e 3c 2f 73 70 61  illoscope"></spa
00e0: 6e 3e 0a 20 2a 0a 20 2a 20 40 65 78 61 6d 70 6c  n>. *. * @exampl
00f0: 65 0a 20 2a 20 76 61 72 20 6f 73 63 69 6c 6c 6f  e. * var oscillo
0100: 73 63 6f 70 65 20 3d 20 6e 65 77 20 4e 65 78 75  scope = new Nexu
0110: 73 2e 4f 73 63 69 6c 6c 6f 73 63 6f 70 65 28 27  s.Oscilloscope('
0120: 23 74 61 72 67 65 74 27 29 0a 20 2a 20 6f 73 63  #target'). * osc
0130: 69 6c 6c 6f 73 63 6f 70 65 2e 63 6f 6e 6e 65 63  illoscope.connec
0140: 74 28 6d 79 57 65 62 41 75 64 69 6f 4e 6f 64 65  t(myWebAudioNode
0150: 29 0a 20 2a 0a 20 2a 20 40 65 78 61 6d 70 6c 65  ). *. * @example
0160: 0a 20 2a 20 76 61 72 20 6f 73 63 69 6c 6c 6f 73  . * var oscillos
0170: 63 6f 70 65 20 3d 20 6e 65 77 20 4e 65 78 75 73  cope = new Nexus
0180: 2e 4f 73 63 69 6c 6c 6f 73 63 6f 70 65 28 27 23  .Oscilloscope('#
0190: 74 61 72 67 65 74 27 2c 7b 0a 20 2a 20 20 20 27  target',{. *   '
01a0: 73 69 7a 65 27 3a 20 5b 33 30 30 2c 31 35 30 5d  size': [300,150]
01b0: 0a 20 2a 20 7d 29 0a 20 2a 20 6f 73 63 69 6c 6c  . * }). * oscill
01c0: 6f 73 63 6f 70 65 2e 63 6f 6e 6e 65 63 74 28 6d  oscope.connect(m
01d0: 79 57 65 62 41 75 64 69 6f 4e 6f 64 65 29 0a 20  yWebAudioNode). 
01e0: 2a 0a 20 2a 20 40 6f 75 74 70 75 74 0a 20 2a 20  *. * @output. * 
01f0: 26 6e 62 73 70 3b 0a 20 2a 20 4e 6f 20 65 76 65  &nbsp;. * No eve
0200: 6e 74 73 0a 20 2a 0a 20 2a 2f 0a 0a 65 78 70 6f  nts. *. */..expo
0210: 72 74 20 64 65 66 61 75 6c 74 20 63 6c 61 73 73  rt default class
0220: 20 4f 73 63 69 6c 6c 6f 73 63 6f 70 65 20 65 78   Oscilloscope ex
0230: 74 65 6e 64 73 20 49 6e 74 65 72 66 61 63 65 20  tends Interface 
0240: 7b 0a 20 20 63 6f 6e 73 74 72 75 63 74 6f 72 28  {.  constructor(
0250: 29 20 7b 0a 20 20 20 20 6c 65 74 20 6f 70 74 69  ) {.    let opti
0260: 6f 6e 73 20 3d 20 5b 5d 3b 0a 0a 20 20 20 20 6c  ons = [];..    l
0270: 65 74 20 64 65 66 61 75 6c 74 73 20 3d 20 7b 0a  et defaults = {.
0280: 20 20 20 20 20 20 73 69 7a 65 3a 20 5b 33 30 30        size: [300
0290: 2c 20 31 35 30 5d 0a 20 20 20 20 7d 3b 0a 0a 20  , 150].    };.. 
02a0: 20 20 20 73 75 70 65 72 28 61 72 67 75 6d 65 6e     super(argumen
02b0: 74 73 2c 20 6f 70 74 69 6f 6e 73 2c 20 64 65 66  ts, options, def
02c0: 61 75 6c 74 73 29 3b 0a 0a 20 20 20 20 74 68 69  aults);..    thi
02d0: 73 2e 61 6e 61 6c 79 73 65 72 20 3d 20 6e 75 6c  s.analyser = nul
02e0: 6c 3b 0a 20 20 20 20 74 68 69 73 2e 62 75 66 66  l;.    this.buff
02f0: 65 72 4c 65 6e 67 74 68 20 3d 20 30 3b 0a 20 20  erLength = 0;.  
0300: 20 20 74 68 69 73 2e 64 61 74 61 41 72 72 61 79    this.dataArray
0310: 20 3d 20 6e 75 6c 6c 3b 0a 0a 20 20 20 20 74 68   = null;..    th
0320: 69 73 2e 61 63 74 69 76 65 20 3d 20 66 61 6c 73  is.active = fals
0330: 65 3b 0a 0a 20 20 20 20 74 68 69 73 2e 73 6f 75  e;..    this.sou
0340: 72 63 65 20 3d 20 6e 75 6c 6c 3b 0a 0a 20 20 20  rce = null;..   
0350: 20 74 68 69 73 2e 69 6e 69 74 28 29 3b 0a 0a 20   this.init();.. 
0360: 20 20 20 74 68 69 73 2e 72 65 6e 64 65 72 28 29     this.render()
0370: 3b 0a 20 20 7d 0a 0a 20 20 62 75 69 6c 64 46 72  ;.  }..  buildFr
0380: 61 6d 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73  ame() {.    this
0390: 2e 63 61 6e 76 61 73 20 3d 20 6e 65 77 20 64 6f  .canvas = new do
03a0: 6d 2e 53 6d 61 72 74 43 61 6e 76 61 73 28 74 68  m.SmartCanvas(th
03b0: 69 73 2e 70 61 72 65 6e 74 29 3b 0a 20 20 20 20  is.parent);.    
03c0: 74 68 69 73 2e 65 6c 65 6d 65 6e 74 20 3d 20 74  this.element = t
03d0: 68 69 73 2e 63 61 6e 76 61 73 2e 65 6c 65 6d 65  his.canvas.eleme
03e0: 6e 74 3b 0a 20 20 7d 0a 0a 20 20 73 69 7a 65 49  nt;.  }..  sizeI
03f0: 6e 74 65 72 66 61 63 65 28 29 20 7b 0a 20 20 20  nterface() {.   
0400: 20 74 68 69 73 2e 63 61 6e 76 61 73 2e 72 65 73   this.canvas.res
0410: 69 7a 65 28 74 68 69 73 2e 77 69 64 74 68 2c 20  ize(this.width, 
0420: 74 68 69 73 2e 68 65 69 67 68 74 29 3b 0a 20 20  this.height);.  
0430: 7d 0a 0a 20 20 63 6f 6c 6f 72 49 6e 74 65 72 66  }..  colorInterf
0440: 61 63 65 28 29 20 7b 0a 20 20 20 20 74 68 69 73  ace() {.    this
0450: 2e 63 61 6e 76 61 73 2e 65 6c 65 6d 65 6e 74 2e  .canvas.element.
0460: 73 74 79 6c 65 2e 62 61 63 6b 67 72 6f 75 6e 64  style.background
0470: 43 6f 6c 6f 72 20 3d 20 74 68 69 73 2e 63 6f 6c  Color = this.col
0480: 6f 72 73 2e 66 69 6c 6c 3b 0a 20 20 7d 0a 0a 20  ors.fill;.  }.. 
0490: 20 72 65 6e 64 65 72 28 29 20 7b 0a 20 20 20 20   render() {.    
04a0: 69 66 20 28 74 68 69 73 2e 61 63 74 69 76 65 29  if (this.active)
04b0: 20 7b 0a 20 20 20 20 20 20 72 65 71 75 65 73 74   {.      request
04c0: 41 6e 69 6d 61 74 69 6f 6e 46 72 61 6d 65 28 74  AnimationFrame(t
04d0: 68 69 73 2e 72 65 6e 64 65 72 2e 62 69 6e 64 28  his.render.bind(
04e0: 74 68 69 73 29 29 3b 0a 20 20 20 20 7d 0a 0a 20  this));.    }.. 
04f0: 20 20 20 69 66 20 28 74 68 69 73 2e 61 6e 61 6c     if (this.anal
0500: 79 73 65 72 29 20 7b 0a 20 20 20 20 20 20 74 68  yser) {.      th
0510: 69 73 2e 61 6e 61 6c 79 73 65 72 2e 67 65 74 42  is.analyser.getB
0520: 79 74 65 54 69 6d 65 44 6f 6d 61 69 6e 44 61 74  yteTimeDomainDat
0530: 61 28 74 68 69 73 2e 64 61 74 61 41 72 72 61 79  a(this.dataArray
0540: 29 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 20 74 68  );.    }..    th
0550: 69 73 2e 63 61 6e 76 61 73 2e 63 6f 6e 74 65 78  is.canvas.contex
0560: 74 2e 66 69 6c 6c 53 74 79 6c 65 20 3d 20 74 68  t.fillStyle = th
0570: 69 73 2e 63 6f 6c 6f 72 73 2e 66 69 6c 6c 3b 0a  is.colors.fill;.
0580: 20 20 20 20 74 68 69 73 2e 63 61 6e 76 61 73 2e      this.canvas.
0590: 63 6f 6e 74 65 78 74 2e 66 69 6c 6c 52 65 63 74  context.fillRect
05a0: 28 0a 20 20 20 20 20 20 30 2c 0a 20 20 20 20 20  (.      0,.     
05b0: 20 30 2c 0a 20 20 20 20 20 20 74 68 69 73 2e 63   0,.      this.c
05c0: 61 6e 76 61 73 2e 65 6c 65 6d 65 6e 74 2e 77 69  anvas.element.wi
05d0: 64 74 68 2c 0a 20 20 20 20 20 20 74 68 69 73 2e  dth,.      this.
05e0: 63 61 6e 76 61 73 2e 65 6c 65 6d 65 6e 74 2e 68  canvas.element.h
05f0: 65 69 67 68 74 0a 20 20 20 20 29 3b 0a 0a 20 20  eight.    );..  
0600: 20 20 74 68 69 73 2e 63 61 6e 76 61 73 2e 63 6f    this.canvas.co
0610: 6e 74 65 78 74 2e 6c 69 6e 65 57 69 64 74 68 20  ntext.lineWidth 
0620: 3d 20 7e 7e 28 74 68 69 73 2e 68 65 69 67 68 74  = ~~(this.height
0630: 20 2f 20 31 30 30 20 2b 20 32 29 3b 0a 20 20 20   / 100 + 2);.   
0640: 20 74 68 69 73 2e 63 61 6e 76 61 73 2e 63 6f 6e   this.canvas.con
0650: 74 65 78 74 2e 73 74 72 6f 6b 65 53 74 79 6c 65  text.strokeStyle
0660: 20 3d 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 61   = this.colors.a
0670: 63 63 65 6e 74 3b 0a 0a 20 20 20 20 74 68 69 73  ccent;..    this
0680: 2e 63 61 6e 76 61 73 2e 63 6f 6e 74 65 78 74 2e  .canvas.context.
0690: 62 65 67 69 6e 50 61 74 68 28 29 3b 0a 0a 20 20  beginPath();..  
06a0: 20 20 69 66 20 28 74 68 69 73 2e 73 6f 75 72 63    if (this.sourc
06b0: 65 29 20 7b 0a 20 20 20 20 20 20 76 61 72 20 73  e) {.      var s
06c0: 6c 69 63 65 57 69 64 74 68 20 3d 20 28 74 68 69  liceWidth = (thi
06d0: 73 2e 63 61 6e 76 61 73 2e 65 6c 65 6d 65 6e 74  s.canvas.element
06e0: 2e 77 69 64 74 68 20 2a 20 31 2e 30 29 20 2f 20  .width * 1.0) / 
06f0: 74 68 69 73 2e 62 75 66 66 65 72 4c 65 6e 67 74  this.bufferLengt
0700: 68 3b 0a 20 20 20 20 20 20 76 61 72 20 78 20 3d  h;.      var x =
0710: 20 30 3b 0a 0a 20 20 20 20 20 20 66 6f 72 20 28   0;..      for (
0720: 76 61 72 20 69 20 3d 20 30 3b 20 69 20 3c 20 74  var i = 0; i < t
0730: 68 69 73 2e 62 75 66 66 65 72 4c 65 6e 67 74 68  his.bufferLength
0740: 3b 20 69 2b 2b 29 20 7b 0a 20 20 20 20 20 20 20  ; i++) {.       
0750: 20 76 61 72 20 76 20 3d 20 74 68 69 73 2e 64 61   var v = this.da
0760: 74 61 41 72 72 61 79 5b 69 5d 20 2f 20 31 32 38  taArray[i] / 128
0770: 2e 30 3b 0a 20 20 20 20 20 20 20 20 76 61 72 20  .0;.        var 
0780: 79 20 3d 20 28 76 20 2a 20 74 68 69 73 2e 63 61  y = (v * this.ca
0790: 6e 76 61 73 2e 65 6c 65 6d 65 6e 74 2e 68 65 69  nvas.element.hei
07a0: 67 68 74 29 20 2f 20 32 3b 0a 0a 20 20 20 20 20  ght) / 2;..     
07b0: 20 20 20 69 66 20 28 69 20 3d 3d 3d 20 30 29 20     if (i === 0) 
07c0: 7b 0a 20 20 20 20 20 20 20 20 20 20 74 68 69 73  {.          this
07d0: 2e 63 61 6e 76 61 73 2e 63 6f 6e 74 65 78 74 2e  .canvas.context.
07e0: 6d 6f 76 65 54 6f 28 78 2c 20 79 29 3b 0a 20 20  moveTo(x, y);.  
07f0: 20 20 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20        } else {. 
0800: 20 20 20 20 20 20 20 20 20 74 68 69 73 2e 63 61           this.ca
0810: 6e 76 61 73 2e 63 6f 6e 74 65 78 74 2e 6c 69 6e  nvas.context.lin
0820: 65 54 6f 28 78 2c 20 79 29 3b 0a 20 20 20 20 20  eTo(x, y);.     
0830: 20 20 20 7d 0a 0a 20 20 20 20 20 20 20 20 78 20     }..        x 
0840: 2b 3d 20 73 6c 69 63 65 57 69 64 74 68 3b 0a 20  += sliceWidth;. 
0850: 20 20 20 20 20 7d 0a 20 20 20 20 7d 20 65 6c 73       }.    } els
0860: 65 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 63  e {.      this.c
0870: 61 6e 76 61 73 2e 63 6f 6e 74 65 78 74 2e 6d 6f  anvas.context.mo
0880: 76 65 54 6f 28 30 2c 20 74 68 69 73 2e 63 61 6e  veTo(0, this.can
0890: 76 61 73 2e 65 6c 65 6d 65 6e 74 2e 68 65 69 67  vas.element.heig
08a0: 68 74 20 2f 20 32 29 3b 0a 20 20 20 20 20 20 74  ht / 2);.      t
08b0: 68 69 73 2e 63 61 6e 76 61 73 2e 63 6f 6e 74 65  his.canvas.conte
08c0: 78 74 2e 6c 69 6e 65 54 6f 28 0a 20 20 20 20 20  xt.lineTo(.     
08d0: 20 20 20 74 68 69 73 2e 63 61 6e 76 61 73 2e 65     this.canvas.e
08e0: 6c 65 6d 65 6e 74 2e 77 69 64 74 68 2c 0a 20 20  lement.width,.  
08f0: 20 20 20 20 20 20 74 68 69 73 2e 63 61 6e 76 61        this.canva
0900: 73 2e 65 6c 65 6d 65 6e 74 2e 68 65 69 67 68 74  s.element.height
0910: 20 2f 20 32 0a 20 20 20 20 20 20 29 3b 0a 20 20   / 2.      );.  
0920: 20 20 7d 0a 0a 20 20 20 20 74 68 69 73 2e 63 61    }..    this.ca
0930: 6e 76 61 73 2e 63 6f 6e 74 65 78 74 2e 73 74 72  nvas.context.str
0940: 6f 6b 65 28 29 3b 0a 20 20 7d 0a 0a 20 20 2f 2a  oke();.  }..  /*
0950: 2a 0a 20 20 45 71 75 69 76 61 6c 65 6e 74 20 74  *.  Equivalent t
0960: 6f 20 22 70 61 74 63 68 69 6e 67 20 69 6e 22 20  o "patching in" 
0970: 61 6e 20 61 75 64 69 6f 20 6e 6f 64 65 20 74 6f  an audio node to
0980: 20 76 69 73 75 61 6c 69 7a 65 2e 0a 20 20 40 70   visualize..  @p
0990: 61 72 61 6d 20 6e 6f 64 65 20 7b 41 75 64 69 6f  aram node {Audio
09a0: 4e 6f 64 65 7d 20 54 68 65 20 61 75 64 69 6f 20  Node} The audio 
09b0: 6e 6f 64 65 20 74 6f 20 76 69 73 75 61 6c 69 7a  node to visualiz
09c0: 65 0a 20 20 40 65 78 61 6d 70 6c 65 20 6f 73 63  e.  @example osc
09d0: 69 6c 6c 6f 73 63 6f 70 65 2e 63 6f 6e 6e 65 63  illoscope.connec
09e0: 74 28 20 54 6f 6e 65 2e 4d 61 73 74 65 72 20 29  t( Tone.Master )
09f0: 3b 0a 20 20 2a 2f 0a 0a 20 20 63 6f 6e 6e 65 63  ;.  */..  connec
0a00: 74 28 6e 6f 64 65 29 20 7b 0a 20 20 20 20 69 66  t(node) {.    if
0a10: 20 28 74 68 69 73 2e 73 6f 75 72 63 65 29 20 7b   (this.source) {
0a20: 0a 20 20 20 20 20 20 74 68 69 73 2e 64 69 73 63  .      this.disc
0a30: 6f 6e 6e 65 63 74 28 29 3b 0a 20 20 20 20 7d 0a  onnect();.    }.
0a40: 0a 20 20 20 20 74 68 69 73 2e 61 6e 61 6c 79 73  .    this.analys
0a50: 65 72 20 3d 20 6e 6f 64 65 2e 63 6f 6e 74 65 78  er = node.contex
0a60: 74 2e 63 72 65 61 74 65 41 6e 61 6c 79 73 65 72  t.createAnalyser
0a70: 28 29 3b 0a 20 20 20 20 74 68 69 73 2e 61 6e 61  ();.    this.ana
0a80: 6c 79 73 65 72 2e 66 66 74 53 69 7a 65 20 3d 20  lyser.fftSize = 
0a90: 32 30 34 38 3b 0a 20 20 20 20 74 68 69 73 2e 62  2048;.    this.b
0aa0: 75 66 66 65 72 4c 65 6e 67 74 68 20 3d 20 74 68  ufferLength = th
0ab0: 69 73 2e 61 6e 61 6c 79 73 65 72 2e 66 72 65 71  is.analyser.freq
0ac0: 75 65 6e 63 79 42 69 6e 43 6f 75 6e 74 3b 0a 20  uencyBinCount;. 
0ad0: 20 20 20 74 68 69 73 2e 64 61 74 61 41 72 72 61     this.dataArra
0ae0: 79 20 3d 20 6e 65 77 20 55 69 6e 74 38 41 72 72  y = new Uint8Arr
0af0: 61 79 28 74 68 69 73 2e 62 75 66 66 65 72 4c 65  ay(this.bufferLe
0b00: 6e 67 74 68 29 3b 0a 20 20 20 20 74 68 69 73 2e  ngth);.    this.
0b10: 61 6e 61 6c 79 73 65 72 2e 67 65 74 42 79 74 65  analyser.getByte
0b20: 54 69 6d 65 44 6f 6d 61 69 6e 44 61 74 61 28 74  TimeDomainData(t
0b30: 68 69 73 2e 64 61 74 61 41 72 72 61 79 29 3b 0a  his.dataArray);.
0b40: 0a 20 20 20 20 74 68 69 73 2e 61 63 74 69 76 65  .    this.active
0b50: 20 3d 20 74 72 75 65 3b 0a 0a 20 20 20 20 74 68   = true;..    th
0b60: 69 73 2e 73 6f 75 72 63 65 20 3d 20 6e 6f 64 65  is.source = node
0b70: 3b 0a 20 20 20 20 74 68 69 73 2e 73 6f 75 72 63  ;.    this.sourc
0b80: 65 2e 63 6f 6e 6e 65 63 74 28 74 68 69 73 2e 61  e.connect(this.a
0b90: 6e 61 6c 79 73 65 72 29 3b 0a 0a 20 20 20 20 74  nalyser);..    t
0ba0: 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20  his.render();.  
0bb0: 7d 0a 0a 20 20 2f 2a 2a 0a 20 20 53 74 6f 70 20  }..  /**.  Stop 
0bc0: 76 69 73 75 61 6c 69 7a 69 6e 67 20 74 68 65 20  visualizing the 
0bd0: 73 6f 75 72 63 65 20 6e 6f 64 65 20 61 6e 64 20  source node and 
0be0: 64 69 73 63 6f 6e 6e 65 63 74 20 69 74 2e 0a 20  disconnect it.. 
0bf0: 20 2a 2f 0a 20 20 64 69 73 63 6f 6e 6e 65 63 74   */.  disconnect
0c00: 28 29 20 7b 0a 20 20 20 20 69 66 20 28 74 68 69  () {.    if (thi
0c10: 73 2e 73 6f 75 72 63 65 29 20 7b 0a 20 20 20 20  s.source) {.    
0c20: 20 20 74 68 69 73 2e 73 6f 75 72 63 65 2e 64 69    this.source.di
0c30: 73 63 6f 6e 6e 65 63 74 28 74 68 69 73 2e 61 6e  sconnect(this.an
0c40: 61 6c 79 73 65 72 29 3b 0a 20 20 20 20 7d 0a 0a  alyser);.    }..
0c50: 20 20 20 20 74 68 69 73 2e 61 6e 61 6c 79 73 65      this.analyse
0c60: 72 20 3d 20 6e 75 6c 6c 3b 0a 20 20 20 20 74 68  r = null;.    th
0c70: 69 73 2e 62 75 66 66 65 72 4c 65 6e 67 74 68 20  is.bufferLength 
0c80: 3d 20 30 3b 0a 20 20 20 20 74 68 69 73 2e 64 61  = 0;.    this.da
0c90: 74 61 41 72 72 61 79 20 3d 20 6e 75 6c 6c 3b 0a  taArray = null;.
0ca0: 20 20 20 20 74 68 69 73 2e 61 63 74 69 76 65 20      this.active 
0cb0: 3d 20 66 61 6c 73 65 3b 0a 20 20 20 20 74 68 69  = false;.    thi
0cc0: 73 2e 73 6f 75 72 63 65 20 3d 20 6e 75 6c 6c 3b  s.source = null;
0cd0: 0a 20 20 7d 0a 0a 20 20 63 6c 69 63 6b 28 29 20  .  }..  click() 
0ce0: 7b 0a 20 20 20 20 74 68 69 73 2e 61 63 74 69 76  {.    this.activ
0cf0: 65 20 3d 20 21 74 68 69 73 2e 61 63 74 69 76 65  e = !this.active
0d00: 20 26 26 20 74 68 69 73 2e 73 6f 75 72 63 65 3b   && this.source;
0d10: 0a 20 20 20 20 74 68 69 73 2e 72 65 6e 64 65 72  .    this.render
0d20: 28 29 3b 0a 20 20 7d 0a 0a 20 20 63 75 73 74 6f  ();.  }..  custo
0d30: 6d 44 65 73 74 72 6f 79 28 29 20 7b 0a 20 20 20  mDestroy() {.   
0d40: 20 74 68 69 73 2e 61 63 74 69 76 65 20 3d 20 66   this.active = f
0d50: 61 6c 73 65 3b 0a 20 20 7d 0a 7d 0a              alse;.  }.}.