0000: 27 75 73 65 20 73 74 72 69 63 74 27 3b 0a 0a 6c 'use strict';..l
0010: 65 74 20 73 76 67 20 3d 20 72 65 71 75 69 72 65 et svg = require
0020: 28 27 2e 2e 2f 75 74 69 6c 2f 73 76 67 27 29 3b ('../util/svg');
0030: 0a 6c 65 74 20 6d 61 74 68 20 3d 20 72 65 71 75 .let math = requ
0040: 69 72 65 28 27 2e 2e 2f 75 74 69 6c 2f 6d 61 74 ire('../util/mat
0050: 68 27 29 3b 0a 6c 65 74 20 49 6e 74 65 72 66 61 h');.let Interfa
0060: 63 65 20 3d 20 72 65 71 75 69 72 65 28 27 2e 2e ce = require('..
0070: 2f 63 6f 72 65 2f 69 6e 74 65 72 66 61 63 65 27 /core/interface'
0080: 29 3b 0a 6c 65 74 20 53 74 65 70 20 3d 20 72 65 );.let Step = re
0090: 71 75 69 72 65 28 27 2e 2e 2f 6d 6f 64 65 6c 73 quire('../models
00a0: 2f 73 74 65 70 27 29 3b 0a 69 6d 70 6f 72 74 20 /step');.import
00b0: 2a 20 61 73 20 49 6e 74 65 72 61 63 74 69 6f 6e * as Interaction
00c0: 20 66 72 6f 6d 20 27 2e 2e 2f 75 74 69 6c 2f 69 from '../util/i
00d0: 6e 74 65 72 61 63 74 69 6f 6e 27 3b 0a 0a 2f 2a nteraction';../*
00e0: 2a 0a 2a 20 44 69 61 6c 0a 2a 0a 2a 0a 2a 20 40 *.* Dial.*.*.* @
00f0: 64 65 73 63 72 69 70 74 69 6f 6e 20 44 69 61 6c description Dial
0100: 20 77 69 74 68 20 72 61 64 69 61 6c 20 6f 72 20 with radial or
0110: 6c 69 6e 65 61 72 20 69 6e 74 65 72 61 63 74 69 linear interacti
0120: 6f 6e 2e 0a 2a 0a 2a 20 40 64 65 6d 6f 20 3c 73 on..*.* @demo <s
0130: 70 61 6e 20 6e 65 78 75 73 2d 75 69 3d 22 64 69 pan nexus-ui="di
0140: 61 6c 22 3e 3c 2f 73 70 61 6e 3e 0a 2a 0a 2a 20 al"></span>.*.*
0150: 40 65 78 61 6d 70 6c 65 0a 2a 20 76 61 72 20 64 @example.* var d
0160: 69 61 6c 20 3d 20 6e 65 77 20 4e 65 78 75 73 2e ial = new Nexus.
0170: 44 69 61 6c 28 27 23 74 61 72 67 65 74 27 29 0a Dial('#target').
0180: 2a 0a 2a 20 40 65 78 61 6d 70 6c 65 0a 2a 20 76 *.* @example.* v
0190: 61 72 20 64 69 61 6c 20 3d 20 6e 65 77 20 4e 65 ar dial = new Ne
01a0: 78 75 73 2e 44 69 61 6c 28 27 23 74 61 72 67 65 xus.Dial('#targe
01b0: 74 27 2c 7b 0a 2a 20 20 20 27 73 69 7a 65 27 3a t',{.* 'size':
01c0: 20 5b 37 35 2c 37 35 5d 2c 0a 2a 20 20 20 27 69 [75,75],.* 'i
01d0: 6e 74 65 72 61 63 74 69 6f 6e 27 3a 20 27 72 61 nteraction': 'ra
01e0: 64 69 61 6c 27 2c 20 2f 2f 20 22 72 61 64 69 61 dial', // "radia
01f0: 6c 22 2c 20 22 76 65 72 74 69 63 61 6c 22 2c 20 l", "vertical",
0200: 6f 72 20 22 68 6f 72 69 7a 6f 6e 74 61 6c 22 0a or "horizontal".
0210: 2a 20 20 20 27 6d 6f 64 65 27 3a 20 27 72 65 6c * 'mode': 'rel
0220: 61 74 69 76 65 27 2c 20 2f 2f 20 22 61 62 73 6f ative', // "abso
0230: 6c 75 74 65 22 20 6f 72 20 22 72 65 6c 61 74 69 lute" or "relati
0240: 76 65 22 0a 2a 20 20 20 27 6d 69 6e 27 3a 20 30 ve".* 'min': 0
0250: 2c 0a 2a 20 20 20 27 6d 61 78 27 3a 20 31 2c 0a ,.* 'max': 1,.
0260: 2a 20 20 20 27 73 74 65 70 27 3a 20 30 2c 0a 2a * 'step': 0,.*
0270: 20 20 20 27 76 61 6c 75 65 27 3a 20 30 0a 2a 20 'value': 0.*
0280: 7d 29 0a 2a 0a 2a 20 40 6f 75 74 70 75 74 0a 2a }).*.* @output.*
0290: 20 63 68 61 6e 67 65 0a 2a 20 46 69 72 65 73 20 change.* Fires
02a0: 61 6e 79 20 74 69 6d 65 20 74 68 65 20 69 6e 74 any time the int
02b0: 65 72 66 61 63 65 27 73 20 76 61 6c 75 65 20 63 erface's value c
02c0: 68 61 6e 67 65 73 2e 20 3c 62 72 3e 0a 2a 20 54 hanges. <br>.* T
02d0: 68 65 20 65 76 65 6e 74 20 64 61 74 61 20 69 73 he event data is
02e0: 20 74 68 65 20 6e 75 6d 62 65 72 20 76 61 6c 75 the number valu
02f0: 65 20 6f 66 20 74 68 65 20 69 6e 74 65 72 66 61 e of the interfa
0300: 63 65 2e 0a 2a 0a 2a 20 40 6f 75 74 70 75 74 65 ce..*.* @outpute
0310: 78 61 6d 70 6c 65 0a 2a 20 64 69 61 6c 2e 6f 6e xample.* dial.on
0320: 28 27 63 68 61 6e 67 65 27 2c 66 75 6e 63 74 69 ('change',functi
0330: 6f 6e 28 76 29 20 7b 0a 2a 20 20 20 63 6f 6e 73 on(v) {.* cons
0340: 6f 6c 65 2e 6c 6f 67 28 76 29 3b 0a 2a 20 7d 29 ole.log(v);.* })
0350: 0a 2a 0a 2a 20 40 74 75 74 6f 72 69 61 6c 0a 2a .*.* @tutorial.*
0360: 20 44 69 61 6c 0a 2a 20 79 67 47 4d 78 71 0a 2a Dial.* ygGMxq.*
0370: 0a 2a 2f 0a 0a 65 78 70 6f 72 74 20 64 65 66 61 .*/..export defa
0380: 75 6c 74 20 63 6c 61 73 73 20 44 69 61 6c 20 65 ult class Dial e
0390: 78 74 65 6e 64 73 20 49 6e 74 65 72 66 61 63 65 xtends Interface
03a0: 20 7b 0a 0a 20 20 63 6f 6e 73 74 72 75 63 74 6f {.. constructo
03b0: 72 28 29 20 7b 0a 0a 20 20 20 20 6c 65 74 20 6f r() {.. let o
03c0: 70 74 69 6f 6e 73 20 3d 20 5b 27 6d 69 6e 27 2c ptions = ['min',
03d0: 27 6d 61 78 27 2c 27 76 61 6c 75 65 27 5d 3b 0a 'max','value'];.
03e0: 0a 20 20 20 20 6c 65 74 20 64 65 66 61 75 6c 74 . let default
03f0: 73 20 3d 20 7b 0a 20 20 20 20 20 20 27 73 69 7a s = {. 'siz
0400: 65 27 3a 20 5b 37 35 2c 37 35 5d 2c 0a 20 20 20 e': [75,75],.
0410: 20 20 20 27 69 6e 74 65 72 61 63 74 69 6f 6e 27 'interaction'
0420: 3a 20 27 72 61 64 69 61 6c 27 2c 20 2f 2f 20 72 : 'radial', // r
0430: 61 64 69 61 6c 2c 20 76 65 72 74 69 63 61 6c 2c adial, vertical,
0440: 20 68 6f 72 69 7a 6f 6e 74 61 6c 0a 20 20 20 20 horizontal.
0450: 20 20 27 6d 6f 64 65 27 3a 20 27 72 65 6c 61 74 'mode': 'relat
0460: 69 76 65 27 2c 20 2f 2f 20 61 62 73 6f 6c 75 74 ive', // absolut
0470: 65 2c 20 72 65 6c 61 74 69 76 65 0a 20 20 20 20 e, relative.
0480: 20 20 27 6d 69 6e 27 3a 20 30 2c 0a 20 20 20 20 'min': 0,.
0490: 20 20 27 6d 61 78 27 3a 20 31 2c 0a 20 20 20 20 'max': 1,.
04a0: 20 20 27 73 74 65 70 27 3a 20 30 2c 0a 20 20 20 'step': 0,.
04b0: 20 20 20 27 76 61 6c 75 65 27 3a 20 30 0a 20 20 'value': 0.
04c0: 20 20 7d 3b 0a 0a 20 20 20 20 73 75 70 65 72 28 };.. super(
04d0: 61 72 67 75 6d 65 6e 74 73 2c 6f 70 74 69 6f 6e arguments,option
04e0: 73 2c 64 65 66 61 75 6c 74 73 29 3b 0a 0a 20 20 s,defaults);..
04f0: 20 20 74 68 69 73 2e 69 6e 74 65 72 61 63 74 69 this.interacti
0500: 6f 6e 20 3d 20 74 68 69 73 2e 73 65 74 74 69 6e on = this.settin
0510: 67 73 2e 69 6e 74 65 72 61 63 74 69 6f 6e 3b 0a gs.interaction;.
0520: 0a 20 20 20 20 74 68 69 73 2e 5f 76 61 6c 75 65 . this._value
0530: 20 3d 20 6e 65 77 20 53 74 65 70 28 74 68 69 73 = new Step(this
0540: 2e 73 65 74 74 69 6e 67 73 2e 6d 69 6e 2c 20 74 .settings.min, t
0550: 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 6d 61 78 his.settings.max
0560: 2c 20 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e , this.settings.
0570: 73 74 65 70 2c 20 74 68 69 73 2e 73 65 74 74 69 step, this.setti
0580: 6e 67 73 2e 76 61 6c 75 65 29 3b 0a 0a 20 20 20 ngs.value);..
0590: 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 20 3d this.position =
05a0: 20 6e 65 77 20 49 6e 74 65 72 61 63 74 69 6f 6e new Interaction
05b0: 2e 48 61 6e 64 6c 65 28 74 68 69 73 2e 73 65 74 .Handle(this.set
05c0: 74 69 6e 67 73 2e 6d 6f 64 65 2c 74 68 69 73 2e tings.mode,this.
05d0: 69 6e 74 65 72 61 63 74 69 6f 6e 2c 5b 30 2c 74 interaction,[0,t
05e0: 68 69 73 2e 77 69 64 74 68 5d 2c 5b 74 68 69 73 his.width],[this
05f0: 2e 68 65 69 67 68 74 2c 30 5d 29 3b 0a 0a 20 20 .height,0]);..
0600: 20 20 74 68 69 73 2e 69 6e 69 74 28 29 3b 0a 0a this.init();..
0610: 20 20 20 20 74 68 69 73 2e 76 61 6c 75 65 20 3d this.value =
0620: 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 76 61 6c this._value.val
0630: 75 65 3b 0a 0a 20 20 20 20 74 68 69 73 2e 70 6f ue;.. this.po
0640: 73 69 74 69 6f 6e 2e 76 61 6c 75 65 20 3d 20 74 sition.value = t
0650: 68 69 73 2e 5f 76 61 6c 75 65 2e 6e 6f 72 6d 61 his._value.norma
0660: 6c 69 7a 65 64 3b 0a 0a 20 20 20 20 74 68 69 73 lized;.. this
0670: 2e 70 72 65 76 69 6f 75 73 41 6e 67 6c 65 20 3d .previousAngle =
0680: 20 66 61 6c 73 65 3b 0a 0a 20 20 20 20 74 68 69 false;.. thi
0690: 73 2e 65 6d 69 74 28 27 63 68 61 6e 67 65 27 2c s.emit('change',
06a0: 74 68 69 73 2e 76 61 6c 75 65 29 3b 0a 0a 20 20 this.value);..
06b0: 7d 0a 0a 20 20 62 75 69 6c 64 49 6e 74 65 72 66 }.. buildInterf
06c0: 61 63 65 28 29 20 7b 0a 0a 20 20 20 20 74 68 69 ace() {.. thi
06d0: 73 2e 62 61 63 6b 67 72 6f 75 6e 64 20 3d 20 73 s.background = s
06e0: 76 67 2e 63 72 65 61 74 65 28 27 63 69 72 63 6c vg.create('circl
06f0: 65 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 73 63 e');. this.sc
0700: 72 65 77 20 3d 20 73 76 67 2e 63 72 65 61 74 65 rew = svg.create
0710: 28 27 63 69 72 63 6c 65 27 29 3b 0a 20 20 20 20 ('circle');.
0720: 74 68 69 73 2e 68 61 6e 64 6c 65 20 3d 20 73 76 this.handle = sv
0730: 67 2e 63 72 65 61 74 65 28 27 70 61 74 68 27 29 g.create('path')
0740: 3b 0a 20 20 20 20 74 68 69 73 2e 68 61 6e 64 6c ;. this.handl
0750: 65 32 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 e2 = svg.create(
0760: 27 70 61 74 68 27 29 3b 0a 20 20 20 20 74 68 69 'path');. thi
0770: 73 2e 68 61 6e 64 6c 65 46 69 6c 6c 20 3d 20 73 s.handleFill = s
0780: 76 67 2e 63 72 65 61 74 65 28 27 70 61 74 68 27 vg.create('path'
0790: 29 3b 0a 20 20 20 20 74 68 69 73 2e 68 61 6e 64 );. this.hand
07a0: 6c 65 32 46 69 6c 6c 20 3d 20 73 76 67 2e 63 72 le2Fill = svg.cr
07b0: 65 61 74 65 28 27 70 61 74 68 27 29 3b 0a 20 20 eate('path');.
07c0: 20 20 74 68 69 73 2e 68 61 6e 64 6c 65 4c 69 6e this.handleLin
07d0: 65 20 3d 20 73 76 67 2e 63 72 65 61 74 65 28 27 e = svg.create('
07e0: 70 61 74 68 27 29 3b 0a 0a 20 20 20 20 74 68 69 path');.. thi
07f0: 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 s.element.append
0800: 43 68 69 6c 64 28 74 68 69 73 2e 62 61 63 6b 67 Child(this.backg
0810: 72 6f 75 6e 64 29 3b 0a 20 20 20 20 74 68 69 73 round);. this
0820: 2e 65 6c 65 6d 65 6e 74 2e 61 70 70 65 6e 64 43 .element.appendC
0830: 68 69 6c 64 28 74 68 69 73 2e 68 61 6e 64 6c 65 hild(this.handle
0840: 29 3b 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d );. this.elem
0850: 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 ent.appendChild(
0860: 74 68 69 73 2e 68 61 6e 64 6c 65 32 29 3b 0a 20 this.handle2);.
0870: 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e this.element.
0880: 61 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 appendChild(this
0890: 2e 68 61 6e 64 6c 65 46 69 6c 6c 29 3b 0a 20 20 .handleFill);.
08a0: 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 this.element.a
08b0: 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e ppendChild(this.
08c0: 68 61 6e 64 6c 65 32 46 69 6c 6c 29 3b 0a 20 20 handle2Fill);.
08d0: 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 this.element.a
08e0: 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e ppendChild(this.
08f0: 68 61 6e 64 6c 65 4c 69 6e 65 29 3b 0a 20 20 20 handleLine);.
0900: 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 61 70 this.element.ap
0910: 70 65 6e 64 43 68 69 6c 64 28 74 68 69 73 2e 73 pendChild(this.s
0920: 63 72 65 77 29 3b 0a 0a 20 20 7d 0a 0a 0a 20 20 crew);.. }...
0930: 73 69 7a 65 49 6e 74 65 72 66 61 63 65 28 29 20 sizeInterface()
0940: 7b 0a 0a 20 20 20 20 74 68 69 73 2e 70 6f 73 69 {.. this.posi
0950: 74 69 6f 6e 2e 72 65 73 69 7a 65 28 5b 30 2c 74 tion.resize([0,t
0960: 68 69 73 2e 77 69 64 74 68 5d 2c 5b 74 68 69 73 his.width],[this
0970: 2e 68 65 69 67 68 74 2c 30 5d 29 3b 0a 0a 20 20 .height,0]);..
0980: 20 20 6c 65 74 20 63 65 6e 74 65 72 20 3d 20 7b let center = {
0990: 0a 20 20 20 20 20 20 78 3a 20 74 68 69 73 2e 77 . x: this.w
09a0: 69 64 74 68 2f 32 2c 0a 20 20 20 20 20 20 79 3a idth/2,. y:
09b0: 20 74 68 69 73 2e 68 65 69 67 68 74 2f 32 0a 20 this.height/2.
09c0: 20 20 20 7d 3b 0a 0a 20 20 20 20 6c 65 74 20 64 };.. let d
09d0: 69 61 6d 65 74 65 72 20 3d 20 4d 61 74 68 2e 6d iameter = Math.m
09e0: 69 6e 28 74 68 69 73 2e 77 69 64 74 68 2c 74 68 in(this.width,th
09f0: 69 73 2e 68 65 69 67 68 74 29 3b 0a 0a 20 20 20 is.height);..
0a00: 20 74 68 69 73 2e 62 61 63 6b 67 72 6f 75 6e 64 this.background
0a10: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 63 .setAttribute('c
0a20: 78 27 2c 20 63 65 6e 74 65 72 2e 78 29 3b 0a 20 x', center.x);.
0a30: 20 20 20 74 68 69 73 2e 62 61 63 6b 67 72 6f 75 this.backgrou
0a40: 6e 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 nd.setAttribute(
0a50: 27 63 79 27 2c 20 63 65 6e 74 65 72 2e 79 29 3b 'cy', center.y);
0a60: 0a 20 20 20 20 74 68 69 73 2e 62 61 63 6b 67 72 . this.backgr
0a70: 6f 75 6e 64 2e 73 65 74 41 74 74 72 69 62 75 74 ound.setAttribut
0a80: 65 28 27 72 27 2c 20 64 69 61 6d 65 74 65 72 2f e('r', diameter/
0a90: 32 2d 64 69 61 6d 65 74 65 72 2f 34 30 29 3b 0a 2-diameter/40);.
0aa0: 0a 20 20 20 20 74 68 69 73 2e 73 63 72 65 77 2e . this.screw.
0ab0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 63 78 setAttribute('cx
0ac0: 27 2c 20 63 65 6e 74 65 72 2e 78 29 3b 0a 20 20 ', center.x);.
0ad0: 20 20 74 68 69 73 2e 73 63 72 65 77 2e 73 65 74 this.screw.set
0ae0: 41 74 74 72 69 62 75 74 65 28 27 63 79 27 2c 20 Attribute('cy',
0af0: 63 65 6e 74 65 72 2e 79 29 3b 0a 20 20 20 20 74 center.y);. t
0b00: 68 69 73 2e 73 63 72 65 77 2e 73 65 74 41 74 74 his.screw.setAtt
0b10: 72 69 62 75 74 65 28 27 72 27 2c 20 64 69 61 6d ribute('r', diam
0b20: 65 74 65 72 2f 31 32 29 3b 0a 0a 20 20 20 20 6c eter/12);.. l
0b30: 65 74 20 76 61 6c 75 65 20 3d 20 74 68 69 73 2e et value = this.
0b40: 76 61 6c 75 65 3b 0a 0a 20 20 20 20 6c 65 74 20 value;.. let
0b50: 68 61 6e 64 6c 65 50 6f 69 6e 74 73 20 3d 20 7b handlePoints = {
0b60: 0a 20 20 20 20 20 20 73 74 61 72 74 3a 20 4d 61 . start: Ma
0b70: 74 68 2e 50 49 2a 31 2e 35 2c 0a 20 20 20 20 20 th.PI*1.5,.
0b80: 20 65 6e 64 3a 20 6d 61 74 68 2e 63 6c 69 70 28 end: math.clip(
0b90: 20 6d 61 74 68 2e 73 63 61 6c 65 28 76 61 6c 75 math.scale(valu
0ba0: 65 2c 30 2c 30 2e 35 2c 4d 61 74 68 2e 50 49 2a e,0,0.5,Math.PI*
0bb0: 31 2e 35 2c 4d 61 74 68 2e 50 49 2a 30 2e 35 29 1.5,Math.PI*0.5)
0bc0: 20 2c 20 4d 61 74 68 2e 50 49 2a 30 2e 35 2c 20 , Math.PI*0.5,
0bd0: 4d 61 74 68 2e 50 49 2a 31 2e 35 20 29 0a 20 20 Math.PI*1.5 ).
0be0: 20 20 7d 3b 0a 20 20 20 20 6c 65 74 20 68 61 6e };. let han
0bf0: 64 6c 65 32 50 6f 69 6e 74 73 20 3d 20 7b 0a 20 dle2Points = {.
0c00: 20 20 20 20 20 73 74 61 72 74 3a 20 4d 61 74 68 start: Math
0c10: 2e 50 49 2a 32 2e 35 2c 0a 20 20 20 20 20 20 65 .PI*2.5,. e
0c20: 6e 64 3a 20 6d 61 74 68 2e 63 6c 69 70 28 20 6d nd: math.clip( m
0c30: 61 74 68 2e 73 63 61 6c 65 28 76 61 6c 75 65 2c ath.scale(value,
0c40: 30 2e 35 2c 31 2c 4d 61 74 68 2e 50 49 2a 32 2e 0.5,1,Math.PI*2.
0c50: 35 2c 4d 61 74 68 2e 50 49 2a 31 2e 35 29 20 2c 5,Math.PI*1.5) ,
0c60: 20 4d 61 74 68 2e 50 49 2a 31 2e 35 2c 20 4d 61 Math.PI*1.5, Ma
0c70: 74 68 2e 50 49 2a 32 2e 35 20 29 0a 20 20 20 20 th.PI*2.5 ).
0c80: 7d 3b 0a 0a 20 20 20 20 6c 65 74 20 68 61 6e 64 };.. let hand
0c90: 6c 65 50 61 74 68 20 3d 20 73 76 67 2e 61 72 63 lePath = svg.arc
0ca0: 28 63 65 6e 74 65 72 2e 78 2c 20 63 65 6e 74 65 (center.x, cente
0cb0: 72 2e 79 2c 20 64 69 61 6d 65 74 65 72 2f 32 2d r.y, diameter/2-
0cc0: 64 69 61 6d 65 74 65 72 2f 34 30 2c 20 68 61 6e diameter/40, han
0cd0: 64 6c 65 50 6f 69 6e 74 73 2e 73 74 61 72 74 2c dlePoints.start,
0ce0: 20 68 61 6e 64 6c 65 50 6f 69 6e 74 73 2e 65 6e handlePoints.en
0cf0: 64 29 3b 0a 20 20 20 20 6c 65 74 20 68 61 6e 64 d);. let hand
0d00: 6c 65 32 50 61 74 68 20 3d 20 73 76 67 2e 61 72 le2Path = svg.ar
0d10: 63 28 63 65 6e 74 65 72 2e 78 2c 20 63 65 6e 74 c(center.x, cent
0d20: 65 72 2e 79 2c 20 64 69 61 6d 65 74 65 72 2f 32 er.y, diameter/2
0d30: 2d 64 69 61 6d 65 74 65 72 2f 34 30 2c 20 68 61 -diameter/40, ha
0d40: 6e 64 6c 65 32 50 6f 69 6e 74 73 2e 73 74 61 72 ndle2Points.star
0d50: 74 2c 20 68 61 6e 64 6c 65 32 50 6f 69 6e 74 73 t, handle2Points
0d60: 2e 65 6e 64 29 3b 0a 0a 20 20 20 20 74 68 69 73 .end);.. this
0d70: 2e 68 61 6e 64 6c 65 2e 73 65 74 41 74 74 72 69 .handle.setAttri
0d80: 62 75 74 65 28 27 64 27 2c 68 61 6e 64 6c 65 50 bute('d',handleP
0d90: 61 74 68 29 3b 0a 20 20 20 20 74 68 69 73 2e 68 ath);. this.h
0da0: 61 6e 64 6c 65 2e 73 65 74 41 74 74 72 69 62 75 andle.setAttribu
0db0: 74 65 28 27 73 74 72 6f 6b 65 2d 77 69 64 74 68 te('stroke-width
0dc0: 27 2c 20 64 69 61 6d 65 74 65 72 2f 32 30 29 3b ', diameter/20);
0dd0: 0a 20 20 20 20 74 68 69 73 2e 68 61 6e 64 6c 65 . this.handle
0de0: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 66 .setAttribute('f
0df0: 69 6c 6c 27 2c 20 27 6e 6f 6e 65 27 29 3b 0a 0a ill', 'none');..
0e00: 20 20 20 20 74 68 69 73 2e 68 61 6e 64 6c 65 32 this.handle2
0e10: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 64 .setAttribute('d
0e20: 27 2c 68 61 6e 64 6c 65 32 50 61 74 68 29 3b 0a ',handle2Path);.
0e30: 20 20 20 20 74 68 69 73 2e 68 61 6e 64 6c 65 32 this.handle2
0e40: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 .setAttribute('s
0e50: 74 72 6f 6b 65 2d 77 69 64 74 68 27 2c 20 64 69 troke-width', di
0e60: 61 6d 65 74 65 72 2f 32 30 29 3b 0a 20 20 20 20 ameter/20);.
0e70: 74 68 69 73 2e 68 61 6e 64 6c 65 32 2e 73 65 74 this.handle2.set
0e80: 41 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 Attribute('fill'
0e90: 2c 20 27 6e 6f 6e 65 27 29 3b 0a 0a 20 20 20 20 , 'none');..
0ea0: 68 61 6e 64 6c 65 50 61 74 68 20 2b 3d 20 27 20 handlePath += '
0eb0: 4c 20 27 2b 63 65 6e 74 65 72 2e 78 2b 27 20 27 L '+center.x+' '
0ec0: 2b 63 65 6e 74 65 72 2e 79 3b 0a 0a 20 20 20 20 +center.y;..
0ed0: 74 68 69 73 2e 68 61 6e 64 6c 65 46 69 6c 6c 2e this.handleFill.
0ee0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 64 27 setAttribute('d'
0ef0: 2c 68 61 6e 64 6c 65 50 61 74 68 29 3b 0a 20 20 ,handlePath);.
0f00: 20 20 74 68 69 73 2e 68 61 6e 64 6c 65 46 69 6c this.handleFil
0f10: 6c 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 l.setAttribute('
0f20: 66 69 6c 6c 2d 6f 70 61 63 69 74 79 27 2c 20 27 fill-opacity', '
0f30: 30 2e 33 27 29 3b 0a 0a 20 20 20 20 68 61 6e 64 0.3');.. hand
0f40: 6c 65 32 50 61 74 68 20 2b 3d 20 27 20 4c 20 27 le2Path += ' L '
0f50: 2b 63 65 6e 74 65 72 2e 78 2b 27 20 27 2b 63 65 +center.x+' '+ce
0f60: 6e 74 65 72 2e 79 3b 0a 0a 20 20 20 20 74 68 69 nter.y;.. thi
0f70: 73 2e 68 61 6e 64 6c 65 32 46 69 6c 6c 2e 73 65 s.handle2Fill.se
0f80: 74 41 74 74 72 69 62 75 74 65 28 27 64 27 2c 68 tAttribute('d',h
0f90: 61 6e 64 6c 65 32 50 61 74 68 29 3b 0a 20 20 20 andle2Path);.
0fa0: 20 74 68 69 73 2e 68 61 6e 64 6c 65 32 46 69 6c this.handle2Fil
0fb0: 6c 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 l.setAttribute('
0fc0: 66 69 6c 6c 2d 6f 70 61 63 69 74 79 27 2c 20 27 fill-opacity', '
0fd0: 30 2e 33 27 29 3b 0a 0a 20 20 20 20 6c 65 74 20 0.3');.. let
0fe0: 61 72 63 45 6e 64 69 6e 67 41 3b 0a 20 20 20 20 arcEndingA;.
0ff0: 69 66 20 28 76 61 6c 75 65 20 3c 20 30 2e 35 29 if (value < 0.5)
1000: 20 7b 0a 20 20 20 20 20 20 61 72 63 45 6e 64 69 {. arcEndi
1010: 6e 67 41 20 3d 20 68 61 6e 64 6c 65 50 6f 69 6e ngA = handlePoin
1020: 74 73 2e 65 6e 64 3b 0a 20 20 20 20 7d 20 65 6c ts.end;. } el
1030: 73 65 20 7b 0a 20 20 20 20 20 20 61 72 63 45 6e se {. arcEn
1040: 64 69 6e 67 41 20 3d 20 68 61 6e 64 6c 65 32 50 dingA = handle2P
1050: 6f 69 6e 74 73 2e 65 6e 64 3b 0a 20 20 20 20 7d oints.end;. }
1060: 0a 0a 20 20 20 20 6c 65 74 20 61 72 63 45 6e 64 .. let arcEnd
1070: 69 6e 67 58 20 3d 20 63 65 6e 74 65 72 2e 78 20 ingX = center.x
1080: 2b 20 4d 61 74 68 2e 63 6f 73 28 61 72 63 45 6e + Math.cos(arcEn
1090: 64 69 6e 67 41 29 20 2a 20 28 64 69 61 6d 65 74 dingA) * (diamet
10a0: 65 72 2f 32 29 3b 0a 20 20 20 20 6c 65 74 20 61 er/2);. let a
10b0: 72 63 45 6e 64 69 6e 67 59 20 3d 20 63 65 6e 74 rcEndingY = cent
10c0: 65 72 2e 79 20 2b 20 4d 61 74 68 2e 73 69 6e 28 er.y + Math.sin(
10d0: 61 72 63 45 6e 64 69 6e 67 41 29 20 2a 20 28 64 arcEndingA) * (d
10e0: 69 61 6d 65 74 65 72 2f 32 29 20 2a 20 2d 31 3b iameter/2) * -1;
10f0: 0a 0a 20 20 20 20 74 68 69 73 2e 68 61 6e 64 6c .. this.handl
1100: 65 4c 69 6e 65 2e 73 65 74 41 74 74 72 69 62 75 eLine.setAttribu
1110: 74 65 28 27 64 27 2c 27 4d 20 27 2b 63 65 6e 74 te('d','M '+cent
1120: 65 72 2e 78 2b 27 20 27 2b 63 65 6e 74 65 72 2e er.x+' '+center.
1130: 79 2b 27 20 4c 20 27 2b 61 72 63 45 6e 64 69 6e y+' L '+arcEndin
1140: 67 58 2b 27 20 27 2b 61 72 63 45 6e 64 69 6e 67 gX+' '+arcEnding
1150: 59 29 3b 0a 20 20 20 20 74 68 69 73 2e 68 61 6e Y);. this.han
1160: 64 6c 65 4c 69 6e 65 2e 73 65 74 41 74 74 72 69 dleLine.setAttri
1170: 62 75 74 65 28 27 73 74 72 6f 6b 65 2d 77 69 64 bute('stroke-wid
1180: 74 68 27 2c 20 64 69 61 6d 65 74 65 72 2f 32 30 th', diameter/20
1190: 29 3b 0a 0a 20 20 7d 0a 0a 20 20 63 6f 6c 6f 72 );.. }.. color
11a0: 49 6e 74 65 72 66 61 63 65 28 29 20 7b 0a 20 20 Interface() {.
11b0: 20 20 74 68 69 73 2e 62 61 63 6b 67 72 6f 75 6e this.backgroun
11c0: 64 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 d.setAttribute('
11d0: 66 69 6c 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 6f fill', this.colo
11e0: 72 73 2e 66 69 6c 6c 29 3b 0a 20 20 20 20 74 68 rs.fill);. th
11f0: 69 73 2e 73 63 72 65 77 2e 73 65 74 41 74 74 72 is.screw.setAttr
1200: 69 62 75 74 65 28 27 66 69 6c 6c 27 2c 20 74 68 ibute('fill', th
1210: 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 is.colors.accent
1220: 29 3b 0a 20 20 20 20 74 68 69 73 2e 68 61 6e 64 );. this.hand
1230: 6c 65 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 le.setAttribute(
1240: 27 73 74 72 6f 6b 65 27 2c 20 74 68 69 73 2e 63 'stroke', this.c
1250: 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 olors.accent);.
1260: 20 20 20 74 68 69 73 2e 68 61 6e 64 6c 65 32 2e this.handle2.
1270: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 74 setAttribute('st
1280: 72 6f 6b 65 27 2c 20 74 68 69 73 2e 63 6f 6c 6f roke', this.colo
1290: 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 20 rs.accent);.
12a0: 74 68 69 73 2e 68 61 6e 64 6c 65 46 69 6c 6c 2e this.handleFill.
12b0: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69 setAttribute('fi
12c0: 6c 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 6f 72 73 ll', this.colors
12d0: 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 20 74 68 .accent);. th
12e0: 69 73 2e 68 61 6e 64 6c 65 32 46 69 6c 6c 2e 73 is.handle2Fill.s
12f0: 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69 6c etAttribute('fil
1300: 6c 27 2c 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e l', this.colors.
1310: 61 63 63 65 6e 74 29 3b 0a 20 20 20 20 74 68 69 accent);. thi
1320: 73 2e 68 61 6e 64 6c 65 4c 69 6e 65 2e 73 65 74 s.handleLine.set
1330: 41 74 74 72 69 62 75 74 65 28 27 73 74 72 6f 6b Attribute('strok
1340: 65 27 2c 20 74 68 69 73 2e 63 6f 6c 6f 72 73 2e e', this.colors.
1350: 61 63 63 65 6e 74 29 3b 0a 0a 20 20 7d 0a 0a 20 accent);.. }..
1360: 20 72 65 6e 64 65 72 28 29 20 7b 0a 20 20 20 20 render() {.
1370: 6c 65 74 20 76 61 6c 75 65 20 3d 20 74 68 69 73 let value = this
1380: 2e 5f 76 61 6c 75 65 2e 6e 6f 72 6d 61 6c 69 7a ._value.normaliz
1390: 65 64 3b 0a 0a 20 20 20 20 6c 65 74 20 63 65 6e ed;.. let cen
13a0: 74 65 72 20 3d 20 7b 0a 20 20 20 20 20 20 78 3a ter = {. x:
13b0: 20 74 68 69 73 2e 77 69 64 74 68 2f 32 2c 0a 20 this.width/2,.
13c0: 20 20 20 20 20 79 3a 20 74 68 69 73 2e 68 65 69 y: this.hei
13d0: 67 68 74 2f 32 0a 20 20 20 20 7d 3b 0a 0a 20 20 ght/2. };..
13e0: 20 20 6c 65 74 20 64 69 61 6d 65 74 65 72 20 3d let diameter =
13f0: 20 4d 61 74 68 2e 6d 69 6e 28 74 68 69 73 2e 77 Math.min(this.w
1400: 69 64 74 68 2c 74 68 69 73 2e 68 65 69 67 68 74 idth,this.height
1410: 29 3b 0a 0a 20 20 20 20 6c 65 74 20 68 61 6e 64 );.. let hand
1420: 6c 65 50 6f 69 6e 74 73 20 3d 20 7b 0a 20 20 20 lePoints = {.
1430: 20 20 20 73 74 61 72 74 3a 20 4d 61 74 68 2e 50 start: Math.P
1440: 49 2a 31 2e 35 2c 0a 20 20 20 20 20 20 65 6e 64 I*1.5,. end
1450: 3a 20 6d 61 74 68 2e 63 6c 69 70 28 20 6d 61 74 : math.clip( mat
1460: 68 2e 73 63 61 6c 65 28 76 61 6c 75 65 2c 30 2c h.scale(value,0,
1470: 30 2e 35 2c 4d 61 74 68 2e 50 49 2a 31 2e 35 2c 0.5,Math.PI*1.5,
1480: 4d 61 74 68 2e 50 49 2a 30 2e 35 29 20 2c 20 4d Math.PI*0.5) , M
1490: 61 74 68 2e 50 49 2a 30 2e 35 2c 20 4d 61 74 68 ath.PI*0.5, Math
14a0: 2e 50 49 2a 31 2e 35 20 29 0a 20 20 20 20 7d 3b .PI*1.5 ). };
14b0: 0a 20 20 20 20 6c 65 74 20 68 61 6e 64 6c 65 32 . let handle2
14c0: 50 6f 69 6e 74 73 20 3d 20 7b 0a 20 20 20 20 20 Points = {.
14d0: 20 73 74 61 72 74 3a 20 4d 61 74 68 2e 50 49 20 start: Math.PI
14e0: 2a 32 2e 35 2c 0a 20 20 20 20 20 20 65 6e 64 3a *2.5,. end:
14f0: 20 6d 61 74 68 2e 63 6c 69 70 28 20 6d 61 74 68 math.clip( math
1500: 2e 73 63 61 6c 65 28 76 61 6c 75 65 2c 30 2e 35 .scale(value,0.5
1510: 2c 31 2c 4d 61 74 68 2e 50 49 2a 32 2e 35 2c 4d ,1,Math.PI*2.5,M
1520: 61 74 68 2e 50 49 2a 31 2e 35 29 20 2c 20 4d 61 ath.PI*1.5) , Ma
1530: 74 68 2e 50 49 2a 31 2e 35 2c 20 4d 61 74 68 2e th.PI*1.5, Math.
1540: 50 49 2a 32 2e 35 20 29 0a 20 20 20 20 7d 3b 0a PI*2.5 ). };.
1550: 0a 20 20 20 20 6c 65 74 20 68 61 6e 64 6c 65 50 . let handleP
1560: 61 74 68 20 3d 20 73 76 67 2e 61 72 63 28 63 65 ath = svg.arc(ce
1570: 6e 74 65 72 2e 78 2c 20 63 65 6e 74 65 72 2e 79 nter.x, center.y
1580: 2c 20 64 69 61 6d 65 74 65 72 2f 32 2d 64 69 61 , diameter/2-dia
1590: 6d 65 74 65 72 2f 34 30 2c 20 68 61 6e 64 6c 65 meter/40, handle
15a0: 50 6f 69 6e 74 73 2e 73 74 61 72 74 2c 20 68 61 Points.start, ha
15b0: 6e 64 6c 65 50 6f 69 6e 74 73 2e 65 6e 64 29 3b ndlePoints.end);
15c0: 0a 20 20 20 20 6c 65 74 20 68 61 6e 64 6c 65 32 . let handle2
15d0: 50 61 74 68 20 3d 20 73 76 67 2e 61 72 63 28 63 Path = svg.arc(c
15e0: 65 6e 74 65 72 2e 78 2c 20 63 65 6e 74 65 72 2e enter.x, center.
15f0: 79 2c 20 64 69 61 6d 65 74 65 72 2f 32 2d 64 69 y, diameter/2-di
1600: 61 6d 65 74 65 72 2f 34 30 2c 20 68 61 6e 64 6c ameter/40, handl
1610: 65 32 50 6f 69 6e 74 73 2e 73 74 61 72 74 2c 20 e2Points.start,
1620: 68 61 6e 64 6c 65 32 50 6f 69 6e 74 73 2e 65 6e handle2Points.en
1630: 64 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e 68 61 d);.. this.ha
1640: 6e 64 6c 65 2e 73 65 74 41 74 74 72 69 62 75 74 ndle.setAttribut
1650: 65 28 27 64 27 2c 68 61 6e 64 6c 65 50 61 74 68 e('d',handlePath
1660: 29 3b 0a 20 20 20 20 74 68 69 73 2e 68 61 6e 64 );. this.hand
1670: 6c 65 32 2e 73 65 74 41 74 74 72 69 62 75 74 65 le2.setAttribute
1680: 28 27 64 27 2c 68 61 6e 64 6c 65 32 50 61 74 68 ('d',handle2Path
1690: 29 3b 0a 0a 0a 20 20 20 20 68 61 6e 64 6c 65 50 );... handleP
16a0: 61 74 68 20 2b 3d 20 27 20 4c 20 27 2b 63 65 6e ath += ' L '+cen
16b0: 74 65 72 2e 78 2b 27 20 27 2b 63 65 6e 74 65 72 ter.x+' '+center
16c0: 2e 79 3b 0a 0a 20 20 20 20 74 68 69 73 2e 68 61 .y;.. this.ha
16d0: 6e 64 6c 65 46 69 6c 6c 2e 73 65 74 41 74 74 72 ndleFill.setAttr
16e0: 69 62 75 74 65 28 27 64 27 2c 68 61 6e 64 6c 65 ibute('d',handle
16f0: 50 61 74 68 29 3b 0a 0a 20 20 20 20 68 61 6e 64 Path);.. hand
1700: 6c 65 32 50 61 74 68 20 2b 3d 20 27 20 4c 20 27 le2Path += ' L '
1710: 2b 63 65 6e 74 65 72 2e 78 2b 27 20 27 2b 63 65 +center.x+' '+ce
1720: 6e 74 65 72 2e 79 3b 0a 0a 20 20 20 20 74 68 69 nter.y;.. thi
1730: 73 2e 68 61 6e 64 6c 65 32 46 69 6c 6c 2e 73 65 s.handle2Fill.se
1740: 74 41 74 74 72 69 62 75 74 65 28 27 64 27 2c 68 tAttribute('d',h
1750: 61 6e 64 6c 65 32 50 61 74 68 29 3b 0a 0a 20 20 andle2Path);..
1760: 20 20 6c 65 74 20 61 72 63 45 6e 64 69 6e 67 41 let arcEndingA
1770: 3b 0a 20 20 20 20 69 66 20 28 76 61 6c 75 65 20 ;. if (value
1780: 3c 3d 20 30 2e 35 29 20 7b 0a 20 20 20 20 20 20 <= 0.5) {.
1790: 61 72 63 45 6e 64 69 6e 67 41 20 3d 20 68 61 6e arcEndingA = han
17a0: 64 6c 65 50 6f 69 6e 74 73 2e 65 6e 64 3b 0a 20 dlePoints.end;.
17b0: 20 20 20 7d 20 65 6c 73 65 20 7b 0a 20 20 20 20 } else {.
17c0: 20 20 61 72 63 45 6e 64 69 6e 67 41 20 3d 20 68 arcEndingA = h
17d0: 61 6e 64 6c 65 32 50 6f 69 6e 74 73 2e 65 6e 64 andle2Points.end
17e0: 3b 0a 20 20 20 20 7d 0a 0a 20 20 20 20 6c 65 74 ;. }.. let
17f0: 20 61 72 63 45 6e 64 69 6e 67 58 20 3d 20 63 65 arcEndingX = ce
1800: 6e 74 65 72 2e 78 20 2b 20 4d 61 74 68 2e 63 6f nter.x + Math.co
1810: 73 28 61 72 63 45 6e 64 69 6e 67 41 29 20 2a 20 s(arcEndingA) *
1820: 28 64 69 61 6d 65 74 65 72 2f 32 29 3b 0a 20 20 (diameter/2);.
1830: 20 20 6c 65 74 20 61 72 63 45 6e 64 69 6e 67 59 let arcEndingY
1840: 20 3d 20 63 65 6e 74 65 72 2e 79 20 2b 20 4d 61 = center.y + Ma
1850: 74 68 2e 73 69 6e 28 61 72 63 45 6e 64 69 6e 67 th.sin(arcEnding
1860: 41 29 20 2a 20 28 64 69 61 6d 65 74 65 72 2f 32 A) * (diameter/2
1870: 29 20 2a 20 2d 31 3b 0a 0a 20 20 20 20 74 68 69 ) * -1;.. thi
1880: 73 2e 68 61 6e 64 6c 65 4c 69 6e 65 2e 73 65 74 s.handleLine.set
1890: 41 74 74 72 69 62 75 74 65 28 27 64 27 2c 27 4d Attribute('d','M
18a0: 20 27 2b 63 65 6e 74 65 72 2e 78 2b 27 20 27 2b '+center.x+' '+
18b0: 63 65 6e 74 65 72 2e 79 2b 27 20 4c 20 27 2b 61 center.y+' L '+a
18c0: 72 63 45 6e 64 69 6e 67 58 2b 27 20 27 2b 61 72 rcEndingX+' '+ar
18d0: 63 45 6e 64 69 6e 67 59 29 3b 0a 0a 20 20 7d 0a cEndingY);.. }.
18e0: 0a 0a 20 20 63 6c 69 63 6b 28 29 20 7b 0a 20 20 .. click() {.
18f0: 20 20 69 66 20 28 74 68 69 73 2e 6d 6f 64 65 3d if (this.mode=
1900: 3d 3d 27 72 65 6c 61 74 69 76 65 27 29 20 7b 0a =='relative') {.
1910: 20 20 20 20 20 20 74 68 69 73 2e 70 72 65 76 69 this.previ
1920: 6f 75 73 41 6e 67 6c 65 20 3d 20 66 61 6c 73 65 ousAngle = false
1930: 3b 0a 20 20 20 20 7d 0a 20 20 20 20 74 68 69 73 ;. }. this
1940: 2e 70 6f 73 69 74 69 6f 6e 2e 61 6e 63 68 6f 72 .position.anchor
1950: 20 3d 20 74 68 69 73 2e 6d 6f 75 73 65 3b 0a 20 = this.mouse;.
1960: 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e this.position
1970: 2e 76 61 6c 75 65 20 3d 20 74 68 69 73 2e 5f 76 .value = this._v
1980: 61 6c 75 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 3b alue.normalized;
1990: 0a 20 20 20 20 74 68 69 73 2e 6d 6f 76 65 28 29 . this.move()
19a0: 3b 0a 20 20 20 7d 0a 0a 20 20 6d 6f 76 65 28 29 ;. }.. move()
19b0: 20 7b 0a 20 20 20 20 69 66 20 28 74 68 69 73 2e {. if (this.
19c0: 63 6c 69 63 6b 65 64 29 20 7b 0a 0a 20 20 20 20 clicked) {..
19d0: 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e this.position.
19e0: 75 70 64 61 74 65 28 74 68 69 73 2e 6d 6f 75 73 update(this.mous
19f0: 65 29 3b 0a 0a 20 20 20 20 20 20 6c 65 74 20 61 e);.. let a
1a00: 6e 67 6c 65 20 3d 20 74 68 69 73 2e 70 6f 73 69 ngle = this.posi
1a10: 74 69 6f 6e 2e 76 61 6c 75 65 2a 4d 61 74 68 2e tion.value*Math.
1a20: 50 49 2a 32 3b 0a 0a 20 20 20 20 20 20 69 66 20 PI*2;.. if
1a30: 28 61 6e 67 6c 65 20 3c 20 30 20 29 20 7b 20 61 (angle < 0 ) { a
1a40: 6e 67 6c 65 20 2b 3d 20 28 4d 61 74 68 2e 50 49 ngle += (Math.PI
1a50: 2a 32 29 3b 20 7d 0a 0a 20 20 20 20 20 20 69 66 *2); }.. if
1a60: 20 28 74 68 69 73 2e 6d 6f 64 65 20 3d 3d 3d 20 (this.mode ===
1a70: 27 72 65 6c 61 74 69 76 65 27 29 20 7b 0a 20 20 'relative') {.
1a80: 20 20 20 20 20 20 69 66 20 28 74 68 69 73 2e 70 if (this.p
1a90: 72 65 76 69 6f 75 73 41 6e 67 6c 65 20 21 3d 3d reviousAngle !==
1aa0: 20 66 61 6c 73 65 20 26 26 20 4d 61 74 68 2e 61 false && Math.a
1ab0: 62 73 28 74 68 69 73 2e 70 72 65 76 69 6f 75 73 bs(this.previous
1ac0: 41 6e 67 6c 65 20 2d 20 61 6e 67 6c 65 29 20 3e Angle - angle) >
1ad0: 20 32 29 20 7b 0a 20 20 20 20 20 20 20 20 20 20 2) {.
1ae0: 69 66 20 28 74 68 69 73 2e 70 72 65 76 69 6f 75 if (this.previou
1af0: 73 41 6e 67 6c 65 20 3e 20 33 29 20 7b 0a 20 20 sAngle > 3) {.
1b00: 20 20 20 20 20 20 20 20 20 20 61 6e 67 6c 65 20 angle
1b10: 3d 20 4d 61 74 68 2e 50 49 2a 32 3b 0a 20 20 20 = Math.PI*2;.
1b20: 20 20 20 20 20 20 20 7d 20 65 6c 73 65 20 7b 0a } else {.
1b30: 20 20 20 20 20 20 20 20 20 20 20 20 61 6e 67 6c angl
1b40: 65 20 3d 20 30 3b 0a 20 20 20 20 20 20 20 20 20 e = 0;.
1b50: 20 7d 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 20 }. }.
1b60: 20 20 20 7d 20 2f 2a 20 65 6c 73 65 20 7b 0a 20 } /* else {.
1b70: 20 20 20 20 20 20 20 69 66 20 28 74 68 69 73 2e if (this.
1b80: 70 72 65 76 69 6f 75 73 41 6e 67 6c 65 20 21 3d previousAngle !=
1b90: 3d 20 66 61 6c 73 65 20 26 26 20 4d 61 74 68 2e = false && Math.
1ba0: 61 62 73 28 74 68 69 73 2e 70 72 65 76 69 6f 75 abs(this.previou
1bb0: 73 41 6e 67 6c 65 20 2d 20 61 6e 67 6c 65 29 20 sAngle - angle)
1bc0: 3e 20 32 29 20 7b 0a 20 20 20 20 20 20 20 20 20 > 2) {.
1bd0: 20 69 66 20 28 74 68 69 73 2e 70 72 65 76 69 6f if (this.previo
1be0: 75 73 41 6e 67 6c 65 20 3e 20 33 29 20 7b 0a 20 usAngle > 3) {.
1bf0: 20 20 20 20 20 20 20 20 20 20 20 61 6e 67 6c 65 angle
1c00: 20 3d 20 4d 61 74 68 2e 50 49 2a 32 3b 0a 20 20 = Math.PI*2;.
1c10: 20 20 20 20 20 20 20 20 7d 20 65 6c 73 65 20 7b } else {
1c20: 0a 20 20 20 20 20 20 20 20 20 20 20 20 61 6e 67 . ang
1c30: 6c 65 20 3d 20 30 3b 0a 20 20 20 20 20 20 20 20 le = 0;.
1c40: 20 20 7d 0a 20 20 20 20 20 20 20 20 7d 0a 20 20 }. }.
1c50: 20 20 20 20 7d 20 2a 2f 0a 20 20 20 20 20 20 74 } */. t
1c60: 68 69 73 2e 70 72 65 76 69 6f 75 73 41 6e 67 6c his.previousAngl
1c70: 65 20 3d 20 61 6e 67 6c 65 3b 0a 0a 20 20 20 20 e = angle;..
1c80: 20 20 6c 65 74 20 72 65 61 6c 56 61 6c 75 65 20 let realValue
1c90: 3d 20 61 6e 67 6c 65 20 2f 20 28 4d 61 74 68 2e = angle / (Math.
1ca0: 50 49 2a 32 29 3b 0a 0a 20 20 20 20 20 20 74 68 PI*2);.. th
1cb0: 69 73 2e 76 61 6c 75 65 20 3d 20 74 68 69 73 2e is.value = this.
1cc0: 5f 76 61 6c 75 65 2e 75 70 64 61 74 65 4e 6f 72 _value.updateNor
1cd0: 6d 61 6c 28 20 72 65 61 6c 56 61 6c 75 65 20 29 mal( realValue )
1ce0: 3b 0a 0a 20 20 20 20 20 20 69 66 20 28 74 68 69 ;.. if (thi
1cf0: 73 2e 6d 6f 64 65 20 3d 3d 3d 20 27 72 65 6c 61 s.mode === 'rela
1d00: 74 69 76 65 27 29 20 7b 0a 20 20 20 20 20 20 20 tive') {.
1d10: 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 76 this.position.v
1d20: 61 6c 75 65 20 3d 20 72 65 61 6c 56 61 6c 75 65 alue = realValue
1d30: 3b 0a 20 20 20 20 20 20 7d 0a 0a 20 20 20 20 20 ;. }..
1d40: 20 74 68 69 73 2e 65 6d 69 74 28 27 63 68 61 6e this.emit('chan
1d50: 67 65 27 2c 74 68 69 73 2e 5f 76 61 6c 75 65 2e ge',this._value.
1d60: 76 61 6c 75 65 29 3b 0a 0a 20 20 20 20 20 20 74 value);.. t
1d70: 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 0a 20 his.render();..
1d80: 20 20 20 7d 0a 20 20 7d 0a 0a 20 20 72 65 6c 65 }. }.. rele
1d90: 61 73 65 28 29 20 7b 0a 20 20 7d 0a 0a 20 20 2f ase() {. }.. /
1da0: 2a 0a 20 20 44 69 61 6c 27 73 20 76 61 6c 75 65 *. Dial's value
1db0: 2e 20 57 68 65 6e 20 73 65 74 2c 20 69 74 20 77 . When set, it w
1dc0: 69 6c 6c 20 61 75 74 6f 6d 61 74 69 63 61 6c 6c ill automaticall
1dd0: 79 20 62 65 20 61 64 6a 75 73 74 20 74 6f 20 66 y be adjust to f
1de0: 69 74 20 6d 69 6e 2f 6d 61 78 2f 73 74 65 70 20 it min/max/step
1df0: 73 65 74 74 69 6e 67 73 20 6f 66 20 74 68 65 20 settings of the
1e00: 69 6e 74 65 72 66 61 63 65 2e 0a 20 20 40 74 79 interface.. @ty
1e10: 70 65 20 7b 6e 75 6d 62 65 72 7d 0a 20 20 40 65 pe {number}. @e
1e20: 78 61 6d 70 6c 65 20 64 69 61 6c 2e 76 61 6c 75 xample dial.valu
1e30: 65 20 3d 20 31 30 3b 0a 0a 20 20 67 65 74 20 76 e = 10;.. get v
1e40: 61 6c 75 65 28 29 20 7b 0a 20 20 20 20 72 65 74 alue() {. ret
1e50: 75 72 6e 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e urn this._value.
1e60: 76 61 6c 75 65 3b 0a 20 20 7d 0a 0a 20 20 73 65 value;. }.. se
1e70: 74 20 76 61 6c 75 65 28 76 61 6c 75 65 29 20 7b t value(value) {
1e80: 0a 20 20 20 20 74 68 69 73 2e 5f 76 61 6c 75 65 . this._value
1e90: 2e 75 70 64 61 74 65 28 76 61 6c 75 65 29 3b 0a .update(value);.
1ea0: 20 20 20 20 74 68 69 73 2e 65 6d 69 74 28 27 63 this.emit('c
1eb0: 68 61 6e 67 65 27 2c 74 68 69 73 2e 76 61 6c 75 hange',this.valu
1ec0: 65 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65 6e e);. this.ren
1ed0: 64 65 72 28 29 3b 0a 20 20 7d 0a 2a 2f 0a 0a 20 der();. }.*/..
1ee0: 20 20 20 2f 2a 2a 0a 20 20 20 20 44 69 61 6c 27 /**. Dial'
1ef0: 73 20 76 61 6c 75 65 2e 20 57 68 65 6e 20 73 65 s value. When se
1f00: 74 2c 20 69 74 20 77 69 6c 6c 20 61 75 74 6f 6d t, it will autom
1f10: 61 74 69 63 61 6c 6c 79 20 62 65 20 61 64 6a 75 atically be adju
1f20: 73 74 20 74 6f 20 66 69 74 20 6d 69 6e 2f 6d 61 st to fit min/ma
1f30: 78 2f 73 74 65 70 20 73 65 74 74 69 6e 67 73 20 x/step settings
1f40: 6f 66 20 74 68 65 20 69 6e 74 65 72 66 61 63 65 of the interface
1f50: 2e 0a 20 20 20 20 40 74 79 70 65 20 7b 6e 75 6d .. @type {num
1f60: 62 65 72 7d 0a 20 20 20 20 40 65 78 61 6d 70 6c ber}. @exampl
1f70: 65 20 64 69 61 6c 2e 76 61 6c 75 65 20 3d 20 31 e dial.value = 1
1f80: 30 3b 0a 20 20 20 20 2a 2f 0a 20 20 20 20 67 65 0;. */. ge
1f90: 74 20 76 61 6c 75 65 28 29 20 7b 0a 20 20 20 20 t value() {.
1fa0: 20 20 72 65 74 75 72 6e 20 74 68 69 73 2e 5f 76 return this._v
1fb0: 61 6c 75 65 2e 76 61 6c 75 65 3b 0a 20 20 20 20 alue.value;.
1fc0: 7d 0a 20 20 20 20 73 65 74 20 76 61 6c 75 65 28 }. set value(
1fd0: 76 29 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e v) {. this.
1fe0: 5f 76 61 6c 75 65 2e 75 70 64 61 74 65 28 76 29 _value.update(v)
1ff0: 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 6f 73 ;. this.pos
2000: 69 74 69 6f 6e 2e 76 61 6c 75 65 20 3d 20 74 68 ition.value = th
2010: 69 73 2e 5f 76 61 6c 75 65 2e 6e 6f 72 6d 61 6c is._value.normal
2020: 69 7a 65 64 3b 0a 20 20 20 20 20 20 74 68 69 73 ized;. this
2030: 2e 65 6d 69 74 28 27 63 68 61 6e 67 65 27 2c 74 .emit('change',t
2040: 68 69 73 2e 5f 76 61 6c 75 65 2e 76 61 6c 75 65 his._value.value
2050: 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 72 65 );. this.re
2060: 6e 64 65 72 28 29 3b 0a 20 20 20 20 7d 0a 0a 20 nder();. }..
2070: 20 20 20 2f 2a 2a 0a 20 20 20 20 4c 6f 77 65 72 /**. Lower
2080: 20 6c 69 6d 69 74 20 6f 66 20 74 68 65 20 64 69 limit of the di
2090: 61 6c 27 73 20 6f 75 74 70 75 74 20 72 61 6e 67 al's output rang
20a0: 65 0a 20 20 20 20 40 74 79 70 65 20 7b 6e 75 6d e. @type {num
20b0: 62 65 72 7d 0a 20 20 20 20 40 65 78 61 6d 70 6c ber}. @exampl
20c0: 65 20 64 69 61 6c 2e 6d 69 6e 20 3d 20 31 30 30 e dial.min = 100
20d0: 30 3b 0a 20 20 20 20 2a 2f 0a 20 20 20 20 67 65 0;. */. ge
20e0: 74 20 6d 69 6e 28 29 20 7b 0a 20 20 20 20 20 20 t min() {.
20f0: 72 65 74 75 72 6e 20 74 68 69 73 2e 5f 76 61 6c return this._val
2100: 75 65 2e 6d 69 6e 3b 0a 20 20 20 20 7d 0a 20 20 ue.min;. }.
2110: 20 20 73 65 74 20 6d 69 6e 28 76 29 20 7b 0a 20 set min(v) {.
2120: 20 20 20 20 20 74 68 69 73 2e 5f 76 61 6c 75 65 this._value
2130: 2e 6d 69 6e 20 3d 20 76 3b 0a 20 20 20 20 7d 0a .min = v;. }.
2140: 0a 20 20 20 20 2f 2a 2a 0a 20 20 20 20 55 70 70 . /**. Upp
2150: 65 72 20 6c 69 6d 69 74 20 6f 66 20 74 68 65 20 er limit of the
2160: 64 69 61 6c 27 73 20 6f 75 74 70 75 74 20 72 61 dial's output ra
2170: 6e 67 65 0a 20 20 20 20 40 74 79 70 65 20 7b 6e nge. @type {n
2180: 75 6d 62 65 72 7d 0a 20 20 20 20 40 65 78 61 6d umber}. @exam
2190: 70 6c 65 20 64 69 61 6c 2e 6d 61 78 20 3d 20 31 ple dial.max = 1
21a0: 30 30 30 3b 0a 20 20 20 20 2a 2f 0a 20 20 20 20 000;. */.
21b0: 67 65 74 20 6d 61 78 28 29 20 7b 0a 20 20 20 20 get max() {.
21c0: 20 20 72 65 74 75 72 6e 20 74 68 69 73 2e 5f 76 return this._v
21d0: 61 6c 75 65 2e 6d 61 78 3b 0a 20 20 20 20 7d 0a alue.max;. }.
21e0: 20 20 20 20 73 65 74 20 6d 61 78 28 76 29 20 7b set max(v) {
21f0: 0a 20 20 20 20 20 20 74 68 69 73 2e 5f 76 61 6c . this._val
2200: 75 65 2e 6d 61 78 20 3d 20 76 3b 0a 20 20 20 20 ue.max = v;.
2210: 7d 0a 0a 20 20 20 20 2f 2a 2a 0a 20 20 20 20 54 }.. /**. T
2220: 68 65 20 69 6e 63 72 65 6d 65 6e 74 20 74 68 61 he increment tha
2230: 74 20 74 68 65 20 64 69 61 6c 27 73 20 76 61 6c t the dial's val
2240: 75 65 20 63 68 61 6e 67 65 73 20 62 79 2e 0a 20 ue changes by..
2250: 20 20 20 40 74 79 70 65 20 7b 6e 75 6d 62 65 72 @type {number
2260: 7d 0a 20 20 20 20 40 65 78 61 6d 70 6c 65 20 64 }. @example d
2270: 69 61 6c 2e 73 74 65 70 20 3d 20 35 3b 0a 20 20 ial.step = 5;.
2280: 20 20 2a 2f 0a 20 20 20 20 67 65 74 20 73 74 65 */. get ste
2290: 70 28 29 20 7b 0a 20 20 20 20 20 20 72 65 74 75 p() {. retu
22a0: 72 6e 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 73 rn this._value.s
22b0: 74 65 70 3b 0a 20 20 20 20 7d 0a 20 20 20 20 73 tep;. }. s
22c0: 65 74 20 73 74 65 70 28 76 29 20 7b 0a 20 20 20 et step(v) {.
22d0: 20 20 20 74 68 69 73 2e 5f 76 61 6c 75 65 2e 73 this._value.s
22e0: 74 65 70 20 3d 20 76 3b 0a 20 20 20 20 7d 0a 0a tep = v;. }..
22f0: 20 20 20 20 2f 2a 2a 0a 20 20 20 20 41 62 73 6f /**. Abso
2300: 6c 75 74 65 20 6d 6f 64 65 20 28 64 69 61 6c 27 lute mode (dial'
2310: 73 20 76 61 6c 75 65 20 6a 75 6d 70 73 20 74 6f s value jumps to
2320: 20 6d 6f 75 73 65 20 63 6c 69 63 6b 20 70 6f 73 mouse click pos
2330: 69 74 69 6f 6e 29 20 6f 72 20 72 65 6c 61 74 69 ition) or relati
2340: 76 65 20 6d 6f 64 65 20 28 6d 6f 75 73 65 20 64 ve mode (mouse d
2350: 72 61 67 20 63 68 61 6e 67 65 73 20 76 61 6c 75 rag changes valu
2360: 65 20 72 65 6c 61 74 69 76 65 20 74 6f 20 69 74 e relative to it
2370: 73 20 63 75 72 72 65 6e 74 20 70 6f 73 69 74 69 s current positi
2380: 6f 6e 29 2e 20 44 65 66 61 75 6c 74 3a 20 22 72 on). Default: "r
2390: 65 6c 61 74 69 76 65 22 2e 0a 20 20 20 20 40 74 elative".. @t
23a0: 79 70 65 20 7b 73 74 72 69 6e 67 7d 0a 20 20 20 ype {string}.
23b0: 20 40 65 78 61 6d 70 6c 65 20 64 69 61 6c 2e 6d @example dial.m
23c0: 6f 64 65 20 3d 20 22 72 65 6c 61 74 69 76 65 22 ode = "relative"
23d0: 3b 0a 20 20 20 20 2a 2f 0a 20 20 20 20 67 65 74 ;. */. get
23e0: 20 6d 6f 64 65 28 29 20 7b 0a 20 20 20 20 20 20 mode() {.
23f0: 72 65 74 75 72 6e 20 74 68 69 73 2e 70 6f 73 69 return this.posi
2400: 74 69 6f 6e 2e 6d 6f 64 65 3b 0a 20 20 20 20 7d tion.mode;. }
2410: 0a 20 20 20 20 73 65 74 20 6d 6f 64 65 28 76 29 . set mode(v)
2420: 20 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 6f {. this.po
2430: 73 69 74 69 6f 6e 2e 6d 6f 64 65 20 3d 20 76 3b sition.mode = v;
2440: 0a 20 20 20 20 7d 0a 0a 0a 20 20 2f 2a 2a 0a 20 . }... /**.
2450: 20 4e 6f 72 6d 61 6c 69 7a 65 64 20 76 61 6c 75 Normalized valu
2460: 65 20 6f 66 20 74 68 65 20 64 69 61 6c 2e 0a 20 e of the dial..
2470: 20 40 74 79 70 65 20 7b 6e 75 6d 62 65 72 7d 0a @type {number}.
2480: 20 20 40 65 78 61 6d 70 6c 65 20 64 69 61 6c 2e @example dial.
2490: 6e 6f 72 6d 61 6c 69 7a 65 64 20 3d 20 30 2e 35 normalized = 0.5
24a0: 3b 0a 20 20 2a 2f 0a 20 20 67 65 74 20 6e 6f 72 ;. */. get nor
24b0: 6d 61 6c 69 7a 65 64 28 29 20 7b 0a 20 20 20 20 malized() {.
24c0: 72 65 74 75 72 6e 20 74 68 69 73 2e 5f 76 61 6c return this._val
24d0: 75 65 2e 6e 6f 72 6d 61 6c 69 7a 65 64 3b 0a 20 ue.normalized;.
24e0: 20 7d 0a 0a 20 20 73 65 74 20 6e 6f 72 6d 61 6c }.. set normal
24f0: 69 7a 65 64 28 76 29 20 7b 0a 20 20 20 20 74 68 ized(v) {. th
2500: 69 73 2e 5f 76 61 6c 75 65 2e 75 70 64 61 74 65 is._value.update
2510: 4e 6f 72 6d 61 6c 28 76 29 3b 0a 20 20 20 20 74 Normal(v);. t
2520: 68 69 73 2e 65 6d 69 74 28 27 63 68 61 6e 67 65 his.emit('change
2530: 27 2c 74 68 69 73 2e 76 61 6c 75 65 29 3b 0a 20 ',this.value);.
2540: 20 7d 0a 0a 7d 0a }..}.