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 52 61 6e 67 65 4d 6f 64 65 6c 20 .let RangeModel
0040: 3d 20 72 65 71 75 69 72 65 28 27 2e 2e 2f 6d 6f = require('../mo
0050: 64 65 6c 73 2f 72 61 6e 67 65 27 29 3b 0a 6c 65 dels/range');.le
0060: 74 20 6d 61 74 68 20 3d 20 72 65 71 75 69 72 65 t math = require
0070: 28 27 2e 2e 2f 75 74 69 6c 2f 6d 61 74 68 27 29 ('../util/math')
0080: 3b 0a 0a 69 6d 70 6f 72 74 20 49 6e 74 65 72 66 ;..import Interf
0090: 61 63 65 20 66 72 6f 6d 20 27 2e 2e 2f 63 6f 72 ace from '../cor
00a0: 65 2f 69 6e 74 65 72 66 61 63 65 27 3b 0a 69 6d e/interface';.im
00b0: 70 6f 72 74 20 2a 20 61 73 20 49 6e 74 65 72 61 port * as Intera
00c0: 63 74 69 6f 6e 20 66 72 6f 6d 20 27 2e 2e 2f 75 ction from '../u
00d0: 74 69 6c 2f 69 6e 74 65 72 61 63 74 69 6f 6e 27 til/interaction'
00e0: 3b 0a 0a 65 78 70 6f 72 74 20 64 65 66 61 75 6c ;..export defaul
00f0: 74 20 63 6c 61 73 73 20 52 61 6e 67 65 53 6c 69 t class RangeSli
0100: 64 65 72 20 65 78 74 65 6e 64 73 20 49 6e 74 65 der extends Inte
0110: 72 66 61 63 65 20 20 7b 0a 0a 20 20 63 6f 6e 73 rface {.. cons
0120: 74 72 75 63 74 6f 72 28 29 20 7b 0a 0a 20 20 20 tructor() {..
0130: 20 6c 65 74 20 6f 70 74 69 6f 6e 73 20 3d 20 5b let options = [
0140: 5d 3b 0a 0a 20 20 20 20 6c 65 74 20 64 65 66 61 ];.. let defa
0150: 75 6c 74 73 20 3d 20 7b 0a 20 20 20 20 20 20 27 ults = {. '
0160: 73 69 7a 65 27 3a 20 5b 31 30 30 2c 33 30 5d 2c size': [100,30],
0170: 0a 20 20 20 20 20 20 27 6d 6f 64 65 27 3a 20 27 . 'mode': '
0180: 73 65 6c 65 63 74 27 0a 20 20 20 20 7d 3b 0a 0a select'. };..
0190: 20 20 20 20 73 75 70 65 72 28 61 72 67 75 6d 65 super(argume
01a0: 6e 74 73 2c 6f 70 74 69 6f 6e 73 2c 64 65 66 61 nts,options,defa
01b0: 75 6c 74 73 29 3b 0a 0a 20 20 20 20 74 68 69 73 ults);.. this
01c0: 2e 6d 69 6e 20 3d 20 74 68 69 73 2e 73 65 74 74 .min = this.sett
01d0: 69 6e 67 73 2e 6d 69 6e 3b 0a 20 20 20 20 74 68 ings.min;. th
01e0: 69 73 2e 6d 61 78 20 3d 20 74 68 69 73 2e 73 65 is.max = this.se
01f0: 74 74 69 6e 67 73 2e 6d 61 78 3b 0a 20 20 20 20 ttings.max;.
0200: 74 68 69 73 2e 73 74 65 70 20 3d 20 74 68 69 73 this.step = this
0210: 2e 73 65 74 74 69 6e 67 73 2e 73 74 65 70 3b 0a .settings.step;.
0220: 20 20 20 20 74 68 69 73 2e 6d 6f 64 65 20 3d 20 this.mode =
0230: 74 68 69 73 2e 73 65 74 74 69 6e 67 73 2e 6d 6f this.settings.mo
0240: 64 65 3b 0a 0a 20 20 20 20 74 68 69 73 2e 72 61 de;.. this.ra
0250: 6e 67 65 20 3d 20 6e 65 77 20 52 61 6e 67 65 4d nge = new RangeM
0260: 6f 64 65 6c 28 74 68 69 73 2e 6d 69 6e 2c 74 68 odel(this.min,th
0270: 69 73 2e 6d 61 78 2c 74 68 69 73 2e 73 74 65 70 is.max,this.step
0280: 29 3b 0a 0a 20 20 20 20 69 66 20 28 74 68 69 73 );.. if (this
0290: 2e 6d 6f 64 65 3d 3d 3d 27 64 72 61 67 27 29 20 .mode==='drag')
02a0: 7b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 6f 73 {. this.pos
02b0: 69 74 69 6f 6e 20 3d 20 7b 0a 20 20 20 20 20 20 ition = {.
02c0: 20 20 63 65 6e 74 65 72 3a 20 6e 65 77 20 49 6e center: new In
02d0: 74 65 72 61 63 74 69 6f 6e 2e 48 61 6e 64 6c 65 teraction.Handle
02e0: 28 27 72 65 6c 61 74 69 76 65 27 2c 27 68 6f 72 ('relative','hor
02f0: 69 7a 6f 6e 74 61 6c 27 2c 5b 30 2c 74 68 69 73 izontal',[0,this
0300: 2e 77 69 64 74 68 5d 2c 5b 74 68 69 73 2e 68 65 .width],[this.he
0310: 69 67 68 74 2c 30 5d 29 2c 0a 20 20 20 20 20 20 ight,0]),.
0320: 20 20 73 69 7a 65 3a 20 6e 65 77 20 49 6e 74 65 size: new Inte
0330: 72 61 63 74 69 6f 6e 2e 48 61 6e 64 6c 65 28 27 raction.Handle('
0340: 72 65 6c 61 74 69 76 65 27 2c 27 76 65 72 74 69 relative','verti
0350: 63 61 6c 27 2c 5b 30 2c 74 68 69 73 2e 77 69 64 cal',[0,this.wid
0360: 74 68 5d 2c 5b 74 68 69 73 2e 68 65 69 67 68 74 th],[this.height
0370: 2c 30 5d 29 0a 20 20 20 20 20 20 7d 3b 0a 20 20 ,0]). };.
0380: 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f this.positio
0390: 6e 2e 73 69 7a 65 2e 73 65 6e 73 69 74 69 76 69 n.size.sensitivi
03a0: 74 79 20 3d 20 30 2e 32 3b 0a 20 20 20 20 7d 20 ty = 0.2;. }
03b0: 65 6c 73 65 20 69 66 20 28 74 68 69 73 2e 6d 6f else if (this.mo
03c0: 64 65 3d 3d 3d 27 73 65 6c 65 63 74 27 29 20 7b de==='select') {
03d0: 0a 20 20 20 20 20 20 74 68 69 73 2e 70 6f 73 69 . this.posi
03e0: 74 69 6f 6e 20 3d 20 7b 0a 20 20 20 20 20 20 20 tion = {.
03f0: 20 63 65 6e 74 65 72 3a 20 6e 65 77 20 49 6e 74 center: new Int
0400: 65 72 61 63 74 69 6f 6e 2e 48 61 6e 64 6c 65 28 eraction.Handle(
0410: 27 72 65 6c 61 74 69 76 65 27 2c 27 68 6f 72 69 'relative','hori
0420: 7a 6f 6e 74 61 6c 27 2c 5b 30 2c 74 68 69 73 2e zontal',[0,this.
0430: 77 69 64 74 68 5d 2c 5b 74 68 69 73 2e 68 65 69 width],[this.hei
0440: 67 68 74 2c 30 5d 29 2c 0a 20 20 20 20 20 20 20 ght,0]),.
0450: 20 73 74 61 72 74 3a 20 6e 65 77 20 49 6e 74 65 start: new Inte
0460: 72 61 63 74 69 6f 6e 2e 48 61 6e 64 6c 65 28 27 raction.Handle('
0470: 72 65 6c 61 74 69 76 65 27 2c 27 68 6f 72 69 7a relative','horiz
0480: 6f 6e 74 61 6c 27 2c 5b 30 2c 74 68 69 73 2e 77 ontal',[0,this.w
0490: 69 64 74 68 5d 2c 5b 74 68 69 73 2e 68 65 69 67 idth],[this.heig
04a0: 68 74 2c 30 5d 29 2c 0a 20 20 20 20 20 20 20 20 ht,0]),.
04b0: 65 6e 64 3a 20 6e 65 77 20 49 6e 74 65 72 61 63 end: new Interac
04c0: 74 69 6f 6e 2e 48 61 6e 64 6c 65 28 27 72 65 6c tion.Handle('rel
04d0: 61 74 69 76 65 27 2c 27 68 6f 72 69 7a 6f 6e 74 ative','horizont
04e0: 61 6c 27 2c 5b 30 2c 74 68 69 73 2e 77 69 64 74 al',[0,this.widt
04f0: 68 5d 2c 5b 74 68 69 73 2e 68 65 69 67 68 74 2c h],[this.height,
0500: 30 5d 29 0a 20 20 20 20 20 20 2f 2f 20 20 73 69 0]). // si
0510: 7a 65 3a 20 6e 65 77 20 49 6e 74 65 72 61 63 74 ze: new Interact
0520: 69 6f 6e 2e 48 61 6e 64 6c 65 28 27 72 65 6c 61 ion.Handle('rela
0530: 74 69 76 65 27 2c 27 76 65 72 74 69 63 61 6c 27 tive','vertical'
0540: 2c 5b 30 2c 74 68 69 73 2e 77 69 64 74 68 5d 2c ,[0,this.width],
0550: 5b 74 68 69 73 2e 68 65 69 67 68 74 2c 30 5d 29 [this.height,0])
0560: 0a 20 20 20 20 20 20 7d 3b 0a 20 20 20 20 7d 0a . };. }.
0570: 0a 20 20 20 20 74 68 69 73 2e 69 6e 69 74 28 29 . this.init()
0580: 3b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 ;. return thi
0590: 73 3b 0a 20 20 7d 0a 0a 20 20 62 75 69 6c 64 46 s;. }.. buildF
05a0: 72 61 6d 65 28 29 20 7b 0a 20 20 20 20 20 20 74 rame() {. t
05b0: 68 69 73 2e 65 6c 65 6d 65 6e 74 20 3d 20 73 76 his.element = sv
05c0: 67 2e 63 72 65 61 74 65 28 27 73 76 67 27 29 3b g.create('svg');
05d0: 0a 20 20 20 20 20 20 74 68 69 73 2e 65 6c 65 6d . this.elem
05e0: 65 6e 74 2e 73 65 74 41 74 74 72 69 62 75 74 65 ent.setAttribute
05f0: 28 27 78 27 2c 30 29 3b 0a 20 20 20 20 20 20 74 ('x',0);. t
0600: 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 65 74 41 his.element.setA
0610: 74 74 72 69 62 75 74 65 28 27 79 27 2c 30 29 3b ttribute('y',0);
0620: 0a 20 20 20 20 20 20 74 68 69 73 2e 70 61 72 65 . this.pare
0630: 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 74 nt.appendChild(t
0640: 68 69 73 2e 65 6c 65 6d 65 6e 74 29 3b 0a 20 20 his.element);.
0650: 7d 0a 0a 20 20 62 75 69 6c 64 49 6e 74 65 72 66 }.. buildInterf
0660: 61 63 65 28 29 20 7b 0a 0a 20 20 20 20 74 68 69 ace() {.. thi
0670: 73 2e 64 75 6d 6d 79 20 3d 20 73 76 67 2e 63 72 s.dummy = svg.cr
0680: 65 61 74 65 28 27 72 65 63 74 27 29 3b 0a 20 20 eate('rect');.
0690: 20 20 74 68 69 73 2e 64 75 6d 6d 79 2e 73 65 74 this.dummy.set
06a0: 41 74 74 72 69 62 75 74 65 28 27 77 69 64 74 68 Attribute('width
06b0: 27 2c 20 27 31 30 30 25 27 29 3b 0a 20 20 20 20 ', '100%');.
06c0: 74 68 69 73 2e 64 75 6d 6d 79 2e 73 65 74 41 74 this.dummy.setAt
06d0: 74 72 69 62 75 74 65 28 27 68 65 69 67 68 74 27 tribute('height'
06e0: 2c 20 27 31 30 30 25 27 29 3b 0a 20 20 20 20 74 , '100%');. t
06f0: 68 69 73 2e 64 75 6d 6d 79 2e 73 65 74 41 74 74 his.dummy.setAtt
0700: 72 69 62 75 74 65 28 27 78 27 2c 30 29 3b 0a 20 ribute('x',0);.
0710: 20 20 20 74 68 69 73 2e 64 75 6d 6d 79 2e 73 65 this.dummy.se
0720: 74 41 74 74 72 69 62 75 74 65 28 27 79 27 2c 30 tAttribute('y',0
0730: 29 3b 0a 20 20 20 20 74 68 69 73 2e 64 75 6d 6d );. this.dumm
0740: 79 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 y.setAttribute('
0750: 66 69 6c 6c 27 2c 27 6e 6f 6e 65 27 29 3b 0a 0a fill','none');..
0760: 20 20 20 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 this.element
0770: 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 74 68 69 .appendChild(thi
0780: 73 2e 64 75 6d 6d 79 29 3b 0a 0a 20 20 20 20 74 s.dummy);.. t
0790: 68 69 73 2e 72 65 66 20 3d 20 73 76 67 2e 63 72 his.ref = svg.cr
07a0: 65 61 74 65 28 27 67 27 29 3b 0a 20 20 20 20 74 eate('g');. t
07b0: 68 69 73 2e 72 65 66 2e 73 65 74 41 74 74 72 69 his.ref.setAttri
07c0: 62 75 74 65 28 27 77 69 64 74 68 27 2c 20 27 31 bute('width', '1
07d0: 30 30 25 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 00%');. this.
07e0: 72 65 66 2e 73 65 74 41 74 74 72 69 62 75 74 65 ref.setAttribute
07f0: 28 27 68 65 69 67 68 74 27 2c 20 27 31 30 30 25 ('height', '100%
0800: 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65 66 ');. this.ref
0810: 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 78 .setAttribute('x
0820: 27 2c 30 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 ',0);. this.r
0830: 65 66 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ef.setAttribute(
0840: 27 79 27 2c 30 29 3b 0a 20 20 20 20 74 68 69 73 'y',0);. this
0850: 2e 72 65 66 2e 73 65 74 41 74 74 72 69 62 75 74 .ref.setAttribut
0860: 65 28 27 66 69 6c 6c 27 2c 27 6e 6f 6e 65 27 29 e('fill','none')
0870: 3b 0a 0a 20 20 20 20 74 68 69 73 2e 65 6c 65 6d ;.. this.elem
0880: 65 6e 74 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 ent.appendChild(
0890: 74 68 69 73 2e 72 65 66 29 3b 0a 0a 20 20 20 20 this.ref);..
08a0: 74 68 69 73 2e 62 61 72 20 3d 20 73 76 67 2e 63 this.bar = svg.c
08b0: 72 65 61 74 65 28 27 72 65 63 74 27 29 3b 0a 20 reate('rect');.
08c0: 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 41 this.bar.setA
08d0: 74 74 72 69 62 75 74 65 28 27 78 27 2c 30 29 3b ttribute('x',0);
08e0: 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 . this.bar.se
08f0: 74 41 74 74 72 69 62 75 74 65 28 27 79 27 2c 30 tAttribute('y',0
0900: 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e );. this.bar.
0910: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 73 74 setAttribute('st
0920: 72 6f 6b 65 2d 77 69 64 74 68 27 2c 27 30 27 29 roke-width','0')
0930: 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 ;. this.bar.s
0940: 65 74 41 74 74 72 69 62 75 74 65 28 27 66 69 6c etAttribute('fil
0950: 6c 2d 6f 70 61 63 69 74 79 27 2c 27 30 2e 34 27 l-opacity','0.4'
0960: 29 3b 0a 0a 20 20 20 20 74 68 69 73 2e 61 72 72 );.. this.arr
0970: 6f 77 4c 20 3d 20 73 76 67 2e 63 72 65 61 74 65 owL = svg.create
0980: 28 27 72 65 63 74 27 29 3b 0a 20 20 20 20 74 68 ('rect');. th
0990: 69 73 2e 61 72 72 6f 77 4c 2e 73 65 74 41 74 74 is.arrowL.setAtt
09a0: 72 69 62 75 74 65 28 27 78 27 2c 30 29 3b 0a 20 ribute('x',0);.
09b0: 20 20 20 74 68 69 73 2e 61 72 72 6f 77 4c 2e 73 this.arrowL.s
09c0: 65 74 41 74 74 72 69 62 75 74 65 28 27 79 27 2c etAttribute('y',
09d0: 30 29 3b 0a 20 20 20 20 74 68 69 73 2e 61 72 72 0);. this.arr
09e0: 6f 77 4c 2e 73 65 74 41 74 74 72 69 62 75 74 65 owL.setAttribute
09f0: 28 27 66 69 6c 6c 2d 6f 70 61 63 69 74 79 27 2c ('fill-opacity',
0a00: 27 30 2e 37 27 29 3b 0a 0a 20 20 20 20 74 68 69 '0.7');.. thi
0a10: 73 2e 61 72 72 6f 77 4c 2e 61 64 64 45 76 65 6e s.arrowL.addEven
0a20: 74 4c 69 73 74 65 6e 65 72 28 27 6d 6f 75 73 65 tListener('mouse
0a30: 64 6f 77 6e 27 2c 20 28 65 29 20 3d 3e 20 7b 0a down', (e) => {.
0a40: 20 20 20 20 20 20 65 2e 70 72 65 76 65 6e 74 44 e.preventD
0a50: 65 66 61 75 6c 74 28 29 3b 0a 20 20 20 20 20 20 efault();.
0a60: 65 2e 73 74 6f 70 50 72 6f 70 61 67 61 74 69 6f e.stopPropagatio
0a70: 6e 28 29 3b 0a 20 20 20 20 7d 29 3b 0a 0a 20 20 n();. });..
0a80: 20 20 74 68 69 73 2e 61 72 72 6f 77 52 20 3d 20 this.arrowR =
0a90: 73 76 67 2e 63 72 65 61 74 65 28 27 72 65 63 74 svg.create('rect
0aa0: 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 61 72 72 ');. this.arr
0ab0: 6f 77 52 2e 73 65 74 41 74 74 72 69 62 75 74 65 owR.setAttribute
0ac0: 28 27 66 69 6c 6c 2d 6f 70 61 63 69 74 79 27 2c ('fill-opacity',
0ad0: 27 30 2e 37 27 29 3b 0a 0a 20 20 20 20 74 68 69 '0.7');.. thi
0ae0: 73 2e 61 72 72 6f 77 52 2e 61 64 64 45 76 65 6e s.arrowR.addEven
0af0: 74 4c 69 73 74 65 6e 65 72 28 27 6d 6f 75 73 65 tListener('mouse
0b00: 64 6f 77 6e 27 2c 20 28 65 29 20 3d 3e 20 7b 0a down', (e) => {.
0b10: 20 20 20 20 20 20 65 2e 70 72 65 76 65 6e 74 44 e.preventD
0b20: 65 66 61 75 6c 74 28 29 3b 0a 20 20 20 20 20 20 efault();.
0b30: 65 2e 73 74 6f 70 50 72 6f 70 61 67 61 74 69 6f e.stopPropagatio
0b40: 6e 28 29 3b 0a 20 20 20 20 7d 29 3b 0a 0a 20 20 n();. });..
0b50: 20 20 74 68 69 73 2e 72 65 66 2e 61 70 70 65 6e this.ref.appen
0b60: 64 43 68 69 6c 64 28 74 68 69 73 2e 61 72 72 6f dChild(this.arro
0b70: 77 4c 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65 wL);. this.re
0b80: 66 2e 61 70 70 65 6e 64 43 68 69 6c 64 28 74 68 f.appendChild(th
0b90: 69 73 2e 61 72 72 6f 77 52 29 3b 0a 20 20 20 20 is.arrowR);.
0ba0: 74 68 69 73 2e 72 65 66 2e 61 70 70 65 6e 64 43 this.ref.appendC
0bb0: 68 69 6c 64 28 74 68 69 73 2e 62 61 72 29 3b 0a hild(this.bar);.
0bc0: 0a 20 20 20 20 74 68 69 73 2e 72 65 73 69 7a 65 . this.resize
0bd0: 28 29 3b 0a 0a 20 20 7d 0a 0a 20 20 63 6f 6c 6f ();.. }.. colo
0be0: 72 49 6e 74 65 72 66 61 63 65 28 29 20 7b 0a 20 rInterface() {.
0bf0: 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 41 this.bar.setA
0c00: 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 2c ttribute('fill',
0c10: 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 65 this.colors.acce
0c20: 6e 74 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 nt);. this.ba
0c30: 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 27 r.setAttribute('
0c40: 73 74 72 6f 6b 65 27 2c 74 68 69 73 2e 63 6f 6c stroke',this.col
0c50: 6f 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 20 20 ors.accent);.
0c60: 20 74 68 69 73 2e 61 72 72 6f 77 4c 2e 73 65 74 this.arrowL.set
0c70: 41 74 74 72 69 62 75 74 65 28 27 66 69 6c 6c 27 Attribute('fill'
0c80: 2c 74 68 69 73 2e 63 6f 6c 6f 72 73 2e 61 63 63 ,this.colors.acc
0c90: 65 6e 74 29 3b 0a 20 20 20 20 74 68 69 73 2e 61 ent);. this.a
0ca0: 72 72 6f 77 52 2e 73 65 74 41 74 74 72 69 62 75 rrowR.setAttribu
0cb0: 74 65 28 27 66 69 6c 6c 27 2c 74 68 69 73 2e 63 te('fill',this.c
0cc0: 6f 6c 6f 72 73 2e 61 63 63 65 6e 74 29 3b 0a 20 olors.accent);.
0cd0: 20 7d 0a 0a 20 20 72 65 73 69 7a 65 28 77 2c 68 }.. resize(w,h
0ce0: 29 20 7b 0a 20 20 20 20 74 68 69 73 2e 77 69 64 ) {. this.wid
0cf0: 74 68 20 3d 20 77 20 7c 7c 20 74 68 69 73 2e 77 th = w || this.w
0d00: 69 64 74 68 3b 0a 20 20 20 20 74 68 69 73 2e 68 idth;. this.h
0d10: 65 69 67 68 74 20 3d 20 68 20 7c 7c 20 74 68 69 eight = h || thi
0d20: 73 2e 68 65 69 67 68 74 3b 0a 20 20 20 20 74 68 s.height;. th
0d30: 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 65 74 41 74 is.element.setAt
0d40: 74 72 69 62 75 74 65 28 27 77 69 64 74 68 27 2c tribute('width',
0d50: 74 68 69 73 2e 77 69 64 74 68 29 3b 0a 20 20 20 this.width);.
0d60: 20 74 68 69 73 2e 65 6c 65 6d 65 6e 74 2e 73 65 this.element.se
0d70: 74 41 74 74 72 69 62 75 74 65 28 27 68 65 69 67 tAttribute('heig
0d80: 68 74 27 2c 74 68 69 73 2e 68 65 69 67 68 74 29 ht',this.height)
0d90: 3b 0a 20 20 20 20 74 68 69 73 2e 62 61 72 2e 73 ;. this.bar.s
0da0: 65 74 41 74 74 72 69 62 75 74 65 28 27 77 69 64 etAttribute('wid
0db0: 74 68 27 2c 20 28 74 68 69 73 2e 72 61 6e 67 65 th', (this.range
0dc0: 2e 65 6e 64 2e 6e 6f 72 6d 61 6c 69 7a 65 64 20 .end.normalized
0dd0: 2d 20 74 68 69 73 2e 72 61 6e 67 65 2e 73 74 61 - this.range.sta
0de0: 72 74 2e 6e 6f 72 6d 61 6c 69 7a 65 64 29 20 2a rt.normalized) *
0df0: 20 74 68 69 73 2e 77 69 64 74 68 20 29 3b 0a 20 this.width );.
0e00: 20 20 20 74 68 69 73 2e 62 61 72 2e 73 65 74 41 this.bar.setA
0e10: 74 74 72 69 62 75 74 65 28 27 68 65 69 67 68 74 ttribute('height
0e20: 27 2c 74 68 69 73 2e 68 65 69 67 68 74 29 3b 0a ',this.height);.
0e30: 20 20 20 20 74 68 69 73 2e 61 72 72 6f 77 4c 2e this.arrowL.
0e40: 73 65 74 41 74 74 72 69 62 75 74 65 28 27 77 69 setAttribute('wi
0e50: 64 74 68 27 2c 20 33 29 3b 0a 20 20 20 20 74 68 dth', 3);. th
0e60: 69 73 2e 61 72 72 6f 77 4c 2e 73 65 74 41 74 74 is.arrowL.setAtt
0e70: 72 69 62 75 74 65 28 27 68 65 69 67 68 74 27 2c ribute('height',
0e80: 74 68 69 73 2e 68 65 69 67 68 74 29 3b 0a 20 20 this.height);.
0e90: 20 20 74 68 69 73 2e 61 72 72 6f 77 52 2e 73 65 this.arrowR.se
0ea0: 74 41 74 74 72 69 62 75 74 65 28 27 77 69 64 74 tAttribute('widt
0eb0: 68 27 2c 20 33 29 3b 0a 20 20 20 20 74 68 69 73 h', 3);. this
0ec0: 2e 61 72 72 6f 77 52 2e 73 65 74 41 74 74 72 69 .arrowR.setAttri
0ed0: 62 75 74 65 28 27 68 65 69 67 68 74 27 2c 74 68 bute('height',th
0ee0: 69 73 2e 68 65 69 67 68 74 29 3b 0a 20 20 20 20 is.height);.
0ef0: 74 68 69 73 2e 61 72 72 6f 77 52 2e 73 65 74 41 this.arrowR.setA
0f00: 74 74 72 69 62 75 74 65 28 27 78 27 2c 74 68 69 ttribute('x',thi
0f10: 73 2e 62 61 72 2e 67 65 74 41 74 74 72 69 62 75 s.bar.getAttribu
0f20: 74 65 28 27 77 69 64 74 68 27 29 29 3b 0a 20 20 te('width'));.
0f30: 20 20 74 68 69 73 2e 61 72 72 6f 77 52 2e 73 65 this.arrowR.se
0f40: 74 41 74 74 72 69 62 75 74 65 28 27 79 27 2c 30 tAttribute('y',0
0f50: 29 3b 0a 20 20 20 20 69 66 20 28 74 68 69 73 2e );. if (this.
0f60: 6d 6f 64 65 3d 3d 3d 27 64 72 61 67 27 29 20 7b mode==='drag') {
0f70: 0a 20 20 20 20 20 20 74 68 69 73 2e 70 6f 73 69 . this.posi
0f80: 74 69 6f 6e 2e 63 65 6e 74 65 72 2e 72 65 73 69 tion.center.resi
0f90: 7a 65 28 5b 30 2c 74 68 69 73 2e 77 69 64 74 68 ze([0,this.width
0fa0: 5d 2c 5b 74 68 69 73 2e 68 65 69 67 68 74 2c 30 ],[this.height,0
0fb0: 5d 29 3b 0a 20 20 20 20 20 20 74 68 69 73 2e 70 ]);. this.p
0fc0: 6f 73 69 74 69 6f 6e 2e 73 69 7a 65 2e 72 65 73 osition.size.res
0fd0: 69 7a 65 28 5b 30 2c 74 68 69 73 2e 77 69 64 74 ize([0,this.widt
0fe0: 68 5d 2c 5b 74 68 69 73 2e 68 65 69 67 68 74 2c h],[this.height,
0ff0: 30 5d 29 3b 0a 20 20 20 20 7d 20 65 6c 73 65 20 0]);. } else
1000: 69 66 20 28 74 68 69 73 2e 6d 6f 64 65 3d 3d 3d if (this.mode===
1010: 27 73 65 6c 65 63 74 27 29 20 7b 0a 20 20 20 20 'select') {.
1020: 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e this.position.
1030: 63 65 6e 74 65 72 2e 72 65 73 69 7a 65 28 5b 30 center.resize([0
1040: 2c 74 68 69 73 2e 77 69 64 74 68 5d 2c 5b 74 68 ,this.width],[th
1050: 69 73 2e 68 65 69 67 68 74 2c 30 5d 29 3b 0a 20 is.height,0]);.
1060: 20 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 this.positi
1070: 6f 6e 2e 73 74 61 72 74 2e 72 65 73 69 7a 65 28 on.start.resize(
1080: 5b 30 2c 74 68 69 73 2e 77 69 64 74 68 5d 2c 5b [0,this.width],[
1090: 74 68 69 73 2e 68 65 69 67 68 74 2c 30 5d 29 3b this.height,0]);
10a0: 0a 20 20 20 20 20 20 74 68 69 73 2e 70 6f 73 69 . this.posi
10b0: 74 69 6f 6e 2e 65 6e 64 2e 72 65 73 69 7a 65 28 tion.end.resize(
10c0: 5b 30 2c 74 68 69 73 2e 77 69 64 74 68 5d 2c 5b [0,this.width],[
10d0: 74 68 69 73 2e 68 65 69 67 68 74 2c 30 5d 29 3b this.height,0]);
10e0: 0a 20 20 20 20 7d 0a 20 20 20 20 74 68 69 73 2e . }. this.
10f0: 72 65 6e 64 65 72 28 29 3b 0a 20 20 7d 0a 0a 20 render();. }..
1100: 20 72 65 6e 64 65 72 28 29 20 7b 0a 20 20 20 20 render() {.
1110: 74 68 69 73 2e 72 65 66 2e 73 65 74 41 74 74 72 this.ref.setAttr
1120: 69 62 75 74 65 28 27 74 72 61 6e 73 66 6f 72 6d ibute('transform
1130: 27 2c 20 27 74 72 61 6e 73 6c 61 74 65 28 27 20 ', 'translate('
1140: 2b 20 74 68 69 73 2e 72 61 6e 67 65 2e 73 74 61 + this.range.sta
1150: 72 74 2e 6e 6f 72 6d 61 6c 69 7a 65 64 20 2a 20 rt.normalized *
1160: 74 68 69 73 2e 77 69 64 74 68 20 2b 20 27 2c 20 this.width + ',
1170: 30 29 27 29 3b 0a 20 20 20 20 74 68 69 73 2e 62 0)');. this.b
1180: 61 72 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 ar.setAttribute(
1190: 27 77 69 64 74 68 27 2c 20 28 74 68 69 73 2e 72 'width', (this.r
11a0: 61 6e 67 65 2e 65 6e 64 2e 6e 6f 72 6d 61 6c 69 ange.end.normali
11b0: 7a 65 64 20 2d 20 74 68 69 73 2e 72 61 6e 67 65 zed - this.range
11c0: 2e 73 74 61 72 74 2e 6e 6f 72 6d 61 6c 69 7a 65 .start.normalize
11d0: 64 29 20 2a 20 74 68 69 73 2e 77 69 64 74 68 20 d) * this.width
11e0: 29 3b 0a 20 20 20 20 74 68 69 73 2e 61 72 72 6f );. this.arro
11f0: 77 52 2e 73 65 74 41 74 74 72 69 62 75 74 65 28 wR.setAttribute(
1200: 27 78 27 2c 74 68 69 73 2e 62 61 72 2e 67 65 74 'x',this.bar.get
1210: 41 74 74 72 69 62 75 74 65 28 27 77 69 64 74 68 Attribute('width
1220: 27 29 20 2d 20 33 29 3b 0a 20 20 7d 0a 0a 20 20 ') - 3);. }..
1230: 63 6c 69 63 6b 28 29 20 7b 0a 20 20 20 20 74 68 click() {. th
1240: 69 73 2e 68 61 73 4d 6f 76 65 64 20 3d 20 66 61 is.hasMoved = fa
1250: 6c 73 65 3b 0a 20 20 20 20 63 6f 6e 73 6f 6c 65 lse;. console
1260: 2e 6c 6f 67 28 27 73 6c 69 64 65 72 20 63 6c 69 .log('slider cli
1270: 63 6b 65 64 27 29 3b 0a 0a 20 20 20 20 69 66 20 cked');.. if
1280: 28 74 68 69 73 2e 6d 6f 64 65 3d 3d 3d 27 64 72 (this.mode==='dr
1290: 61 67 27 29 20 7b 0a 20 20 20 20 20 20 74 68 69 ag') {. thi
12a0: 73 2e 70 6f 73 69 74 69 6f 6e 2e 63 65 6e 74 65 s.position.cente
12b0: 72 2e 61 6e 63 68 6f 72 20 3d 20 74 68 69 73 2e r.anchor = this.
12c0: 6d 6f 75 73 65 3b 0a 20 20 20 20 20 20 74 68 69 mouse;. thi
12d0: 73 2e 70 6f 73 69 74 69 6f 6e 2e 73 69 7a 65 2e s.position.size.
12e0: 61 6e 63 68 6f 72 20 3d 20 74 68 69 73 2e 6d 6f anchor = this.mo
12f0: 75 73 65 3b 0a 20 20 20 20 7d 20 65 6c 73 65 20 use;. } else
1300: 69 66 20 28 74 68 69 73 2e 6d 6f 64 65 3d 3d 3d if (this.mode===
1310: 27 73 65 6c 65 63 74 27 29 20 7b 0a 20 20 20 20 'select') {.
1320: 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e 2e this.position.
1330: 63 65 6e 74 65 72 2e 61 6e 63 68 6f 72 20 3d 20 center.anchor =
1340: 74 68 69 73 2e 6d 6f 75 73 65 3b 0a 20 20 20 20 this.mouse;.
1350: 7d 0a 20 20 20 20 2f 2f 74 68 69 73 2e 72 61 6e }. //this.ran
1360: 67 65 2e 63 65 6e 74 65 72 20 3d 20 6d 61 74 68 ge.center = math
1370: 2e 73 63 61 6c 65 28 74 68 69 73 2e 6d 6f 75 73 .scale(this.mous
1380: 65 2e 78 2c 30 2c 74 68 69 73 2e 77 69 64 74 68 e.x,0,this.width
1390: 2c 74 68 69 73 2e 6d 69 6e 2c 74 68 69 73 2e 6d ,this.min,this.m
13a0: 61 78 29 3b 0a 20 20 20 20 74 68 69 73 2e 72 65 ax);. this.re
13b0: 6e 64 65 72 28 29 3b 0a 20 20 7d 0a 0a 20 20 6d nder();. }.. m
13c0: 6f 76 65 28 29 20 7b 0a 20 20 20 20 69 66 28 74 ove() {. if(t
13d0: 68 69 73 2e 63 6c 69 63 6b 65 64 29 7b 0a 20 20 his.clicked){.
13e0: 20 20 20 20 74 68 69 73 2e 68 61 73 4d 6f 76 65 this.hasMove
13f0: 64 20 3d 20 74 72 75 65 3b 0a 20 20 20 20 20 20 d = true;.
1400: 69 66 20 28 74 68 69 73 2e 6d 6f 64 65 3d 3d 3d if (this.mode===
1410: 27 64 72 61 67 27 29 20 7b 0a 0a 20 20 20 20 20 'drag') {..
1420: 20 20 20 74 68 69 73 2e 70 6f 73 69 74 69 6f 6e this.position
1430: 2e 63 65 6e 74 65 72 2e 75 70 64 61 74 65 28 20 .center.update(
1440: 74 68 69 73 2e 6d 6f 75 73 65 20 29 3b 0a 20 20 this.mouse );.
1450: 20 20 20 20 20 20 74 68 69 73 2e 72 61 6e 67 65 this.range
1460: 2e 63 65 6e 74 65 72 20 3d 20 6d 61 74 68 2e 73 .center = math.s
1470: 63 61 6c 65 28 74 68 69 73 2e 70 6f 73 69 74 69 cale(this.positi
1480: 6f 6e 2e 63 65 6e 74 65 72 2e 76 61 6c 75 65 2c on.center.value,
1490: 30 2c 31 2c 74 68 69 73 2e 6d 69 6e 2c 74 68 69 0,1,this.min,thi
14a0: 73 2e 6d 61 78 29 3b 0a 20 20 20 20 20 20 20 20 s.max);.
14b0: 2f 2f 74 68 69 73 2e 72 61 6e 67 65 2e 63 65 6e //this.range.cen
14c0: 74 65 72 20 3d 20 6d 61 74 68 2e 73 63 61 6c 65 ter = math.scale
14d0: 28 74 68 69 73 2e 6d 6f 75 73 65 2e 78 2c 30 2c (this.mouse.x,0,
14e0: 74 68 69 73 2e 77 69 64 74 68 2c 74 68 69 73 2e this.width,this.
14f0: 6d 69 6e 2c 74 68 69 73 2e 6d 61 78 29 3b 0a 0a min,this.max);..
1500: 20 20 20 20 20 20 20 20 74 68 69 73 2e 70 6f 73 this.pos
1510: 69 74 69 6f 6e 2e 73 69 7a 65 2e 75 70 64 61 74 ition.size.updat
1520: 65 28 20 74 68 69 73 2e 6d 6f 75 73 65 20 29 3b e( this.mouse );
1530: 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 72 61 . this.ra
1540: 6e 67 65 2e 73 69 7a 65 20 3d 20 6d 61 74 68 2e nge.size = math.
1550: 73 63 61 6c 65 28 74 68 69 73 2e 70 6f 73 69 74 scale(this.posit
1560: 69 6f 6e 2e 73 69 7a 65 2e 76 61 6c 75 65 2c 30 ion.size.value,0
1570: 2c 31 2c 74 68 69 73 2e 6d 69 6e 2c 74 68 69 73 ,1,this.min,this
1580: 2e 6d 61 78 29 3b 0a 0a 20 20 20 20 20 20 20 20 .max);..
1590: 74 68 69 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 this.render();.
15a0: 20 20 20 20 20 7d 0a 20 20 20 20 20 20 65 6c 73 }. els
15b0: 65 20 69 66 20 28 74 68 69 73 2e 6d 6f 64 65 3d e if (this.mode=
15c0: 3d 3d 27 73 65 6c 65 63 74 27 29 20 7b 0a 20 20 =='select') {.
15d0: 20 20 20 20 20 20 74 68 69 73 2e 70 6f 73 69 74 this.posit
15e0: 69 6f 6e 2e 63 65 6e 74 65 72 2e 75 70 64 61 74 ion.center.updat
15f0: 65 28 20 74 68 69 73 2e 6d 6f 75 73 65 20 29 3b e( this.mouse );
1600: 0a 20 20 20 20 20 20 20 20 74 68 69 73 2e 72 61 . this.ra
1610: 6e 67 65 2e 63 65 6e 74 65 72 20 3d 20 6d 61 74 nge.center = mat
1620: 68 2e 73 63 61 6c 65 28 74 68 69 73 2e 70 6f 73 h.scale(this.pos
1630: 69 74 69 6f 6e 2e 63 65 6e 74 65 72 2e 76 61 6c ition.center.val
1640: 75 65 2c 30 2c 31 2c 74 68 69 73 2e 6d 69 6e 2c ue,0,1,this.min,
1650: 74 68 69 73 2e 6d 61 78 29 3b 0a 20 20 20 20 20 this.max);.
1660: 20 20 20 74 68 69 73 2e 72 65 6e 64 65 72 28 29 this.render()
1670: 3b 0a 20 20 20 20 20 20 7d 0a 20 20 20 20 7d 0a ;. }. }.
1680: 20 20 7d 0a 0a 20 20 72 65 6c 65 61 73 65 28 29 }.. release()
1690: 20 7b 0a 20 20 20 20 69 66 20 28 21 74 68 69 73 {. if (!this
16a0: 2e 68 61 73 4d 6f 76 65 64 29 20 7b 0a 20 20 20 .hasMoved) {.
16b0: 20 20 20 74 68 69 73 2e 64 65 73 74 72 6f 79 28 this.destroy(
16c0: 29 3b 0a 20 20 20 20 7d 0a 20 20 20 20 74 68 69 );. }. thi
16d0: 73 2e 72 65 6e 64 65 72 28 29 3b 0a 20 20 7d 0a s.render();. }.
16e0: 0a 20 20 67 65 74 20 73 74 61 72 74 28 29 20 7b . get start() {
16f0: 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 69 73 . return this
1700: 2e 72 61 6e 67 65 2e 73 74 61 72 74 2e 76 61 6c .range.start.val
1710: 75 65 3b 0a 20 20 7d 0a 0a 20 20 73 65 74 20 73 ue;. }.. set s
1720: 74 61 72 74 28 76 61 6c 75 65 29 20 7b 0a 20 20 tart(value) {.
1730: 2f 2f 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 // console.log(
1740: 22 73 74 61 72 74 20 69 73 20 62 65 69 6e 67 20 "start is being
1750: 73 65 74 20 74 6f 22 2c 20 76 61 6c 75 65 29 3b set to", value);
1760: 0a 20 20 20 20 74 68 69 73 2e 72 61 6e 67 65 2e . this.range.
1770: 73 74 61 72 74 2e 76 61 6c 75 65 20 3d 20 76 61 start.value = va
1780: 6c 75 65 3b 0a 20 20 20 20 74 68 69 73 2e 75 70 lue;. this.up
1790: 64 61 74 65 50 6f 73 69 74 69 6f 6e 28 29 3b 0a datePosition();.
17a0: 20 20 7d 0a 0a 20 20 67 65 74 20 65 6e 64 28 29 }.. get end()
17b0: 20 7b 0a 20 20 20 20 72 65 74 75 72 6e 20 74 68 {. return th
17c0: 69 73 2e 72 61 6e 67 65 2e 65 6e 64 2e 76 61 6c is.range.end.val
17d0: 75 65 3b 0a 20 20 7d 0a 0a 20 20 73 65 74 20 65 ue;. }.. set e
17e0: 6e 64 28 76 61 6c 75 65 20 29 20 7b 0a 20 20 2f nd(value ) {. /
17f0: 2f 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 22 / console.log("
1800: 65 6e 64 20 69 73 20 62 65 69 6e 67 20 73 65 74 end is being set
1810: 20 74 6f 22 2c 20 76 61 6c 75 65 29 3b 0a 20 20 to", value);.
1820: 20 20 74 68 69 73 2e 72 61 6e 67 65 2e 65 6e 64 this.range.end
1830: 2e 76 61 6c 75 65 20 3d 20 76 61 6c 75 65 3b 0a .value = value;.
1840: 20 20 20 20 74 68 69 73 2e 75 70 64 61 74 65 50 this.updateP
1850: 6f 73 69 74 69 6f 6e 28 29 3b 0a 20 20 7d 0a 0a osition();. }..
1860: 20 20 75 70 64 61 74 65 50 6f 73 69 74 69 6f 6e updatePosition
1870: 28 29 20 7b 0a 20 20 2f 2f 20 20 63 6f 6e 73 6f () {. // conso
1880: 6c 65 2e 6c 6f 67 28 22 75 70 64 61 74 65 50 6f le.log("updatePo
1890: 73 69 74 69 6f 6e 20 69 73 20 62 65 69 6e 67 20 sition is being
18a0: 73 65 74 22 29 3b 0a 20 20 20 20 6c 65 74 20 73 set");. let s
18b0: 74 61 72 74 20 3d 20 74 68 69 73 2e 72 61 6e 67 tart = this.rang
18c0: 65 2e 73 74 61 72 74 2e 6e 6f 72 6d 61 6c 69 7a e.start.normaliz
18d0: 65 64 3b 0a 20 20 20 20 2f 2f 20 20 20 20 20 20 ed;. //
18e0: 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 22 75 console.log("u
18f0: 70 64 61 74 65 50 6f 73 69 74 69 6f 6e 20 73 74 pdatePosition st
1900: 61 72 74 22 2c 20 73 74 61 72 74 29 3b 0a 20 20 art", start);.
1910: 20 20 6c 65 74 20 65 6e 64 20 3d 20 74 68 69 73 let end = this
1920: 2e 72 61 6e 67 65 2e 65 6e 64 2e 6e 6f 72 6d 61 .range.end.norma
1930: 6c 69 7a 65 64 3b 0a 20 20 20 20 2f 2f 20 20 20 lized;. //
1940: 20 20 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 console.log
1950: 28 22 75 70 64 61 74 65 50 6f 73 69 74 69 6f 6e ("updatePosition
1960: 20 65 6e 64 22 2c 20 65 6e 64 29 3b 0a 20 20 20 end", end);.
1970: 20 6c 65 74 20 63 65 6e 74 65 72 20 3d 20 28 65 let center = (e
1980: 6e 64 2b 73 74 61 72 74 29 2f 32 3b 0a 20 20 20 nd+start)/2;.
1990: 20 6c 65 74 20 73 69 7a 65 20 3d 20 65 6e 64 20 let size = end
19a0: 2d 20 73 74 61 72 74 3b 0a 0a 20 20 20 20 2f 2f - start;.. //
19b0: 20 20 20 20 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 console.log(
19c0: 22 75 70 64 61 74 65 50 6f 73 69 74 69 6f 6e 20 "updatePosition
19d0: 63 65 6e 74 65 72 22 2c 20 63 65 6e 74 65 72 29 center", center)
19e0: 3b 0a 20 20 20 20 2f 2f 20 20 20 20 20 20 20 20 ;. //
19f0: 63 6f 6e 73 6f 6c 65 2e 6c 6f 67 28 22 75 70 64 console.log("upd
1a00: 61 74 65 50 6f 73 69 74 69 6f 6e 20 73 69 7a 65 atePosition size
1a10: 22 2c 20 73 69 7a 65 29 3b 0a 20 20 20 20 74 68 ", size);. th
1a20: 69 73 2e 70 6f 73 69 74 69 6f 6e 2e 63 65 6e 74 is.position.cent
1a30: 65 72 2e 75 70 64 61 74 65 28 63 65 6e 74 65 72 er.update(center
1a40: 29 3b 0a 20 20 20 20 74 68 69 73 2e 70 6f 73 69 );. this.posi
1a50: 74 69 6f 6e 2e 73 69 7a 65 2e 75 70 64 61 74 65 tion.size.update
1a60: 28 73 69 7a 65 29 3b 0a 20 20 7d 0a 0a 7d 0a (size);. }..}.