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; }