3e:null 3f:["$","title",null,{"children":"Drag to re-arrange circle | Ruzgar Imski | Observable"}] 45:T2177,viewof order = { const N = 60; // Number of elements // Create a circular drag and drop interface const width = 700; const height = width; const radius = Math.min(width, height) / 2.5; let hWedge = radius/3 const textDistance = hWedge/2+15; // Distance to place text outside trapezoids // Create SVG const svg = DOM.svg(width, height); const svgSelection = d3.select(svg).style("overflow", "visible"); // Create a group and center it const g = svgSelection.append("g") .attr("transform", `translate(${width/2}, ${height/2})`); //const color = d => d3.interpolateRainbow(d.id / N); const color = d => d3.interpolateCool(d.id / N); // Calculate position on circle function positionOnCircle(index, count) { const angle = (index / count) * 2 * Math.PI - Math.PI/2; // Start from top return { x: radius * Math.cos(angle), y: radius * Math.sin(angle), angle: angle }; } // Calculate text position outside trapezoid function calculateTextPosition(x, y) { // Calculate angle from center const angle = Math.atan2(y, x); return { x: x+textDistance * Math.cos(angle), y: y+textDistance * Math.sin(angle) }; } // Create data with initial positions const data = d3.range(N).map(i => { const pos = positionOnCircle(i, N); return { id: i, slot: i, originalX: pos.x, originalY: pos.y, angle: pos.angle }; }); // Calculate angle between two points (in radians) function angleFromCenter(x, y) { return Math.atan2(y, x); } // Convert angle to slot function angleToSlot(angle, count) { // Normalize angle to 0-2π range let normAngle = angle; if (normAngle < -Math.PI/2) normAngle += 2 * Math.PI; // Convert to 0-1 range starting from top (-π/2) const normalized = (normAngle + Math.PI/2) / (2 * Math.PI); // Convert to slot return Math.round(normalized * count) % count; } let rank = []; // Function to create a trapezoid path that points toward the center function createTrapezoidPath(x, y) { // Calculate angle from position to center (0,0) const aCenter = Math.atan2(y, x); const aWedge = 2*Math.PI / N const wTop = 2 * (radius+hWedge/2) * Math.tan(Math.PI/N); const wBottom = 2 * (radius-hWedge/2) * Math.tan(Math.PI/N); // Calculate the corner points of the trapezoid (unrotated) const points = [ { x: -wTop/2, y: -hWedge/2 }, // top left { x: wTop/2, y: -hWedge/2 }, // top right { x: wBottom/2, y: hWedge/2 }, // bottom right { x: -wBottom/2, y: hWedge/2 } // bottom left ]; // Rotate points by the calculated angle // We add π/2 to make the narrow end point toward the center const rotatedPoints = points.map(p => { return { x: p.x * Math.cos(aCenter + Math.PI/2) - p.y * Math.sin(aCenter + Math.PI/2), y: p.x * Math.sin(aCenter + Math.PI/2) + p.y * Math.cos(aCenter + Math.PI/2) }; }); // Create the path string from rotated points return `M ${rotatedPoints[0].x} ${rotatedPoints[0].y} L ${rotatedPoints[1].x} ${rotatedPoints[1].y} L ${rotatedPoints[2].x} ${rotatedPoints[2].y} L ${rotatedPoints[3].x} ${rotatedPoints[3].y} Z`; } // Create elements const elements = g.selectAll(".element") .data(data) .enter() .append("g") .attr("class", "element") .attr("transform", d => `translate(${d.originalX}, ${d.originalY})`); // Add visual elements (trapezoids) elements.append("path") .attr("d", d => createTrapezoidPath(d.originalX, d.originalY)) .attr("fill", d => color(d)) .attr("opacity", 0.8); // Add text labels (positioned outside trapezoids) const textElements = g.selectAll(".text-label") .data(data) .enter() .append("text") .attr("class", "text-label") .text(d => d.id) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("fill", "black") .attr("font-family", "Arial") .attr("font-size", "12px"); // Position the text labels outside the trapezoids textElements.each(function(d) { const textPos = calculateTextPosition(d.originalX, d.originalY); d3.select(this) .attr("x", textPos.x) .attr("y", textPos.y); }); // Apply drag behavior let dragStartX, dragStartY; let draggedElement; let currentSlot; const drag = d3.drag() .on("start", function(event, d) { draggedElement = d; d3.select(this) .raise() .classed("active", true); dragStartX = event.x; dragStartY = event.y; currentSlot = d.slot; }) .on("drag", function(event, d) { // Calculate new position relative to drag start const dx = event.x - dragStartX; const dy = event.y - dragStartY; // Update position of trapezoid d3.select(this) .attr("transform", `translate(${d.originalX + dx}, ${d.originalY + dy})`); // Calculate current center of the dragged trapezoid const cx = d.originalX + dx; const cy = d.originalY + dy; // Update the trapezoid path d3.select(this) .select("path") .attr("d", createTrapezoidPath(cx, cy)); // Update position of text label const textPos = calculateTextPosition(cx, cy); textElements.filter(e => e.id === d.id) .attr("x", textPos.x) .attr("y", textPos.y); // Calculate angle from center const angle = angleFromCenter(cx, cy); // Calculate nearest slot based on angle const newSlot = angleToSlot(angle, N); // If slot hasn't changed, exit if (newSlot === currentSlot) return; // Create an array of elements by their slot position let elementsBySlot = Array(N).fill(null); elements.each(el => { elementsBySlot[el.slot] = el; }); // Use the shift function to rearrange elements let shiftedElements = shift(elementsBySlot, d, newSlot); // Update slots based on the new arrangement shiftedElements.forEach((el, idx) => { if (el === null) return; // If the slot has changed, update position and animate if (el.slot !== idx) { el.slot = idx; // Calculate new position const pos = positionOnCircle(idx, N); // Only update originalX/Y for non-dragged elements if (el !== draggedElement) { el.originalX = pos.x; el.originalY = pos.y; // Animate trapezoid to new position d3.select(g.selectAll(".element").filter(e => e.id === el.id).node()) .transition() .attr("transform", `translate(${pos.x}, ${pos.y})`) .select("path") .attr("d", createTrapezoidPath(pos.x, pos.y)); // Animate text to new position const textPos = calculateTextPosition(pos.x, pos.y); textElements.filter(t => t.id === el.id) .transition() .attr("x", textPos.x) .attr("y", textPos.y); } } }); // Update value elements.data().forEach((d, i) => rank[d.slot] = i); svg.value = rank; svg.dispatchEvent(new CustomEvent("input")); // Update current slot for the dragged element currentSlot = newSlot; }) .on("end", function(event, d) { d3.select(this).classed("active", false); // Update the original position based on final slot const pos = positionOnCircle(d.slot, N); d.originalX = pos.x; d.originalY = pos.y; // Animate trapezoid to final position d3.select(this) .transition() .attr("transform", `translate(${pos.x}, ${pos.y})`) .select("path") .attr("d", createTrapezoidPath(pos.x, pos.y)); // Animate text to final position const textPos = calculateTextPosition(pos.x, pos.y); textElements.filter(e => e.id === d.id) .transition() .attr("x", textPos.x) .attr("y", textPos.y); draggedElement = null; }); // Apply drag behavior to elements elements.call(drag); // Initialize value elements.data().forEach((d, i) => rank[d.slot] = i); svg.value = rank; // Return the widget return svg; }46:Tf110,viewof bagua_v2 = { /* Note to Claude: This is JavaScript code from an observable notebook. Do not create functions that are used in this code but not defined because they are defined in other cells. If asked to modify this cell, return the full code that can be copy and pasted, starting with the keyword viewof. This code uses a 'shift' function which is defined elsewhere in the Observable notebook*/ // === Core Setup === const config = fList.config; const centerX = config.width / 2; const centerY = config.height / 2; const gradient = fList.getGradient(); // Log the factors for multi-click selection const factors = fList.getFactorsAscending(config.number); // === State Management === const state = fList.initializeState(config); // === Click Tracking === const clickTracker = fList.createClickTrackingSystem(); // === Animation System === const animationSystem = fList.createAnimationSystem(); // === DOM Creation === const container = document.createElement("div"); const canvas = document.createElement("canvas"); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); let { ctx, dpr } = fList.setupCanvas(canvas, config.scaledWidth, config.scaledHeight); container.appendChild(canvas); container.appendChild(svg); container.tabIndex = 0; container.className = 'bagua-container'; container.style.width = config.scaledWidth + 'px'; container.style.height = config.scaledHeight + 'px'; svg.setAttribute('class', 'bagua-svg'); svg.style.transform = `scale(${config.scaleFactor})`; canvas.className = 'bagua-canvas'; let svgSelection = d3.select(svg).attr('width', config.width).attr('height', config.height); const defs = svgSelection.append("defs"); const filter = fList.createShadowFilter(defs); let backgroundRect = svgSelection.append("rect") .attr("class", "background-rect") .attr("width", config.width) .attr("height", config.height); const normalGroup = svgSelection.append("g").attr("class", "normal-wedges"); const selectedGroup = svgSelection.append("g").attr("class", "selected-wedges").attr("filter", "url(#drop-shadow)"); const selectionRect = svgSelection.append("rect").attr("class", "selection-rect").attr("display", "none"); const reflectionLine = svgSelection.append("line").attr("class", "reflection-line").attr("display", "none"); const symGroup = svgSelection.append("g").attr("class", "symmetry-group"); // === Data Initialization === let nodeData = fList.createNodeData(config.number, state.sequence, fList.getPosFromIdx, fList.calcRotation, centerX, centerY, config.radius); let linkData = fList.createLinkData(config.number, gradient); // === Animation Functions === function scheduleRedraw() { animationSystem.scheduleRedraw(state, drawLinks); } function scheduleSVGOp(op) { animationSystem.scheduleSVGOp(state, op); scheduleRedraw(); } // === Core Functions === function saveState() { const result = fList.saveState(state.historyIndex, state.stateHistory, state.sequence, nodeData, config.maxHistorySize); state.stateHistory = result.stateHistory; state.historyIndex = result.historyIndex; } function saveStateIfDifferent() { const currentSel = nodeData.filter(d => d.selected).map(d => d.id).sort((a, b) => a - b); const currentSeq = [...state.sequence]; if (state.stateHistory.length > 0) { const mostRecentState = state.stateHistory[state.stateHistory.length - 1]; const sequencesSame = currentSeq.length === mostRecentState.sequence.length && currentSeq.every((val, i) => val === mostRecentState.sequence[i]); const prevSelectionsSorted = [...mostRecentState.selections].sort((a, b) => a - b); const selectionsSame = currentSel.length === prevSelectionsSorted.length && currentSel.every((val, i) => val === prevSelectionsSorted[i]); if (sequencesSame && selectionsSame) return; } saveState(); } function restoreState(newIdx) { if (newIdx >= 0 && newIdx < state.stateHistory.length) { state.historyIndex = newIdx; const histState = state.stateHistory[state.historyIndex]; state.sequence = [...histState.sequence]; nodeData.forEach((d) => { d.selected = histState.selections.includes(d.id); d.hover = false; }); colorWedges(); updateWedgeGroups(); drawLinks(); let animsStarted = 0; nodeData.forEach((d) => { const correctSlot = state.sequence.findIndex(e => e === d.id); const targetPos = fList.getPosFromIdx(correctSlot, centerX, centerY, config.radius, config.number); const wedgeSelection = wedgeGroups.filter(wedgeData => wedgeData.id === d.id); const existingTransition = wedgeSelection.node()?.__transition; const oldSlot = d.slot; d.slot = correctSlot; if (!fList.isAtCorrectPos(d, correctSlot, fList.getPosFromIdx, centerX, centerY, config.radius, config.number)) { const needsNewAnim = !existingTransition || oldSlot !== correctSlot; if (needsNewAnim) { animsStarted++; const xTween = d3.interpolate(d.sx, targetPos.x); const yTween = d3.interpolate(d.sy, targetPos.y); wedgeSelection.interrupt().transition().duration(config.speed.history).ease(d3.easeQuadInOut) .tween("history-restore", function() { return function(t) { d.sx = xTween(t); d.sy = yTween(t); d.sr = fList.calcRotation(d.sx, d.sy, centerX, centerY); d.hover = false; scheduleSVGOp(() => drawWedge(wedgeSelection, d)); scheduleRedraw(); }; }) .on("end", function() { animsStarted--; if (animsStarted === 0) { state.rendering.historyAnimInProgress = false; nodeData.forEach(node => node.hover = false); colorWedges(); } }); } } }); if (animsStarted > 0) { state.rendering.historyAnimInProgress = true; } else { const anyAnimating = wedgeGroups.nodes().some(node => node.__transition); state.rendering.historyAnimInProgress = anyAnimating; } wedgeGroups.style("pointer-events", state.modifiers.isCtrlHeld ? "none" : "all"); return true; } return false; } function drawWedge(selection, d) { fList.drawWedge(selection, d, config.wedgeSize, config.textOffset, fList.getWedgeWidths, config.radius, config.number); } function drawAllWedges() { wedgeGroups.each(function(d) { drawWedge(d3.select(this), d); }); } function drawLinks() { fList.drawLinks(ctx, config.scaledWidth, config.scaledHeight, config.scaleFactor, config.wedgeSize, config.linkStyle, linkData, nodeData); } function colorWedges() { wedgeGroups.each(function(d) { const wedge = d3.select(this).select("path"); d.fill = "lightgrey"; if (d.hover) d.fill = "lightgreen"; if (d.selected) d.fill = "#22DDAA"; if (d.grabbed) d.fill = "#22DDAA"; wedge.attr("fill", d.fill); }); } function updateWedgeGroups() { wedgeGroups.each(function(d) { const wedgeEl = this; const isElevated = d.selected || d.grabbed; const currentParent = wedgeEl.parentNode; if (isElevated && currentParent !== selectedGroup.node()) { selectedGroup.node().appendChild(wedgeEl); } else if (!isElevated && currentParent !== normalGroup.node()) { normalGroup.node().appendChild(wedgeEl); } }); } // === Symmetry System === function calcSymCounts() { const { factors, defaultCount } = fList.calcSymCounts(config.number, fList.getFactors); state.symmetry.possibleSymCounts = factors; state.symmetry.symCount = defaultCount; } calcSymCounts(); function updateSymLines() { fList.updateSymLines(symGroup, centerX, centerY, config.width, state.symmetry.symCount, state.symmetry.symAngle); fList.updateSymHandle(symGroup, centerX, centerY, config.width, state.symmetry.symAngle); fList.updateSymControls(symGroup, state.symmetry.possibleSymCounts, state.symmetry.symCount); } function changeSymCount(dir) { const idx = state.symmetry.possibleSymCounts.indexOf(state.symmetry.symCount); const newIdx = idx + dir; if (newIdx >= 0 && newIdx < state.symmetry.possibleSymCounts.length) { state.symmetry.symCount = state.symmetry.possibleSymCounts[newIdx]; updateSymLines(); } } fList.createSymUI(symGroup, centerX, centerY, changeSymCount); const symHandleDrag = d3.drag() .on("start", function(event) { state.altMode.isAltDragging = true; state.symmetry.altDragStartAngle = Math.atan2(event.y - centerY, event.x - centerX); d3.select(this).style("cursor", "grabbing"); }) .on("drag", function(event) { if (!state.altMode.isAltDragging) return; const snapAngle = fList.calcReflAngle(event.x, event.y, centerX, centerY, config.number, fList.shortAngleDiff, fList.getAllSnapAngles); state.symmetry.symAngle = snapAngle; updateSymLines(); }) .on("end", function(event) { state.altMode.isAltDragging = false; d3.select(this).style("cursor", "grab"); }); symGroup.select(".symmetry-handle").call(symHandleDrag); // === Reflection and Transformation Functions === function updateReflLine(angle) { const lineLen = config.height / 2; const x1 = centerX + Math.cos(angle + Math.PI) * lineLen; const y1 = centerY + Math.sin(angle + Math.PI) * lineLen; const x2 = centerX + Math.cos(angle) * lineLen; const y2 = centerY + Math.sin(angle) * lineLen; reflectionLine.attr("x1", x1).attr("y1", y1).attr("x2", x2).attr("y2", y2); state.reflection.currentReflectionLineAngle = angle; } function updateReflLineForRot(angle) { const lineLen = config.height / 2; reflectionLine.attr("x1", centerX).attr("y1", centerY).attr("x2", centerX + Math.cos(angle) * lineLen).attr("y2", centerY + Math.sin(angle) * lineLen); state.reflection.currentReflectionLineAngle = angle; } function reflectWedges() { wedgeGroups.interrupt(); nodeData.forEach(d => d.hover = false); colorWedges(); const newSeq = fList.calcReflectedSeq(state.sequence, state.reflection.reflectionAngle, config.number); state.sequence = newSeq; nodeData.forEach((d) => { const newSlot = state.sequence.findIndex(e => e === d.id); const targetPos = fList.getPosFromIdx(newSlot, centerX, centerY, config.radius, config.number); const wedgeSelection = wedgeGroups.filter(wedgeData => wedgeData.id === d.id); const xTween = d3.interpolate(d.sx, targetPos.x); const yTween = d3.interpolate(d.sy, targetPos.y); wedgeSelection.interrupt().transition().duration(config.speed.reflect).ease(d3.easeQuadOut) .tween("reflect", function() { return function(t) { d.sx = xTween(t); d.sy = yTween(t); d.sr = fList.calcRotation(d.sx, d.sy, centerX, centerY); d.slot = newSlot; d.hover = false; scheduleSVGOp(() => drawWedge(wedgeSelection, d)); scheduleRedraw(); }; }); }); saveState(); } function rotateWedges(rotInc) { nodeData.forEach(d => d.hover = false); colorWedges(); const newSeq = fList.calcRotatedSeq(state.originalSequence, rotInc, config.number); state.sequence = newSeq; nodeData.forEach((d) => { const newSlot = state.sequence.findIndex(e => e === d.id); const wedgeSelection = wedgeGroups.filter(wedgeData => wedgeData.id === d.id); const currentAngle = Math.atan2(d.sy - centerY, d.sx - centerX); const targetPos = fList.getPosFromIdx(newSlot, centerX, centerY, config.radius, config.number); const targetAngleFromSlot = Math.atan2(targetPos.y - centerY, targetPos.x - centerX); const angleDiff = fList.shortAngleDiff(currentAngle, targetAngleFromSlot); const targetAngle = currentAngle + angleDiff; const angleTween = d3.interpolate(currentAngle, targetAngle); d.slot = newSlot; wedgeSelection.interrupt().transition().duration(config.speed.rotate).ease(d3.easeQuadOut) .tween("rotate", function() { return function(t) { const currentTweenAngle = angleTween(t); d.sx = centerX + config.radius * Math.cos(currentTweenAngle); d.sy = centerY + config.radius * Math.sin(currentTweenAngle); d.sr = fList.calcRotation(d.sx, d.sy, centerX, centerY); d.hover = false; scheduleSVGOp(() => drawWedge(wedgeSelection, d)); scheduleRedraw(); }; }); }); } function reorderWedges() { nodeData.forEach((d) => { const correctSlot = state.sequence.findIndex(e => e === d.id); if (d.slot !== correctSlot && !d.grabbed) { d.slot = correctSlot; const targetPos = fList.getPosFromIdx(correctSlot, centerX, centerY, config.radius, config.number); const xTween = d3.interpolate(d.sx, targetPos.x); const yTween = d3.interpolate(d.sy, targetPos.y); const wedgeSelection = wedgeGroups.filter(wedgeData => wedgeData.id === d.id); wedgeSelection.interrupt().transition().duration(config.speed.reorder).ease(d3.easeQuadOut) .tween("move-to-correct-slot", function() { return function(t) { d.sx = xTween(t); d.sy = yTween(t); d.sr = fList.calcRotation(d.sx, d.sy, centerX, centerY); d.hover = false; scheduleSVGOp(() => drawWedge(wedgeSelection, d)); colorWedges(); scheduleRedraw(); }; }); } }); } function deselectAll() { const hadSel = nodeData.some(d => d.selected); nodeData.forEach(d => { d.selected = false; d.hover = false; d.grabbed = false; }); colorWedges(); updateWedgeGroups(); drawLinks(); if (hadSel) saveState(); } function updateDragSel(rectX, rectY, rectW, rectH, shiftPressed, mouseX, mouseY) { const { bottom: wBot, top: wTop } = fList.getWedgeWidths(config.radius, config.wedgeSize, config.number); nodeData.forEach(d => { const corners = fList.getWedgeCorners(d, config.wedgeSize, wBot, wTop); const inRect = fList.wedgeIntersectsRect(d, rectX, rectY, rectW, rectH, () => corners); const underMouse = fList.isPointInWedge(mouseX, mouseY, d, config.wedgeSize, wBot, wTop); const wasInitSel = state.drag.initiallySelectedWedges.includes(d.id); if (shiftPressed) { d.selected = wasInitSel || inRect || underMouse; } else { d.selected = inRect || underMouse; } if (!state.modifiers.isAltHeld) { d.hover = !state.modifiers.isCtrlHeld && (inRect || underMouse); } }); colorWedges(); updateWedgeGroups(); drawLinks(); } // === Drag System === function dragStarted(event, d) { state.mouse.currentMousePos.x = event.x; state.mouse.currentMousePos.y = event.y; state.drag.isDragging = true; state.drag.startX = event.x; state.drag.startY = event.y; if (state.modifiers.isAltHeld) { state.altMode.altDragOccurred = true; const isAxis = fList.isAxisWedge(d, state.symmetry.symAngle, state.symmetry.symCount, config.number); nodeData.forEach(node => { node.selected = false; }); if (isAxis) { state.altMode.isAltAxis = true; state.altMode.altAxisWedges = fList.getAxisWedges(d, nodeData, config.number, state.symmetry.symAngle, state.symmetry.symCount); state.altMode.altAxisSlots = state.altMode.altAxisWedges.map(w => w.slot); state.altMode.altAxisPos = state.altMode.altAxisWedges.map(w => ({ sx: w.sx, sy: w.sy, sr: w.sr })); state.drag.dragOffset.x = d.sx - event.x; state.drag.dragOffset.y = d.sy - event.y; state.altMode.altAxisWedges.forEach(w => { w.grabbed = true; w.selected = true; }); colorWedges(); updateWedgeGroups(); saveStateIfDifferent(); return; } else { state.altMode.isAltRefl = true; nodeData.forEach(node => { node.sx0 = node.sx; node.sy0 = node.sy; node.sr0 = node.sr; }); state.altMode.altReflWedges = fList.getReflWedges(d, nodeData, config.number, state.symmetry.symAngle, state.symmetry.symCount); state.altMode.altReflSlots = state.altMode.altReflWedges.map(w => w.slot); state.altMode.altReflPos = state.altMode.altReflWedges.map(w => ({ sx: w.sx, sy: w.sy, sr: w.sr })); state.drag.dragOffset.x = d.sx - event.x; state.drag.dragOffset.y = d.sy - event.y; state.altMode.altReflWedges.forEach(w => { w.grabbed = true; w.selected = true; }); colorWedges(); updateWedgeGroups(); saveStateIfDifferent(); return; } } // Normal drag behavior nodeData.forEach(node => { node.sx0 = node.sx; node.sy0 = node.sy; node.sr0 = node.sr; node.hover = false; // Clear hover states }); state.drag.dragOffset.x = d.sx - event.x; state.drag.dragOffset.y = d.sy - event.y; d3.select(this).interrupt(); if (!event.sourceEvent.shiftKey && !d.selected) { nodeData.forEach(node => { if (node.id !== d.id) node.selected = false; }); } d.selected = true; if (event.sourceEvent.shiftKey) { colorWedges(); updateWedgeGroups(); saveStateIfDifferent(); } colorWedges(); updateWedgeGroups(); drawLinks(); } function dragged(event, d) { state.mouse.currentMousePos.x = event.x; state.mouse.currentMousePos.y = event.y; if (state.altMode.isAltAxis) { const primaryAxisW = state.altMode.altAxisWedges[0]; const easing = 0.3; state.drag.dragOffset.x = Math.sign(state.drag.dragOffset.x) * Math.max(0, Math.abs(state.drag.dragOffset.x) - easing * Math.abs(event.x + state.drag.dragOffset.x - primaryAxisW.sx)); state.drag.dragOffset.y = Math.sign(state.drag.dragOffset.y) * Math.max(0, Math.abs(state.drag.dragOffset.y) - easing * Math.abs(event.y + state.drag.dragOffset.y - primaryAxisW.sy)); primaryAxisW.sx = event.x + state.drag.dragOffset.x; primaryAxisW.sy = event.y + state.drag.dragOffset.y; primaryAxisW.sr = fList.calcRotation(primaryAxisW.sx, primaryAxisW.sy, centerX, centerY); primaryAxisW.sd = Math.sqrt((primaryAxisW.sx - centerX) ** 2 + (primaryAxisW.sy - centerY) ** 2); const startPos = state.altMode.altAxisPos[0]; const rotDelta = primaryAxisW.sr - startPos.sr; const distRatio = primaryAxisW.sd / config.radius; for (let i = 1; i < state.altMode.altAxisWedges.length; i++) { const w = state.altMode.altAxisWedges[i]; const startPos = state.altMode.altAxisPos[i]; const newRot = startPos.sr + rotDelta; const angleRad = (newRot + 180) * (Math.PI / 180); w.sx = centerX + distRatio * config.radius * Math.cos(angleRad); w.sy = centerY + distRatio * config.radius * Math.sin(angleRad); w.sr = newRot; w.sd = Math.sqrt((w.sx - centerX) ** 2 + (w.sy - centerY) ** 2); const wSel = wedgeGroups.filter(wd => wd.id === w.id); scheduleSVGOp(() => drawWedge(wSel, w)); } const primaryAxisTargetSlot = fList.getIdxFromRot(primaryAxisW.sr, config.number); const primaryAxisOrigSlot = state.altMode.altAxisSlots[0]; if (primaryAxisTargetSlot !== primaryAxisOrigSlot && fList.isAxisSlot(primaryAxisTargetSlot, config.number, state.symmetry.symAngle, state.symmetry.symCount)) { const slotDelta = (primaryAxisTargetSlot - primaryAxisOrigSlot + config.number) % config.number; const selWedges = []; state.altMode.altAxisWedges.forEach((w, i) => { const origSlot = state.altMode.altAxisSlots[i]; const newSlot = (origSlot + slotDelta + config.number) % config.number; if (fList.isAxisSlot(newSlot, config.number, state.symmetry.symAngle, state.symmetry.symCount)) { selWedges.push({ wedge: w, oldSlot: origSlot, newSlot: newSlot, id: w.id }); } }); if (selWedges.length > 0) { let bufferSlot = 0; if (selWedges.length < config.number) { for (let i = 0; i < config.number; i++) { bufferSlot = i; if (!selWedges.some(obj => obj.oldSlot === bufferSlot)) break; } } const moveDelta = slotDelta; if (moveDelta > config.number / 2) { selWedges.sort((a, b) => (-b.oldSlot + bufferSlot + config.number) % config.number - (-a.oldSlot + bufferSlot + config.number) % config.number); } else { selWedges.sort((a, b) => (b.oldSlot - bufferSlot + config.number) % config.number - (a.oldSlot - bufferSlot + config.number) % config.number); } const dispWedges = []; selWedges.forEach(change => { const wAtTarget = nodeData.find(node => node.slot === change.newSlot); if (wAtTarget && wAtTarget.id !== change.wedge.id) { dispWedges.push({ wedge: wAtTarget, fromSlot: change.newSlot, toSlot: change.oldSlot, draggedWedge: change.wedge, draggedToSlot: change.newSlot }); } }); dispWedges.forEach(move => { state.sequence = shift(state.sequence, move.draggedWedge.id, move.draggedToSlot); state.sequence = shift(state.sequence, move.wedge.id, move.toSlot); move.draggedWedge.slot = move.draggedToSlot; move.wedge.slot = move.toSlot; }); const newOrigSlots = []; for (let i = 0; i < state.altMode.altAxisWedges.length; i++) { const draggedW = state.altMode.altAxisWedges[i]; newOrigSlots.push(draggedW.slot); } state.altMode.altAxisSlots = newOrigSlots; dispWedges.forEach(move => { if (move.wedge.grabbed || state.altMode.altAxisWedges.some(w => w.id === move.wedge.id)) { return; } const targetPos = fList.getPosFromIdx(move.toSlot, centerX, centerY, config.radius, config.number); const wSel = wedgeGroups.filter(wd => wd.id === move.wedge.id); const xTween = d3.interpolate(move.wedge.sx, targetPos.x); const yTween = d3.interpolate(move.wedge.sy, targetPos.y); wSel.interrupt().transition().duration(config.speed.reorder).ease(d3.easeQuadOut) .tween("move-displaced-wedge", function() { return function(t) { move.wedge.sx = xTween(t); move.wedge.sy = yTween(t); move.wedge.sr = fList.calcRotation(move.wedge.sx, move.wedge.sy, centerX, centerY); move.wedge.hover = false; scheduleSVGOp(() => drawWedge(wSel, move.wedge)); scheduleRedraw(); }; }); }); reorderWedges(); } } const primaryAxisWSel = wedgeGroups.filter(wd => wd.id === primaryAxisW.id); scheduleSVGOp(() => drawWedge(primaryAxisWSel, primaryAxisW)); scheduleRedraw(); return; } if (state.altMode.isAltRefl) { const primaryReflW = state.altMode.altReflWedges[0]; const easing = 0.3; state.drag.dragOffset.x = Math.sign(state.drag.dragOffset.x) * Math.max(0, Math.abs(state.drag.dragOffset.x) - easing * Math.abs(event.x + state.drag.dragOffset.x - primaryReflW.sx)); state.drag.dragOffset.y = Math.sign(state.drag.dragOffset.y) * Math.max(0, Math.abs(state.drag.dragOffset.y) - easing * Math.abs(event.y + state.drag.dragOffset.y - primaryReflW.sy)); primaryReflW.sx = event.x + state.drag.dragOffset.x; primaryReflW.sy = event.y + state.drag.dragOffset.y; primaryReflW.sr = fList.calcRotation(primaryReflW.sx, primaryReflW.sy, centerX, centerY); primaryReflW.sd = Math.sqrt((primaryReflW.sx - centerX) ** 2 + (primaryReflW.sy - centerY) ** 2); state.altMode.altReflWedges.forEach(w => { if (w.grabbed) w.grabbed = true; }); const rotDelta = primaryReflW.sr - primaryReflW.sr0; const distRatio = primaryReflW.sd / config.radius; for (let i = 1; i < state.altMode.altReflWedges.length; i++) { const w = state.altMode.altReflWedges[i]; const newRot = i % 2 === 0 ? w.sr0 + rotDelta : w.sr0 - rotDelta; const angleRad = (newRot + 180) * (Math.PI / 180); w.sx = centerX + distRatio * config.radius * Math.cos(angleRad); w.sy = centerY + distRatio * config.radius * Math.sin(angleRad); w.sr = newRot; const wSel = wedgeGroups.filter(wd => wd.id === w.id); scheduleSVGOp(() => drawWedge(wSel, w)); } let primaryReflTargetSlot = fList.getIdxFromRot(primaryReflW.sr, config.number); if (!fList.isAxisSlot(primaryReflTargetSlot, config.number, state.symmetry.symAngle, state.symmetry.symCount) && primaryReflTargetSlot !== primaryReflW.slot) { const slotDelta = (primaryReflTargetSlot - primaryReflW.slot + config.number) % config.number; const selWedges = []; state.altMode.altReflWedges.forEach((w, i) => { const appliedDelta = i % 2 === 0 ? slotDelta : -slotDelta; const newSlot = (w.slot + appliedDelta + config.number) % config.number; selWedges.push({ wedge: w, oldSlot: w.slot, newSlot: newSlot, id: w.id }); }); let bufferSlot = 0; if (selWedges.length < config.number) { for (let i = 0; i < config.number; i++) { bufferSlot = i; if (!selWedges.some(obj => obj.oldSlot === bufferSlot)) break; } } const moveDelta = slotDelta; if (moveDelta > config.number / 2) { selWedges.sort((a, b) => (-b.oldSlot + bufferSlot + config.number) % config.number - (-a.oldSlot + bufferSlot + config.number) % config.number); } else { selWedges.sort((a, b) => (b.oldSlot - bufferSlot + config.number) % config.number - (a.oldSlot - bufferSlot + config.number) % config.number); } selWedges.forEach(move => { if (move.oldSlot !== move.newSlot) { state.sequence = shift(state.sequence, move.id, move.newSlot); move.wedge.slot = move.newSlot; } }); reorderWedges(); } const primaryReflWSel = wedgeGroups.filter(wd => wd.id === primaryReflW.id); scheduleSVGOp(() => drawWedge(primaryReflWSel, primaryReflW)); scheduleRedraw(); return; } const easing = 0.3; state.drag.dragOffset.x = Math.sign(state.drag.dragOffset.x) * Math.max(0, Math.abs(state.drag.dragOffset.x) - easing * Math.abs(event.x + state.drag.dragOffset.x - d.sx)); state.drag.dragOffset.y = Math.sign(state.drag.dragOffset.y) * Math.max(0, Math.abs(state.drag.dragOffset.y) - easing * Math.abs(event.y + state.drag.dragOffset.y - d.sy)); d.sx = event.x + state.drag.dragOffset.x; d.sy = event.y + state.drag.dragOffset.y; d.sr = fList.calcRotation(d.sx, d.sy, centerX, centerY); const slot = fList.getIdxFromRot(d.sr, config.number); d.sd = Math.sqrt((d.sx - centerX) ** 2 + (d.sy - centerY) ** 2); nodeData.forEach(node => { if (node.selected) node.grabbed = true; }); const rotDelta = d.sr - d.sr0; const distRatio = d.sd / config.radius; nodeData.forEach(node => { if (node.selected && node.id !== d.id) { const newRot = node.sr0 + rotDelta; const angleRad = (newRot + 180) * (Math.PI / 180); node.sx = centerX + distRatio * config.radius * Math.cos(angleRad); node.sy = centerY + distRatio * config.radius * Math.sin(angleRad); node.sr = newRot; const wSel = wedgeGroups.filter(wd => wd.id === node.id); scheduleSVGOp(() => drawWedge(wSel, node)); } }); if (slot !== d.slot) { const slotDelta = (slot - d.slot + config.number) % config.number; const selWedges = []; nodeData.forEach(node => { if (node.selected) { const newSlot = (node.slot + slotDelta) % config.number; selWedges.push({ wedge: node, oldSlot: node.slot, newSlot: newSlot, id: node.id }); } }); let bufferSlot = 0; if (selWedges.length < config.number) { for (let i = 0; i < config.number; i++) { bufferSlot = i; if (!selWedges.some(obj => obj.oldSlot === bufferSlot)) break; } } const moveDelta = slotDelta; if (moveDelta > config.number / 2) { selWedges.sort((a, b) => (-b.oldSlot + bufferSlot + config.number) % config.number - (-a.oldSlot + bufferSlot + config.number) % config.number); } else { selWedges.sort((a, b) => (b.oldSlot - bufferSlot + config.number) % config.number - (a.oldSlot - bufferSlot + config.number) % config.number); } selWedges.forEach(move => { if (move.oldSlot !== move.newSlot) { state.sequence = shift(state.sequence, move.id, move.newSlot); move.wedge.slot = move.newSlot; } }); reorderWedges(); } scheduleSVGOp(() => drawWedge(d3.select(this), d)); scheduleRedraw(); } function dragEnded(event, d) { const dragDistance = Math.sqrt(Math.pow(event.x - state.drag.startX, 2) + Math.pow(event.y - state.drag.startY, 2)); if (dragDistance < 5) { // This was a click, not a drag - use multi-click tracking only if no modifiers if (!event.sourceEvent.altKey && !event.sourceEvent.ctrlKey && !event.sourceEvent.metaKey) { clickTracker.handleWedgeClick(d, " (via drag system)", nodeData, config, colorWedges, updateWedgeGroups, drawLinks, saveState, event.sourceEvent.shiftKey, animationSystem, state); state.drag.isDragging = false; return; } } state.drag.isDragging = false; if (state.altMode.isAltAxis) { state.altMode.isAltAxis = false; const primaryAxisW = state.altMode.altAxisWedges[0]; const currentSlot = fList.getIdxFromRot(primaryAxisW.sr, config.number); if (!fList.isAxisSlot(currentSlot, config.number, state.symmetry.symAngle, state.symmetry.symCount)) { const origSlotsCopy = [...state.altMode.altAxisSlots]; state.altMode.altAxisWedges.forEach((w, idx) => { w.grabbed = false; const origSlot = origSlotsCopy[idx]; const targetPos = fList.getPosFromIdx(origSlot, centerX, centerY, config.radius, config.number); const wSel = wedgeGroups.filter(wd => wd.id === w.id); const xTween = d3.interpolate(w.sx, targetPos.x); const yTween = d3.interpolate(w.sy, targetPos.y); w.altTransitioning = true; wSel.transition().duration(config.speed.dragReturn).ease(d3.easeQuadOut) .tween("return-to-original", function() { return function(t) { w.sx = xTween(t); w.sy = yTween(t); w.sr = fList.calcRotation(w.sx, w.sy, centerX, centerY); w.hover = false; scheduleSVGOp(() => drawWedge(wSel, w)); scheduleRedraw(); }; }) .on("end", function() { w.altTransitioning = false; }); }); nodeData.forEach(node => node.hover = false); colorWedges(); updateWedgeGroups(); drawLinks(); saveStateIfDifferent(); } else { state.altMode.altAxisWedges.forEach(w => { w.grabbed = false; const targetPos = fList.getPosFromIdx(w.slot, centerX, centerY, config.radius, config.number); const wSel = wedgeGroups.filter(wd => wd.id === w.id); const xTween = d3.interpolate(w.sx, targetPos.x); const yTween = d3.interpolate(w.sy, targetPos.y); w.altTransitioning = true; wSel.transition().duration(config.speed.dragReturn).ease(d3.easeQuadOut) .tween("move-to-final", function() { return function(t) { w.sx = xTween(t); w.sy = yTween(t); w.sr = fList.calcRotation(w.sx, w.sy, centerX, centerY); w.hover = false; scheduleSVGOp(() => drawWedge(wSel, w)); scheduleRedraw(); }; }) .on("end", function() { w.altTransitioning = false; }); }); saveStateIfDifferent(); } nodeData.forEach(node => node.hover = false); colorWedges(); updateWedgeGroups(); drawLinks(); state.altMode.altAxisWedges = []; state.altMode.altAxisSlots = []; state.altMode.altAxisPos = []; return; } if (state.altMode.isAltRefl) { state.altMode.isAltRefl = false; saveStateIfDifferent(); state.altMode.altReflWedges.forEach(w => { w.grabbed = false; }); d.hover = false; nodeData.forEach(node => node.hover = false); colorWedges(); updateWedgeGroups(); state.altMode.altReflWedges.forEach(w => { const targetPos = fList.getPosFromIdx(w.slot, centerX, centerY, config.radius, config.number); const xTween = d3.interpolate(w.sx, targetPos.x); const yTween = d3.interpolate(w.sy, targetPos.y); const wSel = wedgeGroups.filter(wd => wd.id === w.id); w.altTransitioning = true; wSel.transition().duration(config.speed.dragReturn).ease(d3.easeQuadOut) .tween("move-to-slot", function() { return function(t) { w.sx = xTween(t); w.sy = yTween(t); w.sr = fList.calcRotation(w.sx, w.sy, centerX, centerY); w.hover = false; scheduleSVGOp(() => drawWedge(wSel, w)); scheduleRedraw(); }; }) .on("end", function() { w.altTransitioning = false; }); }); drawLinks(); state.altMode.altReflWedges = []; state.altMode.altReflSlots = []; state.altMode.altReflPos = []; return; } saveState(); nodeData.forEach(node => { node.grabbed = false; node.hover = false; // Clear hover states }); d.hover = false; colorWedges(); updateWedgeGroups(); nodeData.forEach(node => { if (node.selected) { const targetPos = fList.getPosFromIdx(node.slot, centerX, centerY, config.radius, config.number); const xTween = d3.interpolate(node.sx, targetPos.x); const yTween = d3.interpolate(node.sy, targetPos.y); const wSel = wedgeGroups.filter(wd => wd.id === node.id); wSel.transition().duration(config.speed.dragReturn).ease(d3.easeQuadOut) .tween("move-to-slot", function() { return function(t) { node.sx = xTween(t); node.sy = yTween(t); node.sr = fList.calcRotation(node.sx, node.sy, centerX, centerY); node.hover = false; scheduleSVGOp(() => drawWedge(wSel, node)); scheduleRedraw(); }; }); } }); } // === Initialize Wedges === let wedgeGroups = normalGroup.selectAll("g.wedge").data(nodeData).enter().append("g").attr("class", "wedge"); const drag = d3.drag().filter(() => !state.modifiers.isCtrlHeld).on("start", dragStarted).on("drag", dragged).on("end", dragEnded); wedgeGroups.call(drag); // === Event Handlers === function handleKeydown(event) { if (!state.drag.isDragging && !state.drag.isDragSelecting && !state.drag.isCtrlDragging) { if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z' && !event.shiftKey) { event.preventDefault(); restoreState(state.historyIndex - 1); return; } if ((event.ctrlKey || event.metaKey) && (event.key.toLowerCase() === 'y' || (event.key.toLowerCase() === 'z' && event.shiftKey))) { event.preventDefault(); restoreState(state.historyIndex + 1); return; } } if (event.key === 'Alt' && !state.modifiers.isAltHeld) { event.preventDefault(); state.modifiers.isAltHeld = true; state.altMode.altDragOccurred = false; state.altMode.preAltSelections = nodeData.filter(d => d.selected).map(d => d.id); nodeData.forEach(d => d.selected = false); colorWedges(); updateWedgeGroups(); drawLinks(); symGroup.style("visibility", "visible"); updateSymLines(); const currentlyHoveredWedge = nodeData.find(d => d.hover); if (currentlyHoveredWedge) { nodeData.forEach(node => node.hover = false); const type = fList.isAxisWedge(currentlyHoveredWedge, state.symmetry.symAngle, state.symmetry.symCount, config.number) ? "axis" : "reflection"; if (type === "axis" && config.number % 2 === 0) { currentlyHoveredWedge.hover = true; const oppSlot = (currentlyHoveredWedge.slot + config.number/2) % config.number; const oppWedge = nodeData.find(node => node.slot === oppSlot); if (oppWedge) oppWedge.hover = true; } else if (type === "reflection" && state.symmetry.symCount === 1) { currentlyHoveredWedge.hover = true; const mirroredSlot = fList.calcMirroredSlot(currentlyHoveredWedge.slot, state.symmetry.symAngle, config.number); const mirroredWedge = nodeData.find(node => node.slot === mirroredSlot); if (mirroredWedge) mirroredWedge.hover = true; } else if (type === "reflection" && state.symmetry.symCount > 1) { const wedgeSlots = fList.calcAltReflections(currentlyHoveredWedge.slot, state.symmetry.symAngle, state.symmetry.symCount, config.number); wedgeSlots.forEach(slot => { const wedge = nodeData.find(node => node.slot === slot); if (wedge) wedge.hover = true; }); } else { currentlyHoveredWedge.hover = true; } colorWedges(); drawLinks(); } if (state.drag.isDragSelecting) { selectionRect.attr("display", "none"); nodeData.forEach(d => { d.selected = state.drag.initiallySelectedWedges.includes(d.id); d.hover = false; }); colorWedges(); updateWedgeGroups(); drawLinks(); } } const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform); const isModKey = isMac ? event.key === 'Meta' : event.key === 'Control'; if (isModKey && !state.modifiers.isCtrlHeld) { state.modifiers.isCtrlHeld = true; nodeData.forEach(d => d.hover = false); colorWedges(); drawLinks(); wedgeGroups.style("pointer-events", "none"); if (!state.drag.isDragging && state.mouse.isMouseOverContainer && !state.modifiers.isAltHeld) { reflectionLine.attr("display", "block"); state.reflection.reflectionAngle = fList.calcReflAngle(state.mouse.currentMousePos.x, state.mouse.currentMousePos.y, centerX, centerY, config.number, fList.shortAngleDiff, fList.getAllSnapAngles); updateReflLine(state.reflection.reflectionAngle); } } } function handleKeyup(event) { if (event.key === 'Alt') { event.preventDefault(); state.modifiers.isAltHeld = false; state.altMode.isAltDragging = false; symGroup.style("visibility", "hidden"); // Hide the symmetry controls when Alt is released symGroup.select(".minus-button").style("visibility", "hidden"); symGroup.select(".plus-button").style("visibility", "hidden"); if (!state.altMode.altDragOccurred) { state.altMode.preAltSelections.forEach(id => { const wedge = nodeData.find(d => d.id === id); if (wedge) wedge.selected = true; }); colorWedges(); updateWedgeGroups(); drawLinks(); } state.altMode.altDragOccurred = false; state.altMode.preAltSelections = []; const { bottom: wBot, top: wTop } = fList.getWedgeWidths(config.radius, config.wedgeSize, config.number); let wedgeUnderMouse = null; for (let w of nodeData) { if (fList.isPointInWedge(state.mouse.currentMousePos.x, state.mouse.currentMousePos.y, w, config.wedgeSize, wBot, wTop)) { wedgeUnderMouse = w; break; } } nodeData.forEach(d => d.hover = false); if (wedgeUnderMouse && !state.modifiers.isCtrlHeld && !state.rendering.historyAnimInProgress && !wedgeUnderMouse.grabbed) { wedgeUnderMouse.hover = true; } colorWedges(); drawLinks(); if (state.drag.isDragSelecting && !state.drag.dragSelectEndedWhileAltHeld) { const mockEvent = { x: state.mouse.currentMousePos.x, y: state.mouse.currentMousePos.y, sourceEvent: { shiftKey: state.drag.dragSelectShiftPressed } }; dragSelDragged(mockEvent); } state.drag.dragSelectEndedWhileAltHeld = false; setTimeout(() => container.focus(), 0); } const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform); const isModKey = isMac ? event.key === 'Meta' : event.key === 'Control'; if (isModKey) { state.modifiers.isCtrlHeld = false; reflectionLine.attr("display", "none"); wedgeGroups.style("pointer-events", "all"); state.drag.isCtrlDragging = false; state.rotation.hasRotationStarted = false; state.rotation.accumulatedRotation = 0; state.rotation.previousMouseWedgeIndex = null; } } function handleResize() { clearTimeout(state.timers.resizeTimeout); state.timers.resizeTimeout = setTimeout(() => { const newScaleFactor = fList.calcScaleFactor(); container.style.width = config.scaledWidth + 'px'; container.style.height = config.scaledHeight + 'px'; svg.style.transform = `scale(${newScaleFactor})`; const newCanvas = fList.setupCanvas(canvas, config.scaledWidth, config.scaledHeight); ctx = newCanvas.ctx; dpr = newCanvas.dpr; drawLinks(); }, 100); } function handleWindowBlur() { if (state.modifiers.isAltHeld) { state.modifiers.isAltHeld = false; state.altMode.isAltDragging = false; symGroup.style("visibility", "hidden"); // Hide the symmetry controls when Alt is released symGroup.select(".minus-button").style("visibility", "hidden"); symGroup.select(".plus-button").style("visibility", "hidden"); wedgeGroups.style("pointer-events", state.modifiers.isCtrlHeld ? "none" : "all"); state.drag.dragSelectEndedWhileAltHeld = false; if (!state.altMode.altDragOccurred) { state.altMode.preAltSelections.forEach(id => { const wedge = nodeData.find(d => d.id === id); if (wedge) wedge.selected = true; }); colorWedges(); updateWedgeGroups(); drawLinks(); } state.altMode.altDragOccurred = false; state.altMode.preAltSelections = []; } if (state.modifiers.isCtrlHeld) { state.modifiers.isCtrlHeld = false; reflectionLine.attr("display", "none"); wedgeGroups.style("pointer-events", "all"); state.drag.isCtrlDragging = false; state.rotation.hasRotationStarted = false; state.rotation.accumulatedRotation = 0; state.rotation.previousMouseWedgeIndex = null; } } // === Drag Selection Functions === function handleDragSelKeydown(event) { if (state.drag.isDragSelecting && event.key === 'Shift') { updateDragSel(state.drag.currentDragRect.x, state.drag.currentDragRect.y, state.drag.currentDragRect.width, state.drag.currentDragRect.height, true, state.mouse.currentMousePos.x, state.mouse.currentMousePos.y); } } function handleDragSelKeyup(event) { if (state.drag.isDragSelecting && event.key === 'Shift') { updateDragSel(state.drag.currentDragRect.x, state.drag.currentDragRect.y, state.drag.currentDragRect.width, state.drag.currentDragRect.height, false, state.mouse.currentMousePos.x, state.mouse.currentMousePos.y); } } function dragSelStarted(event) { state.drag.isDragSelecting = true; state.drag.dragSelectStart.x = event.x; state.drag.dragSelectStart.y = event.y; state.mouse.currentMousePos.x = event.x; state.mouse.currentMousePos.y = event.y; state.drag.initiallySelectedWedges = nodeData.filter(d => d.selected).map(d => d.id); state.drag.dragSelectEndedWhileAltHeld = false; document.addEventListener('keydown', handleDragSelKeydown); document.addEventListener('keyup', handleDragSelKeyup); selectionRect.attr("display", "block").attr("x", state.drag.dragSelectStart.x).attr("y", state.drag.dragSelectStart.y).attr("width", 0).attr("height", 0); state.drag.currentDragRect = { x: state.drag.dragSelectStart.x, y: state.drag.dragSelectStart.y, width: 0, height: 0 }; } function dragSelDragged(event) { if (!state.drag.isDragSelecting) return; const currentX = event.x; const currentY = event.y; state.mouse.currentMousePos.x = currentX; state.mouse.currentMousePos.y = currentY; const rectX = Math.min(state.drag.dragSelectStart.x, currentX); const rectY = Math.min(state.drag.dragSelectStart.y, currentY); const rectW = Math.abs(currentX - state.drag.dragSelectStart.x); const rectH = Math.abs(currentY - state.drag.dragSelectStart.y); const shiftPressed = event.sourceEvent && event.sourceEvent.shiftKey; state.drag.dragSelectShiftPressed = shiftPressed; state.drag.currentDragRect = { x: rectX, y: rectY, width: rectW, height: rectH }; if (state.modifiers.isAltHeld) { selectionRect.attr("display", "none"); } else { selectionRect.attr("display", "block").attr("x", rectX).attr("y", rectY).attr("width", rectW).attr("height", rectH); updateDragSel(rectX, rectY, rectW, rectH, shiftPressed, currentX, currentY); } } function dragSelEnded(event) { if (!state.drag.isDragSelecting) return; state.drag.isDragSelecting = false; if (state.modifiers.isAltHeld) { state.drag.dragSelectEndedWhileAltHeld = true; } else { state.drag.dragSelectEndedWhileAltHeld = false; } document.removeEventListener('keydown', handleDragSelKeydown); document.removeEventListener('keyup', handleDragSelKeyup); selectionRect.attr("display", "none"); // Clear all interaction states nodeData.forEach(d => { d.hover = false; d.grabbed = false; }); colorWedges(); saveState(); state.drag.initiallySelectedWedges = []; state.drag.dragSelectShiftPressed = false; } // === Control Drag Functions === function ctrlDragStarted(event) { state.drag.isCtrlDragging = true; state.rotation.hasRotationStarted = false; state.mouse.currentMousePos.x = event.x; state.mouse.currentMousePos.y = event.y; reflectionLine.attr("display", "block"); state.originalSequence = [...state.sequence]; state.rotation.ctrlDragStartAngle = fList.calcReflAngle(event.x, event.y, centerX, centerY, config.number, fList.shortAngleDiff, fList.getAllSnapAngles); state.rotation.accumulatedRotation = 0; state.rotation.previousMouseWedgeIndex = fList.getWedgeIdxFromMouse(event.x, event.y, centerX, centerY, config.number); } function ctrlDragDragged(event) { if (!state.drag.isCtrlDragging) return; state.mouse.currentMousePos.x = event.x; state.mouse.currentMousePos.y = event.y; if (!state.rotation.hasRotationStarted) { state.rotation.hasRotationStarted = true; updateReflLineForRot(state.rotation.ctrlDragStartAngle); } const currentWedgeIdx = fList.getWedgeIdxFromMouse(event.x, event.y, centerX, centerY, config.number); if (currentWedgeIdx !== state.rotation.previousMouseWedgeIndex && state.rotation.previousMouseWedgeIndex !== null) { const incRot = fList.getMinRot(state.rotation.previousMouseWedgeIndex, currentWedgeIdx, config.number); state.rotation.accumulatedRotation += incRot; rotateWedges(state.rotation.accumulatedRotation); rotateReflLineInc(state.rotation.accumulatedRotation); state.rotation.previousMouseWedgeIndex = currentWedgeIdx; } } function ctrlDragEnded(event) { if (!state.drag.isCtrlDragging) return; state.drag.isCtrlDragging = false; if (state.rotation.hasRotationStarted) saveState(); const finalAngle = fList.calcReflAngle(event.x, event.y, centerX, centerY, config.number, fList.shortAngleDiff, fList.getAllSnapAngles); const lineLen = config.height / 2; reflectionLine.interrupt().attr("x1", centerX + Math.cos(finalAngle + Math.PI) * lineLen).attr("y1", centerY + Math.sin(finalAngle + Math.PI) * lineLen).attr("x2", centerX + Math.cos(finalAngle) * lineLen).attr("y2", centerY + Math.sin(finalAngle) * lineLen); state.reflection.reflectionAngle = finalAngle; state.reflection.currentReflectionLineAngle = finalAngle; state.rotation.accumulatedRotation = 0; state.rotation.previousMouseWedgeIndex = null; state.originalSequence = []; state.rotation.hasRotationStarted = false; if (!state.mouse.isMouseOverContainer && !state.modifiers.isCtrlHeld) { reflectionLine.attr("display", "none"); } } function rotateReflLineInc(rotInc) { const rotAngle = rotInc * (2 * Math.PI / config.number); const targetAngle = state.rotation.ctrlDragStartAngle + rotAngle; const currentAngle = state.reflection.currentReflectionLineAngle; const angleDiff = fList.shortAngleDiff(currentAngle, targetAngle); const finalAngle = currentAngle + angleDiff; const angleTween = d3.interpolate(currentAngle, finalAngle); const lineLen = config.height / 2; reflectionLine.interrupt().transition().duration(config.speed.rotate).ease(d3.easeQuadOut) .tween("line-rotate", function() { return function(t) { const currentTweenAngle = angleTween(t); scheduleSVGOp(() => { reflectionLine.attr("x1", centerX).attr("y1", centerY).attr("x2", centerX + Math.cos(currentTweenAngle) * lineLen).attr("y2", centerY + Math.sin(currentTweenAngle) * lineLen); }); state.reflection.currentReflectionLineAngle = currentTweenAngle; scheduleRedraw(); }; }); } // === Background Drag Setup === const backgroundDrag = d3.drag().filter(event => { event.preventDefault(); return true; }) .on("start", function(event) { event.sourceEvent.preventDefault(); const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform); const isModHeld = isMac ? event.sourceEvent.metaKey : event.sourceEvent.ctrlKey; if ((isModHeld || state.modifiers.isCtrlHeld) && !state.modifiers.isAltHeld) { ctrlDragStarted(event); } else if (!state.modifiers.isAltHeld) { dragSelStarted(event); } }) .on("drag", function(event) { event.sourceEvent.preventDefault(); const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform); const isModHeld = isMac ? event.sourceEvent.metaKey : event.sourceEvent.ctrlKey; if ((isModHeld || state.modifiers.isCtrlHeld) && !state.modifiers.isAltHeld) { ctrlDragDragged(event); } else if (!state.modifiers.isAltHeld) { dragSelDragged(event); } else if (state.modifiers.isAltHeld && state.drag.isDragSelecting) { dragSelDragged(event); } }) .on("end", function(event) { event.sourceEvent.preventDefault(); const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform); const isModHeld = isMac ? event.sourceEvent.metaKey : event.sourceEvent.ctrlKey; if ((isModHeld || state.modifiers.isCtrlHeld) && !state.modifiers.isAltHeld) { ctrlDragEnded(event); } else if (state.drag.isDragSelecting) { dragSelEnded(event); } }); backgroundRect.call(backgroundDrag); // === Wedge Event Handlers === wedgeGroups.on("mouseover", function(event, d) { const [mx, my] = d3.pointer(event); state.mouse.currentMousePos.x = mx; state.mouse.currentMousePos.y = my; if (state.altMode.isAltAxis || state.altMode.isAltRefl) return; if (d.altTransitioning) return; if (state.modifiers.isAltHeld) { let type = fList.isAxisWedge(d, state.symmetry.symAngle, state.symmetry.symCount, config.number) ? "axis" : "reflection"; nodeData.forEach(node => node.hover = false); if (type === "axis" && config.number % 2 === 0) { const oppSlot = (d.slot + config.number/2) % config.number; const oppWedge = nodeData.find(node => node.slot === oppSlot); if (!d.altTransitioning) d.hover = true; if (oppWedge && !oppWedge.altTransitioning) oppWedge.hover = true; } else if (type === "reflection" && state.symmetry.symCount === 1) { const mirroredSlot = fList.calcMirroredSlot(d.slot, state.symmetry.symAngle, config.number); const mirroredWedge = nodeData.find(node => node.slot === mirroredSlot); if (!d.altTransitioning) d.hover = true; if (mirroredWedge && !mirroredWedge.altTransitioning) mirroredWedge.hover = true; } else if (type === "reflection" && state.symmetry.symCount > 1) { const wedgeSlots = fList.calcAltReflections(d.slot, state.symmetry.symAngle, state.symmetry.symCount, config.number); wedgeSlots.forEach(slot => { const wedge = nodeData.find(node => node.slot === slot); if (wedge && !wedge.altTransitioning) wedge.hover = true; }); } else { if (!d.altTransitioning) d.hover = true; } colorWedges(); drawLinks(); } else if (!state.modifiers.isCtrlHeld && !state.rendering.historyAnimInProgress && !d.grabbed) { d.hover = true; colorWedges(); drawLinks(); } }).on("mouseout", function(event, d) { const [mx, my] = d3.pointer(event); state.mouse.currentMousePos.x = mx; state.mouse.currentMousePos.y = my; if (state.altMode.isAltAxis || state.altMode.isAltRefl) return; if (state.modifiers.isAltHeld) { nodeData.forEach(node => node.hover = false); colorWedges(); drawLinks(); } else if (!d.grabbed && !state.modifiers.isCtrlHeld) { d.hover = false; colorWedges(); drawLinks(); } }); wedgeGroups.on("click", function(event, d) { event.stopPropagation(); const [mx, my] = d3.pointer(event); state.mouse.currentMousePos.x = mx; state.mouse.currentMousePos.y = my; // Only use multi-click selection if neither alt nor ctrl are held if (!event.altKey && !event.ctrlKey && !event.metaKey) { clickTracker.handleWedgeClick(d, " (via click handler)", nodeData, config, colorWedges, updateWedgeGroups, drawLinks, saveState, event.shiftKey, animationSystem, state); return; } // Original click behavior for modifier keys const prevSel = nodeData.map(node => node.selected); if (event.shiftKey) { d.selected = !d.selected; } else { if (d.selected) { d.selected = false; } else { nodeData.forEach(node => { node.selected = (node.id === d.id); node.hover = false; // Clear hover states to prevent issues }); } } // Clear any lingering interaction states nodeData.forEach(node => { node.grabbed = false; }); const selChanged = nodeData.some((node, i) => node.selected !== prevSel[i]); colorWedges(); updateWedgeGroups(); drawLinks(); if (selChanged) saveState(); }); // === SVG Event Handlers === svg.addEventListener('click', function(event) { const rect = svg.getBoundingClientRect(); const scaleFactor = config.scaleFactor; state.mouse.currentMousePos.x = (event.clientX - rect.left) / scaleFactor; state.mouse.currentMousePos.y = (event.clientY - rect.top) / scaleFactor; const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform); const isModHeld = isMac ? event.metaKey : event.ctrlKey; if ((isModHeld || state.modifiers.isCtrlHeld) && !state.drag.isCtrlDragging && !state.modifiers.isAltHeld) { reflectWedges(); } else if (!state.drag.isDragSelecting && !state.modifiers.isCtrlHeld && !isModHeld) { deselectAll(); } }); svg.addEventListener('mousemove', function(event) { const rect = svg.getBoundingClientRect(); const scaleFactor = config.scaleFactor; const mouseX = (event.clientX - rect.left) / scaleFactor; const mouseY = (event.clientY - rect.top) / scaleFactor; state.mouse.currentMousePos.x = mouseX; state.mouse.currentMousePos.y = mouseY; if (state.modifiers.isCtrlHeld && !state.drag.isDragging && (state.mouse.isMouseOverContainer || state.drag.isCtrlDragging) && !state.modifiers.isAltHeld) { state.reflection.reflectionAngle = fList.calcReflAngle(mouseX, mouseY, centerX, centerY, config.number, fList.shortAngleDiff, fList.getAllSnapAngles); updateReflLine(state.reflection.reflectionAngle); } }); svg.addEventListener('mouseenter', function(event) { const rect = svg.getBoundingClientRect(); const scaleFactor = config.scaleFactor; state.mouse.currentMousePos.x = (event.clientX - rect.left) / scaleFactor; state.mouse.currentMousePos.y = (event.clientY - rect.top) / scaleFactor; state.mouse.isMouseOverContainer = true; if (state.modifiers.isCtrlHeld && !state.drag.isDragging && !state.modifiers.isAltHeld) { reflectionLine.attr("display", "block"); state.reflection.reflectionAngle = fList.calcReflAngle(state.mouse.currentMousePos.x, state.mouse.currentMousePos.y, centerX, centerY, config.number, fList.shortAngleDiff, fList.getAllSnapAngles); updateReflLine(state.reflection.reflectionAngle); } }); svg.addEventListener('mouseleave', function(event) { state.mouse.isMouseOverContainer = false; if (state.modifiers.isCtrlHeld && !state.drag.isCtrlDragging) { reflectionLine.attr("display", "none"); } }); container.addEventListener('mousemove', function(event) { const rect = container.getBoundingClientRect(); const scaleFactor = config.scaleFactor; state.mouse.currentMousePos.x = (event.clientX - rect.left) / scaleFactor; state.mouse.currentMousePos.y = (event.clientY - rect.top) / scaleFactor; }); container.addEventListener('mouseenter', function(event) { state.mouse.isMouseOverContainer = true; if (state.modifiers.isCtrlHeld && !state.drag.isDragging && !state.modifiers.isAltHeld) { reflectionLine.attr("display", "block"); state.reflection.reflectionAngle = fList.calcReflAngle(state.mouse.currentMousePos.x, state.mouse.currentMousePos.y, centerX, centerY, config.number, fList.shortAngleDiff, fList.getAllSnapAngles); updateReflLine(state.reflection.reflectionAngle); } }); container.addEventListener('mouseleave', function(event) { state.mouse.isMouseOverContainer = false; if (state.modifiers.isCtrlHeld && !state.drag.isCtrlDragging) { reflectionLine.attr("display", "none"); } }); // === Global Event Listeners === document.addEventListener('keydown', handleKeydown); document.addEventListener('keyup', handleKeyup); window.addEventListener('resize', handleResize); window.addEventListener('blur', handleWindowBlur); // === Initialize === setTimeout(() => { container.focus(); if (state.mouse.currentMousePos.x === centerX && state.mouse.currentMousePos.y === centerY) { const rect = container.getBoundingClientRect(); const mouseX = window.event ? window.event.clientX : centerX; const mouseY = window.event ? window.event.clientY : centerY; if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) { state.mouse.currentMousePos.x = mouseX - rect.left; state.mouse.currentMousePos.y = mouseY - rect.top; } } }, 0); drawAllWedges(); colorWedges(); drawLinks(); state.stateHistory[0] = { sequence: [...state.sequence], selections: [] }; // === Cleanup === container.cleanup = () => { document.removeEventListener('keydown', handleKeydown); document.removeEventListener('keyup', handleKeyup); window.removeEventListener('resize', handleResize); window.removeEventListener('blur', handleWindowBlur); clickTracker.cleanup(); }; return container; } 47:T7f46,fList = { let list = ({ // === Configuration === config:{ number: 64, width: 700, height: 700, wedgeSize: 40, textOffset: 15, radius: 250, maxHistorySize: 100, scheme:1, wedgeFade: 1, speed: { reflect: 1000, rotate: 500, transition: 500, dragReturn: 500, reorder: 500, history: 500 }, linkStyle: { blending: 'normal', opacity: 1, weight: 0.15 }, get scaleFactor() { return list.calcScaleFactor(); }, get scaledWidth() { return this.width * this.scaleFactor; }, get scaledHeight() { return this.height * this.scaleFactor; } }, // === Core Utility Functions === calcScaleFactor: function() { const vw = window.innerWidth; const pad = vw < 768 ? 20 : 40; const availW = vw - pad; const baseSize = 700; return Math.min(1, availW / baseSize); }, createShadowFilter: function(defs) { const filter = defs.append("filter").attr("id", "drop-shadow").attr("x", "-50%").attr("y", "-50%").attr("width", "200%").attr("height", "200%"); filter.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation", 2); filter.append("feOffset").attr("dx", 2).attr("dy", 5).attr("result", "offsetblur"); filter.append("feComponentTransfer").append("feFuncA").attr("type", "linear").attr("slope", 0.4); const feMerge = filter.append("feMerge"); feMerge.append("feMergeNode"); feMerge.append("feMergeNode").attr("in", "SourceGraphic"); return filter; }, setupCanvas: function(canvas, w, h) { const dpr = window.devicePixelRatio || 1; canvas.width = w * dpr; canvas.height = h * dpr; canvas.style.width = w + 'px'; canvas.style.height = h + 'px'; const ctx = canvas.getContext('2d'); ctx.scale(dpr, dpr); ctx.imageSmoothingEnabled = true; return { ctx, dpr }; }, // === Color Gradient === getGradient: function() { return d3.interpolateCool; }, // === Click Tracking System === createClickTrackingSystem: function() { return { clickCount: 0, lastClickedWedgeId: null, clickTimer: null, clickDelay: 300, lastClickTime: 0, processingClick: false, shiftHeld: false, handleWedgeClick: function(d, source = "", nodeData, config, colorWedges, updateWedgeGroups, drawLinks, saveState, shiftHeld = false, animationSystem = null, state = null) { const currentTime = Date.now(); if (this.processingClick && (currentTime - this.lastClickTime) < 50) { return; } this.processingClick = true; this.lastClickTime = currentTime; if (this.lastClickedWedgeId === d.id && this.clickTimer) { this.clickCount++; clearTimeout(this.clickTimer); } else { this.clickCount = 1; this.lastClickedWedgeId = d.id; // Store the shift state for the first click of a sequence this.shiftHeld = shiftHeld; // Check if clicked wedge is already selected and there are multiple selections const selectedCount = nodeData.filter(node => node.selected).length; if (d.selected && selectedCount > 1) { // Clear any pending animation frames first to prevent old state from showing if (animationSystem && state && animationSystem.clearPendingRedraws) { animationSystem.clearPendingRedraws(state); } // Just unselect the clicked wedge, keep others selected d.selected = false; d.hover = false; d.grabbed = false; // Update visual state immediately and synchronously colorWedges(); updateWedgeGroups(); // Force immediate synchronous link update to prevent one-frame lag drawLinks(); } else if (!shiftHeld) { // Clear any pending animation frames first to prevent old state from showing if (animationSystem && state && animationSystem.clearPendingRedraws) { animationSystem.clearPendingRedraws(state); } // Clear all selections immediately when shift is not held nodeData.forEach(node => { node.selected = false; node.hover = false; node.grabbed = false; }); // Select the clicked wedge immediately d.selected = true; // Update visual state immediately and synchronously colorWedges(); updateWedgeGroups(); // Force immediate synchronous link update to prevent one-frame lag drawLinks(); } } this.clickTimer = setTimeout(() => { // Execute multi-click selection when timer expires this.executeMultiClickSelection(d, this.clickCount, nodeData, config, colorWedges, updateWedgeGroups, drawLinks, saveState, this.shiftHeld); this.clickCount = 0; this.lastClickedWedgeId = null; this.clickTimer = null; this.processingClick = false; this.shiftHeld = false; }, this.clickDelay); setTimeout(() => { this.processingClick = false; }, 50); }, executeMultiClickSelection: function(clickedWedge, clickCount, nodeData, config, colorWedges, updateWedgeGroups, drawLinks, saveState, shiftHeld = false) { // Only apply multi-click selection if there was actually more than one click if (clickCount <= 1) { // Just save state for single clicks since visual updates were already applied immediately saveState(); return; } const factors = list.getFactorsAscending(config.number); // Ensure clickCount doesn't exceed the number of factors const factorIndex = Math.min(clickCount - 1, factors.length - 1); const wedgesToSelect = factors[factorIndex]; // Store previously selected wedges if shift is held let previouslySelected = []; if (shiftHeld) { previouslySelected = nodeData.filter(node => node.selected).map(node => node.id); } // Clear all selections first nodeData.forEach(node => { node.selected = false; node.hover = false; // Also clear hover state to prevent issues }); // Restore previously selected wedges if shift was held if (shiftHeld) { previouslySelected.forEach(id => { const wedge = nodeData.find(node => node.id === id); if (wedge) wedge.selected = true; }); } // Now select the multi-click wedges if (wedgesToSelect === 1) { // Single click: select just the clicked wedge clickedWedge.selected = true; } else if (wedgesToSelect === config.number) { // Select all wedges nodeData.forEach(node => { node.selected = true; }); } else { // Select wedges evenly spaced around the circle const spacing = config.number / wedgesToSelect; const startSlot = clickedWedge.slot; for (let i = 0; i < wedgesToSelect; i++) { const targetSlot = Math.round(startSlot + (i * spacing)) % config.number; const targetWedge = nodeData.find(node => node.slot === targetSlot); if (targetWedge) { targetWedge.selected = true; } } } // Clear any lingering interaction states nodeData.forEach(node => { node.hover = false; node.grabbed = false; }); // Update visual state colorWedges(); updateWedgeGroups(); drawLinks(); saveState(); }, cleanup: function() { if (this.clickTimer) { clearTimeout(this.clickTimer); this.clickTimer = null; } this.processingClick = false; this.clickCount = 0; this.lastClickedWedgeId = null; this.shiftHeld = false; } }; }, // === Animation System === createAnimationSystem: function() { return { scheduleRedraw: function(state, drawLinks) { if (!state.rendering.needsRedraw) { state.rendering.needsRedraw = true; if (state.rendering.drawFrameId) cancelAnimationFrame(state.rendering.drawFrameId); state.rendering.drawFrameId = requestAnimationFrame(() => { if (state.rendering.needsSVGRedraw && state.rendering.pendingSVGOps.length > 0) { state.rendering.pendingSVGOps.forEach(op => op()); state.rendering.pendingSVGOps = []; state.rendering.needsSVGRedraw = false; } if (state.rendering.needsRedraw) { drawLinks(); state.rendering.needsRedraw = false; } state.rendering.drawFrameId = null; }); } }, scheduleSVGOp: function(state, op) { state.rendering.pendingSVGOps.push(op); state.rendering.needsSVGRedraw = true; }, clearPendingRedraws: function(state) { if (state.rendering.drawFrameId) { cancelAnimationFrame(state.rendering.drawFrameId); state.rendering.drawFrameId = null; } state.rendering.needsRedraw = false; state.rendering.needsSVGRedraw = false; state.rendering.pendingSVGOps = []; } }; }, // === Mathematical Utilities === getFactors: function(n) { const factors = []; for (let i = 1; i <= n; i++) { if (n % i === 0) factors.push(i); } return factors; }, getFactorsAscending: function(n) { return this.getFactors(n).sort((a, b) => a - b); }, shortAngleDiff: function(fromAngle, toAngle) { let diff = toAngle - fromAngle; while (diff > Math.PI) diff -= 2 * Math.PI; while (diff < -Math.PI) diff += 2 * Math.PI; return diff; }, getMinRot: function(fromIdx, toIdx, number) { const cw = (toIdx - fromIdx + number) % number; const ccw = (fromIdx - toIdx + number) % number; return cw <= ccw ? cw : -ccw; }, normalizeAngle: function(angle) { while (angle < 0) angle += 2 * Math.PI; while (angle >= 2 * Math.PI) angle -= 2 * Math.PI; return angle; }, // === Position and Geometry Utilities === getPosFromIdx: function(idx, centerX, centerY, radius, number) { const angle = idx * (2 * Math.PI / number) - Math.PI / 2; return { x: centerX + radius * Math.cos(angle), y: centerY + radius * Math.sin(angle) }; }, getIdxFromRot: function(rot, number) { return Math.round(number * (rot + 270) / 360) % number; }, calcRotation: function(x, y, centerX, centerY) { return Math.atan2(centerY - y, centerX - x) * (180 / Math.PI); }, getWedgeIdxFromMouse: function(mouseX, mouseY, centerX, centerY, number) { const dx = mouseX - centerX; const dy = mouseY - centerY; const angle = Math.atan2(dy, dx); let wedgeIdx = Math.round((angle + Math.PI / 2) * number / (2 * Math.PI)); return ((wedgeIdx % number) + number) % number; }, getWedgeWidths: function(radius, wedgeSize, number) { const anglePerWedge = Math.PI / number; return { bottom: 2 * (radius - wedgeSize) * Math.tan(anglePerWedge), top: 2 * (radius + wedgeSize) * Math.tan(anglePerWedge) }; }, getWedgeCorners: function(d, wedgeSize, wBot, wTop) { const localCorners = [ { x: wedgeSize, y: wBot / 2 }, { x: wedgeSize, y: -wBot / 2 }, { x: -wedgeSize, y: -wTop / 2 }, { x: -wedgeSize, y: wTop / 2 } ]; const angleRad = d.sr * (Math.PI / 180); const cosAngle = Math.cos(angleRad); const sinAngle = Math.sin(angleRad); return localCorners.map(corner => ({ x: d.sx + corner.x * cosAngle - corner.y * sinAngle, y: d.sy + corner.x * sinAngle + corner.y * cosAngle })); }, isPointInWedge: function(px, py, d, wedgeSize, wBot, wTop) { const dx = px - d.sx; const dy = py - d.sy; const angleRad = -d.sr * (Math.PI / 180); const cosAngle = Math.cos(angleRad); const sinAngle = Math.sin(angleRad); const localX = dx * cosAngle - dy * sinAngle; const localY = dx * sinAngle + dy * cosAngle; if (localX > wedgeSize || localX < -wedgeSize) return false; const widthAtX = localX >= 0 ? wBot / 2 + (wTop / 2 - wBot / 2) * (wedgeSize - localX) / (2 * wedgeSize) : wTop / 2 + (wBot / 2 - wTop / 2) * (wedgeSize + localX) / (2 * wedgeSize); return Math.abs(localY) <= widthAtX; }, wedgeIntersectsRect: function(d, rectX, rectY, rectW, rectH, getWedgeCorners) { const minX = Math.min(rectX, rectX + rectW); const maxX = Math.max(rectX, rectX + rectW); const minY = Math.min(rectY, rectY + rectH); const maxY = Math.max(rectY, rectY + rectH); const corners = getWedgeCorners(d); for (let corner of corners) { if (corner.x >= minX && corner.x <= maxX && corner.y >= minY && corner.y <= maxY) return true; } return d.sx >= minX && d.sx <= maxX && d.sy >= minY && d.sy <= maxY; }, isAtCorrectPos: function(d, slot, getPosFromIdx, centerX, centerY, radius, number) { const targetPos = getPosFromIdx(slot, centerX, centerY, radius, number); const tol = 0.1; return Math.abs(d.sx - targetPos.x) < tol && Math.abs(d.sy - targetPos.y) < tol; }, // === Angle and Reflection Utilities === getAllSnapAngles: function(number) { const wedgeAngles = []; const betweenAngles = []; for (let i = 0; i < number; i++) { const wedgeAngle = i * (2 * Math.PI / number) - Math.PI / 2; wedgeAngles.push(wedgeAngle); } for (let i = 0; i < number; i++) { const currentAngle = wedgeAngles[i]; const nextAngle = wedgeAngles[(i + 1) % number]; let betweenAngle; if (nextAngle > currentAngle) { betweenAngle = (currentAngle + nextAngle) / 2; } else { betweenAngle = (currentAngle + nextAngle + 2 * Math.PI) / 2; if (betweenAngle > Math.PI) betweenAngle -= 2 * Math.PI; } betweenAngles.push(betweenAngle); } const allAngles = [...wedgeAngles, ...betweenAngles]; const normAngles = allAngles.map(angle => { while (angle > Math.PI) angle -= 2 * Math.PI; while (angle < -Math.PI) angle += 2 * Math.PI; return angle; }); return normAngles.sort((a, b) => a - b); }, calcReflAngle: function(mouseX, mouseY, centerX, centerY, number, shortAngleDiff, getAllSnapAngles) { const dx = mouseX - centerX; const dy = mouseY - centerY; const rawAngle = Math.atan2(dy, dx); const allAngles = getAllSnapAngles(number); let closestAngle = allAngles[0]; let minDist = Math.abs(shortAngleDiff(rawAngle, allAngles[0])); for (let angle of allAngles) { const dist = Math.abs(shortAngleDiff(rawAngle, angle)); if (dist < minDist) { minDist = dist; closestAngle = angle; } } return closestAngle; }, calcMirroredSlot: function(slot, reflAngle, number) { const slotAngle = slot * (2 * Math.PI / number) - Math.PI / 2; const reflectedAngle = 2 * reflAngle - slotAngle; let reflectedSlot = Math.round((reflectedAngle + Math.PI / 2) * number / (2 * Math.PI)); reflectedSlot = ((reflectedSlot % number) + number) % number; return reflectedSlot; }, calcReflectedSeq: function(seq, reflAngle, number) { const newSeq = new Array(number); for (let slot = 0; slot < number; slot++) { const slotAngle = slot * (2 * Math.PI / number) - Math.PI / 2; const reflectedAngle = 2 * reflAngle - slotAngle; let reflectedSlot = Math.round((reflectedAngle + Math.PI / 2) * number / (2 * Math.PI)); reflectedSlot = ((reflectedSlot % number) + number) % number; newSeq[reflectedSlot] = seq[slot]; } return newSeq; }, calcRotatedSeq: function(origSeq, rotInc, number) { const rotAmt = rotInc % number; const newSeq = new Array(number); for (let i = 0; i < number; i++) { newSeq[i] = origSeq[(i - rotAmt + number) % number]; } return newSeq; }, // === Symmetry Functions === calcSymCounts: function(number, getFactors) { const factors = getFactors(number); factors.pop(); let defaultCount; if (factors.length === 1 && factors[0] === 1) { defaultCount = 1; } else { defaultCount = factors.find(f => f > 1) || 1; } return { factors, defaultCount }; }, isAxisWedge: function(wedge, symAngle, symCount, number) { const wedgeAngle = wedge.slot * (2 * Math.PI / number) - Math.PI / 2; const tol = Math.PI / (4 * number); for (let i = 0; i < symCount; i++) { const symLineAngle = symAngle + (i * Math.PI / symCount); if (Math.abs(this.shortAngleDiff(wedgeAngle, symLineAngle)) < tol || Math.abs(this.shortAngleDiff(wedgeAngle, symLineAngle + Math.PI)) < tol) { return true; } } return false; }, getAxisSlots: function(number, symAngle, symCount) { const axisSlots = []; const tol = Math.PI / (4 * number); for (let slot = 0; slot < number; slot++) { const wedgeAngle = slot * (2 * Math.PI / number) - Math.PI / 2; for (let i = 0; i < symCount; i++) { const symLineAngle = symAngle + (i * Math.PI / symCount); const diff1 = Math.abs(this.shortAngleDiff(wedgeAngle, symLineAngle)); const diff2 = Math.abs(this.shortAngleDiff(wedgeAngle, symLineAngle + Math.PI)); if (diff1 < tol || diff2 < tol) { axisSlots.push(slot); break; } } } return axisSlots; }, isAxisSlot: function(slot, number, symAngle, symCount) { const axisSlots = this.getAxisSlots(number, symAngle, symCount); return axisSlots.includes(slot); }, getAxisWedges: function(draggedWedge, nodeData, number, symAngle, symCount) { const wedges = []; if (this.isAxisWedge(draggedWedge, symAngle, symCount, number)) { wedges.push(draggedWedge); if (number % 2 === 0) { const oppSlot = (draggedWedge.slot + number/2) % number; const oppWedge = nodeData.find(node => node.slot === oppSlot); if (oppWedge) wedges.push(oppWedge); } } return wedges; }, getReflWedges: function(draggedWedge, nodeData, number, symAngle, symCount) { const wedges = []; if (symCount === 1) { wedges.push(draggedWedge); const mirroredSlot = this.calcMirroredSlot(draggedWedge.slot, symAngle, number); const mirroredWedge = nodeData.find(node => node.slot === mirroredSlot); if (mirroredWedge && mirroredWedge.id !== draggedWedge.id) { wedges.push(mirroredWedge); } } else { const wedgeSlots = this.calcAltReflections(draggedWedge.slot, symAngle, symCount, number); wedgeSlots.forEach(slot => { const wedge = nodeData.find(node => node.slot === slot); if (wedge) wedges.push(wedge); }); } return wedges; }, calcAltReflections: function(startSlot, symAngle, symCount, number) { const wedgeList = [startSlot]; const targetCount = 2 * symCount; const symLines = []; for (let i = 0; i < symCount; i++) { symLines.push(symAngle + (i * Math.PI / symCount)); } const wedgeAngle = startSlot * (2 * Math.PI / number) - Math.PI / 2; const normWedgeAngle = this.normalizeAngle(wedgeAngle); const normSymLines = symLines.map(angle => this.normalizeAngle(angle)).sort((a, b) => a - b); let lineAIdx = -1; let lineBIdx = -1; for (let i = 0; i < normSymLines.length; i++) { const currentLine = normSymLines[i]; const nextLine = normSymLines[(i + 1) % normSymLines.length]; if (nextLine > currentLine) { if (normWedgeAngle >= currentLine && normWedgeAngle < nextLine) { lineAIdx = i; lineBIdx = (i + 1) % normSymLines.length; break; } } else { if (normWedgeAngle >= currentLine || normWedgeAngle < nextLine) { lineAIdx = i; lineBIdx = (i + 1) % normSymLines.length; break; } } } if (lineAIdx === -1) { lineAIdx = 0; lineBIdx = 1; } const lineA = symLines[lineAIdx]; const lineB = symLines[lineBIdx]; let currentSlot = startSlot; let useLineA = true; while (wedgeList.length < targetCount) { const reflLine = useLineA ? lineA : lineB; currentSlot = this.calcMirroredSlot(currentSlot, reflLine, number); if (!wedgeList.includes(currentSlot)) { wedgeList.push(currentSlot); } else { break; } useLineA = !useLineA; } return wedgeList; }, // === Data Creation and Management === createNodeData: function(number, sequence, getPosFromIdx, calcRot, centerX, centerY, radius) { const nodes = []; for (let i = 0; i < number; i++) { const slot = sequence.findIndex(e => e === i); const pos = getPosFromIdx(slot, centerX, centerY, radius, number); nodes.push({ id: i, slot: slot, sx: pos.x, sy: pos.y, sr: calcRot(pos.x, pos.y, centerX, centerY), sx0: pos.x, sy0: pos.y, sr0: calcRot(pos.x, pos.y, centerX, centerY), sd: 0, hover: false, selected: false, bold: false, grabbed: false, fill: "lightgrey", stroke: "none", strokeWidth: 0 }); } return nodes; }, createLinkData: function(number, gradient) { const links = []; for (let i = 0; i < number; i++) { for (let j = i + 1; j < number; j++) { links.push({ source: i, target: j, color: gradient(Math.random()), opacity: 0.5 }); } } return links; }, saveState: function(histIdx, stateHist, seq, nodeData, maxHistSize) { if (histIdx < stateHist.length - 1) { stateHist = stateHist.slice(0, histIdx + 1); } const currentSel = nodeData.filter(d => d.selected).map(d => d.id); stateHist.push({ sequence: [...seq], selections: [...currentSel] }); if (stateHist.length > maxHistSize) { stateHist.shift(); return { stateHistory: stateHist, historyIndex: histIdx }; } else { return { stateHistory: stateHist, historyIndex: histIdx + 1 }; } }, // === Rendering Functions === drawWedge: function(sel, d, wedgeSize, textOffset, getWedgeWidths, radius, number) { sel.selectAll("*").remove(); const { bottom: wBot, top: wTop } = getWedgeWidths(radius, wedgeSize, number); sel.append("path") .attr("d", `M ${wedgeSize} ${wBot / 2} L ${wedgeSize} ${-wBot / 2} L ${-wedgeSize} ${-wTop / 2} L ${-wedgeSize} ${wTop / 2} Z`) .attr("fill", d.fill) .attr("stroke", d.stroke) .attr("stroke-width", d.strokeWidth) .attr("transform", `translate(${d.sx}, ${d.sy}) rotate(${d.sr})`); sel.append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("font-size", "12px") .attr("font-family", "Arial") .attr("fill", "steelblue") .attr("transform", () => { const textRad = (d.sr + 180) * (Math.PI / 180); const textX = d.sx + Math.cos(textRad) * (wedgeSize + textOffset); const textY = d.sy + Math.sin(textRad) * (wedgeSize + textOffset); return `translate(${textX}, ${textY})`; }) .text(d.id); }, drawLinks: function(ctx, scaledW, scaledH, scaleFactor, wedgeSize, linkStyle, linkData, nodeData) { ctx.clearRect(0, 0, scaledW, scaledH); ctx.save(); ctx.scale(scaleFactor, scaleFactor); linkData.forEach(link => { const src = nodeData.find(d => d.id === link.source); const tgt = nodeData.find(d => d.id === link.target); const srcRad = src.sr * (Math.PI / 180); const tgtRad = tgt.sr * (Math.PI / 180); const startX = src.sx + Math.cos(srcRad) * wedgeSize; const startY = src.sy + Math.sin(srcRad) * wedgeSize; const endX = tgt.sx + Math.cos(tgtRad) * wedgeSize; const endY = tgt.sy + Math.sin(tgtRad) * wedgeSize; const dist = Math.sqrt((startX - endX) ** 2 + (startY - endY) ** 2); const tangentDist = 10 + 0.15 * dist; const srcHandleX = startX + Math.cos(srcRad) * tangentDist; const srcHandleY = startY + Math.sin(srcRad) * tangentDist; const tgtHandleX = endX + Math.cos(tgtRad) * tangentDist; const tgtHandleY = endY + Math.sin(tgtRad) * tangentDist; ctx.beginPath(); ctx.moveTo(startX, startY); ctx.bezierCurveTo(srcHandleX, srcHandleY, tgtHandleX, tgtHandleY, endX, endY); if (src.grabbed || tgt.grabbed) { ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = link.color; ctx.lineWidth = 1; } else if ((src.selected || src.hover) && (tgt.selected || tgt.hover)) { ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = link.color; ctx.lineWidth = 1; } else { ctx.globalAlpha = linkStyle.opacity; ctx.globalCompositeOperation = 'destination-over'; ctx.strokeStyle = link.color; ctx.lineWidth = linkStyle.weight; } ctx.stroke(); ctx.globalAlpha = 1.0; }); ctx.restore(); }, // === Symmetry UI Functions === createSymUI: function(symGroup, centerX, centerY, changeSymCount) { const linesGroup = symGroup.append("g").attr("class", "symmetry-lines"); const handleGroup = symGroup.append("g").attr("class", "symmetry-handle"); handleGroup.append("rect") .attr("class", "handle-bg") .attr("width", 30) .attr("height", 20) .attr("x", -15) .attr("y", -10); handleGroup.append("path") .attr("class", "handle-arrow") .attr("d", "M -10 0 L -5 -4 M -10 0 L -5 4 M 10 0 L 5 -4 M 10 0 L 5 4 M -10 0 L 10 0"); const controlsGroup = symGroup.append("g").attr("class", "symmetry-controls"); const minusGroup = controlsGroup.append("g").attr("class", "minus-button").attr("transform", `translate(${centerX - 30}, ${centerY})`); minusGroup.append("circle").attr("r", 10); minusGroup.append("path").attr("d", "M -5 0 L 5 0"); controlsGroup.append("text") .attr("class", "symmetry-count") .attr("x", centerX) .attr("y", centerY) .attr("text-anchor", "middle") .attr("dominant-baseline", "central"); const plusGroup = controlsGroup.append("g").attr("class", "plus-button").attr("transform", `translate(${centerX + 30}, ${centerY})`); plusGroup.append("circle").attr("r", 10); plusGroup.append("path").attr("d", "M -5 0 L 5 0 M 0 -5 L 0 5"); minusGroup.on("click", function() { changeSymCount(-1); }); plusGroup.on("click", function() { changeSymCount(1); }); }, updateSymLines: function(symGroup, centerX, centerY, width, symCount, symAngle) { const linesGroup = symGroup.select(".symmetry-lines"); linesGroup.selectAll("line").remove(); for (let i = 0; i < symCount; i++) { const angle = symAngle + (i * Math.PI / symCount); const lineLen = (width - 6) / 2; linesGroup.append("line") .attr("x1", centerX + Math.cos(angle + Math.PI) * lineLen) .attr("y1", centerY + Math.sin(angle + Math.PI) * lineLen) .attr("x2", centerX + Math.cos(angle) * lineLen) .attr("y2", centerY + Math.sin(angle) * lineLen); } }, updateSymHandle: function(symGroup, centerX, centerY, width, symAngle) { const handleGroup = symGroup.select(".symmetry-handle"); const lineLen = (width - 6) / 2; let x = centerX + Math.cos(symAngle) * lineLen; let y = centerY + Math.sin(symAngle) * lineLen; x -= Math.cos(symAngle) * 10; y -= Math.sin(symAngle) * 10; const handleRot = (symAngle * 180 / Math.PI) + 90; handleGroup.attr("transform", `translate(${x}, ${y}) rotate(${handleRot})`); }, updateSymControls: function(symGroup, possibleSymCounts, symCount) { const currentIdx = possibleSymCounts.indexOf(symCount); symGroup.select(".minus-button").style("visibility", currentIdx > 0 ? "visible" : "hidden"); symGroup.select(".plus-button").style("visibility", currentIdx < possibleSymCounts.length - 1 ? "visible" : "hidden"); symGroup.select(".symmetry-count").text(symCount); }, // === State Management Functions === initializeState: function(config) { return { // Core sequence and history sequence: Array.from({ length: config.number }, (_, i) => i), originalSequence: [], stateHistory: [{ sequence: [], selections: [] }], historyIndex: 0, // Input states modifiers: { isCtrlHeld: false, isAltHeld: false }, // Drag states drag: { isDragging: false, isDragSelecting: false, isCtrlDragging: false, isAltDragging: false, dragOffset: { x: 0, y: 0 }, dragSelectStart: { x: 0, y: 0 }, currentDragRect: { x: 0, y: 0, width: 0, height: 0 }, initiallySelectedWedges: [], dragSelectShiftPressed: false, dragSelectEndedWhileAltHeld: false, startX: 0, startY: 0 }, // Alt mode states altMode: { isAltAxis: false, isAltRefl: false, altAxisWedges: [], altAxisSlots: [], altAxisPos: [], altReflWedges: [], altReflSlots: [], altReflPos: [], altDragOccurred: false, preAltSelections: [], isAltDragging: false }, // Rotation and reflection rotation: { hasRotationStarted: false, rotationInProgress: false, accumulatedRotation: 0, previousMouseWedgeIndex: null, ctrlDragStartAngle: 0, ctrlDragStartSnapIndex: 0, ctrlDragConstraint: null }, reflection: { reflectionAngle: -Math.PI / 2, currentReflectionLineAngle: -Math.PI / 2 }, // Symmetry symmetry: { possibleSymCounts: [], symCount: 2, symAngle: -Math.PI / 2, altDragStartAngle: 0 }, // Mouse and interaction mouse: { currentMousePos: { x: config.width / 2, y: config.height / 2 }, isMouseOverContainer: false }, // Rendering rendering: { needsRedraw: false, needsSVGRedraw: false, drawFrameId: null, pendingSVGOps: [], historyAnimInProgress: false }, // Timers timers: { resizeTimeout: null } }; }, // === Utility Functions for Code Organization === debounce: function(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }, throttle: function(func, limit) { let inThrottle; return function(...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; } }) return list } 48:T876,49:T81b,function shift(list, element,toIndex) { let n = list.length let startIndex = list.findIndex(e => e==element) let difference = toIndex-startIndex let shiftRight = () => { const left = list.slice(0,startIndex) const move = list.slice(startIndex, startIndex+1) const middleShift= list.slice(startIndex+1, toIndex+1) const right = list.slice(toIndex+1,n) return [...left, ...middleShift, ...move, ...right] } let shiftLeft = () => { const left = list.slice(0,toIndex) const middleShift = list.slice(toIndex, startIndex) const move = list.slice(startIndex, startIndex+1) const right = list.slice(startIndex+1,n) return [...left, ...move, ...middleShift, ...right] } let wrapRight = () => { const leftShift = list.slice(0,startIndex) const move = list.slice(startIndex, startIndex+1) const middle = list.slice(startIndex+1,toIndex) const rightShift = list.slice(toIndex,n-1) const wrap = list.slice(n-1,n) return [...wrap, ...leftShift, ...middle, ...move, ...rightShift] } let wrapLeft = () => { const wrap = list.slice(0,1) const leftShift = list.slice(1,toIndex+1) const middle = list.slice(toIndex+1,startIndex) const move = list.slice(startIndex, startIndex+1) const rightShift= list.slice(startIndex+1,n) return [...leftShift, ...move, ...middle, ...rightShift, ...wrap] } // moving element less than half of array length: shift if( Math.abs(difference)0) return shiftRight() if( Math.abs(difference)n/2) return wrapLeft() // moving element more than half of array length: wrap element around if( Math.abs(difference)>n/2 && difference>0) return wrapRight() if( Math.abs(difference)>n/2 && difference<0) return wrapLeft() return list }4a:[] 43:{"id":"b221e340c758dd48","slug":null,"title":"Drag to re-arrange circle","thumbnail":"ea96bea6eaa246b236fbf02651bffd15d4c01856b5d70b530090d9db59023fa4","access_level":"public","create_time":"$D2025-12-30T01:47:29.645Z","update_time":"$D2025-12-30T01:47:29.645Z","view_time":null,"first_public_time":"$D2025-12-30T01:47:29.645Z","has_unpublished_edits":null,"fork":{"id":"e20891d80b87e11f","slug":null,"title":"Drag to re-arrange circle","owner":{"id":"cf45be0120eccaad","login":"laotzunami","name":"Lao"}},"stars":0,"starred":false,"owner":{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","bio":"","following":false},"version":796,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"62eaf79b101c4021","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":"starter_2024","role":"editor"},{"type":"individual","id":"97ed911fd2a1208e","login":"mondano","name":"Ruzgar Imski","avatar_url":"https://avatars-next.observableusercontent.com/77349a6cb8957792df3c6651144ca808d40794c15df75040d13e6d6387841d04","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Drag to re-arrange circle","cells":[{"id":0,"value":"# Drag to re-arrange circle\n## Remix of Fil's [1D](https://observablehq.com/@fil/drag-to-re-arrange) and [2D](https://observablehq.com/@fil/drag-to-re-arrange-2d) rectilinear versions with improved reordering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"## Basic Drag Only UI","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":173,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"## SVG - Canvas hybrid for efficient link rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"- Drag wedges to rearrange\n- Shift to select multiple\n- Drag background to area select\n- Ctrl + click to reflect all wedges\n- Ctrl + drag to rotate all wedges\n- Alt + drag to kaleidoscopically rearrange\n- Multi click to select evenly spaced wedges\n- Ctrl+Z and Ctrl+Y to navigate history","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":559,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"UI system\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":758,"value":"connections = {\n let links\n let sets\n let highlights\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"$48","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 44:"$43:body"