31:T4ae,md`# Living SVG Templates What happens when we blur the line between hand coded SVG and an interactive SVG authoring application? This notebook is an exploration of a space between, that marries the compactness and precision of code with the fluidity of the mouse to produce a workflow for producing high quality interactive SVG widgets. We formulate an interactive SVG as a mapping from a control vector to an annoted rendered artifact ${ tex`R:\ \mathbb{R}^n \to \mathcal{S} \times \mathbb{R}^{2m}, \quad q \mapsto \bigl(s(q),\ a(q)\bigr)` } where ${ tex`q \in \mathbb{R}^n` } is the parameter vector, ${ tex`s(q) \in \mathcal{S}` } is the rendered SVG, and ${ tex`a(q) = [a_1(q),\ldots,a_m(q)] \in \mathbb{R}^{2m}` } is the stacked 2-D anchor positions. You write the just the **forward** direction in code, parameters → shape + anchors. A numerical solver figures out the **backward** direction automatically, how the movement of anchors affects the parameter updates, which in turn redraws the SVG. Try the robot arm below — drag any joint or the end effector. **Shift+click** to lock an anchor in place. On a touchscreen, use **multi-touch** to drag several anchors simultaneously.`32:T1769,robotArm = { const L1 = 100, L2 = 80, L3 = 60; const ox = 200, oy = 300; const r1 = theta1 * Math.PI / 180; const r2 = r1 + theta2 * Math.PI / 180; const r3 = r2 + theta3 * Math.PI / 180; const j1x = ox + L1 * Math.cos(r1); const j1y = oy - L1 * Math.sin(r1); const j2x = j1x + L2 * Math.cos(r2); const j2y = j1y - L2 * Math.sin(r2); const ex = j2x + L3 * Math.cos(r3); const ey = j2y - L3 * Math.sin(r3); return htl.svg``; }33:T603,md`### How the Inverse Kinematics works The handwritten code contains reactive dependancies to upstream parameters. The reactive runtime will recompute the SVG when the parameters change, hence you can move the parameters directly and the SVG updates. When you drang an anchor, somehow the parameters change to try to mirror the movement in anchor space, that is inverse kinematics. The code defines a function from parameter space to anchor space -- thats the forward dynamics. When we want go the other way, that is the inverse. To compute the inverse we exploit some of the features of the Observable Reactive Runtime dependancy graph. We extract the full function as a pure function of parameters to SVG, called the renderProbe, and then perform finite different in parameter space. The finite differents works by purturbing the n parameters and measuring the effect on the m parameters. This essentially differentiates all the n by the m, forming a rectangular matrix called the Jacobian, which is a linearization of the system at its current state. The Jacobian describes how movement of the parameters affects the anchors, and importantly, its a linear matrix which can be effeciently inverted with Linear Algebra. By inverting we can calculate the right mix of parameter changes to change the anchors to mirror a drag we might make. There are some more details, there might be more than one solution, so we add an error term to prefer solutions that minimize total parameter movements and that match the anchor change best. `34:T111c,mySvg = { const ax = aCx - aSize / 2, ay = aCy - aSize / 2; const bx = Math.min(bX1, bX2), by = Math.min(bY1, bY2); const bw = Math.abs(bX2 - bX1), bh = Math.abs(bY2 - bY1); const aEnv = { x: 40, y: 100, w: 200, h: 240 }; const bCorner1 = { x: 240, y: 110, w: 100, h: 130 }; const bCorner2 = { x: 320, y: 200, w: 120, h: 130 }; const cEnv = { x: 30, y: 5, w: 420, h: 90 }; return htl.svg``; }35:T11eb,vector = function vector(extent = [ 0, 1 ], {label = '', step, value, dimensions = 3, height = 120, variate = false} = {}) { const [min, max] = extent; if (step === undefined) step = max - min <= 2 ? 0.01 : 1; const mid = (min + max) / 2; let dims = Array.isArray(value) ? value.slice() : Array.from({ length: dimensions }, () => mid); let columns; const makeCol = (v, i) => { const range = Object.assign(document.createElement('input'), { type: 'range', min, max, step, value: v, style: 'writing-mode:vertical-lr; direction:rtl; height:' + height + 'px; width:16px; margin:0; cursor:pointer;' }); const num = Object.assign(document.createElement('input'), { type: 'number', min, max, step, value: v, style: 'width:42px; font:11px/1.2 var(--sans-serif,system-ui); text-align:center; border:1px solid #ccc; border-radius:3px; padding:1px 2px; font-variant-numeric:tabular-nums;' }); const lbl = document.createElement('span'); lbl.style.cssText = 'font:11px/1 var(--sans-serif,system-ui); color:#666;'; lbl.textContent = String(i); range.oninput = () => { num.value = range.value; col.dispatchEvent(new Event('input', { bubbles: true })); }; num.oninput = () => { range.value = num.value; col.dispatchEvent(new Event('input', { bubbles: true })); }; const col = document.createElement('div'); col.style.cssText = 'display:flex; flex-direction:column; align-items:center; gap:2px;'; col.appendChild(lbl); col.appendChild(range); col.appendChild(num); Object.defineProperty(col, 'value', { get: () => +range.value, set: v => { range.value = v; num.value = v; } }); return col; }; function build() { columns = dims.map((v, i) => makeCol(v, i)); const sliderRow = document.createElement('div'); sliderRow.style.cssText = 'display:flex; gap:4px; align-items:flex-start;'; columns.forEach(c => sliderRow.appendChild(c)); let btns = null; if (variate) { const addBtn = document.createElement('button'); addBtn.style.cssText = 'font:11px/1 var(--sans-serif); padding:2px 6px; cursor:pointer; border:1px solid #ccc; border-radius:3px; background:#fff;'; addBtn.textContent = '+'; const removeBtn = document.createElement('button'); removeBtn.style.cssText = 'font:11px/1 var(--sans-serif); padding:2px 6px; cursor:pointer; border:1px solid #ccc; border-radius:3px; background:#fff;'; removeBtn.textContent = '\u2212'; addBtn.onclick = () => { dims.push(mid); rebuild(); }; removeBtn.onclick = () => { if (dims.length > 1) { dims.pop(); rebuild(); } }; btns = document.createElement('div'); btns.style.cssText = 'display:flex; gap:3px; margin-top:4px;'; btns.appendChild(addBtn); btns.appendChild(removeBtn); } return { sliderRow, btns }; } const form = document.createElement('form'); form.style.cssText = 'font:13px/1.2 var(--sans-serif,system-ui); margin:0;'; if (label) { const lbl = document.createElement('label'); lbl.style.cssText = 'display:block; font-weight:700; font-size:0.75rem; margin-bottom:2px;'; lbl.textContent = label; form.appendChild(lbl); } form.addEventListener('submit', e => e.preventDefault()); Object.defineProperty(form, 'value', { get: () => dims, set: vals => { if (Array.isArray(vals)) { if (vals.length !== dims.length) { dims = vals.slice(); rebuild(); } else { vals.forEach((v, i) => { if (columns[i]) columns[i].value = v; }); dims = columns.map(c => c.value); } } } }); form.addEventListener('input', () => { dims = columns.map(c => c.value); }); function rebuild() { const val = dims.slice(); const {sliderRow, btns} = build(); const labelEl = form.querySelector('label'); while (form.lastChild && form.lastChild !== labelEl) form.removeChild(form.lastChild); form.appendChild(sliderRow); if (btns) form.appendChild(btns); columns.forEach((c, i) => { if (val[i] != null) c.value = val[i]; }); dims = columns.map(c => c.value); form.dispatchEvent(new Event('input', { bubbles: true })); } const {sliderRow, btns} = build(); form.appendChild(sliderRow); if (btns) form.appendChild(btns); return form; }36:T860,bezierSvg = { const b = (t, p0, p1, p2, p3) => { const u = 1 - t; return u * u * u * p0 + 3 * u * u * t * p1 + 3 * u * t * t * p2 + t * t * t * p3; }; const [p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y] = bezierPts; const samples = Array.from({ length: bezierSamples }, (_, i) => (i + 1) / (bezierSamples + 1)); const onCurve = samples.map(t => ({ x: b(t, p0x, p1x, p2x, p3x), y: b(t, p0y, p1y, p2y, p3y), t })); return htl.svg``; }37:T1371,treeSvg = { const w = 400, h = 400; const angles = branchAngles; const maxDepth = angles.length; const decay = lengthDecay; const trunk = trunkLength; const thick = branchThickness; const t = Math.min(1, Math.max(0, (thick - 1) / 49)); const lerp = (a, b) => a + (b - a) * t; const rgb = (c1, c2) => `rgb(${ Math.round(lerp(c1[0], c2[0])) },${ Math.round(lerp(c1[1], c2[1])) },${ Math.round(lerp(c1[2], c2[2])) })`; const skyTop = rgb([ 135, 206, 235 ], [ 6, 8, 28 ]); const skyMid = rgb([ 195, 225, 245 ], [ 20, 26, 60 ]); const skyBot = rgb([ 235, 245, 255 ], [ 42, 48, 92 ]); const ground = rgb([ 74, 48, 32 ], [ 14, 10, 22 ]); const trunkCol = rgb([ 58, 37, 21 ], [ 22, 14, 26 ]); const leafCol = rgb([ 102, 176, 68 ], [ 38, 72, 60 ]); const tipCol = rgb([ 123, 196, 88 ], [ 58, 112, 84 ]); const horizon = h - 35; const arcCx = w / 2; const arcCy = horizon; const arcR = w * 0.42; const sunAngle = Math.PI / 2 + t * Math.PI; const moonAngle = sunAngle + Math.PI; const sunX = arcCx - arcR * Math.cos(sunAngle); const sunY = arcCy - arcR * Math.sin(sunAngle); const moonX = arcCx - arcR * Math.cos(moonAngle); const moonY = arcCy - arcR * Math.sin(moonAngle); const moonOp = t.toFixed(3); const stars = Array.from({ length: 45 }, (_, i) => { const x = (i * 53 + 17) % w; const y = (i * 29 + 7) % (h - 80); const r = 0.4 + i * 7 % 3 * 0.35; const tw = 0.55 + i * 11 % 5 * 0.09; return { x, y, r, tw }; }); const segments = []; const tips = []; const joints = []; function branch(x, y, angle, depth, len) { const rad = angle * Math.PI / 180; const x2 = x + Math.cos(rad) * len; const y2 = y - Math.sin(rad) * len; const sw = Math.max(0.5, thick * Math.pow(decay, depth)); segments.push({ x1: x, y1: y, x2, y2, sw }); if (depth >= maxDepth) { tips.push({ x: x2, y: y2, i: tips.length }); return; } joints.push({ x: x2, y: y2, i: joints.length }); const a = angles[depth]; branch(x2, y2, angle + a, depth + 1, len * decay); branch(x2, y2, angle - a, depth + 1, len * decay); } const baseX = w / 2, baseY = h - 30; branch(baseX, baseY, 90, 0, trunk); const thickAnchorX = baseX + thick * 3; const thickAnchorY = baseY; return htl.svg``; }38:T6c3,treeKKTProse = md`#### Behind the scenes: **Karush–Kuhn–Tucker** hard-lock solver This example is only usable because of a change to how the solver treats **locked anchors** (shift+click on a joint). In an earlier version the locks were a **soft penalty**: every lock contributed two rows to the least-squares system with a large weight (20×). When you dragged a leaf, the solver would compromise, letting the lock drift slightly *and* under-shooting the drag target, because pure vertical leaf motion wasn't fully achievable while approximately keeping the lock. The drag felt sticky, and parameters below the lock (like the deepest branch angle) barely moved. The new solver treats locks as a **hard equality constraint**. Drags and other soft targets go into ${ tex`A\delta p \approx b` }; every lock row goes into ${ tex`C\delta p = 0` }. The combined problem ${ tex.block`\min_{\delta p}\|A\delta p - b\|^2 + \lambda\|\delta p\|^2 \quad \text{s.t.}\quad C\delta p = 0` } is solved in one step by the **KKT system** ${ tex.block`\begin{bmatrix}H + \lambda I & C^\top \\ C & 0\end{bmatrix}\begin{bmatrix}\delta p \\ \mu\end{bmatrix} = \begin{bmatrix}A^\top b \\ 0\end{bmatrix}` } where ${ tex`H = A^\top A` } and ${ tex`\mu` } are the Lagrange multipliers — the "forces" needed to keep the locks pinned. The solver finds the smallest ${ tex`\delta p` } that satisfies the locks *exactly* and fits the drag as well as the remaining subspace allows. Concretely: fix a joint mid-tree and drag a deep leaf. The upper branch angles are frozen by the constraint (they'd move the locked joint), so the solver burns down through the remaining DOF — the angles *below* the lock — to bring the leaf toward your cursor.`39:Te8c,fourBarLinkage = { const L1 = 80; // crank const L2 = 160; // coupler const L3 = 120; // rocker const ax = 100, ay = 250; // fixed pivot A const dx = ax + groundWidth, dy = 250; // fixed pivot D const rad = crankAngle * Math.PI / 180; const bx = ax + L1 * Math.cos(rad); const by = ay - L1 * Math.sin(rad); // Circle-circle intersection to find C const bdx = dx - bx, bdy = dy - by; const dist = Math.sqrt(bdx * bdx + bdy * bdy); const d = Math.min(dist, L2 + L3 - 0.1); const ux = bdx / (dist || 1), uy = bdy / (dist || 1); const a2 = (L2 * L2 - L3 * L3 + d * d) / (2 * d); const h2 = L2 * L2 - a2 * a2; const h = Math.sqrt(Math.max(0, h2)); const mx = bx + ux * a2, my = by + uy * a2; const cx = mx + -uy * h, cy = my + ux * h; // Coupler point P const px = (bx + cx) / 2 + -(cy - by) * 0.3; const py = (by + cy) / 2 + (cx - bx) * 0.3; return htl.svg``; }3a:T8a0,svgEditor = (opts = {}) => { const { target, module = null, autoDispose = false, invalidation: callerInvalidation = null, ...extraArgs } = opts; let dispose = null; let settled = false; const p = new Promise((resolve, reject) => { try { dispose = cloneViaSandbox(svgEditor_template, name => { if (name === 'viewof svgTargetName') { return { fulfilled: el => { try { el.value = target; el.dispatchEvent(new Event('input', { bubbles: true })); } catch { } } }; } if (name === 'viewof svgTargetModule') { return { fulfilled: el => { try { if (module != null) { el.value = module; el.dispatchEvent(new Event('input', { bubbles: true })); } } catch { } } }; } if (name === 'viewof svgEditorArgs') { return { fulfilled: el => { try { el.value = { invalidation: callerInvalidation, ...extraArgs }; el.dispatchEvent(new Event('input', { bubbles: true })); } catch { } } }; } if (name === 'svgEditorController') { return { fulfilled: v => { if (settled) return; settled = true; resolve(v); }, error: e => { if (settled) return; settled = true; reject(e); } }; } return null; }); if (callerInvalidation) { Promise.resolve(callerInvalidation).then(() => { try { dispose?.(); } finally { dispose = null; } }); } } catch (e) { settled = true; reject(e); } }); p.dispose = () => { try { dispose?.(); } finally { dispose = null; } }; return p; }3b:T670,resolveSvgRenderArgs = { return async (overrides = {}) => { const m = svgTemplateVariable._module; const hasOwn = (o, k) => Object.prototype.hasOwnProperty.call(o, k); // Unflatten compound overrides (bezierX:0 -> bezierX[0]) const unflat = {}; for (const [k, v] of Object.entries(overrides)) { const ci = k.lastIndexOf(':'); if (ci > 0 && !isNaN(+k.slice(ci + 1))) { const baseName = k.slice(0, ci); const idx = +k.slice(ci + 1); if (!unflat[baseName]) unflat[baseName] = null; // mark for unflattening if (!Array.isArray(unflat[baseName])) { // Get current array value as base const baseVar = m._scope.get(baseName) ?? m._runtime?._builtin?._scope?.get?.(baseName); const baseVal = baseVar?._value; unflat[baseName] = Array.isArray(baseVal) ? baseVal.slice() : []; } unflat[baseName][idx] = v; } else { unflat[k] = v; } } const merged = { ...unflat }; const resolveName = name => { if (hasOwn(merged, name)) return merged[name]; const v = m._scope.get(name) ?? m._runtime?._builtin?._scope?.get?.(name); if (v && v._value !== undefined) return v._value; if (v && v._promise && typeof v._promise.then === 'function') return v._promise; const g = m._runtime?._global?.(name); if (g !== undefined) return g; throw new Error(`cannot resolve dependency "${ name }"`); }; const values = []; for (const name of svgInputNames) values.push(await resolveName(name)); return values; }; }3c:T189d,pseudoInverseStepMxN = (A, b, opts = {}) => { const m = Array.isArray(A) ? A.length : 0; const n = m ? A[0]?.length ?? 0 : 0; if (!m || !n) return new Array(n).fill(0); if (!Array.isArray(b) || b.length !== m) return new Array(n).fill(0); const method = opts.method ?? inverseConfig.method; const damping = Number.isFinite(+opts.damping) ? +opts.damping : +inverseConfig.damping; const alpha = Number.isFinite(+opts.alpha) ? +opts.alpha : +inverseConfig.alpha; const l1Weight = Number.isFinite(+opts.l1Weight) ? +opts.l1Weight : +inverseConfig.l1Weight; const dotCol = (i, vec) => { let s = 0; for (let r = 0; r < m; r++) { const ari = +A[r][i]; const vr = +vec[r]; if (Number.isFinite(ari) && Number.isFinite(vr)) s += ari * vr; } return s; }; const colNorm2 = i => { let s = 0; for (let r = 0; r < m; r++) { const ari = +A[r][i]; if (Number.isFinite(ari)) s += ari * ari; } return s; }; const solveGaussian = (M, y) => { const nn = M.length; const a = M.map(row => row.slice()); const b2 = y.slice(); for (let k = 0; k < nn; k++) { let piv = k; let best = Math.abs(a[k][k]); for (let i = k + 1; i < nn; i++) { const v = Math.abs(a[i][k]); if (v > best) { best = v; piv = i; } } if (!Number.isFinite(best) || best < 1e-24) return null; if (piv !== k) { [a[k], a[piv]] = [ a[piv], a[k] ]; [b2[k], b2[piv]] = [ b2[piv], b2[k] ]; } const akk = a[k][k]; for (let i = k + 1; i < nn; i++) { const f = a[i][k] / akk; if (!Number.isFinite(f)) return null; b2[i] -= f * b2[k]; for (let j = k; j < nn; j++) a[i][j] -= f * a[k][j]; } } const x = new Array(nn).fill(0); for (let i = nn - 1; i >= 0; i--) { let s = b2[i]; for (let j = i + 1; j < nn; j++) s -= a[i][j] * x[j]; const aii = a[i][i]; if (!Number.isFinite(aii) || Math.abs(aii) < 1e-24) return null; x[i] = s / aii; if (!Number.isFinite(x[i])) return null; } return x; }; const Atb = new Array(n).fill(0); const AtA = Array.from({ length: n }, () => new Array(n).fill(0)); for (let r = 0; r < m; r++) { const br = +b[r]; if (!Number.isFinite(br)) continue; const row = A[r]; for (let i = 0; i < n; i++) { const ari = +row[i]; if (!Number.isFinite(ari)) continue; Atb[i] += ari * br; for (let j = i; j < n; j++) { const arj = +row[j]; if (!Number.isFinite(arj)) continue; AtA[i][j] += ari * arj; } } } for (let i = 0; i < n; i++) for (let j = 0; j < i; j++) AtA[i][j] = AtA[j][i]; if (method === 'Jacobian transpose') { const dp = new Array(n); for (let i = 0; i < n; i++) dp[i] = alpha * (+Atb[i] || 0); return dp; } const residualNorm = x => { let s2 = 0; for (let r = 0; r < m; r++) { let pr = 0; const row = A[r]; for (let i = 0; i < n; i++) pr += (+row[i] || 0) * (+x[i] || 0); const dr = pr - (+b[r] || 0); s2 += dr * dr; } return Math.sqrt(s2); }; const sparse1 = () => { let best = null; const lam = Math.max(0, l1Weight); const damp = Math.max(damping, 1e-15); for (let i = 0; i < n; i++) { const denom = colNorm2(i) + damp; if (!(denom > 0) || !Number.isFinite(denom)) continue; const num = dotCol(i, b); const x = num / denom; if (!Number.isFinite(x)) continue; let s2 = 0; for (let r = 0; r < m; r++) { const ari = +A[r][i]; const dr = (Number.isFinite(ari) ? ari * x : 0) - (+b[r] || 0); s2 += dr * dr; } const residual = Math.sqrt(s2); const cost = residual + lam * Math.abs(x); if (!best || cost < best.cost) best = { i, x, cost }; } const dp = new Array(n).fill(0); if (best) dp[best.i] = best.x; return dp; }; const sparse2 = () => { const lam = Math.max(0, l1Weight); const damp = Math.max(damping, 1e-15); let best = null; for (let i = 0; i < n; i++) { const c00 = colNorm2(i) + damp; if (!(c00 > 0) || !Number.isFinite(c00)) continue; const d0 = dotCol(i, b); for (let j = i + 1; j < n; j++) { const c11 = colNorm2(j) + damp; if (!(c11 > 0) || !Number.isFinite(c11)) continue; let c01 = 0; for (let r = 0; r < m; r++) { const ai = +A[r][i], aj = +A[r][j]; if (Number.isFinite(ai) && Number.isFinite(aj)) c01 += ai * aj; } const d1 = dotCol(j, b); const det = c00 * c11 - c01 * c01; if (!Number.isFinite(det) || Math.abs(det) < 1e-24) continue; const x0 = (d0 * c11 - c01 * d1) / det; const x1 = (c00 * d1 - d0 * c01) / det; if (!Number.isFinite(x0) || !Number.isFinite(x1)) continue; let s2 = 0; for (let r = 0; r < m; r++) { const ai = +A[r][i], aj = +A[r][j]; const pr = (Number.isFinite(ai) ? ai * x0 : 0) + (Number.isFinite(aj) ? aj * x1 : 0); const dr = pr - (+b[r] || 0); s2 += dr * dr; } const residual = Math.sqrt(s2); const cost = residual + lam * (Math.abs(x0) + Math.abs(x1)); if (!best || cost < best.cost) best = { i, j, x0, x1, cost }; } } if (!best) return sparse1(); const dp = new Array(n).fill(0); dp[best.i] = best.x0; dp[best.j] = best.x1; return dp; }; if (method === 'Sparse (1 param)') return sparse1(); if (method === 'Sparse (2 params)') return sparse2(); const tr = AtA.reduce((s, row, i) => s + (+row[i] || 0), 0); const lambda = Math.max(damping, 1e-15) * ((Number.isFinite(tr) ? tr : 0) + 1); for (let i = 0; i < n; i++) AtA[i][i] += lambda; const dp = solveGaussian(AtA, Atb); if (dp) return dp; return new Array(n).fill(0); }3d:T400,svgEditor_getSvgNumericWidthHeight = svg => { const num = (animatedLength, attr) => { const v = animatedLength?.baseVal?.value; if (Number.isFinite(v)) return v; const a = attr == null ? NaN : +attr; return Number.isFinite(a) ? a : NaN; }; let w = num(svg?.width, svg?.getAttribute?.('width')); let h = num(svg?.height, svg?.getAttribute?.('height')); if (!Number.isFinite(w) || !Number.isFinite(h)) { const vb = (svg?.getAttribute?.('viewBox') || '').trim(); if (vb) { const parts = vb.split(/[\s,]+/).map(Number); if (parts.length === 4 && parts.every(Number.isFinite)) { w = parts[2]; h = parts[3]; } } } if (!Number.isFinite(w) || !Number.isFinite(h)) { try { const r = svg?.getBoundingClientRect?.(); if (r && r.width > 0 && r.height > 0) return { w: r.width, h: r.height }; } catch { } } return { w: Number.isFinite(w) ? w : 0, h: Number.isFinite(h) ? h : 0 }; }3e:T7eb,svgEditor_drawOverlay = (overlay, {anchors = [], hoverId = null, lockedIds = null, show = false, handleRadius = 12} = {}) => { if (!overlay) return; if (!show) { svgEditor_clearOverlay(overlay); return; } svgEditor_clearOverlay(overlay); const g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); overlay.appendChild(g); for (const a of anchors) { const active = hoverId && a.id === hoverId; const locked = lockedIds?.has?.(a.id); if (a.kind === 'handle') { const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); c.setAttribute('cx', a.x); c.setAttribute('cy', a.y); c.setAttribute('r', handleRadius); c.setAttribute('fill', 'transparent'); c.setAttribute('stroke', active ? '#fa4' : 'transparent'); c.setAttribute('stroke-width', active ? '2' : '0'); c.setAttribute('stroke-dasharray', '3,3'); c.style.pointerEvents = 'all'; c.style.cursor = 'cell'; c.dataset.anchorId = a.id; g.appendChild(c); continue; } const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); c.setAttribute('cx', a.x); c.setAttribute('cy', a.y); c.setAttribute('r', handleRadius); c.setAttribute('fill', locked ? '#ffd700' : active ? 'white' : '#eef'); c.setAttribute('stroke', locked ? '#b8860b' : active ? 'red' : '#333'); c.setAttribute('stroke-width', locked || active ? '2' : '1'); c.style.pointerEvents = 'all'; c.style.cursor = locked ? 'pointer' : a.kind === 'center' ? 'move' : a.kind === 'radius' ? 'ew-resize' : 'nwse-resize'; c.dataset.anchorId = a.id; g.appendChild(c); if (locked) { const inner = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); inner.setAttribute('cx', a.x); inner.setAttribute('cy', a.y); inner.setAttribute('r', handleRadius * 0.4); inner.setAttribute('fill', '#b8860b'); inner.style.pointerEvents = 'none'; g.appendChild(inner); } } }3f:T526,svgEditor_commitParams = (params, viewElByName) => { const arrayUpdates = new Map(); const scalarUpdates = {}; for (const [name, val] of Object.entries(params || {})) { const ci = name.lastIndexOf(':'); if (ci > 0 && !isNaN(+name.slice(ci + 1))) { const baseName = name.slice(0, ci); if (viewElByName.has(name)) { if (!arrayUpdates.has(baseName)) arrayUpdates.set(baseName, []); arrayUpdates.get(baseName).push([ +name.slice(ci + 1), val ]); continue; } } scalarUpdates[name] = val; } for (const [name, val] of Object.entries(scalarUpdates)) { const view = viewElByName.get(name); if (!view) continue; const clamped = svgEditor_clampToView(view, val); view.value = clamped; view.dispatchEvent(new Event('input', { bubbles: true })); } for (const [baseName, entries] of arrayUpdates) { const view = viewElByName.get(`${ baseName }:0`); if (!view) continue; const current = Array.isArray(view.value) ? view.value.slice() : []; for (const [idx, val] of entries) { if (idx < current.length) { current[idx] = svgEditor_clampToView(view, val); } } view.value = current; view.dispatchEvent(new Event('input', { bubbles: true })); } }40:T8436,svgEditorController = { const state = this ?? {}; const setStatus = (patch) => svgEditor_setStatus(viewof svgEditorStatus, patch); const editorMode = svgEditorArgs?.mode ?? "solve"; const callerInvalidation = svgEditorArgs?.invalidation; const ensureOverlay = () => { if (state.overlay) return; state.overlay = svgEditor_createOverlay(htl); document.body.appendChild(state.overlay); state.lastTarget = null; state.anchors = []; state.hover = null; state.drags = new Map(); state.lockedAnchors = new Map(); state.gestureBaseParams = null; state.overTarget = false; state.targetRect = null; state.rebasing = false; state.growPreview = null; const LOCK_WEIGHT = 20; const __solveKKT = (A, b, C, damping, d) => { const m = A.length; const n = m ? A[0].length : C[0]?.length ?? 0; const k = C.length; if (!n) return []; if (!k) return pseudoInverseStepMxN(A, b); const dRhs = Array.isArray(d) ? d : new Array(k).fill(0); const H = Array.from({ length: n }, () => new Array(n).fill(0)); const cVec = new Array(n).fill(0); for (let r = 0; r < m; r++) { const br = +b[r]; for (let i = 0; i < n; i++) { const ari = +A[r][i]; if (!Number.isFinite(ari)) continue; if (Number.isFinite(br)) cVec[i] += ari * br; for (let j = i; j < n; j++) { const arj = +A[r][j]; if (Number.isFinite(arj)) H[i][j] += ari * arj; } } } const lam = Math.max(+damping || 0, 1e-12); for (let i = 0; i < n; i++) { for (let j = 0; j < i; j++) H[i][j] = H[j][i]; H[i][i] += lam; } const N = n + k; const M = Array.from({ length: N }, () => new Array(N).fill(0)); const y = new Array(N).fill(0); for (let i = 0; i < n; i++) { for (let j = 0; j < n; j++) M[i][j] = H[i][j]; y[i] = cVec[i]; } for (let j = 0; j < k; j++) { for (let i = 0; i < n; i++) { const cij = +C[j][i]; if (Number.isFinite(cij)) { M[i][n + j] = cij; M[n + j][i] = cij; } } y[n + j] = +dRhs[j] || 0; } const M2 = M.map((row) => row.slice()); const y2 = y.slice(); for (let p = 0; p < N; p++) { let piv = p, best = Math.abs(M2[p][p]); for (let i = p + 1; i < N; i++) { const v = Math.abs(M2[i][p]); if (v > best) { best = v; piv = i; } } if (!Number.isFinite(best) || best < 1e-15) { const A_full = [...A, ...C.map((r) => r.map((v) => v * LOCK_WEIGHT))]; const b_full = [...b, ...new Array(k).fill(0)]; return pseudoInverseStepMxN(A_full, b_full); } if (piv !== p) { [M2[p], M2[piv]] = [M2[piv], M2[p]]; [y2[p], y2[piv]] = [y2[piv], y2[p]]; } const app = M2[p][p]; for (let i = p + 1; i < N; i++) { const f = M2[i][p] / app; if (!Number.isFinite(f)) continue; y2[i] -= f * y2[p]; for (let j = p; j < N; j++) M2[i][j] -= f * M2[p][j]; } } const x = new Array(N).fill(0); for (let i = N - 1; i >= 0; i--) { let s = y2[i]; for (let j = i + 1; j < N; j++) s -= M2[i][j] * x[j]; const aii = M2[i][i]; if (!Number.isFinite(aii) || Math.abs(aii) < 1e-24) return new Array(n).fill(0); x[i] = s / aii; } return x.slice(0, n); }; const __liveParamNames = () => { const flat = []; for (const v of svgParameterViews) { const base = v._name.slice("viewof ".length); const val = v?._value?.value; if (Array.isArray(val)) { for (let i = 0; i < val.length; i++) flat.push(`${base}:${i}`); } else { flat.push(base); } } return flat; }; const __liveViewElByName = () => { const map = new Map(); for (const v of svgParameterViews) { const base = v._name.slice("viewof ".length); const val = v?._value?.value; const el = v?._value; if (Array.isArray(val)) { for (let i = 0; i < val.length; i++) map.set(`${base}:${i}`, el); } else { map.set(base, el); } } return map; }; let svgParameterNames = __liveParamNames(); let svgParameterViewElByName = __liveViewElByName(); const __refreshLive = () => { svgParameterNames = __liveParamNames(); svgParameterViewElByName = __liveViewElByName(); }; let getCurrentParams = () => { const p = {}; for (const name of svgParameterNames) { const view = svgParameterViewElByName.get(name); if (!view) continue; const ci = name.lastIndexOf(":"); if (ci > 0 && !isNaN(+name.slice(ci + 1))) { const idx = +name.slice(ci + 1); const arr = view.value; p[name] = Array.isArray(arr) ? +arr[idx] : +view.value; } else { const v = +view.value; p[name] = Number.isFinite(v) ? v : view.value; } } return p; }; const getLockedIdSet = () => new Set(state.lockedAnchors.keys()); const refreshAnchorsFromTarget = (target) => { state.anchors = rectAnchorsStable(target); const hoverId = state.hover?.id; state.hover = hoverId ? state.anchors.find((a) => a.id === hoverId) ?? null : state.hover; }; const getInvScreenCTM = (overlay) => { try { const ctm = overlay.getScreenCTM?.(); return ctm ? ctm.inverse() : null; } catch { return null; } }; const overlayAnchorsWithActivePointerPositions = () => { if (!state.drags.size) return state.anchors; const overlay = state.overlay; const byId = new Map(state.anchors.map((a) => [a.id, { ...a }])); for (const d of state.drags.values()) { const lc = d.lastClient ?? d.startClient; const pNow = svgPointFromClient(overlay, lc.x, lc.y, d.invScreenCTM); const a = byId.get(d.anchorId); if (a) { a.x = pNow.x; a.y = pNow.y; } } return Array.from(byId.values()); }; const rebaseAllDrags = async (newBaseParams) => { const overlay = state.overlay; const inv = getInvScreenCTM(overlay); if (state.drags.size) { const entries = Array.from(state.drags.entries()); const nextDrags = new Map(state.drags); for (const [pid, d] of entries) { const lastClient = d.lastClient ?? d.startClient; const startPointer = svgPointFromClient( overlay, lastClient.x, lastClient.y, inv ); const jacobian = await svgEditor_estimateJacobianForAnchor({ anchorId: d.anchorId, p0: newBaseParams, renderProbe, paramNames: svgParameterNames, anchorsFn: rectAnchorsStable }); if (!jacobian) continue; nextDrags.set(pid, { ...d, startClient: { ...lastClient }, startPointer, startParams: newBaseParams, jacobian, invScreenCTM: inv }); } state.drags = nextDrags; } for (const [lockId, lockData] of state.lockedAnchors) { const jacobian = await svgEditor_estimateJacobianForAnchor({ anchorId: lockId, p0: newBaseParams, renderProbe, paramNames: svgParameterNames, anchorsFn: rectAnchorsStable }); if (jacobian) state.lockedAnchors.set(lockId, { jacobian }); } const probeSvg = await renderProbe(newBaseParams); const constraints = constraintsFromSvg ? constraintsFromSvg(probeSvg) : []; const nextConstraints = new Map(); for (const c of constraints) { const jacobian = await svgEditor_estimateJacobianForConstraint({ name: c.name, p0: newBaseParams, renderProbe, paramNames: svgParameterNames, constraintsFn: constraintsFromSvg }); if (jacobian) nextConstraints.set(c.name, jacobian); } state.constraintJacobians = nextConstraints; }; const toggleLock = async (anchorId) => { __refreshLive(); if (state.lockedAnchors.has(anchorId)) { state.lockedAnchors.delete(anchorId); } else { const params = getCurrentParams(); const jacobian = await svgEditor_estimateJacobianForAnchor({ anchorId, p0: params, renderProbe, paramNames: svgParameterNames, anchorsFn: rectAnchorsStable }); if (jacobian) { const lockEl = state.lastTarget?.querySelector( '[data-anchor-id="' + anchorId + '"]' ); const targetX = +( lockEl?.getAttribute("cx") ?? jacobian.a0?.[0] ?? 0 ); const targetY = +( lockEl?.getAttribute("cy") ?? jacobian.a0?.[1] ?? 0 ); state.lockedAnchors.set(anchorId, { jacobian, targetX, targetY }); } } const markerEl = state.lastTarget?.querySelector( '[data-anchor-id="' + anchorId + '"]' ); const view = markerEl?.__paramsView; if (view) { if (!view.__lopecodeLocks) view.__lopecodeLocks = new Set(); if (state.lockedAnchors.has(anchorId)) view.__lopecodeLocks.add(anchorId); else view.__lopecodeLocks.delete(anchorId); view.dispatchEvent(new Event("input", { bubbles: true })); } svgEditor_drawOverlay(state.overlay, { anchors: state.anchors, hoverId: state.hover?.id ?? null, lockedIds: getLockedIdSet(), show: true }); }; const locksActive = () => state.lockedAnchors.size > 0; const estimateAnchorJacobian = async (anchorId) => { __refreshLive(); return svgEditor_estimateJacobianForAnchor({ anchorId, p0: getCurrentParams(), renderProbe, paramNames: svgParameterNames, anchorsFn: rectAnchorsStable }); }; const solveLockedUpdate = ( targetView, ownIndex, ownDims, slice, anchorJacobian, lastSlice ) => { __refreshLive(); const cur = targetView.value.slice(ownIndex, ownIndex + ownDims); const baseline = Array.isArray(lastSlice) && lastSlice.length === ownDims ? lastSlice : cur; let baseName = null; for (const [name, el] of svgParameterViewElByName) { if (el === targetView) { const ci = name.lastIndexOf(":"); baseName = ci > 0 && !isNaN(+name.slice(ci + 1)) ? name.slice(0, ci) : name; break; } } if (!baseName) return; const N = svgParameterNames.length; const dpAuthor = new Array(N).fill(0); for (let i = 0; i < ownDims; i++) { const targetName = `${baseName}:${ownIndex + i}`; let idx = svgParameterNames.indexOf(targetName); if (idx < 0 && ownDims === 1) idx = svgParameterNames.indexOf(baseName); if (idx < 0) continue; dpAuthor[idx] = (+slice[i] || 0) - (+baseline[i] || 0); } const A = []; const b = []; if ( anchorJacobian && anchorJacobian.J && anchorJacobian.J[0]?.length === N ) { let bx = 0, by = 0; for (let i = 0; i < N; i++) { bx += anchorJacobian.J[0][i] * dpAuthor[i]; by += anchorJacobian.J[1][i] * dpAuthor[i]; } A.push(anchorJacobian.J[0].slice(), anchorJacobian.J[1].slice()); b.push(bx, by); } else { for (let i = 0; i < N; i++) { if (dpAuthor[i] === 0) continue; const row = new Array(N).fill(0); row[i] = 1; A.push(row); b.push(dpAuthor[i]); } } if (!A.length) return; const C = []; const dRhs = []; const LOCK_PULL_GAIN = 0.25; const LOCK_DEADBAND = 0.5; for (const [lockId, lockData] of state.lockedAnchors) { const lockEl = state.lastTarget?.querySelector( '[data-anchor-id="' + lockId + '"]' ); const curX = +(lockEl?.getAttribute("cx") ?? lockData.targetX ?? 0); const curY = +(lockEl?.getAttribute("cy") ?? lockData.targetY ?? 0); let resX = curX - (lockData.targetX ?? curX); let resY = curY - (lockData.targetY ?? curY); if (Math.abs(resX) < LOCK_DEADBAND) resX = 0; if (Math.abs(resY) < LOCK_DEADBAND) resY = 0; C.push(lockData.jacobian.J[0].slice(), lockData.jacobian.J[1].slice()); dRhs.push(-resX * LOCK_PULL_GAIN, -resY * LOCK_PULL_GAIN); } const dp = C.length ? __solveKKT(A, b, C, +inverseConfig?.damping || 0.000001, dRhs) : pseudoInverseStepMxN(A, b); const next = {}; for (let i = 0; i < N; i++) { const name = svgParameterNames[i]; const view = svgParameterViewElByName.get(name); if (!view) continue; const ci = name.lastIndexOf(":"); let curVal; if (ci > 0 && !isNaN(+name.slice(ci + 1))) { const arr = view.value; const arrIdx = +name.slice(ci + 1); curVal = +arr[arrIdx]; } else { curVal = +view.value; } next[name] = curVal + (+dp[i] || 0); } svgEditor_commitParams(next, svgParameterViewElByName); }; const computeCombinedUpdate = (baseParams) => { const overlay = state.overlay; const base = baseParams ?? getCurrentParams(); const n = svgParameterNames.length; const dragDetails = []; const drags = Array.from(state.drags.values()); const hasLocks = state.lockedAnchors.size > 0; const hasConstraints = state.constraintJacobians && state.constraintJacobians.size > 0; if (!drags.length && !hasLocks && !hasConstraints) { return { next: { ...base }, dpTotal: new Array(n).fill(0), dragDetails }; } if (drags.length === 1 && !hasLocks && !hasConstraints) { const d = drags[0]; const lc = d.lastClient ?? d.startClient; const pNow = svgPointFromClient(overlay, lc.x, lc.y, d.invScreenCTM); const da = [pNow.x - d.startPointer.x, pNow.y - d.startPointer.y]; const dp = pseudoInverseStepMxN(d.jacobian.J, da); const next = { ...base }; for (let i = 0; i < n; i++) { const name = svgParameterNames[i]; const v = +base[name]; if (!Number.isFinite(v)) continue; next[name] = v + (+dp[i] || 0); } dragDetails.push({ pointerId: d.pointerId, anchorId: d.anchorId, pointer: pNow, da, dp, J: d.jacobian.J }); return { next, dpTotal: dp, dragDetails }; } const A = [], b = [], C = []; for (const d of drags) { const lc = d.lastClient ?? d.startClient; const pNow = svgPointFromClient(overlay, lc.x, lc.y, d.invScreenCTM); const da0 = pNow.x - d.startPointer.x; const da1 = pNow.y - d.startPointer.y; const J = d.jacobian.J; A.push(J[0].slice(), J[1].slice()); b.push(da0, da1); dragDetails.push({ pointerId: d.pointerId, anchorId: d.anchorId, pointer: pNow, da: [da0, da1], J }); } for (const [lockId, lockData] of state.lockedAnchors) { const J = lockData.jacobian.J; C.push(J[0].slice(), J[1].slice()); } if (state.constraintJacobians) { for (const [cname, cj] of state.constraintJacobians) { const w = +cj.weight || 1; for (let j = 0; j < cj.J.length; j++) { A.push(cj.J[j].map((v) => v * w)); b.push(-(+cj.r0[j] || 0) * w); } } } if (!A.length && !C.length) return { next: { ...base }, dpTotal: new Array(n).fill(0), dragDetails }; const dp = C.length ? __solveKKT(A, b, C, +inverseConfig?.damping || 0.000001) : pseudoInverseStepMxN(A, b); for (const dd of dragDetails) dd.dp = dp; const next = { ...base }; for (let i = 0; i < n; i++) { const name = svgParameterNames[i]; const v = +base[name]; if (!Number.isFinite(v)) continue; next[name] = v + (+dp[i] || 0); } return { next, dpTotal: dp, dragDetails }; }; const commitFromCurrentDragState = (reason) => { const base = state.gestureBaseParams ?? getCurrentParams(); const { next, dpTotal, dragDetails } = computeCombinedUpdate(base); svgEditor_commitParams(next, svgParameterViewElByName); setStatus({ mode: state.rebasing ? "rebasing" : state.drags.size > 1 ? "dragging-multi" : state.drags.size ? "dragging" : state.overTarget ? "hover" : "idle", anchors: state.anchors.map((a) => ({ id: a.id, x: a.x, y: a.y })), activeAnchors: Array.from(state.drags.values()).map((x) => x.anchorId), lockedAnchors: Array.from(state.lockedAnchors.keys()), params: next, dp: dpTotal, drags: dragDetails, reason }); }; const createGrowPreview = (overlay, x1, y1) => { const line = document.createElementNS( "http://www.w3.org/2000/svg", "line" ); line.setAttribute("x1", x1); line.setAttribute("y1", y1); line.setAttribute("x2", x1); line.setAttribute("y2", y1); line.setAttribute("stroke", "#f84"); line.setAttribute("stroke-width", "2"); line.setAttribute("stroke-dasharray", "6,3"); line.style.pointerEvents = "none"; overlay.appendChild(line); return line; }; const pointerMoveOverlay = (evt) => { const overlay = state.overlay; if (!overlay?.isConnected) return; if (editorMode === "grow" && state.growPreview) { const p = svgPointFromClient(overlay, evt.clientX, evt.clientY); state.growPreview.line.setAttribute("x2", p.x); state.growPreview.line.setAttribute("y2", p.y); evt.preventDefault(); return; } if (state.drags.size) { const d = state.drags.get(evt.pointerId); if (d) { d.lastClient = { x: evt.clientX, y: evt.clientY }; state.drags.set(evt.pointerId, d); } if (!state.rebasing) { commitFromCurrentDragState("pointermove"); svgEditor_drawOverlay(overlay, { anchors: overlayAnchorsWithActivePointerPositions(), hoverId: null, lockedIds: getLockedIdSet(), show: true }); if (!state._rebasePending) { state._rebasePending = true; requestAnimationFrame(async () => { if (state.drags.size && !state.rebasing) { state.rebasing = true; try { const newBase = getCurrentParams(); state.gestureBaseParams = newBase; await rebaseAllDrags(newBase); } finally { state.rebasing = false; } if (state.drags.size) { commitFromCurrentDragState("continuous-rebase"); svgEditor_drawOverlay(state.overlay, { anchors: overlayAnchorsWithActivePointerPositions(), hoverId: null, lockedIds: getLockedIdSet(), show: true }); } } state._rebasePending = false; }); } } evt.preventDefault(); return; } if (!state.overTarget) return; if (state.rebasing) return; const p = svgPointFromClient(overlay, evt.clientX, evt.clientY); state.hover = pickAnchor(state.anchors, p, 12); setStatus({ mode: "hover", anchor: state.hover?.id ?? null, pointer: p, params: getCurrentParams(), anchors: state.anchors.map((a) => ({ id: a.id, x: a.x, y: a.y })), reason: "hover" }); svgEditor_drawOverlay(overlay, { anchors: state.anchors, hoverId: state.hover?.id ?? null, lockedIds: getLockedIdSet(), show: true }); }; const pointerDownOverlay = async (evt) => { const anchorId = evt.target?.dataset?.anchorId; if (!anchorId) return; const srcAnchorEl = state.lastTarget?.querySelector( '[data-anchor-id="' + anchorId + '"]' ); const customDrag = srcAnchorEl?.__drag; if (customDrag) { evt.preventDefault(); evt.stopPropagation(); const anchor = state.anchors.find((a) => a.id === anchorId); customDrag(evt, { anchor, overlay: state.overlay, anchorEl: srcAnchorEl, toggleLock, anchorId, locksActive, solveLockedUpdate, estimateAnchorJacobian }); return; } if (editorMode === "grow") { const overlay = state.overlay; const anchor = state.anchors.find((a) => a.id === anchorId); if (!anchor) return; const line = createGrowPreview(overlay, anchor.x, anchor.y); state.growPreview = { anchorId, startX: anchor.x, startY: anchor.y, line }; try { overlay.setPointerCapture(evt.pointerId); } catch {} evt.preventDefault(); evt.stopPropagation(); return; } if (editorMode === "delete") { const target = state.lastTarget; const anchorEl = target?.querySelector( '[data-anchor-id="' + anchorId + '"]' ); const treeOpts = anchorEl?.__tree; const treeNode = anchorEl?.__treeNode; if (treeOpts && treeNode && anchorId !== treeNode.__rootId) { const { data: treeData, parameters: params } = treeOpts; let parentId = null; let childRef = null; for (const [pid, node] of treeData) { const idx = (node.children || []).findIndex( (c) => c.id === anchorId ); if (idx !== -1) { parentId = pid; childRef = node.children[idx]; node.children.splice(idx, 1); break; } } if (parentId !== null) { const deleted = treeData.get(anchorId); if (deleted?.children?.length) { const parent = treeData.get(parentId); parent.children = (parent.children || []).concat( deleted.children ); } treeData.delete(anchorId); const rootNode = treeData.get(treeNode.__rootId); const parametersView = rootNode?.__parametersView; if (parametersView) { parametersView.value = [...params]; parametersView.dispatchEvent( new Event("input", { bubbles: true }) ); } } } evt.preventDefault(); evt.stopPropagation(); return; } if (evt.shiftKey) { await toggleLock(anchorId); evt.preventDefault(); evt.stopPropagation(); return; } if (state.lockedAnchors.has(anchorId)) return; const overlay = state.overlay; const pointerId = evt.pointerId; state.rebasing = true; try { __refreshLive(); const newBase = getCurrentParams(); state.gestureBaseParams = newBase; await rebaseAllDrags(newBase); const startParams = state.gestureBaseParams ?? getCurrentParams(); const jacobian = await svgEditor_estimateJacobianForAnchor({ anchorId, p0: startParams, renderProbe, paramNames: svgParameterNames, anchorsFn: rectAnchorsStable }); if (!jacobian) return; const inv = getInvScreenCTM(overlay); const startPointer = svgPointFromClient( overlay, evt.clientX, evt.clientY, inv ); state.drags.set(pointerId, { pointerId, anchorId, startClient: { x: evt.clientX, y: evt.clientY }, lastClient: { x: evt.clientX, y: evt.clientY }, startPointer, startParams, jacobian, invScreenCTM: inv }); try { overlay.setPointerCapture(pointerId); } catch {} svgEditor_setOverlayVisible(overlay, true); commitFromCurrentDragState("pointerdown"); svgEditor_drawOverlay(overlay, { anchors: overlayAnchorsWithActivePointerPositions(), hoverId: null, lockedIds: getLockedIdSet(), show: true }); evt.preventDefault(); evt.stopPropagation(); } finally { state.rebasing = false; if (state.drags.size) { commitFromCurrentDragState("pointerdown-rebased"); svgEditor_drawOverlay(state.overlay, { anchors: overlayAnchorsWithActivePointerPositions(), hoverId: null, lockedIds: getLockedIdSet(), show: true }); } } }; const pointerUpOverlay = async (evt) => { if (editorMode === "grow" && state.growPreview) { const overlay = state.overlay; const p = svgPointFromClient(overlay, evt.clientX, evt.clientY); const gp = state.growPreview; const dx = p.x - gp.startX; const dy = p.y - gp.startY; const length = Math.sqrt(dx * dx + dy * dy); const angle = (Math.atan2(dy, dx) * 180) / Math.PI; gp.line.remove(); state.growPreview = null; if (length > 5) { const target = state.lastTarget; const anchorEl = target?.querySelector( '[data-anchor-id="' + gp.anchorId + '"]' ); const treeOpts = anchorEl?.__tree; const treeNode = anchorEl?.__treeNode; if (treeOpts && treeNode) { const { data: treeData, parameters: params } = treeOpts; const rootNode = treeData.get(treeNode.__rootId); const parametersView = rootNode?.__parametersView; const newIdx = params.length; const newId = "b" + Math.random().toString(36).slice(2, 6); if (!treeData.has(gp.anchorId)) { treeData.set(gp.anchorId, { children: [] }); } treeData.get(gp.anchorId).children.push({ id: newId, angleIdx: newIdx, lengthIdx: newIdx + 1 }); if (parametersView) { parametersView.value = [...params, angle, length]; parametersView.dispatchEvent( new Event("input", { bubbles: true }) ); } } } evt.preventDefault(); return; } if (!state.drags.size) return; const had = state.drags.delete(evt.pointerId); if (!had) return; const overlay = state.overlay; if (!state.drags.size) { state.gestureBaseParams = null; setStatus({ mode: "drag-end", params: getCurrentParams(), anchors: state.anchors.map((a) => ({ id: a.id, x: a.x, y: a.y })), reason: "pointerup" }); svgEditor_setOverlayVisible(overlay, !!state.overTarget); svgEditor_drawOverlay(overlay, { anchors: state.anchors, hoverId: state.hover?.id ?? null, lockedIds: getLockedIdSet(), show: !!state.overTarget }); evt.preventDefault(); return; } state.rebasing = true; try { const newBase = getCurrentParams(); state.gestureBaseParams = newBase; await rebaseAllDrags(newBase); commitFromCurrentDragState("pointerup-rebase-remaining"); svgEditor_setOverlayVisible(overlay, true); svgEditor_drawOverlay(overlay, { anchors: overlayAnchorsWithActivePointerPositions(), hoverId: null, lockedIds: getLockedIdSet(), show: true }); evt.preventDefault(); } finally { state.rebasing = false; } }; const pointerMoveDoc = (evt) => { const target = svgTemplateVariable?._value; if (!target) return; if (!state.targetRect) { try { state.targetRect = target.getBoundingClientRect(); } catch { state.targetRect = null; } } if (state.drags.size) return; if (editorMode === "grow" && state.growPreview) return; const inside = svgEditor_computeOverTarget( state.targetRect, evt.clientX, evt.clientY ); if (inside === state.overTarget) return; state.overTarget = inside; if (!inside) { state.hover = null; state.anchors = []; setStatus({ mode: "idle", anchor: null, params: getCurrentParams(), anchors: [], reason: "leave" }); } svgEditor_setOverlayVisible(state.overlay, inside); svgEditor_drawOverlay(state.overlay, { anchors: state.anchors, hoverId: state.hover?.id ?? null, lockedIds: getLockedIdSet(), show: inside }); }; state.overlay.addEventListener("pointermove", pointerMoveOverlay, { passive: false }); state.overlay.addEventListener("pointerdown", pointerDownOverlay, { passive: false }); state.overlay.addEventListener("pointerup", pointerUpOverlay, { passive: false }); state.overlay.addEventListener("pointercancel", pointerUpOverlay, { passive: false }); document.addEventListener("pointermove", pointerMoveDoc, { passive: true }); let raf = 0; const tick = () => { const target = svgTemplateVariable?._value; if (target && target !== state.lastTarget) state.lastTarget = target; if (target?.getBoundingClientRect) { if (state.overTarget || state.drags.size) { state.targetRect = svgEditor_syncOverlayToTarget(state.overlay, target) ?? state.targetRect; refreshAnchorsFromTarget(target); const activeAnchors = Array.from(state.drags.values()).map( (x) => x.anchorId ); setStatus({ mode: state.rebasing ? "rebasing" : state.drags.size ? state.drags.size > 1 ? "dragging-multi" : "dragging" : "idle", params: getCurrentParams(), anchor: activeAnchors[0] ?? state.hover?.id ?? null, activeAnchors, lockedAnchors: Array.from(state.lockedAnchors.keys()), anchors: state.anchors.map((a) => ({ id: a.id, x: a.x, y: a.y })), reason: "tick" }); svgEditor_drawOverlay(state.overlay, { anchors: state.drags.size ? overlayAnchorsWithActivePointerPositions() : state.anchors, hoverId: state.drags.size ? null : state.hover?.id ?? null, lockedIds: getLockedIdSet(), show: true }); } else { try { state.targetRect = target.getBoundingClientRect(); } catch { state.targetRect = null; } svgEditor_clearOverlay(state.overlay); } } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); const cleanup = () => { cancelAnimationFrame(raf); state.overlay?.removeEventListener("pointermove", pointerMoveOverlay); state.overlay?.removeEventListener("pointerdown", pointerDownOverlay); state.overlay?.removeEventListener("pointerup", pointerUpOverlay); state.overlay?.removeEventListener("pointercancel", pointerUpOverlay); document.removeEventListener("pointermove", pointerMoveDoc); try { state.overlay?.remove(); } catch {} state.overlay = null; state.drags = new Map(); state.lockedAnchors = new Map(); state.gestureBaseParams = null; state.hover = null; state.anchors = []; state.lastTarget = null; state.overTarget = false; state.targetRect = null; state.rebasing = false; state.growPreview = null; }; Promise.resolve(invalidation).then(cleanup); if (callerInvalidation) Promise.resolve(callerInvalidation).then(cleanup); }; ensureOverlay(); svgEditor_setOverlayVisible( state.overlay, !!state.drags?.size || !!state.overTarget ); return Object.assign(state, { value: { headless: true, overlay: state.overlay, multitouch: true, mode: editorMode } }); }41:Tb9c,scissorProse = md`### Affordance: a CRUD primitive over a parameter window \`affordance\` is a one-stop shop for **every** interaction on a living SVG template. Each affordance owns a contiguous slice of the parameter vector, paints itself however the author likes, and routes pointer gestures (click, drag, shift-click) to behaviours (create / read / update / delete) — all framework-mediated. Affordances compose recursively: a segment's render can spawn more affordances inside it. #### The shape \`\`\`js ctx.affordance(id, pos, { handleRender, // paint the glyph dims, render, // segment with children (recurse) onClick: api => …, // gestures… onDrag: ({dx, dy, phase}, api) => …, onShiftClick: api => …, spawn: (dx, dy, cur) => newDims // sugar for "drag at terminal => appendAfter" }) \`\`\` The framework hands every handler an \`api\` bound to the affordance's owned slice — the author never indexes into the global vector: \`\`\`js api.params // read-only snapshot of the owned dims api.initial // snapshot at the start of the current gesture api.update(slice) // write a new slice into the owned offset api.delete() // splice the owned slice out api.appendAfter(extraDims) // insert dims right after the owned window \`\`\` #### Mapping gestures to behaviours UX is decoupled from semantics. A click can mean delete or create or something else — the author chooses the mapping. In the scissor below: * **Wing** (blue square) — \`onDrag\` projects cursor delta onto the segment normal and writes \`api.update([px, py, w + dw])\` (update). * **Mid** (orange diamond) — \`onDrag\` writes \`api.update([px+2dx, py+2dy, w])\` so the midpoint tracks the cursor (update). * **Delete dot** (red ✕ next to mid) — \`onClick: api => api.delete()\` (delete). * **Tip** (dashed orange "+") — \`spawn(dx, dy, cur)\` returns a fresh \`(dx, dy, w)\` triple and the framework \`api.appendAfter\`s it (create). Every other anchor (the lines themselves, anything created via plain \`ctx.anchor\`) still goes through the Jacobian solver — that's the default when no handlers are provided. #### Recursive composition \`ctx.affordance(childId, childPos, childOpts)\` from inside \`render\` either: * **Recurses** into a fresh segment (when \`childOpts\` provides \`dims+render\`) — the child carves its own slice \`[index+dims..index+2·dims)\`. * **Inlines a leaf** (when \`childOpts\` is just handlers) — the leaf shares the parent segment's slice, so its handlers update the same \`(dx, dy, w)\` the segment owns. The default \`childOpts\` is the *current* drag, so a chain self-continues; pass a different spec at any depth to switch affordance type mid-chain. Newly placed widgets are themselves built from \`ctx.affordance\`, so they can contain further affordances — recursion bottoms out at a leaf with no \`dims\`.`42:T1353,scissorSvg = { const scissors = { dims: 3, spawn: (dx, dy, cur) => { const lastW = cur.length >= 1 ? cur[cur.length - 1] : 25; return [ dx, dy, lastW ]; }, handleRender: ctx => { const p = ctx.parent; return htl.svg` `; }, render: ctx => { const [dx, dy, w] = ctx.params; const p = ctx.parent; const c = { x: p.x + dx, y: p.y + dy }; const mx = (p.x + c.x) / 2, my = (p.y + c.y) / 2; const len = Math.sqrt(dx * dx + dy * dy) || 1; const nx = -dy / len, ny = dx / len; const wA = { x: mx + w * nx, y: my + w * ny }; const wB = { x: mx - w * nx, y: my - w * ny }; const nextStart = ctx.index + ctx.dims; const isLast = nextStart + ctx.dims > ctx.full.length; const tipId = isLast ? 'scissor-tip' : `pivot:${ nextStart }`; const wingDrag = ({ dx: ddx, dy: ddy, phase }, api) => { if (!api?.initial) return; const [px, py, w0] = api.initial; const ll = Math.sqrt(px * px + py * py) || 1; const nnx = -py / ll, nny = px / ll; const dw = ddx * nnx + ddy * nny; api.update([ px, py, Math.max(0, w0 + dw) ]); }; const midDrag = ({ dx: ddx, dy: ddy, phase }, api) => { if (!api?.initial) return; const [px, py, w0] = api.initial; api.update([ px + 2 * ddx, py + 2 * ddy, w0 ]); }; const deleteSeg = api => api.delete(); const padlock = (cx, cy) => htl.svg` `; const wingGlyph = hctx => htl.svg` ${ hctx.frozen ? padlock(hctx.parent.x, hctx.parent.y) : null } `; const midGlyph = hctx => htl.svg` ${ hctx.frozen ? padlock(hctx.parent.x, hctx.parent.y) : null } `; const deleteGlyph = hctx => htl.svg` `; return htl.svg` ${ ctx.affordance(`wing:${ ctx.index }`, wA, { handleRender: wingGlyph, onDrag: wingDrag }) } ${ ctx.affordance(`mid:${ ctx.index }`, { x: mx, y: my }, { handleRender: midGlyph, onDrag: midDrag }) } ${ ctx.affordance(`del:${ ctx.index }`, { x: mx + 14 * nx, y: my + 14 * ny }, { handleRender: deleteGlyph, onClick: deleteSeg }) } ${ ctx.affordance(tipId, c) } `; } }; return htl.svg``; }43:T2d29,trellisSvg = { const FIXED_BL = { x: 60, y: 360 }; const VIEW_W = 400, VIEW_H = 400; const trellisUnitsView = viewof trellisUnits; const cornersOf = (units, idx) => { const slice = units.slice(idx * 4, idx * 4 + 4); const parentIdx = Math.round(slice[0]); const edgeIdx = Math.round(slice[1]); const L1 = slice[2]; const L2 = slice[3]; let c0, c1, parentRef; if (parentIdx === -1) { c0 = FIXED_BL; c1 = { x: trellisGround[0], y: trellisGround[1] }; parentRef = { x: (c0.x + c1.x) / 2, y: (c0.y + c1.y) / 2 + 100 }; } else if (parentIdx >= 0 && parentIdx < units.length / 4 && parentIdx !== idx) { const parent = cornersOf(units, parentIdx); const edges = [ [ parent.c0, parent.c1 ], [ parent.c1, parent.c3 ], [ parent.c3, parent.c2 ], [ parent.c2, parent.c0 ] ]; const e = edges[Math.max(0, Math.min(3, edgeIdx))] || edges[0]; c0 = e[0]; c1 = e[1]; parentRef = parent.pivot; } else { c0 = FIXED_BL; c1 = FIXED_BL; parentRef = c0; } const r1 = L1 / 2, r2 = L2 / 2; const ex = c1.x - c0.x, ey = c1.y - c0.y; const d = Math.hypot(ex, ey) || 1; const ux = ex / d, uy = ey / d; const a = (r1 * r1 - r2 * r2 + d * d) / (2 * d); const hSq = r1 * r1 - a * a; const h = hSq > 0 ? Math.sqrt(hSq) : 0; const footX = c0.x + a * ux; const footY = c0.y + a * uy; const candA = { x: footX - h * uy, y: footY + h * ux }; const candB = { x: footX + h * uy, y: footY - h * ux }; const dA = (candA.x - parentRef.x) ** 2 + (candA.y - parentRef.y) ** 2; const dB = (candB.x - parentRef.x) ** 2 + (candB.y - parentRef.y) ** 2; const pivot = dA > dB ? candA : candB; const c3 = { x: 2 * pivot.x - c0.x, y: 2 * pivot.y - c0.y }; const c2 = { x: 2 * pivot.x - c1.x, y: 2 * pivot.y - c1.y }; return { c0, c1, c2, c3, pivot }; }; const writeUnits = next => { trellisUnitsView.value = next; trellisUnitsView.dispatchEvent(new Event('input', { bubbles: true })); }; const groundSpec = { dims: 2, render: ctx => { const [brx, bry] = ctx.params; const bR = { x: brx, y: bry }; const mid = { x: (FIXED_BL.x + bR.x) / 2, y: (FIXED_BL.y + bR.y) / 2 }; let groundOccupied = false; for (let i = 0; i < trellisUnits.length; i += 4) { if (Math.round(trellisUnits[i]) === -1) { groundOccupied = true; break; } } const fixedGlyph = () => htl.svg` `; const draggableGlyph = hctx => htl.svg` `; const dragBR = ({dx, dy}, api) => { if (!api?.initial) return; const [x0, y0] = api.initial; api.update([ x0 + dx, y0 + dy ]); }; const plusGlyph = hctx => htl.svg` `; const spawnGroundChild = () => { const ex = bR.x - FIXED_BL.x, ey = bR.y - FIXED_BL.y; const d = Math.hypot(ex, ey) || 1; writeUnits([ ...trellisUnitsView.value, -1, 0, d * 1.3, d * 1.3 ]); }; return htl.svg` ${ ctx.affordance('ground-fixed', FIXED_BL, { handleRender: fixedGlyph }) } ${ ctx.affordance('ground-bR', bR, { handleRender: draggableGlyph, onDrag: dragBR }) } ${ groundOccupied ? null : ctx.affordance('ground-plus', mid, { handleRender: plusGlyph, onClick: spawnGroundChild }) } `; } }; const unitSpec = { dims: 4, render: ctx => { const myIdx = ctx.index / 4; const {c0, c1, c2, c3, pivot} = cornersOf(ctx.full, myIdx); const occupied = new Set(); for (let i = 0; i < ctx.full.length; i += 4) { if (i === ctx.index) continue; if (Math.round(ctx.full[i]) === myIdx) { occupied.add(Math.round(ctx.full[i + 1])); } } const pivotGlyph = hctx => htl.svg` `; const dragPivot = ({dx, dy}, api) => { if (!api?.initial) return; const [pIdx, eIdx] = api.initial; const newPx = pivot.x + dx, newPy = pivot.y + dy; const newL1 = 2 * Math.hypot(newPx - c0.x, newPy - c0.y); const newL2 = 2 * Math.hypot(newPx - c1.x, newPy - c1.y); api.update([ pIdx, eIdx, newL1, newL2 ]); }; const cornerGlyph = colour => hctx => htl.svg` `; const dragRodEnd = which => ({dx, dy}, api) => { if (!api?.initial) return; const [pIdx, eIdx, oldL1, oldL2] = api.initial; if (which === 'L1') { const newL1 = Math.hypot(c3.x + dx - c0.x, c3.y + dy - c0.y); api.update([ pIdx, eIdx, newL1, oldL2 ]); } else { const newL2 = Math.hypot(c2.x + dx - c1.x, c2.y + dy - c1.y); api.update([ pIdx, eIdx, oldL1, newL2 ]); } }; const plusGlyph = hctx => htl.svg` `; const deleteGlyph = hctx => htl.svg` `; const edgeMid = (a, b) => ({ x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }); const spawnAtEdge = (eIdx, ea, eb) => () => { const len = Math.hypot(eb.x - ea.x, eb.y - ea.y) || 1; writeUnits([ ...trellisUnitsView.value, myIdx, eIdx, len * 1.3, len * 1.3 ]); }; const cascadeDelete = () => { const all = trellisUnitsView.value; const n = all.length / 4; const remove = new Set([myIdx]); let changed = true; while (changed) { changed = false; for (let i = 0; i < n; i++) { if (remove.has(i)) continue; const p = Math.round(all[i * 4]); if (remove.has(p)) { remove.add(i); changed = true; } } } const oldToNew = new Map(); let newIdx = 0; for (let i = 0; i < n; i++) { if (remove.has(i)) continue; oldToNew.set(i, newIdx); newIdx++; } const next = []; for (let i = 0; i < n; i++) { if (remove.has(i)) continue; const slice = all.slice(i * 4, i * 4 + 4); const oldP = Math.round(slice[0]); if (oldP !== -1) slice[0] = oldToNew.get(oldP) ?? 0; next.push(...slice); } writeUnits(next); }; const edgePoints = [ [ c0, c1 ], [ c1, c3 ], [ c3, c2 ], [ c2, c0 ] ]; const isLast = ctx.index + ctx.dims >= ctx.full.length; return htl.svg` ${ ctx.affordance(`pivot:${ myIdx }`, pivot, { handleRender: pivotGlyph, onDrag: dragPivot, onClick: cascadeDelete, onShiftClick: () => { } }) } ${ ctx.affordance(`L1end:${ myIdx }`, c3, { handleRender: cornerGlyph('#4af'), onDrag: dragRodEnd('L1'), onShiftClick: () => { } }) } ${ ctx.affordance(`L2end:${ myIdx }`, c2, { handleRender: cornerGlyph('#fa4'), onDrag: dragRodEnd('L2'), onShiftClick: () => { } }) } ${ [ 1, 2, 3 ].map(eIdx => occupied.has(eIdx) ? null : ctx.affordance(`plus:${ myIdx }:${ eIdx }`, edgeMid(edgePoints[eIdx][0], edgePoints[eIdx][1]), { handleRender: plusGlyph, onClick: spawnAtEdge(eIdx, edgePoints[eIdx][0], edgePoints[eIdx][1]) })) } ${ isLast ? null : ctx.affordance(`next:${ myIdx + 1 }`, { x: 0, y: 0 }) } `; } }; return htl.svg``; }44:T5b4,constraintProse = md`### Declarative Geometric Constraints Two line segments with four independent endpoints A, B, C, D — eight free parameters, no shared variables. Toggle **constraint** on and drag any endpoint: B and C now track each other. #### What changed The SVG template adds one element: \`\`\`js \${constraintEnabled ? constraint("coincident", {name:"BC", ax: cBx, ay: cBy, bx: cCx, by: cCy}) : null} \`\`\` \`constraint()\` returns an invisible \`\` carrying a **residual vector** in its dataset — here \`[cBx − cCx, cBy − cCy]\`, which is zero iff B = C. #### How the solver finds it Each gesture, the controller scrapes \`.__constraint\` elements from the rendered SVG and finite-differences their residuals with respect to every parameter. That produces extra rows \`(∂r/∂p) · Δp = −r\` stacked onto the same system that handles drag and lock rows. The pseudo-inverse handles all three kinds uniformly — it doesn't know what a "constraint" is. #### Why this decouples cleanly - **Parameters stay off-the-shelf** \`viewof\`s. No special registration. - **Observations live in the markup.** A residual is just a DOM node exposing a scalar and a target. - **The solver is unchanged** — new constraint types become new markup, not new code paths. Toggle the constraint off and the segments split again — the row disappears from the next gesture's system, so each drag stops forcing the coincidence.`45:T263a,affordance = (id, opts) => { const {x, y, params, drag} = opts; const findParamsView = () => { for (const el of document.querySelectorAll('form')) { if (el.value === params) return el; } return null; }; const writeView = (view, next) => { view.value = next; view.dispatchEvent(new Event('input', { bubbles: true })); }; const makeApi = (view, index, dims, ctx = {}) => ({ get params() { const v = view.value; return v.slice(index, index + dims); }, update(slice) { if (ctx.locksActive && ctx.locksActive() && ctx.solveLockedUpdate) { const j = ctx.anchorJacobian?.(); const last = ctx.lastAuthorSlice?.(); ctx.solveLockedUpdate(view, index, dims, slice, j, last); ctx.setLastAuthorSlice?.(Array.isArray(slice) ? slice.slice() : slice); return; } const v = view.value; const next = v.slice(); const w = Math.min(dims, slice.length); for (let i = 0; i < w; i++) next[index + i] = slice[i]; writeView(view, next); }, delete() { const v = view.value; writeView(view, [ ...v.slice(0, index), ...v.slice(index + dims) ]); }, appendAfter(extraDims) { const v = view.value; writeView(view, [ ...v.slice(0, index + dims), ...extraDims, ...v.slice(index + dims) ]); }, appendNew(extra) { writeView(view, [ ...view.value, ...extra ]); }, get frozen() { return !!view.__lopecodeLocks?.has(ctx.anchorId); }, setFrozen(bool) { const cur = !!view.__lopecodeLocks?.has(ctx.anchorId); if (!!bool !== cur && ctx.toggleLock) ctx.toggleLock(ctx.anchorId); } }); const attachSpawn = (el, spawn, dims) => { if (!spawn) return; el.__drag = (evt, {overlay}) => { try { overlay.setPointerCapture(evt.pointerId); } catch { } const targetSvg = el.ownerSVGElement; const toLocal = ev => { const pt = targetSvg.createSVGPoint(); pt.x = ev.clientX; pt.y = ev.clientY; return pt.matrixTransform(targetSvg.getScreenCTM().inverse()); }; const start = { x: +el.getAttribute('cx'), y: +el.getAttribute('cy') }; const NS = 'http://www.w3.org/2000/svg'; const preview = document.createElementNS(NS, 'line'); preview.setAttribute('x1', start.x); preview.setAttribute('y1', start.y); preview.setAttribute('x2', start.x); preview.setAttribute('y2', start.y); preview.setAttribute('stroke', '#fa4'); preview.setAttribute('stroke-width', '2'); preview.setAttribute('stroke-dasharray', '6,3'); preview.style.pointerEvents = 'none'; targetSvg.appendChild(preview); const onMove = e => { const p = toLocal(e); preview.setAttribute('x2', p.x); preview.setAttribute('y2', p.y); }; const onUp = e => { overlay.removeEventListener('pointermove', onMove); overlay.removeEventListener('pointerup', onUp); overlay.removeEventListener('pointercancel', onUp); preview.remove(); const p = toLocal(e); const dx = p.x - start.x, dy = p.y - start.y; if (Math.hypot(dx, dy) < 5) return; const view = findParamsView(); if (!view) return; const raw = view.value; const trimmedLen = dims > 0 ? Math.floor(raw.length / dims) * dims : raw.length; if (trimmedLen < raw.length) view.value = raw.slice(0, trimmedLen); const cur = view.value; const seg = spawn(dx, dy, cur); if (!seg) return; makeApi(view, cur.length, 0).appendAfter(seg); }; overlay.addEventListener('pointermove', onMove); overlay.addEventListener('pointerup', onUp); overlay.addEventListener('pointercancel', onUp); }; }; const attachGesture = (el, handlers, ownIndex, ownDims) => { if (!handlers.onClick && !handlers.onDrag && !handlers.onShiftClick) return; el.__drag = (evt, {overlay, toggleLock, anchorId, locksActive, solveLockedUpdate, estimateAnchorJacobian}) => { try { overlay.setPointerCapture(evt.pointerId); } catch { } const toLocal = ev => { const pt = overlay.createSVGPoint(); pt.x = ev.clientX; pt.y = ev.clientY; return pt.matrixTransform(overlay.getScreenCTM().inverse()); }; const start = toLocal(evt); const startMod = { shift: !!evt.shiftKey, alt: !!evt.altKey }; const dragThreshold = 5; let dragged = false; let initial = null; let cachedView = findParamsView(); let cachedAnchorJ = null; let lastAuthorSlice = null; if (anchorId && estimateAnchorJacobian && locksActive && locksActive()) { estimateAnchorJacobian(anchorId).then(j => { cachedAnchorJ = j; }).catch(() => { }); } const buildApi = () => { if (!cachedView) return null; const api = makeApi(cachedView, ownIndex, ownDims, { anchorId, toggleLock, locksActive, solveLockedUpdate, anchorJacobian: () => cachedAnchorJ, lastAuthorSlice: () => lastAuthorSlice, setLastAuthorSlice: s => { lastAuthorSlice = s; } }); api.initial = initial; return api; }; const onMove = e => { const p = toLocal(e); const dx = p.x - start.x, dy = p.y - start.y; if (!dragged && !startMod.shift && Math.hypot(dx, dy) > dragThreshold) { dragged = true; initial = cachedView ? cachedView.value.slice(ownIndex, ownIndex + ownDims) : null; } if (dragged && handlers.onDrag) { handlers.onDrag({ dx, dy, phase: 'move' }, buildApi()); } }; const onUp = e => { overlay.removeEventListener('pointermove', onMove); overlay.removeEventListener('pointerup', onUp); overlay.removeEventListener('pointercancel', onUp); const p = toLocal(e); const dx = p.x - start.x, dy = p.y - start.y; if (dragged) { if (handlers.onDrag) handlers.onDrag({ dx, dy, phase: 'end' }, buildApi()); } else { if (startMod.shift) { if (handlers.onShiftClick) handlers.onShiftClick(buildApi()); else if (!handlers.onClick && toggleLock && anchorId) toggleLock(anchorId); } else if (handlers.onClick) { handlers.onClick(buildApi()); } } }; overlay.addEventListener('pointermove', onMove); overlay.addEventListener('pointerup', onUp); overlay.addEventListener('pointercancel', onUp); }; }; const renderAt = ({ id, parent, drag: currentDrag, index, depth, apiIndex, apiDims }) => { const {dims = 0, render, spawn, handleRender, onClick, onDrag, onShiftClick} = currentDrag; const ownIndex = apiIndex !== undefined ? apiIndex : index; const ownDims = apiDims !== undefined ? apiDims : dims; const hasGesture = !!(onClick || onDrag || onShiftClick); const stashView = marker => { const view = findParamsView(); if (view) marker.__paramsView = view; return view; }; const wrapWithVisual = (marker, view) => { if (!handleRender) return marker; const NS = 'http://www.w3.org/2000/svg'; const g = document.createElementNS(NS, 'g'); g.classList.add('__handle'); g.appendChild(marker); const hctx = { parent, params: params.slice(ownIndex, ownIndex + ownDims), index: ownIndex, depth, dims: ownDims, full: params, anchor, frozen: !!view?.__lopecodeLocks?.has(id) }; const visual = handleRender(hctx); if (visual) g.appendChild(visual); return g; }; if (dims > 0 && index + dims > params.length) { const marker = anchor(id, { x: parent.x, y: parent.y, kind: 'handle' }); const view = stashView(marker); attachSpawn(marker, spawn, dims); attachGesture(marker, { onClick, onDrag, onShiftClick }, ownIndex, ownDims); return wrapWithVisual(marker, view); } if (!(dims > 0 && render)) { const marker = anchor(id, { x: parent.x, y: parent.y, kind: hasGesture || handleRender ? 'handle' : undefined }); const view = stashView(marker); attachGesture(marker, { onClick, onDrag, onShiftClick }, ownIndex, ownDims); return wrapWithVisual(marker, view); } const view = params.slice(index, index + dims); const ctx = { parent, params: view, index, depth, dims, full: params, anchor, affordance: (childId, childPos, childOpts = currentDrag) => { const childIsSegment = childOpts.dims > 0 && childOpts.render; return renderAt({ id: childId, parent: childPos, drag: childOpts, index: childIsSegment ? index + dims : index, depth: depth + 1, apiIndex: childIsSegment ? index + dims : index, apiDims: childIsSegment ? childOpts.dims : dims }); } }; return render(ctx); }; return renderAt({ id, parent: { x, y }, drag, index: 0, depth: 0 }); }46:Ta1a,treeAnchor = (() => { const findParametersView = params => { for (const el of document.querySelectorAll('form')) { if (el.value === params) return el; } return null; }; const makeAnchor = (id, x, y) => { const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); c.classList.add('__anchor'); c.dataset.anchorId = id; c.setAttribute('cx', x); c.setAttribute('cy', y); c.setAttribute('r', '0.001'); c.setAttribute('fill', 'none'); c.style.pointerEvents = 'none'; return c; }; const defaultEdge = (start, end) => { const line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); line.setAttribute('x1', start.x); line.setAttribute('y1', start.y); line.setAttribute('x2', end.x); line.setAttribute('y2', end.y); line.setAttribute('stroke', '#4af'); line.setAttribute('stroke-width', '2'); return line; }; const buildNode = (parentX, parentY, nodeId, treeOpts, rootId) => { const { data: treeData, parameters: params, edge: edgeTemplate = defaultEdge } = treeOpts; const g = document.createElementNS('http://www.w3.org/2000/svg', 'g'); g.classList.add('__tree-anchor'); g.dataset.nodeId = nodeId; if (nodeId === rootId) { const rootNode = treeData.get(rootId); if (rootNode) { if (!rootNode.__parametersView || rootNode.__parametersView.value !== params) { rootNode.__parametersView = findParametersView(params); } } } const anchorEl = makeAnchor(nodeId, parentX, parentY); anchorEl.__tree = treeOpts; anchorEl.__treeNode = { id: nodeId, __rootId: rootId }; g.appendChild(anchorEl); const node = treeData.get(nodeId); if (node) { for (const child of node.children || []) { const angle = params[child.angleIdx] ?? 0; const length = params[child.lengthIdx] ?? 50; const rad = angle * Math.PI / 180; const cx = parentX + length * Math.cos(rad); const cy = parentY + length * Math.sin(rad); const edgeEl = edgeTemplate({ x: parentX, y: parentY }, { x: cx, y: cy }, { parentId: nodeId, childId: child.id, rootId }); if (edgeEl) g.appendChild(edgeEl); g.appendChild(buildNode(cx, cy, child.id, treeOpts, rootId)); } } return g; }; return (parentX, parentY, rootId, treeOpts) => buildNode(parentX, parentY, rootId, treeOpts, rootId); })()47:[] 2f:{"title":"Living SVG Templates","cells":[{"id":1308,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"anchor = (id, opts = {}) => {\n const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n c.classList.add('__anchor');\n c.dataset.anchorId = id;\n if (opts.kind != null)\n c.dataset.kind = opts.kind;\n if (opts.x != null)\n c.setAttribute('cx', opts.x);\n if (opts.y != null)\n c.setAttribute('cy', opts.y);\n c.setAttribute('r', '0.001');\n c.setAttribute('fill', 'none');\n c.style.pointerEvents = 'none';\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1310,"value":"viewof theta1 = Inputs.range([\n -180,\n 180\n], {\n label: 'θ1 (base)',\n step: 1,\n value: 90\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1311,"value":"viewof theta2 = Inputs.range([\n -180,\n 180\n], {\n label: 'θ2 (elbow)',\n step: 1,\n value: -45\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1312,"value":"viewof theta3 = Inputs.range([\n -180,\n 180\n], {\n label: 'θ3 (wrist)',\n step: 1,\n value: -60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"svgEditor({\n target: 'robotArm',\n module: parametricSVGEditorModule\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"md`### Example 2: How parameterization affects inverse kinematics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"viewof aCx = Inputs.range([\n 80,\n 200\n], {\n label: 'aCx (center x)',\n step: 1,\n value: 120\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"viewof aCy = Inputs.range([\n 140,\n 300\n], {\n label: 'aCy (center y)',\n step: 1,\n value: 220\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1319,"value":"viewof aSize = Inputs.range([\n 40,\n 80\n], {\n label: 'aSize',\n step: 1,\n value: 70\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1320,"value":"viewof bX1 = Inputs.range([\n 240,\n 340\n], {\n label: 'bX1 (top-left x)',\n step: 1,\n value: 260\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1321,"value":"viewof bY1 = Inputs.range([\n 110,\n 240\n], {\n label: 'bY1 (top-left y)',\n step: 1,\n value: 150\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"viewof bX2 = Inputs.range([\n 320,\n 440\n], {\n label: 'bX2 (bot-right x)',\n step: 1,\n value: 400\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1323,"value":"viewof bY2 = Inputs.range([\n 200,\n 330\n], {\n label: 'bY2 (bot-right y)',\n step: 1,\n value: 280\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"viewof circleCx = Inputs.range([\n 60,\n 420\n], {\n label: 'circleCx',\n step: 1,\n value: 240\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"viewof circleCy = Inputs.range([\n 35,\n 65\n], {\n label: 'circleCy',\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1326,"value":"viewof circleR = Inputs.range([\n 10,\n 30\n], {\n label: 'circleR',\n step: 1,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1327,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1328,"value":"svgEditor({\n target: 'mySvg',\n module: parametricSVGEditorModule\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1329,"value":"md`Parameters can affect geometry and anchors can hang off geometry. There are often multiple choices to parameterization. For example, a rectangle could be defined by a center + extents, or by two corners. How the geometry is parameterized, even if it has the same overall expressivity, has an effect on how the inverse kinematics maps anchor movements back to parameter space. I initially thought this was a bug, but once you are used to it it is a useful degree of artistic freedom allowing some control over the kinematic solver.\n\nIn the above example notice how different the two rectangles behave when their anchors are dragged.\n\nParameters can also have their own min/max bounds, which the solver respects.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1330,"value":"md`## How the svgEditor discovers and manipulates parameters\n\nOne part of the magic is how the kinematic solver can map anchor movements back to parameter space. But how does the editor know what the paramemter space is, it is not configured by the programmer.\n\nWhen the \\`svgEditor\\` is instanciated, it is passed a reference to the target cell to bring to life.\n\n\\`\\`\\`js\n svgEditor({ target: 'mySvg', module: parametricSVGEditorModule }) \n\\`\\`\\`\n\nWith the *Observable Runtime*, all cells participate on a reactive computation graph. From the cell reference, the svgEditor finds upstream cells that are value generators, i.e. \\\\\\`viewof\\\\\\` cells, typically used for UI for parameters.\n\nviewof cells can be changed programatically, and that is how the \\`svgEditor\\` is able to both find parameters feeding the cell, and change them when inteterpreting anchor movements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"bezierProse = md`### Example 3: Bézier Curve — Drag-on-Curve Editing\n\nAnchors can be placed programatically, and there are no rules to placement, but if they are derived from geometry, then they will always end up manipulating geometry.\n\nIn this example we allow a variable amount of anchors to be evenly spaced along a Bézier curve, you can now manipulate the curve by dragging it, no complex math involved! Try pinning anchors (SHIFT + CLICK) or using multi-touch! The solver does the heavy lifting and you simply have to choose where the anchors are placed.\n\nThrough a combination of fixing parts in place, you can incrementally work a Bézier curve into a complex shape with a degree of finesse I have not been able to do with control points alone.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"viewof bezierSamples = Inputs.range([\n 2,\n 50\n], {\n label: 'samples',\n step: 1,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"viewof bezierPts = vector([\n 0,\n 400\n], {\n label: 'control points (x\\u2080 y\\u2080 x\\u2081 y\\u2081 x\\u2082 y\\u2082 x\\u2083 y\\u2083)',\n step: 1,\n value: [\n 50,\n 300,\n 80,\n 80,\n 320,\n 80,\n 350,\n 300\n ],\n dimensions: 8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1336,"value":"bezierEditor = svgEditor({\n target: 'bezierSvg',\n module: parametricSVGEditorModule\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"treeProse = md`### Example 4: Tree — Variate Parameters\n\nThe \\`vector\\` input supports **variate** mode: the **+** and **−** buttons dynamically add or remove dimensions. Here, each dimension controls the **branching depth**.\n\nPress **+** underneath the sliders to add tree depth. As the number of anchors grow exponentially. Its a good test of computational scalability. My mac starts to get jerky at 5, which is driven by the cost of the rendering the svg template to derive the Jacobian.\n\nIts ok to have extra anchors, anchors can drive visuals and non-geometric effects too.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1338,"value":"{\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"viewof branchAngles = vector([\n 5,\n 80\n], {\n variate: true,\n value: [\n 35,\n 30,\n 25\n ],\n label: 'branch angle per depth',\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1340,"value":"viewof trunkLength = Inputs.range([\n 20,\n 160\n], {\n label: 'trunkLength',\n step: 1,\n value: 80\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1341,"value":"viewof lengthDecay = Inputs.range([\n 0.3,\n 2\n], {\n label: 'lengthDecay',\n step: 0.01,\n value: 0.65\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"viewof branchThickness = Inputs.range([\n 1.1,\n 49.9\n], {\n label: 'branchThickness',\n step: 0.5,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1344,"value":"treeEditor = svgEditor({\n target: 'treeSvg',\n module: parametricSVGEditorModule\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"fourBarProse = md`### Example 5: Four-Bar Linkage — Rotary Motion\n\nA classic mechanical linkage: two fixed ground pivots (**A**, **D**), a driving crank (red), a coupler bar (blue), and an output rocker (green). The purple point **P** rides on the coupler.\n\nThe forward kinematics compute joint positions from just two parameters: \\`crankAngle\\` and \\`groundWidth\\`. Drag any joint — the solver adjusts these parameters to match. Lock **D** and drag **B** to sweep the crank. Lock **B** and drag **C** — the solver finds the crank angle that puts the rocker where you want it.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"viewof crankAngle = Inputs.range([\n -3600,\n 3600\n], {\n label: 'crankAngle',\n step: 1,\n value: 45\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1348,"value":"viewof groundWidth = Inputs.range([\n 120,\n 300\n], {\n label: 'groundWidth',\n step: 1,\n value: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1349,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"fourBarEditor = svgEditor({\n target: 'fourBarLinkage',\n module: parametricSVGEditorModule\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1351,"value":"md`## Background\n\nThis approach draws on three traditions:\n\n- **Sketchpad** (Sutherland, 1963) — established direct manipulation of constrained, parameterized graphics.\n- **Jacobian-based inverse kinematics** (Buss, 2004) — finite-difference Jacobians + normal equations for mapping geometry changes back to parameters.\n- **Sketch-n-Sketch** (Chugh et al., 2016) — output-directed programming, bidirectional editing between code and SVG.\n\n\\`svgEditor\\` combines the numerical IK approach with Observable's reactive runtime: any cell producing SVG becomes directly manipulable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"md`## Templating`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1354,"value":"svgEditor_template = lookupVariable(\n [\n \"viewof svgTargetName\",\n \"svgTargetName\",\n \"viewof svgTargetModule\",\n \"svgTargetModule\",\n \"viewof svgEditorArgs\",\n \"svgEditorArgs\",\n \"svgTemplateVariable\",\n \"svgRenderDefinition\",\n \"svgInputNames\",\n \"svgParameterViews\",\n \"svgParameterNames\",\n \"svgParameterViewByName\",\n \"svgParameterVarByName\",\n \"svgParameterViewElByName\",\n \"resolveSvgRenderArgs\",\n \"renderProbe\",\n \"viewof inverseConfig\",\n \"inverseConfig\",\n \"pseudoInverseStepMxN\",\n \"viewof svgEditorStatus\",\n \"svgEditorStatus\",\n \"svgEditor_setStatus\",\n \"getCurrentParams\",\n \"svgEditor_commitParams\",\n \"svgEditorController\",\n \"anchor\"\n ],\n parametricSVGEditorModule\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"svgTemplateVariable = lookupVariable(svgTargetName, svgTargetModule)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"svgRenderDefinition = svgTemplateVariable._definition","pinned":false,"hidden":false,"mode":"ojs"},{"id":1357,"value":"svgInputNames = (svgTemplateVariable?._inputs ?? []).map(d => d?._name).filter(Boolean)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"svgParameterNames = {\n const raw = svgParameterViews.map(v => v._name.slice('viewof '.length));\n const flat = [];\n for (const name of raw) {\n const view = svgParameterViews.find(v => v._name === 'viewof ' + name);\n const val = view?._value?.value;\n if (Array.isArray(val)) {\n for (let i = 0; i < val.length; i++)\n flat.push(`${ name }:${ i }`);\n } else {\n flat.push(name);\n }\n }\n return flat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1359,"value":"svgParameterViewByName = new Map(svgParameterNames.map((n, i) => [\n n,\n svgParameterViews[i]\n]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"svgParameterVarByName = {\n const m = svgTemplateVariable?._module;\n const entries = svgParameterNames.map(name => {\n const ci = name.lastIndexOf(':');\n if (ci > 0 && !isNaN(+name.slice(ci + 1))) {\n const baseName = name.slice(0, ci);\n return [\n name,\n m._scope.get(`viewof ${ baseName }`)\n ];\n }\n return [\n name,\n m._scope.get(`viewof ${ name }`)\n ];\n });\n return new Map(entries);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1361,"value":"svgParameterViewElByName = {\n const resolveVarValue = async v => {\n if (!v)\n return undefined;\n if (v._value !== undefined)\n return v._value;\n if (v._promise && typeof v._promise.then === 'function') {\n try {\n const r = await v._promise;\n return r !== undefined ? r : v._value;\n } catch {\n return v._value;\n }\n }\n return v._value;\n };\n const entries = [];\n for (const name of svgParameterNames) {\n const v = svgParameterVarByName.get(name);\n entries.push([\n name,\n await resolveVarValue(v)\n ]);\n }\n return new Map(entries);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"svgParameterViews = svgTemplateVariable._inputs.flatMap(v => {\n const holder = 'viewof ' + v._name;\n if (v._module._scope.has(holder)) {\n return [v._module._scope.get(holder)];\n } else\n return [];\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1364,"value":"renderProbe = {\n const probe = async (paramsByName = {}) => {\n const args = await resolveSvgRenderArgs(paramsByName);\n return svgTemplateVariable._definition(...args);\n };\n return probe;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"svgPointFromClient = (svgEl, clientX, clientY, invScreenCTM = null) => {\n const pt = svgEl.createSVGPoint();\n pt.x = clientX;\n pt.y = clientY;\n let inv = invScreenCTM;\n if (!inv) {\n const ctm = svgEl.getScreenCTM?.();\n if (!ctm)\n return {\n x: 0,\n y: 0\n };\n inv = ctm.inverse();\n }\n const p = pt.matrixTransform(inv);\n return {\n x: p.x,\n y: p.y\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"rectAnchors = svgEl => {\n const rect = svgEl.querySelector('rect');\n if (!rect)\n return [];\n const b = rect.getBBox();\n const x0 = b.x, y0 = b.y, x1 = b.x + b.width, y1 = b.y + b.height;\n return [\n {\n id: 'rect0-nw',\n x: x0,\n y: y0,\n kind: 'corner'\n },\n {\n id: 'rect0-ne',\n x: x1,\n y: y0,\n kind: 'corner'\n },\n {\n id: 'rect0-se',\n x: x1,\n y: y1,\n kind: 'corner'\n },\n {\n id: 'rect0-sw',\n x: x0,\n y: y1,\n kind: 'corner'\n }\n ];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1367,"value":"rectAnchorsStable = svgEl => {\n const markers = svgEl?.querySelectorAll?.('.__anchor');\n if (markers && markers.length > 0) {\n return Array.from(markers).map(el => ({\n id: el.dataset.anchorId,\n x: +el.getAttribute('cx'),\n y: +el.getAttribute('cy'),\n kind: el.dataset.kind || 'point'\n }));\n }\n return [];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"pickAnchor = (anchors, p, radius = 10) => {\n let best = null;\n let bestD2 = radius * radius;\n for (const a of anchors) {\n const dx = p.x - a.x, dy = p.y - a.y;\n const d2 = dx * dx + dy * dy;\n if (d2 <= bestD2) {\n bestD2 = d2;\n best = a;\n }\n }\n return best;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1369,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1370,"value":"svgEditorStatus","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"getCurrentParams = {\n const viewElMap = svgParameterViewElByName;\n return () => {\n const p = {};\n for (const name of svgParameterNames) {\n const view = viewElMap.get(name);\n if (!view)\n continue;\n const ci = name.lastIndexOf(':');\n if (ci > 0 && !isNaN(+name.slice(ci + 1))) {\n const idx = +name.slice(ci + 1);\n const arr = view.value;\n p[name] = Array.isArray(arr) ? +arr[idx] : +view.value;\n } else {\n const v = +view.value;\n p[name] = Number.isFinite(v) ? v : view.value;\n }\n }\n return p;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1372,"value":"svgEditor_setStatus = (statusTarget, patch) => {\n const current = statusTarget?.value || {};\n statusTarget.value = {\n ...current,\n ...patch,\n t: Date.now()\n };\n statusTarget.dispatchEvent(new Event('input', { bubbles: true }));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"svgEditor_createOverlay = htl => htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"svgEditor_setOverlayVisible = (overlay, visible) => {\n if (!overlay)\n return;\n overlay.style.display = visible ? 'block' : 'none';\n overlay.style.pointerEvents = visible ? 'auto' : 'none';\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1376,"value":"svgEditor_syncOverlayToTarget = (overlay, target) => {\n if (!overlay || !target)\n return null;\n let rect;\n try {\n rect = target.getBoundingClientRect();\n } catch {\n rect = null;\n }\n if (!rect || !(rect.width > 0) || !(rect.height > 0))\n return null;\n overlay.style.left = `${ rect.left }px`;\n overlay.style.top = `${ rect.top }px`;\n overlay.style.width = `${ rect.width }px`;\n overlay.style.height = `${ rect.height }px`;\n overlay.setAttribute('width', rect.width);\n overlay.setAttribute('height', rect.height);\n const vb = target.getAttribute?.('viewBox');\n if (vb)\n overlay.setAttribute('viewBox', vb);\n else {\n const {w, h} = svgEditor_getSvgNumericWidthHeight(target);\n overlay.setAttribute('viewBox', `0 0 ${ w } ${ h }`);\n }\n return rect;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1377,"value":"svgEditor_clearOverlay = overlay => {\n if (!overlay)\n return;\n while (overlay.firstChild)\n overlay.removeChild(overlay.firstChild);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1378,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1379,"value":"svgEditor_computeOverTarget = (rect, clientX, clientY) => {\n if (!rect)\n return false;\n return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"svgEditor_clampToView = (view, value) => {\n const input = view?.querySelector?.('input[type=\"range\"], input[type=\"number\"]');\n if (!input)\n return value;\n const min = input.min !== '' ? +input.min : -Infinity;\n const max = input.max !== '' ? +input.max : Infinity;\n if (Number.isFinite(min))\n value = Math.max(min, value);\n if (Number.isFinite(max))\n value = Math.min(max, value);\n return value;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1381,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1382,"value":"svgEditor_anchorFromSvgById = (svgEl, anchorsFn, anchorId) => {\n const anchors = anchorsFn(svgEl);\n const a = anchors.find(d => d.id === anchorId);\n return a ? [\n a.x,\n a.y\n ] : null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"svgEditor_estimateJacobianForAnchor = async ({anchorId, p0, renderProbe, paramNames, anchorsFn}) => {\n const baseSvg = await renderProbe(p0);\n const a0 = svgEditor_anchorFromSvgById(baseSvg, anchorsFn, anchorId);\n if (!a0)\n return null;\n const names = paramNames.slice();\n const n = names.length;\n const J = [\n new Array(n).fill(0),\n new Array(n).fill(0)\n ];\n for (let i = 0; i < n; i++) {\n const name = names[i];\n const v = +p0[name];\n if (!Number.isFinite(v))\n continue;\n const eps = Math.max(Math.abs(v) * 0.000001, 0.000001);\n const p1 = {\n ...p0,\n [name]: v + eps\n };\n const svg1 = await renderProbe(p1);\n const a1 = svgEditor_anchorFromSvgById(svg1, anchorsFn, anchorId);\n if (!a1)\n continue;\n J[0][i] = (a1[0] - a0[0]) / eps;\n J[1][i] = (a1[1] - a0[1]) / eps;\n }\n return {\n names,\n J,\n a0\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":1385,"value":"viewof inverseConfig = Inputs.form({\n method: Inputs.select([\n 'L2 damped pseudoinverse',\n 'Jacobian transpose',\n 'Sparse (1 param)',\n 'Sparse (2 params)'\n ], {\n label: 'Inverse method',\n value: 'L2 damped pseudoinverse'\n }),\n damping: Inputs.number({\n label: 'Damping (λ, for L2 / stability)',\n value: 0.000001,\n step: 0.000001\n }),\n alpha: Inputs.number({\n label: 'Alpha (step size, Jacobian transpose)',\n value: 0.2,\n step: 0.01\n }),\n l1Weight: Inputs.number({\n label: 'L1 weight (sparsity penalty, sparse modes)',\n value: 0.001,\n step: 0.001\n })\n}, { label: 'Inverse solver' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1386,"value":"viewof parametricSVGEditorModule = thisModule()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"viewof svgEditorStatus = {\n const v = this ?? Object.assign(new EventTarget(), { value: {} });\n return v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1388,"value":"viewof svgTargetName = Inputs.input()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"viewof svgTargetModule = Inputs.input(parametricSVGEditorModule, { label: 'svgTargetModule' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"viewof scissorParams = vector([\n -200,\n 400\n], {\n label: 'scissor params',\n dimensions: 12,\n value: [\n 70,\n 0,\n 25,\n 70,\n 0,\n 25,\n 70,\n 0,\n 25,\n 70,\n 0,\n 25\n ],\n variate: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"scissorEditor = {\n scissorShape;\n return svgEditor({\n target: 'scissorSvg',\n module: parametricSVGEditorModule,\n invalidation\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"scissorShape = Generators.observe(notify => {\n const viewEl = viewof scissorParams;\n let lastLen = -1;\n const tick = () => {\n const cur = viewEl.value.length;\n if (cur !== lastLen) {\n lastLen = cur;\n notify(cur);\n }\n };\n tick();\n viewEl.addEventListener('input', tick);\n return () => viewEl.removeEventListener('input', tick);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"trellisProse = md`### Example: Trellis — A Tree of X-Units\n\nEach unit is a quadrilateral with two diagonal rods crossing at a computed pivot. The tree shape lives in the slice metadata: each unit's six params are \\`[parentIdx, edgeIdx, c2x, c2y, c3x, c3y]\\`. \\`parentIdx = -1\\` means attached to the ground (one corner fixed at origin, the other draggable).\n\n- **Drag** a top corner to reshape the unit.\n- **+** on a free edge spawns a new unit using that edge as its bottom — branch in three directions per node.\n- **✕** on the pivot deletes the unit and all its descendants.\n- The whole sub-tree folds and unfolds as you drag the ground's free point.\n\nThe chain stays linear in the params array; the tree is implicit in the metadata. Each unit's render reads its own \\`parentIdx\\` to look up where its bottom edge sits — so the existing affordance API handles a tree without any tree-aware machinery.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"viewof trellisGround = vector([\n -200,\n 400\n], {\n label: 'trellis ground',\n dimensions: 2,\n value: [\n 220,\n 360\n ],\n variate: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"viewof trellisUnits = vector([\n -10,\n 400\n], {\n label: 'trellis units',\n dimensions: 4,\n value: [],\n variate: true,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":1399,"value":"trellisEditor = {\n trellisShape;\n return svgEditor({\n target: 'trellisSvg',\n module: parametricSVGEditorModule,\n invalidation\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1400,"value":"trellisShape = Generators.observe(notify => {\n const viewEl = viewof trellisUnits;\n let lastLen = -1;\n const tick = () => {\n const cur = viewEl.value.length;\n if (cur !== lastLen) {\n lastLen = cur;\n notify(cur);\n }\n };\n tick();\n viewEl.addEventListener('input', tick);\n return () => viewEl.removeEventListener('input', tick);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1401,"value":"viewof svgEditorArgs = Inputs.input({ mode: 'solve' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1402,"value":"constraint = (type, opts = {}) => {\n const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n g.classList.add('__constraint');\n g.setAttribute('pointer-events', 'none');\n const name = opts.name ?? `${ type }_${ Math.random().toString(36).slice(2, 8) }`;\n g.dataset.constraintName = name;\n g.dataset.constraintType = type;\n g.dataset.weight = String(opts.weight ?? 1);\n if (type === 'coincident') {\n const ax = +opts.ax, ay = +opts.ay, bx = +opts.bx, by = +opts.by;\n g.dataset.residual = JSON.stringify([\n ax - bx,\n ay - by\n ]);\n } else {\n g.dataset.residual = JSON.stringify(opts.residual ?? [0]);\n }\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"constraintsFromSvg = svgEl => {\n const els = svgEl?.querySelectorAll?.('.__constraint');\n if (!els || !els.length)\n return [];\n return Array.from(els).map(el => {\n let residual = [];\n try {\n residual = JSON.parse(el.dataset.residual || '[]');\n } catch {\n }\n return {\n name: el.dataset.constraintName,\n type: el.dataset.constraintType,\n residual,\n weight: +el.dataset.weight || 1\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"svgEditor_estimateJacobianForConstraint = async ({name, p0, renderProbe, paramNames, constraintsFn}) => {\n const baseSvg = await renderProbe(p0);\n const c0 = constraintsFn(baseSvg).find(c => c.name === name);\n if (!c0)\n return null;\n const r0 = c0.residual.map(v => +v || 0);\n const k = r0.length;\n const n = paramNames.length;\n const J = Array.from({ length: k }, () => new Array(n).fill(0));\n for (let i = 0; i < n; i++) {\n const pname = paramNames[i];\n const v = +p0[pname];\n if (!Number.isFinite(v))\n continue;\n const eps = Math.max(Math.abs(v) * 0.000001, 0.000001);\n const p1 = {\n ...p0,\n [pname]: v + eps\n };\n const svg1 = await renderProbe(p1);\n const c1 = constraintsFn(svg1).find(c => c.name === name);\n if (!c1)\n continue;\n for (let j = 0; j < k; j++)\n J[j][i] = ((+c1.residual[j] || 0) - r0[j]) / eps;\n }\n return {\n name,\n J,\n r0,\n weight: c0.weight\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1405,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"viewof constraintEnabled = Inputs.toggle({\n label: 'constraint',\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"viewof cAx = Inputs.range([\n 0,\n 400\n], {\n label: 'A.x',\n step: 1,\n value: 80\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"viewof cAy = Inputs.range([\n 0,\n 400\n], {\n label: 'A.y',\n step: 1,\n value: 140\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"viewof cBx = Inputs.range([\n 0,\n 400\n], {\n label: 'B.x',\n step: 1,\n value: 180\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1410,"value":"viewof cBy = Inputs.range([\n 0,\n 400\n], {\n label: 'B.y',\n step: 1,\n value: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1411,"value":"viewof cCx = Inputs.range([\n 0,\n 400\n], {\n label: 'C.x',\n step: 1,\n value: 220\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1412,"value":"viewof cCy = Inputs.range([\n 0,\n 400\n], {\n label: 'C.y',\n step: 1,\n value: 220\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1413,"value":"viewof cDx = Inputs.range([\n 0,\n 400\n], {\n label: 'D.x',\n step: 1,\n value: 320\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1414,"value":"viewof cDy = Inputs.range([\n 0,\n 400\n], {\n label: 'D.y',\n step: 1,\n value: 280\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"constraintSvg = htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1416,"value":"constraintEditor = svgEditor({\n target: 'constraintSvg',\n module: parametricSVGEditorModule,\n invalidation\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":1418,"value":"svgEditor({\n target: 'mySvg',\n module: parametricSVGEditorModule\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"mutable anchorTreeData = new Map([[\n 'root',\n {\n children: [\n {\n id: 'b0',\n angleIdx: 0,\n lengthIdx: 1\n },\n {\n id: 'b1',\n angleIdx: 2,\n lengthIdx: 3\n }\n ]\n }\n ]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1305,"value":"robotEditor = svgEditor({\n target: 'robotArm',\n module: parametricSVGEditorModule\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"growEdge = (start, end) => htl.svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1307,"value":"md","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"import { cloneViaSandbox } from \"@tomlarkworthy/dataflow-templating\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1421,"value":"import { lookupVariable, thisModule } from \"@tomlarkworthy/runtime-sdk\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1422,"value":"import { manipulate } from \"@tomlarkworthy/manipulate\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1423,"value":"import { md } from \"@tomlarkworthy/editable-md\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W47","stdlib":"1","titling":"auto"}