diff --git a/css/editor.css b/css/editor.css index aac0fb9..64d1335 100644 --- a/css/editor.css +++ b/css/editor.css @@ -126,7 +126,18 @@ } input[type=range] { + opacity: 0; width: 100%; + z-index: 10; +} + +input[type="range"]::-moz-range-track { + background: black; + height: 1px; + } + +input[type="range"]::-moz-range-thumb { + opacity: 0; } .min_lim, .max_lim { @@ -135,6 +146,7 @@ input[type=range] { font-family: monospace; line-height: 24px; width: 7.5%; + user-select: none; } .min_lim { @@ -147,6 +159,38 @@ input[type=range] { padding-left: 5px; } +.slider_outer { + position: absolute; + left: 7.5%; + width: 85%; + height: 100%; +} + +.slider_track { + position: absolute; + top: 50%; + width: 100%; + height: 1px; + background-color: black; +} + +.slider_thumb { + position: absolute; + top: calc(50% - 10px); + width: 30px; + height: 20px; + border-radius: 3px; + background-color: #CCC; + border: 1px solid black; + font-family: monospace; + font-size: 10px; + text-align: center; + line-height: 20px; + cursor: pointer; + user-select: none; + z-index: 1; +} + /* check mark */ .toggle { diff --git a/dist/css/editor.css b/dist/css/editor.css index aac0fb9..64d1335 100644 --- a/dist/css/editor.css +++ b/dist/css/editor.css @@ -126,7 +126,18 @@ } input[type=range] { + opacity: 0; width: 100%; + z-index: 10; +} + +input[type="range"]::-moz-range-track { + background: black; + height: 1px; + } + +input[type="range"]::-moz-range-thumb { + opacity: 0; } .min_lim, .max_lim { @@ -135,6 +146,7 @@ input[type=range] { font-family: monospace; line-height: 24px; width: 7.5%; + user-select: none; } .min_lim { @@ -147,6 +159,38 @@ input[type=range] { padding-left: 5px; } +.slider_outer { + position: absolute; + left: 7.5%; + width: 85%; + height: 100%; +} + +.slider_track { + position: absolute; + top: 50%; + width: 100%; + height: 1px; + background-color: black; +} + +.slider_thumb { + position: absolute; + top: calc(50% - 10px); + width: 30px; + height: 20px; + border-radius: 3px; + background-color: #CCC; + border: 1px solid black; + font-family: monospace; + font-size: 10px; + text-align: center; + line-height: 20px; + cursor: pointer; + user-select: none; + z-index: 1; +} + /* check mark */ .toggle { diff --git a/dist/js/editor.js b/dist/js/editor.js index 9f916b3..f16ccd5 100644 --- a/dist/js/editor.js +++ b/dist/js/editor.js @@ -4,7 +4,7 @@ import { history, indentWithTab, defaultKeymap, historyKeymap } from '../node_mo import { bracketMatching, syntaxHighlighting, defaultHighlightStyle } from '../node_modules/@codemirror/language/dist/index.js'; import { javascript } from '../node_modules/@codemirror/lang-javascript/dist/index.js'; import { xml } from '../node_modules/@codemirror/lang-xml/dist/index.js'; -import { InterActive, Animation, Element, SVG, parseGum } from './gum.js'; +import { Interactive, Animation, Element, SVG, parseGum } from './gum.js'; // svg presets let prec = 2; @@ -137,7 +137,7 @@ class GumEditor { renderGum(out) { if (this.inter != null) { this.inter.innerHTML = ''; - if (out instanceof InterActive || out instanceof Animation) { + if (out instanceof Interactive || out instanceof Animation) { let anchors = out.createAnchors(this.disp); out = out.create(this.disp); this.inter.append(...anchors); diff --git a/dist/js/gum.js b/dist/js/gum.js index 7f60516..9db7b7a 100644 --- a/dist/js/gum.js +++ b/dist/js/gum.js @@ -324,7 +324,7 @@ let r2d = new NamedNumber('r2d', 180/Math.PI); let d2r = new NamedNumber('d2r', Math.PI/180); let blue = new NamedString('blue', '#1e88e5'); let red = new NamedString('red', '#ff0d57'); -// '#ff9800', '#4caf50', '#795548', '#9c27b0', '#00bcd4', '#607d8b' +let green = new NamedString('green', '#4caf50'); /** ** random number generation @@ -2135,7 +2135,7 @@ class SymPoints extends Container { [fs(x, y, t), rad_rect([x, y], fr(x, y, t))] ); - // pass to element + // pass to element let attr1 = {clip: false, ...attr}; super(children, attr1); } @@ -2762,9 +2762,11 @@ class BarPlot extends Plot { } } -//// INTERACTIVE +/** + ** Interactive + **/ -class InterActive { +class Interactive { constructor(vars, func) { this.gumify = func; this.vars = vars; @@ -2814,6 +2816,16 @@ class Variable { } } +function updateSliderValue(slider) { + let pos = (slider.value - slider.min) / (slider.max - slider.min); + let len = slider.getBoundingClientRect().width; + let lab = slider.parentNode.querySelector('.slider_thumb'); + let siz = lab.getBoundingClientRect().width; + let lef = (100*pos*(len-siz))/len; + lab.innerHTML = slider.value; + lab.style.left = `${lef}%`; +} + class Slider extends Variable { constructor(init, args) { let {min, max, step, ...attr} = args ?? {}; @@ -2856,18 +2868,28 @@ class Slider extends Variable { input.className = 'slider_input'; // set the CSS class input.id = `InterActive_${name}`; - slider.append(min_lim, input, max_lim); + let outer = document.createElement('div'); + outer.className = 'slider_outer'; + let track = document.createElement('div'); + track.className = 'slider_track'; + let thumb = document.createElement('div'); + thumb.className = 'slider_thumb'; + + outer.append(track, thumb); + slider.append(min_lim, input, max_lim, outer); cont.append(title, slider); // slider in cont in targ! + updateSliderValue(input); input.addEventListener('input', function() { - v.updateVal(this.value, ctx, redraw); + updateSliderValue(this); + let val = Number(this.value); + v.updateVal(val, ctx, redraw); }, false); return cont; } } - class Toggle extends Variable { constructor(init, args) { init = init == undefined ? true : init; @@ -2901,7 +2923,7 @@ class Toggle extends Variable { v.updateVal(this.checked, ctx, redraw); }, false); - return cont + return cont; } } @@ -2934,17 +2956,15 @@ class List extends Variable { let opts = document.createElement('div'); opts.className = 'custom-options'; - wrap.appendChild(source).append(trigger, opts); Object.entries(v.attr.choices).forEach(([label, value]) => { - - let o = document.createElement('div'); - o.className = 'custom-option'; - o.innerHTML = label; - o.setAttribute('data-value', value); - opts.append(o); - o.addEventListener('click', function() { + let o = document.createElement('div'); + o.className = 'custom-option'; + o.innerHTML = label; + o.setAttribute('data-value', value); + opts.append(o); + o.addEventListener('click', function() { let opt = this.closest('.custom-select'); let opt_txt = this.textContent; let opt_val = this.getAttribute('data-value'); @@ -2954,7 +2974,6 @@ class List extends Variable { }, false); }); - let cont = document.createElement('div'); cont.className = 'var_cont list_cont'; @@ -2969,14 +2988,16 @@ class List extends Variable { cont.append(title, list); // slider in cont in targ! list.querySelector('.custom-select-trigger').addEventListener('click', function() { - this.parentElement.classList.toggle("opened"); - }, false); + this.parentElement.classList.toggle('opened'); + }, false); - return cont + return cont; } } -//// Animation +/** + ** Animation + **/ class Animation { //vars must be numeric @@ -3079,7 +3100,7 @@ class Animation { **/ let Gum = [ - Context, Element, Container, Group, SVG, Frame, VStack, HStack, Place, Rotate, Anchor, Scatter, Spacer, Ray, Line, HLine, VLine, Rect, Square, Ellipse, Circle, Dot, Polyline, Polygon, Path, Arrowhead, Text, Tex, Node, MoveTo, LineTo, VerticalTo, VerticalDel, HorizontalTo, HorizontalDel, Bezier2, Bezier3, ArcTo, ArcDel, Bezier2Path, Bezier2Line, Bezier3Line, Arrow, Field, SymField, Edge, Network, ClosePath, SymPath, SymFill, SymPoly, SymPoints, Bar, VBar, HBar, VMultiBar, HMultiBar, Bars, VBars, HBars, Scale, VScale, HScale, Labels, VLabels, HLabels, Axis, HAxis, VAxis, Grid, Graph, Plot, BarPlot, Legend, Note, InterActive, Variable, Slider, Toggle, List, Animation, range, linspace, enumerate, repeat, grid, lingrid, split, hex2rgb, rgb2hex, rgb2hsl, interpolateVectors, interpolateHex, interpolateVectorsPallet, gzip, zip, pos_rect, pad_rect, rad_rect, exp, log, sin, cos, min, max, abs, pow, sqrt, floor, ceil, round, norm, add, mul, pi, phi, r2d, rounder, make_ticklabel, aspect_invariant, random, random_uniform, random_gaussian, cumsum, red, blue + Context, Element, Container, Group, SVG, Frame, VStack, HStack, Place, Rotate, Anchor, Scatter, Spacer, Ray, Line, HLine, VLine, Rect, Square, Ellipse, Circle, Dot, Polyline, Polygon, Path, Arrowhead, Text, Tex, Node, MoveTo, LineTo, VerticalTo, VerticalDel, HorizontalTo, HorizontalDel, Bezier2, Bezier3, ArcTo, ArcDel, Bezier2Path, Bezier2Line, Bezier3Line, Arrow, Field, SymField, Edge, Network, ClosePath, SymPath, SymFill, SymPoly, SymPoints, Bar, VBar, HBar, VMultiBar, HMultiBar, Bars, VBars, HBars, Scale, VScale, HScale, Labels, VLabels, HLabels, Axis, HAxis, VAxis, Grid, Graph, Plot, BarPlot, Legend, Note, Interactive, Variable, Slider, Toggle, List, Animation, range, linspace, enumerate, repeat, grid, lingrid, split, hex2rgb, rgb2hex, rgb2hsl, interpolateVectors, interpolateHex, interpolateVectorsPallet, gzip, zip, pos_rect, pad_rect, rad_rect, exp, log, sin, cos, min, max, abs, pow, sqrt, floor, ceil, round, norm, add, mul, pi, phi, r2d, rounder, make_ticklabel, aspect_invariant, random, random_uniform, random_gaussian, cumsum, blue, red, green ]; // detect object types @@ -3183,4 +3204,4 @@ function injectImages(elem) { }); } -export { Anchor, Animation, ArcDel, ArcTo, Arrow, Arrowhead, Axis, Bar, BarPlot, Bars, Bezier2, Bezier2Line, Bezier2Path, Bezier3, Bezier3Line, Circle, ClosePath, Container, Context, Dot, Edge, Element, Ellipse, Field, Frame, Graph, Grid, Group, Gum, HAxis, HBar, HBars, HLabels, HLine, HMultiBar, HScale, HStack, HorizontalDel, HorizontalTo, InterActive, Labels, Legend, Line, LineTo, List, MoveTo, Network, Node, Note, Path, Place, Plot, Polygon, Polyline, Ray, Rect, Rotate, SVG, Scale, Scatter, Slider, Spacer, Square, SymField, SymFill, SymPath, SymPoints, SymPoly, Tex, Text, Toggle, VAxis, VBar, VBars, VLabels, VLine, VMultiBar, VScale, VStack, Variable, VerticalDel, VerticalTo, abs, add, aspect_invariant, ceil, cos, cumsum, demangle, enumerate, exp, floor, grid, gums, gzip, hex2rgb, injectImage, injectImages, injectScripts, interpolateHex, interpolateVectors, interpolateVectorsPallet, lingrid, linspace, log, make_ticklabel, mako, max, min, mul, norm, pad_rect, parseGum, phi, pi, pos_rect, pow, props_repr, r2d, rad_rect, random, random_gaussian, random_uniform, range, renderGum, repeat, rgb2hex, rgb2hsl, round, rounder, setTextSizer, sin, split, sqrt, zip }; +export { Anchor, Animation, ArcDel, ArcTo, Arrow, Arrowhead, Axis, Bar, BarPlot, Bars, Bezier2, Bezier2Line, Bezier2Path, Bezier3, Bezier3Line, Circle, ClosePath, Container, Context, Dot, Edge, Element, Ellipse, Field, Frame, Graph, Grid, Group, Gum, HAxis, HBar, HBars, HLabels, HLine, HMultiBar, HScale, HStack, HorizontalDel, HorizontalTo, Interactive, Labels, Legend, Line, LineTo, List, MoveTo, Network, Node, Note, Path, Place, Plot, Polygon, Polyline, Ray, Rect, Rotate, SVG, Scale, Scatter, Slider, Spacer, Square, SymField, SymFill, SymPath, SymPoints, SymPoly, Tex, Text, Toggle, VAxis, VBar, VBars, VLabels, VLine, VMultiBar, VScale, VStack, Variable, VerticalDel, VerticalTo, abs, add, aspect_invariant, ceil, cos, cumsum, demangle, enumerate, exp, floor, grid, gums, gzip, hex2rgb, injectImage, injectImages, injectScripts, interpolateHex, interpolateVectors, interpolateVectorsPallet, lingrid, linspace, log, make_ticklabel, mako, max, min, mul, norm, pad_rect, parseGum, phi, pi, pos_rect, pow, props_repr, r2d, rad_rect, random, random_gaussian, random_uniform, range, renderGum, repeat, rgb2hex, rgb2hsl, round, rounder, setTextSizer, sin, split, sqrt, zip }; diff --git a/js/editor.js b/js/editor.js index 10fb868..a0353b8 100644 --- a/js/editor.js +++ b/js/editor.js @@ -5,7 +5,7 @@ import { syntaxHighlighting, defaultHighlightStyle, bracketMatching } from '@cod import { javascript } from '@codemirror/lang-javascript' import { xml } from '@codemirror/lang-xml' -import { SVG, Element, InterActive, Animation, parseGum } from './gum.js' +import { SVG, Element, Interactive, Animation, parseGum } from './gum.js' // svg presets let prec = 2; @@ -138,7 +138,7 @@ class GumEditor { renderGum(out) { if (this.inter != null) { this.inter.innerHTML = ''; - if (out instanceof InterActive || out instanceof Animation) { + if (out instanceof Interactive || out instanceof Animation) { let anchors = out.createAnchors(this.disp); out = out.create(this.disp); this.inter.append(...anchors); diff --git a/js/gum.js b/js/gum.js index 4edd97e..6c4c534 100644 --- a/js/gum.js +++ b/js/gum.js @@ -330,7 +330,7 @@ let r2d = new NamedNumber('r2d', 180/Math.PI); let d2r = new NamedNumber('d2r', Math.PI/180); let blue = new NamedString('blue', '#1e88e5'); let red = new NamedString('red', '#ff0d57'); -// '#ff9800', '#4caf50', '#795548', '#9c27b0', '#00bcd4', '#607d8b' +let green = new NamedString('green', '#4caf50'); /** ** random number generation @@ -2167,7 +2167,7 @@ class SymPoints extends Container { [fs(x, y, t), rad_rect([x, y], fr(x, y, t))] ); - // pass to element + // pass to element let attr1 = {clip: false, ...attr}; super(children, attr1); } @@ -2794,9 +2794,11 @@ class BarPlot extends Plot { } } -//// INTERACTIVE +/** + ** Interactive + **/ -class InterActive { +class Interactive { constructor(vars, func) { this.gumify = func; this.vars = vars; @@ -2846,6 +2848,16 @@ class Variable { } } +function updateSliderValue(slider) { + let pos = (slider.value - slider.min) / (slider.max - slider.min); + let len = slider.getBoundingClientRect().width; + let lab = slider.parentNode.querySelector('.slider_thumb'); + let siz = lab.getBoundingClientRect().width; + let lef = (100*pos*(len-siz))/len; + lab.innerHTML = slider.value; + lab.style.left = `${lef}%`; +} + class Slider extends Variable { constructor(init, args) { let {min, max, step, ...attr} = args ?? {}; @@ -2888,18 +2900,28 @@ class Slider extends Variable { input.className = 'slider_input'; // set the CSS class input.id = `InterActive_${name}`; - slider.append(min_lim, input, max_lim); + let outer = document.createElement('div'); + outer.className = 'slider_outer'; + let track = document.createElement('div'); + track.className = 'slider_track'; + let thumb = document.createElement('div'); + thumb.className = 'slider_thumb'; + + outer.append(track, thumb); + slider.append(min_lim, input, max_lim, outer); cont.append(title, slider); // slider in cont in targ! + updateSliderValue(input); input.addEventListener('input', function() { - v.updateVal(this.value, ctx, redraw); + updateSliderValue(this); + let val = Number(this.value); + v.updateVal(val, ctx, redraw); }, false); return cont; } } - class Toggle extends Variable { constructor(init, args) { init = init == undefined ? true : init; @@ -2933,7 +2955,7 @@ class Toggle extends Variable { v.updateVal(this.checked, ctx, redraw); }, false); - return cont + return cont; } } @@ -2943,7 +2965,7 @@ class List extends Variable { args.choices = args.choices ?? {}; if (args.choices instanceof Array) { - args.choices = args.choices.reduce((a, v) => ({ ...a, [v]: v}), {}) + args.choices = args.choices.reduce((a, v) => ({ ...a, [v]: v}), {}); } super(init, args); @@ -2966,17 +2988,15 @@ class List extends Variable { let opts = document.createElement('div'); opts.className = 'custom-options'; - wrap.appendChild(source).append(trigger, opts); Object.entries(v.attr.choices).forEach(([label, value]) => { - - let o = document.createElement('div'); - o.className = 'custom-option'; - o.innerHTML = label; - o.setAttribute('data-value', value); - opts.append(o); - o.addEventListener('click', function() { + let o = document.createElement('div'); + o.className = 'custom-option'; + o.innerHTML = label; + o.setAttribute('data-value', value); + opts.append(o); + o.addEventListener('click', function() { let opt = this.closest('.custom-select') let opt_txt = this.textContent; let opt_val = this.getAttribute('data-value'); @@ -2986,7 +3006,6 @@ class List extends Variable { }, false); }); - let cont = document.createElement('div'); cont.className = 'var_cont list_cont'; @@ -3001,14 +3020,16 @@ class List extends Variable { cont.append(title, list); // slider in cont in targ! list.querySelector('.custom-select-trigger').addEventListener('click', function() { - this.parentElement.classList.toggle("opened"); - }, false); + this.parentElement.classList.toggle('opened'); + }, false); - return cont + return cont; } } -//// Animation +/** + ** Animation + **/ class Animation { //vars must be numeric @@ -3111,7 +3132,7 @@ class Animation { **/ let Gum = [ - Context, Element, Container, Group, SVG, Frame, VStack, HStack, Place, Rotate, Anchor, Scatter, Spacer, Ray, Line, HLine, VLine, Rect, Square, Ellipse, Circle, Dot, Polyline, Polygon, Path, Arrowhead, Text, Tex, Node, MoveTo, LineTo, VerticalTo, VerticalDel, HorizontalTo, HorizontalDel, Bezier2, Bezier3, ArcTo, ArcDel, Bezier2Path, Bezier2Line, Bezier3Line, Arrow, Field, SymField, Edge, Network, ClosePath, SymPath, SymFill, SymPoly, SymPoints, Bar, VBar, HBar, VMultiBar, HMultiBar, Bars, VBars, HBars, Scale, VScale, HScale, Labels, VLabels, HLabels, Axis, HAxis, VAxis, Grid, Graph, Plot, BarPlot, Legend, Note, InterActive, Variable, Slider, Toggle, List, Animation, range, linspace, enumerate, repeat, grid, lingrid, split, hex2rgb, rgb2hex, rgb2hsl, interpolateVectors, interpolateHex, interpolateVectorsPallet, gzip, zip, pos_rect, pad_rect, rad_rect, exp, log, sin, cos, min, max, abs, pow, sqrt, floor, ceil, round, norm, add, mul, pi, phi, r2d, rounder, make_ticklabel, aspect_invariant, random, random_uniform, random_gaussian, cumsum, red, blue + Context, Element, Container, Group, SVG, Frame, VStack, HStack, Place, Rotate, Anchor, Scatter, Spacer, Ray, Line, HLine, VLine, Rect, Square, Ellipse, Circle, Dot, Polyline, Polygon, Path, Arrowhead, Text, Tex, Node, MoveTo, LineTo, VerticalTo, VerticalDel, HorizontalTo, HorizontalDel, Bezier2, Bezier3, ArcTo, ArcDel, Bezier2Path, Bezier2Line, Bezier3Line, Arrow, Field, SymField, Edge, Network, ClosePath, SymPath, SymFill, SymPoly, SymPoints, Bar, VBar, HBar, VMultiBar, HMultiBar, Bars, VBars, HBars, Scale, VScale, HScale, Labels, VLabels, HLabels, Axis, HAxis, VAxis, Grid, Graph, Plot, BarPlot, Legend, Note, Interactive, Variable, Slider, Toggle, List, Animation, range, linspace, enumerate, repeat, grid, lingrid, split, hex2rgb, rgb2hex, rgb2hsl, interpolateVectors, interpolateHex, interpolateVectorsPallet, gzip, zip, pos_rect, pad_rect, rad_rect, exp, log, sin, cos, min, max, abs, pow, sqrt, floor, ceil, round, norm, add, mul, pi, phi, r2d, rounder, make_ticklabel, aspect_invariant, random, random_uniform, random_gaussian, cumsum, blue, red, green ]; // detect object types @@ -3220,5 +3241,5 @@ function injectImages(elem) { **/ export { - Gum, Context, Element, Container, Group, SVG, Frame, VStack, HStack, Place, Rotate, Anchor, Scatter, Spacer, Ray, Line, HLine, VLine, Rect, Square, Ellipse, Circle, Dot, Polyline, Polygon, Path, Arrowhead, Text, Tex, Node, MoveTo, LineTo, VerticalTo, VerticalDel, HorizontalTo, HorizontalDel, Bezier2, Bezier3, ArcTo, ArcDel, Bezier2Path, Bezier2Line, Bezier3Line, Arrow, Field, SymField, Edge, Network, ClosePath, SymPath, SymFill, SymPoly, SymPoints, Bar, VBar, HBar, VMultiBar, HMultiBar, Bars, VBars, HBars, Scale, VScale, HScale, Labels, VLabels, HLabels, Axis, HAxis, VAxis, Grid, Graph, Plot, BarPlot, Legend, Note, InterActive, Variable, Slider, Toggle, List, Animation, gzip, zip, pos_rect, pad_rect, rad_rect, demangle, props_repr, range, linspace, enumerate, repeat, grid, lingrid, split, hex2rgb, rgb2hex, rgb2hsl, interpolateVectors, interpolateHex, interpolateVectorsPallet, exp, log, sin, cos, min, max, abs, pow, sqrt, floor, ceil, round, norm, add, mul, pi, phi, r2d, rounder, make_ticklabel, parseGum, renderGum, gums, mako, setTextSizer, injectImage, injectImages, injectScripts, aspect_invariant, random, random_uniform, random_gaussian, cumsum + Gum, Context, Element, Container, Group, SVG, Frame, VStack, HStack, Place, Rotate, Anchor, Scatter, Spacer, Ray, Line, HLine, VLine, Rect, Square, Ellipse, Circle, Dot, Polyline, Polygon, Path, Arrowhead, Text, Tex, Node, MoveTo, LineTo, VerticalTo, VerticalDel, HorizontalTo, HorizontalDel, Bezier2, Bezier3, ArcTo, ArcDel, Bezier2Path, Bezier2Line, Bezier3Line, Arrow, Field, SymField, Edge, Network, ClosePath, SymPath, SymFill, SymPoly, SymPoints, Bar, VBar, HBar, VMultiBar, HMultiBar, Bars, VBars, HBars, Scale, VScale, HScale, Labels, VLabels, HLabels, Axis, HAxis, VAxis, Grid, Graph, Plot, BarPlot, Legend, Note, Interactive, Variable, Slider, Toggle, List, Animation, gzip, zip, pos_rect, pad_rect, rad_rect, demangle, props_repr, range, linspace, enumerate, repeat, grid, lingrid, split, hex2rgb, rgb2hex, rgb2hsl, interpolateVectors, interpolateHex, interpolateVectorsPallet, exp, log, sin, cos, min, max, abs, pow, sqrt, floor, ceil, round, norm, add, mul, pi, phi, r2d, rounder, make_ticklabel, parseGum, renderGum, gums, mako, setTextSizer, injectImage, injectImages, injectScripts, aspect_invariant, random, random_uniform, random_gaussian, cumsum }; diff --git a/test/golf.js b/test/golf.js index 6c5c950..ac4baba 100644 --- a/test/golf.js +++ b/test/golf.js @@ -136,7 +136,7 @@ let f = Frame(p, {padding: [0.15, 0.05, 0.05, 0.15]}); return f; // interactive opacity -let i = new InterActive( +let i = new Interactive( { x: new Slider(50, {max: 100, title: 'Opacity'}), y: new Slider(50, {max: 100, title: 'Width'}) @@ -252,10 +252,26 @@ function update(vars) { return Frame(p, {padding: 0.15}); } -return InterActive({ +return Interactive({ a: new Slider(50, {min:10, max: 100, title: 'a: y = ax + (1-a)z'}) }, update); +/// zoink factor + +return Interactive({ + z: Slider(0, {min: 0, max: 1, step: 0.01, title:' Zoink Factor'}), + c: Toggle(true, {title: 'Align Line'}) +}, ({ z, c }) => { + let rads = (2*pi)*z; + let perp = c ? 90 : 0; + let angl = Math.atan(cos(-rads)); + let path = SymPath({fy: sin, xlim: [0, 2*pi]}); + let pill = VStack([Rect({fill: blue, aspect: 1}), Rect({fill: red, aspect: 1})]); + let box = Place(pill, {pos: [rads, sin(rads)], rad: 0.3, rotate: perp-r2d*angl, invar: true}); + let plot = Graph([path, box], {xlim: [0, 2*pi], ylim: [-1, 1]}); + let frame = Frame(plot, {margin: [0.2, 0.25]}); + return frame; +}); /// CHECK MARK @@ -268,7 +284,7 @@ function guu(vars) { return Frame(n2, {margin: margin/100}); } -return InterActive({ +return Interactive({ a: Toggle(true, {title: 'Toggle checked/unchecked'}), b: Slider(50, {min: 0, max: 100, title: 'Frame margin'}) }, guu); @@ -281,7 +297,7 @@ function guu(vars){ return Rect({stroke:'none', fill:`hsl(180, ${x[0]}%, ${x[1]}%)`}) } -return InterActive({ +return Interactive({ x: Slider(50, {min: 0, max: 100, title: 'margin'}) }, guu); @@ -505,7 +521,7 @@ function guu(vars) { return f; } -return InterActive({ +return Interactive({ a: Slider(50, {min: 1, max: 100, title: 'x-dispersion'}), b: Slider(50, {min: 1, max: 100, title: 'y-dispersion'}), }, guu); @@ -518,7 +534,7 @@ b = BarPlot(d, {color:[[17, 100, 45],[78, 80, 45]]}) return Frame(b, {padding: [0.15, 0.05, 0.05, 0.15]}); } -return InterActive({ +return Interactive({ x: Slider(10, {min: 0, max: 20, title: 'b'}) }, guu); @@ -530,7 +546,7 @@ b = BarPlot(d, {color_by:[[17, 100, 45],[78, 80, 45]]}) return Frame(b, {padding: [0.15, 0.05, 0.05, 0.15]}); } -return InterActive({ +return Interactive({ x: Slider(10, {min: 0, max: 20, title: 'b'}) }, guu);