31:T686,class Cursor extends EventTarget { constructor() { super(); this._limits = [0, 100]; this._focus = [...this.limits]; this._current = this.limits[0]; } // getters get limits() { return [...this._limits]; } get focus() { return [...this._focus]; } get current() { return this._current; } // setters set current(value) { if (isNaN(+value)) { throw new RangeError( `current must be a number. Got ${JSON.stringify(value)}` ); } const t = +value; if (this._current !== t) { this._current = clamp(t, this._focus); // Emit an event when the value has changed this.dispatchEvent( new CustomEvent("currentchange", { detail: this._current }) ); } } set focus(value) { if ( !Array.isArray(value) || value.length !== 2 || value.some(v => isNaN(+v)) ) { throw new RangeError( `focus must be an array of two numbers. Got ${JSON.stringify(value)}` ); } const focus = value.map(v => clamp(+v, this._limits)); if (focus[0] > focus[1]) { focus.reverse(); } if (this._focus[0] !== focus[0] || this._focus[1] !== focus[1]) { this._focus[0] = focus[0]; this._focus[1] = focus[1]; // Emit an event when the value has changed this.dispatchEvent( new CustomEvent("focuschange", { detail: [this._focus[0], this._focus[1]] }) ); // Ensure that current lies into the focus region // The setter will only update the field and emit an event if the value has changed this.current = clamp(this.current, this._focus); } } }32:T4dd,viewof min = { // Create the control const name = 'focus[0]'; const control = html`

${name} =

`; function getValue() { return +control.input.value; } function setOutput() { control.output.value = getValue(); } function setValue(value) { control.input.value = value; control.dispatchEvent(new CustomEvent('input')); setOutput(); } // Initialize control.min = cursor.limits[0]; control.max = cursor.limits[1]; setValue(cursor.focus[1]); // [control -> data store] Update the data store on control input function onControlInput() { setOutput(); cursor.focus = [cursor.focus[0], getValue()]; } control.addEventListener('input', onControlInput); // [data store -> control] Listen to 'currentchange' event on the data store function onFocuschange() { if (cursor.focus[1] !== getValue()) { setValue(cursor.focus[1]); } } cursor.addEventListener('focuschange', onFocuschange); // Clean on invalidation invalidation.then(() => { control.removeEventListener('input', onControlInput); cursor.removeEventListener('focuschange', onFocuschange); }); return control; }35:T627,viewof t = Generators.observe(notify => { function createControl() { const values = Array(cursor.focus[1] - cursor.focus[0] + 1) .fill(cursor.focus[0]) .map((d, i) => d + i); const control = MyScrubber(values, { autoplay: false, delay: 40 }); function setValue(value) { // Set to the index of the nearest element in values control.valueAsNumber = Math.min( values.findIndex(d => d >= value), values[values.length - 1] ); } // Initialize setValue(cursor.current); // [control -> data store] Update the data store on control input function onControlInput() { cursor.current = this.value; } control.addEventListener('input', onControlInput); // [data store -> control] Listen to 'currentchange' event on the data store function onCurrentchange() { if (cursor.current !== control.value) { setValue(cursor.current); } } cursor.addEventListener('currentchange', onCurrentchange); // Clean control.clean = function() { control.removeEventListener('input', onControlInput); cursor.removeEventListener('currentchange', onCurrentchange); }; return control; } // Create the control let control = createControl(); // Recreate if focus changes function onFocuschange() { control.clean(); control = createControl(); notify(control); } cursor.addEventListener('focuschange', onFocuschange); onFocuschange(); return () => cursor.removeEventListener('focuschange', onFocuschange); })36:[] 2f:{"title":"Data structure with events","cells":[{"id":0,"value":"md`# Data structure with events\n\nA pattern I find useful is to store data in objects that emit events when a field is set. It allows to share the same semantically meaningful object (in the sense of [object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming)) between various controls, and to react only to partial updates.\n\nThe HTMLMediaElement \\`volume\\` field is an example of this pattern. It allows to react to any change on the \\`volume\\` field, listening to the [\\`volumechange\\` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event):\n\n ~~~js\n video.addEventListener('volumechange', () => {\n console.log(\\`Volume set to: $\\{video.volume\\}\\`)\n })\n ~~~\n\nand the \\`volume\\` field can be updated using the [volume setter](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume):\n\n ~~~js\n video.volume = 0.4\n ~~~\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`## Example implementation\n\n\\`Cursor\\` is a class that stores the data of a cursor which position lies between 0 and 100:\n- \\`focus\\`: a zoom interval, eg \\`[10, 40]\\`\n- \\`current\\`: the position of the cursor (inside the focus), eg \\`12\\`\n\nThese two fields can be get and set, and an event is emitted on every field update:\n\n- _cursor_\\`.current = 50\\` emits the \\`cursorchange\\` event\n- _cursor_\\`.focus = [20, 30]\\` emits the \\`focuschange\\` event. It will also emit the \\`cursorchange\\` event if the current position must be modified to stay inside the focus interval.\n\nOpen the cells to look at the implementation.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`\\`cursor\\` is an instance of the Cursor class`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"cursor = new Cursor()","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`Various UI controls can then concurrently modify the data using the \\`Cursor\\` setters, and react to the changes by another control listening to the \\`Cursor\\` events.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"t","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"md`Note that the Play scrubber control is rebuild on every change to \\`focus\\` because it has no setter for its min and max options.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`---\n\n### Credits\n\n_Developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage._\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`\n### CHANGELOG\n\n- 2021-01-08: _thanks to [Fabian Iwand](https://observablehq.com/@mootari)._ remove useless dependency to https://observablehq.com/@severo/eventtarget\n- 2020/08/28: creation\n\n### TODO\n\n_empty_\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"function clamp(x, bounds) {\n return x < bounds[0] ? bounds[0] : x > bounds[1] ? bounds[1] : x;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"// import { Scrubber } from '@mbostock/scrubber'\n// I need a setter\nimport { Scrubber as MyScrubber } from \"b7660f16b33d3bc7\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}