31:T50d,plot = { let fourPi = 4 * Math.PI; let sin = Math.sin; let cos = Math.cos; function lin(x) { return x / fourPi; } const facets = { fx: [sin, sin, lin, lin].slice(0,1), fy: [cos, lin, lin, cos].slice(0,1) }; return Plot.plot({ width: 440, height: 420, margin: 92, x: { domain: [0, 12.6] }, y: { domain: [0, 12.6] }, color: { type: "symlog", scheme: "RdPu" }, fx: { tickFormat: (f) => f?.name }, fy: { tickFormat: (f) => f?.name }, marks: [ Plot.contour({ fill: (x, y, { fx, fy }) => fx(x) * fy(y), ...facets, x1: 0, y1: 0, x2: fourPi, y2: fourPi, interval: 0.2 }), Plot.frame(), new Lens( array1.map(({ x, y, ...d },i) => ({ ...d, x: (0.5)*12,// - ((1-(loc[0]*2))*(1-((i %2)*2)))/2) * 12, y: (0.5)*12,// + ((1-(loc[1]*2))*(1-((i %2)*2)))/2) * 12, })), { ...facets, x: "x", y: "y", r, zoom: 2, focal: "f" } ), new Lens( array2.map(({ x, y, ...d }) => ({ ...d, x: 0.5 * 12, y: 0.5 * 12, })), { ...facets, x: "x", y: "y", r, zoom: 3, focal: "f", dx:-16, dy: 16 } ) /*Plot.frame()*/ ] }); } 32:T119d, 33:T58b,// Rewrite shape() ad class method once you have determined all necessary inputs createLens = function ({ uid, i, x, y, dx, dy, fx, fy, r, focal, zoom, clips, layer,dimensions,g }) { const lensId = `m${i}-lens-${uid}`; const clipId = `m${i}-lens-mask-${uid}`; const symbolId = `s${i}-lens-symbol-${uid}`; if(g) { return g } let clip = clips.querySelector(`#${clipId}`); if (!clip) { // Make symbol an optional function const symbol = htl.svg``; clip = htl.svg`${symbol}`; clips.append(clip); } // Inherit dx/dy in case of facet: "super" if (!x && dx) { x = dx; dx = 0; } if (!y && dy) { y = dy; dy = 0; } const { marginLeft, marginTop } = dimensions; return htl.svg` `; } 34:T535,// Rewrite shape() ad class method once you have determined all necessary inputs createLens2 = function ({ uid, i, x, y, dx, dy, fx, fy, r, focal, zoom, clips, layer,dimensions,g }) { const lensId = `m${i}-lens-${uid}`; const clipId = `m${i}-lens-mask-${uid}`; const symbolId = `s${i}-lens-symbol-${uid}`; if(g) { return g } let clip = clips.querySelector(`#${clipId}`); if (!clip) { // Make symbol an optional function const symbol = htl.svg``; clip = htl.svg`${symbol}`; clips.append(clip); } // Inherit dx/dy in case of facet: "super" if (!x && dx) { x = dx; dx = 0; } if (!y && dy) { y = dy; dy = 0; } const { marginLeft, marginTop } = dimensions; return htl.svg` `; } 35:T1996,class Lens extends Plot.Mark { static defaults = { ariaLabel: "lenses", stroke: "black", strokeWidth: 1 }; static customs = { createLens:createLens2, focal: 1, zoom: 2, r: 32 }; constructor(data, { createLens = Lens.customs.createLens , ...options } = {}) { const { x, y, dx, dy, r, zoom, focal, fx, fy } = options; const id = "#lens-" + crypto.randomUUID().slice(0, 8); const channels = { x: { value: x, scale: "x", optional: true }, y: { value: y, scale: "y", optional: true }, r: { value: r ?? Lens.customs.r, scale: "r", optional: true }, focal: { value: focal ?? Lens.customs.focal, scale: "opacity", optional: true } }; // Wire up the renderer to receive next() calls super(data, channels, {...options, render: Lens.prototype.render }, Lens.defaults); this.id = id; this.dx = dx ?? 0; this.dy = dy ?? 0; this.zoom = zoom; this.createLens = createLens.bind(this); this.init = true; } render(indices, scales, values, dimensions, ctx , next) { const ns = "http://www.w3.org/2000/svg"; const uid = this.id.split("-")[1]; // Get the current configuration values const { ownerSVGElement: svg } = ctx ?? { svg: null }; const { dx, dy, stroke, zoom } = this; const { x, y, r, focal, channels: src } = values; let g; if(typeof next === 'function') { g = next(...arguments) ; if(!svg.groups) { //svg.args = [] svg.groups = []; svg.offsets = []; //svg.updaters = []; } svg.groups.push(g); svg.offsets.push({dx,dy}) /* svg.updaters.push(next); svg.args.push({indices, scales, values, dimensions, ctx});*/ } if(!svg.update) { /*svg.update = (newValues) => { svg.updaters.forEach((next,i)=>{ let { indices, scales, values, dimensions, ctx } = svg.args[i] values = { ...values, //x: values.x.map(d=>scales.x((newValues[0])*12)), //y: values.y.map(d=>scales.y((newValues[1])*12)), x:values.x.map(d=>scales.x((0.5 + (((1-(newValues[0]*2))*(1-((i %2)*2)))/2)) * 12.67)), y:values.y.map(d=>scales.y((0.5 + (((1-(newValues[1]*2))*(1-((i %2)*2)))/2)) * 12.67)), }; let newNode = next(indices, scales, values, dimensions, ctx) svg.args[i] = {indices, scales, values, dimensions, ctx} deepUpdate(svg.groups[i],newNode, false); newNode.remove(); newNode = null; }) return newValues };*/ svg.update = (newValues) => { requestAnimationFrame(()=> svg.groups.forEach( (g,i)=>{ g.style.setProperty("--tx", svg.offsets[i].dx + scales.x((0.5 + (((1-(newValues[0]*2))*(1-((i %2)*2)))/2)) * 12.67) + "px"); g.style.setProperty("--ty", svg.offsets[i].dy + scales.y((0.5 + (((1-(newValues[1]*2))*(1-((i %2)*2)))/2)) * 12.67) + "px"); })) return newValues } } // Ensure a element exists in the SVG if(this.init === true) { let defs = svg.querySelector("defs"); if (!defs) { defs = document.createElementNS(ns, "defs"); svg.prepend(defs); } // To do: only setupMagnification on first render const { nth, layer } = this.setupMagnification(svg, ns, defs, uid) const clipsId = `m${nth}-lens-clips-${uid}`; let clips = svg.querySelector(`#m${nth - 1}-lens-clips-${uid}`); if (!clips) { clips = document.createElementNS(ns, "g"); clips.classList.add("lens-shape"); clips.setAttribute("id", clipsId); defs.append(clips); } this.layer = layer; this.clips = clips; this.init = false; } const lenses = [...indices].map((i) => { return this.createLens({ uid, i, x: x?.[i], y: y?.[i], dx: this.dx, dy: this.dy, fx: scales.fx(this.fx?.[i]) ?? 0, // scales.fx(indices.fx) fy: scales.fy(this.fy?.[i]) ?? 0, // scales.fy(indices.fy) r: src.r?.value[i], focal: focal[i], zoom, //defs, clips:this.clips, layer:this.layer, dimensions,g }) } ); return htl.svg`${lenses}`; } setupMagnification(svg, ns, defs, uid, next) { let cname = `lens-layer`; let dguid = `magnification-${uid}` let layers = svg.querySelectorAll(`.${cname}`); let nth = layers.length; let scope = `m${nth}-${dguid}`; let layer = svg.querySelector(`#m${nth - 1}-${dguid}`); if (!layer && layers.length > 0) { layer = document.createElementNS(ns, "g"); layer.classList.add(cname); layer.setAttribute("id", scope); let last = layers[layers.length - 1]; let skip = new Set( [...layers] .flatMap((l) => [...l.children]) .map((d) => d.getAttribute("href").slice(1)) ); const uses = this.createUseElements(svg, ns, uid, skip, last); // console.log(layers.length, uses); layer.append(...uses); last.append(uses[1]); // attach last lens to previous layer defs.append(layer); } if (!layer) { layer = document.createElementNS(ns, "g"); layer.classList.add(cname); layer.setAttribute("id", scope); const uses = this.createUseElements(svg, ns, uid); // console.log(layers.length, uses); layer.append(...uses); defs.append(layer); } return { nth, layer }; } createUseElements(svg, ns, uid, skip, last) { const marks = [...svg.querySelectorAll(":scope > g")]; return (skip ? [last].concat(marks) : marks) .map((g, i) => { const use = document.createElementNS(ns, "use"); if (skip && skip.has(g.getAttribute("id"))) { return; } let gid; // Reduce index by one in case of multiple lenses if (skip) { i = i - 1; } if (!g.hasAttribute("id") && g.hasAttribute("aria-label")) { gid = `g${i}-${g .getAttribute("aria-label") .replaceAll(" ", "-")}-${uid}`; g.setAttribute("id", gid); } else if (!g.hasAttribute("id")) { gid = `g${i}-${uid}`; g.setAttribute("id", gid); } else { gid = g.getAttribute("id"); } use.setAttribute("href", "#" + gid); return use; }) .filter((d) => d); } } 36:T426,function deepUpdate(oldNode, newNode, remove = false) { if ( oldNode.nodeType === Node.ELEMENT_NODE && newNode.nodeType === Node.ELEMENT_NODE ) { const newAttrs = new Map(); for (let i = 0; i < newNode.attributes.length; i++) { const attr = newNode.attributes[i]; newAttrs.set(attr.name, attr.value); } if (remove) { const attrsToRemove = []; for (let i = 0; i < oldNode.attributes.length; i++) { const attr = oldNode.attributes[i]; if (!newAttrs.has(attr.name)) { attrsToRemove.push(attr.name); } } for (const name of attrsToRemove) { oldNode.removeAttribute(name); } } newAttrs.forEach((value, name) => { if (oldNode.getAttribute(name) !== value) { oldNode.setAttribute(name, value); } }); } for (let i = 0; i < newNode.childNodes.length; i++) { // Assume structure is identical if (i < oldNode.childNodes.length) { deepUpdate(oldNode.childNodes[i], newNode.childNodes[i], remove); } } } 37:[] 2f:{"title":"Plot.lens prototype","cells":[{"id":0,"value":"# Plot.lens prototype\n## Proof of concept (unoptimised)","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"- `25-11-12` : ~~We are doing a lot of work between re-renders; use listeners and CSS property transforms instead~~\n - `25-11-12` : Implements (slightly obtuse) `next()` logic:\n - ~~Frequently calls `createLens` to copy new attributes to existing node~~\n - `25-11-13` : Now uses CSS properties instead\n- `25-11-12` : Displacement maps can be prebaked or omitted altogether\n- `25-11-12` : Lenses in the same layer do not refract (different layers do)\n- `25-11-12` : ~~Lens layers duplicated since implementing `next()` logic~~\n - `25-11-13` : Fixed with simple `this.init` check ","pinned":false,"hidden":false,"mode":"md"},{"id":1342,"value":"//plot.update([1-loc[0],loc[1]])\nplot.update([0.49+(Math.sin(now/950)/2),0.5+(Math.cos(now/1250)/2)]).map(d=>d.toFixed(2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"viewof loc = xySlider({width: \"100px\", height: \"100px\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"___","pinned":false,"hidden":false,"mode":"md"},{"id":944,"value":"array1 = Array.from({ length: 4 }, () => ({\n x: Math.random(),\n y: Math.random(),\n r: Math.random() * 48,\n f: 1 + Math.random() * 2\n}))\n\n/* array1.map(({ x, y, ...d },i) => ({\n ...d,\n x: (0.5)*12,// - ((1-(loc[0]*2))*(1-((i %2)*2)))/2) * 12,\n y: (0.5)*12,// + ((1-(loc[1]*2))*(1-((i %2)*2)))/2) * 12,\n })),*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"array2 = Array.from({ length: 4 }, () => ({\n x: Math.random(),\n y: Math.random(),\n r: Math.random() * 64,\n f: 1 + Math.random() * 2\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"r= 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"zoom = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":1008,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":1216,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1890,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":940,"value":"import {xySlider} from \"@mootari/2d-slider\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}