viewof chart = (() => { let isTouchDragging = false; let touchDragStart = null; const TOUCH_DRAG_THRESHOLD = 8; let isRotating = false; const height = styles.height; const outerRadius = styles.radii.outer; const innerRadius = styles.radii.middleOuter; // Outer ring's inner radius const middleRadius = styles.radii.middleOuter; // Middle ring's outer radius const innerInnerRadius = styles.radii.middleInner; // Middle ring's inner radius const centerRadius = styles.radii.inner; // Inner ring's outer radius // Create SVG with centered viewBox const svg = d3.create("svg") .attr("viewBox", [-styles.width/2, -styles.height/2, styles.width, styles.height]) .style("max-width", "100%") .style("height", "auto") .style("font-family", `${selectedFont}, sans-serif`); // State variables let focusedPair = null; let clickedSlice = null; let clickedCell = null; let activeZoom = null; let cellVisibility = {}; function updateChartValue() { svg.node().value = { focusedPair, clickedSlice, clickedCell, currentRotation: getCurrentRotationFromDOM() }; svg.node().dispatchEvent(new CustomEvent("input")); } // Double tap detection for zoom reset let lastTapTime = 0; const DOUBLE_TAP_DELAY = 300; // 300ms window for double tap // Helper function to get current rotation from DOM (eliminates state tracking) function getCurrentRotationFromDOM() { const transform = rotationGroup.attr("transform") || ""; const rotateMatch = transform.match(/rotate$([-\d.]+)$/); if (rotateMatch) { return parseFloat(rotateMatch[1]) * Math.PI / 180; // Convert to radians } return 0; } // Helper function to set rotation directly on DOM (no state tracking) function setRotationDirectly(radians) { const degrees = (radians * 180) / Math.PI; rotationGroup.attr("transform", `rotate(${degrees})`); // Update text positions immediately updateTextPositions(degrees); // Update chart value and dispatch event updateChartValue(); } // Helper function to get rotated centroid using simple matrix transform function getRotatedCentroid(rawCentroid, currentRotation) { // Simple rotation matrix: [x*cos - y*sin, x*sin + y*cos] const rotatedX = rawCentroid[0] * Math.cos(currentRotation) - rawCentroid[1] * Math.sin(currentRotation); const rotatedY = rawCentroid[0] * Math.sin(currentRotation) + rawCentroid[1] * Math.cos(currentRotation); return [rotatedX, rotatedY]; } // Step-by-step animation state let currentStep = 0; let isStepMode = false; let animationData = {}; let buildSteps = []; // Initialize cell visibility const cells = Object.keys(dialecticalData); cells.forEach(cell => { cellVisibility[cell] = { invisible: true, // Start visible for normal mode outer: true, middle: true, inner: true }; }); // Add background rectangle for reset clicks svg.append("rect") .attr("class", "background") .attr("x", -styles.width/2) .attr("y", -styles.height/2) .attr("width", styles.width) .attr("height", styles.height) .style("fill", "none") .style("pointer-events", "all") .on("click", resetZoom); // NEW TRANSFORM HIERARCHY: // svg (D3 zoom applied here) // zoomGroup (zoom applied FIRST - D3 zoom controls this) // rotationGroup (rotation applied SECOND - rotates the zoomed content) // contentGroup (actual wheel content) const zoomGroup = svg.append("g").attr("class", "zoom-group"); const rotationGroup = zoomGroup.append("g").attr("class", "rotation-group"); const contentGroup = rotationGroup.append("g").attr("class", "content-group"); // Add large invisible circle for better mobile touch target (in rotation group so it rotates with wheel) const dragCircle = rotationGroup.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", styles.radii.drag) // Larger than outerRadius for easier touch .style("fill", "transparent") .style("pointer-events", "none") // FIXED: Don't block clicks - only handle drag .style("cursor", "grab"); // Create zoom behavior (disable panning, only allow programmatic zoom) const zoom = d3.zoom() .scaleExtent([1, 8]) .filter(event => true) // Disable all zoom interactions .on("zoom", zoomed); // FIXED: Bind zoom to svg - D3 zoom needs to control the main element //zoomGroup.call(zoom); // Drag behavior for rotation with mobile optimization let dragStartAngle = 0; let dragStartRotation = 0; // Apply mobile-friendly styles and drag behavior svg.style("touch-action", "none") // Prevent default touch behaviors .style("user-select", "none"); // Prevent text selection // Add scroll-to-zoom functionality let hoveredCell = null; // Track hover state on cells function setHoveredCell(cell) { hoveredCell = cell; } // Add wheel event listener for scroll-to-zoom // FIXED: Apply drag behavior to the rotationGroup so it scales with zoom //rotationGroup.call(drag); // ===== TOUCH BEHAVIOR: Focus + Zoom to Slice ===== // Touch events now simply focus the pair and zoom to the entire slice // Create pie generator const pie = d3.pie() .value(d => d.value) .sort(null); // Create arc generators const invisibleArc = d3.arc() .innerRadius(outerRadius) .outerRadius(styles.radii.invisible); const outerArc = d3.arc() .innerRadius(innerRadius) .outerRadius(outerRadius); const middleArc = d3.arc() .innerRadius(innerInnerRadius) .outerRadius(middleRadius); const innerArc = d3.arc() .innerRadius(styles.radii.hub) // Add inner radius to make it a ring, not a pie .outerRadius(centerRadius); // Simple Text Rotation and Flipping Logic // Single function to calculate text orientation with consistent flipping function calculateTextTransform(d, arcGenerator, currentRotationRadians = null) { const centroid = arcGenerator.centroid(d); // Get the slice middle angle in the original data const sliceMiddleAngle = (d.startAngle + d.endAngle) / 2; // PERFORMANCE: Use passed rotation or get from DOM only if needed const currentRotation = currentRotationRadians !== null ? currentRotationRadians : getCurrentRotationFromDOM(); // Calculate the current visual angle (slice angle + wheel rotation) const currentVisualAngle = sliceMiddleAngle + currentRotation; // Normalize to [0, 2π] for consistent flipping logic const normalizedAngle = ((currentVisualAngle % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI); // Convert slice angle to degrees for text rotation let textRotationDegrees = (sliceMiddleAngle * 180) / Math.PI; // DISABLE text flipping when focused to avoid confusion // Only flip text if we're NOT in focus mode (focusedPair is null) if (normalizedAngle > Math.PI / 2 && normalizedAngle < 3 * Math.PI / 2) { textRotationDegrees += 180; } return `translate(${centroid[0]}, ${centroid[1]}) rotate(${textRotationDegrees})`; } // Reusable function to rotate wheel to center a slice at the top function rotateToSlice(unitId, duration = styles.durations.stepRotation) { // Choose which data to use based on current mode const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; // Calculate rotation needed to center the slice at the top const pieData = pie(dataToUse.middle); const targetSlice = pieData.find(d => d.data.unitId === unitId); if (!targetSlice) return; // Calculate the current angle of the slice center in the original data const sliceAngle = (targetSlice.startAngle + targetSlice.endAngle) / 2; // Simple calculation: to center this slice at the top, // we need: sliceAngle + newRotation = 0 // Therefore: newRotation = -sliceAngle const newRotation = -sliceAngle; // Get current rotation from DOM const startRotation = getCurrentRotationFromDOM(); let rotationDelta = newRotation - startRotation; // Normalize rotation delta to always take the shortest path (-π to π) while (rotationDelta > Math.PI) rotationDelta -= 2 * Math.PI; while (rotationDelta < -Math.PI) rotationDelta += 2 * Math.PI; // Use D3 transition for smooth rotation const rotationTransition = d3.transition() .duration(duration) .ease(d3.easeCubicInOut); isRotating = true; rotationTransition.tween("rotate", function() { return function(t) { const currentRotation = startRotation + rotationDelta * t; const degrees = (currentRotation * 180) / Math.PI; rotationGroup.attr("transform", `rotate(${degrees})`); // Update text positions during transition updateTextPositions(degrees); }; }).on("end", function(){ isRotating = false; updateChartValue(); }); } // Create groups for each ring (in content group) const invisibleGroup = contentGroup.append("g").attr("class", "invisible-ring"); const outerGroup = contentGroup.append("g").attr("class", "outer-ring"); const middleGroup = contentGroup.append("g").attr("class", "middle-ring"); const innerGroup = contentGroup.append("g").attr("class", "inner-ring"); // Initialize data const nestedData = transformToNestedPieData(dialecticalData); const originalNestedData = JSON.parse(JSON.stringify(nestedData)); // Keep original opacity values // Create groups for labels (in content group) const invisibleLabelsGroup = contentGroup.append("g").attr("class", "invisible-labels"); const outerLabelsGroup = contentGroup.append("g").attr("class", "outer-labels"); const middleLabelsGroup = contentGroup.append("g").attr("class", "middle-labels"); const innerLabelsGroup = contentGroup.append("g").attr("class", "inner-labels"); // Add yellow center circle (axle/hub) (in content group) const centerCircle = contentGroup.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", styles.radii.hub) // Same as inner radius of green ring .style("fill", styles.colors.hub); // Add coordinate system BACK inside the content group so it gets rotation transforms const coordinateGroup = contentGroup.append("g").attr("class", "coordinate-system"); // Add circumference numbers at slice centers const numSlices = Object.keys(dialecticalData).length; const angleStep = (2 * Math.PI) / numSlices; const numberRadius = outerRadius + 15; // Add axis symbols at the center of each ring layer const ringRadii = [ centerRadius, // Inner ring center middleRadius, // Middle ring center outerRadius // Outer ring center ]; //const symbols = ["T+", "T", "T-"]; // Positive, neutral, negative const axisColors = [styles.colors.text.inner, styles.colors.text.middle, styles.colors.text.outer]; function updateCoordinateNumbersOpacities() { // Update coordinate number opacities based on slice data const units = Object.keys(dialecticalData); const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; const middleData = dataToUse.middle; coordinateGroup.selectAll("text.coordinate-number").each(function() { const sliceIndex = parseInt(d3.select(this).attr("data-slice-index")); const unitId = units[sliceIndex]; if (unitId) { const sliceData = middleData.find(d => d.unitId === unitId); const opacity = sliceData ? sliceData.opacity : 1; d3.select(this) .transition() .duration(styles.durations.normal) .style("opacity", opacity); } }); } // Function to update axis positions based on focus function updateAxisPositions(focusedUnitId = null) { let axisAngle; if (focusedUnitId) { // Remove existing axis elements coordinateGroup.selectAll(".coordinate-circle").remove(); coordinateGroup.selectAll(".coordinate-symbol").remove(); // When focused, position axis at the left edge of the focused slice // Choose which data to use based on current mode (same as other functions) const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; const pieData = pie(dataToUse.middle); const focusedSlice = pieData.find(d => d.data.unitId === focusedUnitId); if (focusedSlice) { // Position axis at the start angle of the slice (left edge) axisAngle = focusedSlice.startAngle - Math.PI / 2; } else { // Fallback to default const units = Object.keys(dialecticalData); const numSlices = units.length; const angleStep = (2 * Math.PI) / numSlices; axisAngle = (numSlices / 2 * angleStep) - Math.PI / 2; } } else { updateCoordinateNumbersOpacities(); return; } // Create axis on both sides of the wheel const axisAngles = [axisAngle, axisAngle + Math.PI]; // Both sides axisAngles.forEach((angle, sideIndex) => { ringRadii.forEach((radius, ringIndex) => { const angleOffset = 8 / radius; // 8px arc length at this radius const rotatedAngle = angle + angleOffset; const x = (radius-8) * Math.cos(rotatedAngle); const y = (radius-8) * Math.sin(rotatedAngle); const x2 = (radius) * Math.cos(angle); const y2 = (radius) * Math.sin(angle); // Choose symbols based on the focused unit ID const signs = ["+", "", "-"]; //const symbols = focusedUnitId.startsWith('T') ? logos[sideIndex] : logos[1 - sideIndex]; // Create a group for this axis element (circle + symbol) const axisGroup = coordinateGroup.append("g") .attr("class", "axis-element"); let oppaciudad = 1; // Determine which unit ID to use for clipping (partner unit for opposite side) let clipUnitId = sideIndex === 0 ? focusedUnitId : getOppositePrefix(focusedUnitId); // Create a unique clip path ID for this axis element const clipId = `clip-${clipUnitId}-${sideIndex}-${ringIndex}`; // Create clip path that matches the cell shape const clipPath = defs.append("clipPath") .attr("id", clipId); // Add the cell path to the clip path const cellPath = clipPath.append("path") .attr("d", function() { // Get the cell data for this unit and ring const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; let pieData, arcGen; if (ringIndex === 0) { // inner ring pieData = pie(dataToUse.inner); arcGen = d3.arc().innerRadius(styles.radii.hub).outerRadius(centerRadius); } else if (ringIndex === 1) { // middle ring pieData = pie(dataToUse.middle); arcGen = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); } else { // outer ring pieData = pie(dataToUse.outer); arcGen = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); } const cellData = pieData.find(d => d.data.unitId === clipUnitId); clipUnitId = cellData.data.name; oppaciudad = cellData.data.opacity; console.log(`cellData.data.name: ${cellData.data.name}, cellData.data.opacity: ${cellData.data.opacity}`); return cellData ? arcGen(cellData) : ""; }); // Create circle background within the group (clipped to cell) axisGroup.append("circle") .attr("class", "coordinate-circle") .attr("cx", x2) .attr("cy", y2) .attr("r", 0) // Start at 0 for a grow-in effect .style("fill", "#000") .style("opacity", 0) .style("clip-path", `url(#${clipId})`) .transition() .duration(500) .attr("r", 20) .style("opacity", 0.1); // Add symbol text within the same group, perfectly centered axisGroup.append("text") .attr("class", "coordinate-symbol") .attr("x", x) .attr("y", y - 10) // Start above for a slide-in effect .style("text-anchor", "middle") .style("dominant-baseline", "central") .style("font-family", "Monaco, monospace") .style("font-size", "8px") .style("font-weight", styles.fonts.coordinates.weight) .style("fill", axisColors[ringIndex]) .style("pointer-events", "none") .style("opacity", 0) .text(clipUnitId) .transition() .duration(500) .attr("y", y) .style("opacity", oppaciudad); }); }); updateCoordinateNumbersOpacities(); } // Initialize axes updateAxisPositions(); // Color scales const invisibleColor = d3.scaleOrdinal() .domain(Object.keys(dialecticalData)) .range(Object.keys(dialecticalData).map(() => "transparent")); const outerColor = d3.scaleOrdinal() .domain(Object.keys(dialecticalData)) .range(Object.keys(dialecticalData).map(() => styles.colors.rings.outer)); const middleColor = d3.scaleOrdinal() .domain(Object.keys(dialecticalData)) .range(Object.keys(dialecticalData).map(() => styles.colors.rings.middle)); const innerColor = d3.scaleOrdinal() .domain(Object.keys(dialecticalData)) .range(Object.keys(dialecticalData).map(() => styles.colors.rings.inner)); // Initialize data //const nestedData = transformToNestedPieData(dialecticalData); // Arc tween function function arcTween(arcGenerator) { return function(a) { const i = d3.interpolate(this._current, a); this._current = i(0); return function(t) { return arcGenerator(i(t)); }; }; } // Function to hide individual cell (sucking into inner ring) function hideCell(unitId, ringType) { if (!cellVisibility[unitId] || !cellVisibility[unitId][ringType]) return; cellVisibility[unitId][ringType] = false; let group, labelsGroup, targetRadius; switch(ringType) { case "invisible": group = invisibleGroup; labelsGroup = invisibleLabelsGroup; targetRadius = outerRadius; break; case "outer": group = outerGroup; labelsGroup = outerLabelsGroup; targetRadius = innerRadius; break; case "middle": group = middleGroup; labelsGroup = middleLabelsGroup; targetRadius = innerInnerRadius; break; case "inner": group = innerGroup; labelsGroup = innerLabelsGroup; targetRadius = 0; break; } // Hide cell with radius animation group.selectAll("path") .filter(d => d.data.unitId === unitId) .classed("hidden", true) .transition() .duration(styles.durations.stepRotation) // Mismatched name, but using for now .ease(d3.easeExpIn) .attrTween("d", function(d) { const currentData = d; return function(t) { let arcGen; if (ringType === "invisible") { const newInnerRadius = d3.interpolate(outerRadius, targetRadius)(t); const newOuterRadius = d3.interpolate(styles.radii.invisible, targetRadius)(t); arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); } else if (ringType === "outer") { const newInnerRadius = d3.interpolate(innerRadius, targetRadius)(t); const newOuterRadius = d3.interpolate(outerRadius, targetRadius)(t); arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); } else if (ringType === "middle") { const newInnerRadius = d3.interpolate(innerInnerRadius, targetRadius)(t); const newOuterRadius = d3.interpolate(middleRadius, targetRadius)(t); arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); } else { const newInnerRadius = d3.interpolate(0, targetRadius)(t); const newOuterRadius = d3.interpolate(centerRadius, targetRadius)(t); arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); } return arcGen(currentData); }; }) .style("opacity", d3.interpolate(1, 0)) .on("end", function(d) { // Restore data binding after hide animation this._current = d; }); // Hide label labelsGroup.selectAll("text") .filter(d => d.data.unitId === unitId) .transition() .duration(styles.durations.stepRotation) .style("opacity", 0); } // Function to show individual cell (expanding from inner ring) function showCell(unitId, ringType) { if (!cellVisibility[unitId] || cellVisibility[unitId][ringType]) return; cellVisibility[unitId][ringType] = true; let group, labelsGroup, startRadius, endInnerRadius, endOuterRadius; switch(ringType) { case "invisible": group = invisibleGroup; labelsGroup = invisibleLabelsGroup; startRadius = outerRadius; endInnerRadius = outerRadius; endOuterRadius = styles.radii.invisible; break; case "outer": group = outerGroup; labelsGroup = outerLabelsGroup; startRadius = innerRadius; endInnerRadius = innerRadius; endOuterRadius = outerRadius; break; case "middle": group = middleGroup; labelsGroup = middleLabelsGroup; startRadius = innerInnerRadius; endInnerRadius = innerInnerRadius; endOuterRadius = middleRadius; break; case "inner": group = innerGroup; labelsGroup = innerLabelsGroup; startRadius = centerRadius; endInnerRadius = styles.radii.hub; endOuterRadius = centerRadius; break; } // Show cell with radius animation group.selectAll("path") .filter(d => d.data.unitId === unitId) .classed("hidden", false) .transition() .duration(styles.durations.stepRotation) .ease(d3.easeExpOut) .attrTween("d", function(d) { const currentData = d; return function(t) { const newInnerRadius = d3.interpolate(startRadius, endInnerRadius)(t); const newOuterRadius = d3.interpolate(startRadius, endOuterRadius)(t); const arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); return arcGen(currentData); }; }) .style("opacity", d3.interpolate(0, ringType === "invisible" ? 1 : ringType === "outer" ? 1 : ringType === "middle" ? 0.9 : 0.8)) // Show label with position animation labelsGroup.selectAll("text") .filter(d => d.data.unitId === unitId) .style("font-size", function() { // Set font size immediately when text becomes visible const baseSizes = styles.fonts.labels.baseSize; return `${ringType === "invisible" ? baseSizes.outer : ringType === "outer" ? baseSizes.outer : ringType === "middle" ? baseSizes.middle : baseSizes.inner}px`; }) .each(function(d) { // Do text wrapping immediately with current data const textElement = d3.select(this); const baseSizes = styles.fonts.labels.baseSize; textElement.style("font-size", `${ringType === "outer" ? baseSizes.outer : ringType === "middle" ? baseSizes.middle : baseSizes.inner}px`); textElement.selectAll("tspan").remove(); const text = d.data.fullText || d.data.name; // Use the current data (either animationData if in step mode, or nestedData otherwise) const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; let pieData, arcGen; if (ringType === "invisible") { pieData = pie(dataToUse.invisible); arcGen = d3.arc().innerRadius(outerRadius).outerRadius(styles.radii.invisible); } else if (ringType === "outer") { pieData = pie(dataToUse.outer); arcGen = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); } else if (ringType === "middle") { pieData = pie(dataToUse.middle); arcGen = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); } else { pieData = pie(dataToUse.inner); arcGen = d3.arc().innerRadius(30).outerRadius(centerRadius); } const arcDatum = pieData.find(p => p.data.unitId === d.data.unitId); const constraints = getTextConstraints(ringType, arcDatum); wrapText(textElement, text, constraints); }) .transition() .duration(styles.durations.stepRotation) .ease(d3.easeExpOut) .attrTween("transform", function(d) { const currentData = d; return function(t) { const newInnerRadius = d3.interpolate(startRadius, endInnerRadius)(t); const newOuterRadius = d3.interpolate(startRadius, endOuterRadius)(t); const arcGen = d3.arc().innerRadius(newInnerRadius).outerRadius(newOuterRadius); // Use the simple text transform function return calculateTextTransform(currentData, arcGen); }; }) .style("opacity", 1); } // Change data function for smooth value transitions function changeData(ringType, newData, arcGenerator) { const group = ringType === "outer" ? outerGroup : ringType === "middle" ? middleGroup : innerGroup; const labelsGroup = ringType === "outer" ? outerLabelsGroup : ringType === "middle" ? middleLabelsGroup : innerLabelsGroup; const pieData = pie(newData); // Update paths with smooth transitions const paths = group.selectAll("path").data(pieData, d => d.data.name); paths.transition() .duration(styles.durations.normal) .attrTween("d", arcTween(arcGenerator)) .style("opacity", d => { if (!cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } // Use data opacity combined with ring-specific opacity const baseOpacity = ringType === "outer" ? 1 : ringType === "middle" ? 0.9 : 0.8; return d.data.opacity * baseOpacity; }); // Update labels with opacity based on data value const labels = labelsGroup.selectAll("text").data(pieData, d => d.data.name); labels.transition() .duration(styles.durations.normal) .attr("transform", function(d) { // Use the simple text transform function return calculateTextTransform(d, arcGenerator); }) .style("opacity", d => { // Hide if data value is 0 or if visibility is toggled off if (d.data.value === 0 || !cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } return d.data.opacity; }); } function unfocus() { // Choose which data to modify const dataToModify = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; // Reset all opacities to original values ["invisible", "outer", "middle", "inner"].forEach(ringType => { dataToModify[ringType].forEach(item => { const originalItem = originalNestedData[ringType].find(orig => orig.unitId === item.unitId); item.opacity = originalItem ? originalItem.opacity : 1; }); }); focusedPair = null; clickedSlice = null; clickedCell = null; updateAxisPositions(); updateAllRings(); //updateOverlays(); updateChartValue(); } // Focus pair function function focusPair(clickedUnitId) { // Choose which data to modify const dataToModify = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; const isThesis = isThesisType(clickedUnitId); const pairId = dialecticalData[clickedUnitId].pairWith; const thesis = isThesis ? clickedUnitId : pairId; const antithesis = isThesis ? pairId : clickedUnitId; const isAlreadyFocused = focusedPair && focusedPair.thesis === thesis && focusedPair.antithesis === antithesis; // Check if clickedUnitId is within 90 degrees of 0 degrees (or 180 degrees) const sliceData = pie(dataToModify.middle).find(d => d.data.unitId === clickedUnitId); const sliceAngle = (sliceData.startAngle + sliceData.endAngle)/2; let visualAngle = (sliceAngle + getCurrentRotationFromDOM()) % (2 * Math.PI); let rotateUnitId = clickedUnitId; // Round down to the nearest degree (in radians) visualAngle = Math.floor(visualAngle * 180 / Math.PI); if(!(visualAngle <= 90 || visualAngle >= 270) && !isStepMode) { rotateUnitId = pairId; //console.log("is not within 90 degrees. visualAngle: " + visualAngle); } if (isAlreadyFocused) { if(isStepMode) { rotateToSlice(rotateUnitId); clickedSlice = clickedUnitId; focusedPair = { thesis, antithesis }; updateChartValue(); updateAxisPositions(); return; } if(clickedUnitId == clickedSlice) { focusedPair = { thesis, antithesis }; updateChartValue(); updateAxisPositions(); return; } focusedPair = null; clickedSlice = null; // Reset all opacities to original values ["invisible", "outer", "middle", "inner"].forEach(ringType => { dataToModify[ringType].forEach(item => { const originalItem = originalNestedData[ringType].find(orig => orig.unitId === item.unitId); item.opacity = originalItem ? originalItem.opacity : 1; }); }); // Reset axes to default positions updateAxisPositions(); } else { focusedPair = { thesis, antithesis }; // Rotate to center the clicked slice at the top rotateToSlice(rotateUnitId, styles.durations.stepRotation); // Dim all cells first (but only if they were originally visible) ["invisible", "outer", "middle", "inner"].forEach(ringType => { dataToModify[ringType].forEach(item => { const originalItem = originalNestedData[ringType].find(orig => orig.unitId === item.unitId); // Only dim if originally visible (check value, not opacity) if (originalItem && originalItem.value > 0) { item.opacity = 0.3; } else { item.opacity = 0; // Keep hidden } }); }); // Highlight the focused pair (restore original opacity) ["invisible", "outer", "middle", "inner"].forEach(ringType => { dataToModify[ringType].forEach(item => { if (item.unitId === thesis || item.unitId === antithesis) { const originalItem = originalNestedData[ringType].find(orig => orig.unitId === item.unitId); const originalOpacity = originalItem ? originalItem.opacity : 1; item.opacity = originalOpacity; // Restore original, don't force to 1 } }); }); // Update axes to focus on the pair updateAxisPositions(clickedUnitId); } // Re-render with updated opacity if (isStepMode && Object.keys(animationData).length > 0) { changeData("invisible", animationData.invisible, invisibleArc); changeData("outer", animationData.outer, outerArc); changeData("middle", animationData.middle, middleArc); changeData("inner", animationData.inner, innerArc); } else { updateAllRings(); } // --- MAKE CHART REACTIVE: update .value and dispatch input event --- clickedSlice = clickedUnitId; updateChartValue(); } // Zoom functions // Function to zoom to entire slice (all three rings of a unitId) function resetZoom() { zoomGroup.selectAll("path.cell") // Only apply to pie chart cells, not arrows .style("stroke", function() { const ringType = d3.select(this.parentNode).attr("class"); return ringType && ringType.includes("middle") ? styles.colors.strokes.middleRing : styles.colors.strokes.default; }) .style("stroke-width", function() { const ringType = d3.select(this.parentNode).attr("class"); return ringType && ringType.includes("middle") ? styles.strokes.middleRingWidth : styles.strokes.defaultWidth; }); activeZoom = null; // FIXED: Apply zoom reset to svg - D3 zoom controls the main element svg.transition() .duration(styles.durations.normal) .call(zoom.transform, d3.zoomIdentity); } // ===== INITIALIZE LONG PRESS HANDLER ===== // Now that zoomToCell is defined, initialize the long press handler // REMOVED: Long press not needed anymore - touch events do focus + zoom directly // Drag functions for rotation // Update transform function with mobile optimization let transformUpdateTimeout; let isUpdatingTransform = false; function updateTextPositions(rotationDegrees) { isUpdatingTransform = true; // Convert degrees to radians once const currentRotationRadians = (rotationDegrees * Math.PI) / 180; // Use requestAnimationFrame for smoother updates requestAnimationFrame(() => { // PERFORMANCE: Update all cell text using the optimized transform function // Pass rotation to avoid repeated DOM queries const invisibleTexts = invisibleLabelsGroup.selectAll("text"); const outerTexts = outerLabelsGroup.selectAll("text"); const middleTexts = middleLabelsGroup.selectAll("text"); const innerTexts = innerLabelsGroup.selectAll("text"); invisibleTexts.attr("transform", function(d) { if (!d) return this.getAttribute("transform"); // Keep existing if no data return calculateTextTransform(d, invisibleArc, currentRotationRadians); }); outerTexts.attr("transform", function(d) { if (!d) return this.getAttribute("transform"); // Keep existing if no data return calculateTextTransform(d, outerArc, currentRotationRadians); }); middleTexts.attr("transform", function(d) { if (!d) return this.getAttribute("transform"); // Keep existing if no data return calculateTextTransform(d, middleArc, currentRotationRadians); }); innerTexts.attr("transform", function(d) { if (!d) return this.getAttribute("transform"); // Keep existing if no data return calculateTextTransform(d, innerArc, currentRotationRadians); }); // PERFORMANCE: Optimize coordinate system counter-rotation const counterRotationDegrees = -rotationDegrees; // Update coordinate numbers (more efficient transform calculation) coordinateGroup.selectAll("text.coordinate-number").attr("transform", function() { const x = parseFloat(d3.select(this).attr("x")); const y = parseFloat(d3.select(this).attr("y")); return `translate(${x}, ${y}) rotate(${counterRotationDegrees}) translate(${-x}, ${-y})`; }); // Update coordinate symbols (more efficient transform calculation) coordinateGroup.selectAll("text.coordinate-symbol").attr("transform", function() { const x = parseFloat(d3.select(this).attr("x")); const y = parseFloat(d3.select(this).attr("y")); return `translate(${x}, ${y}) rotate(${counterRotationDegrees}) translate(${-x}, ${-y})`; }); isUpdatingTransform = false; }); } function zoomed(event) { const { transform } = event; // NEW: Apply zoom transform to zoomGroup (zoom happens first in hierarchy) // D3 applies transform to SVG, we redirect it to zoomGroup zoomGroup.attr("transform", transform); // Update stroke widths to maintain visual consistency at different zoom levels zoomGroup.selectAll("path.cell") .style("stroke-width", function() { const ringType = d3.select(this.parentNode).attr("class"); const baseWidth = ringType && ringType.includes("middle") ? styles.strokes.middleRingWidth : styles.strokes.defaultWidth; return (baseWidth / transform.k) + "px"; }); } // Update ring function function updateRing(group, labelsGroup, data, arcGenerator, ringType, colorScale) { const pieData = pie(data); const paths = group.selectAll("path") .data(pieData, d => d.data.name); const pathsEnter = paths.enter() .append("path") .attr("class", "cell") .attr("fill", d => colorScale(d.data.unitId)) .attr("stroke", ringType === "middle" ? styles.colors.strokes.middleRing : styles.colors.strokes.default) .attr("stroke-width", ringType === "middle" ? styles.strokes.middleRingWidth : styles.strokes.defaultWidth) .attr("stroke-dasharray", "1,3") // Dotted border .attr("stroke-linecap", "round") .attr("stroke-opacity", 0.3) .style("opacity", d => { if (!cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } const baseOpacity = ringType === "outer" || ringType === "invisible" ? 1 : ringType === "middle" ? 0.9 : 0.8; return d.data.opacity * baseOpacity; }) .attr("d", arcGenerator) .each(function(d) { this._current = d; }) .on("click", function(event, d) { if (event.metaKey || event.ctrlKey) { //zoomToCell(event, d); } else { // Match touch behavior: focus pair and zoom to slice if not already zoomed //console.log('Mouse click - focusing slice:', d.data.unitId); //const isCurrentlyZoomed = activeZoom !== null; // Remove highlight from all cells with the same unitId d3.select(this.ownerSVGElement) .selectAll("path.cell") .style("stroke-dasharray", "1,3"); const isCurrentlyZoomed = true; if(!focusedPair){ focusPair(d.data.unitId); clickedCell = d.data; } else{ if(focusedPair.thesis != d.data.unitId && focusedPair.antithesis != d.data.unitId){ unfocus(); clickedCell = null; } else{ clickedCell = d.data; d3.select(this) .style("stroke-dasharray", "1,0"); if(clickedCell && clickedCell.name == d.data.name) { d3.select(this) .style("cursor", "default"); } } } updateChartValue(); if (!isCurrentlyZoomed) { //console.log('Not zoomed - zooming to slice after rotation completes'); setTimeout(() => { //zoomToSlice(d.data.unitId); }, styles.durations.stepRotation + 50); } else { //console.log('Already zoomed - rotation only, no zoom translation'); } } }) .on("touchstart", function(event, d) { event.preventDefault(); const touch = event.touches && event.touches[0]; if (touch) { touchDragStart = { x: touch.clientX, y: touch.clientY }; } else { touchDragStart = null; } isTouchDragging = false; }) .on("touchmove", function(event, d) { if (!touchDragStart) return; const touch = event.touches && event.touches[0]; if (touch) { const dx = touch.clientX - touchDragStart.x; const dy = touch.clientY - touchDragStart.y; if (Math.sqrt(dx*dx + dy*dy) > TOUCH_DRAG_THRESHOLD) { isTouchDragging = true; } } }) .on("touchend", function(event, d) { event.preventDefault(); if (isTouchDragging) { // It was a drag, not a tap—do nothing isTouchDragging = false; touchDragStart = null; return; } // ... existing tap/focus logic ... const currentTime = Date.now(); const timeSinceLastTap = currentTime - lastTapTime; if (timeSinceLastTap < DOUBLE_TAP_DELAY) { // Double tap detected - reset zoom //console.log('Double tap detected - resetting zoom'); resetZoom(); } else { // Single tap - focus pair and zoom if not already zoomed //console.log('Single tap - focusing slice:', d.data.unitId); //const isCurrentlyZoomed = activeZoom !== null; const isCurrentlyZoomed = true; focusPair(d.data.unitId); if (!isCurrentlyZoomed) { //console.log('Not zoomed - zooming to slice after rotation completes'); setTimeout(() => { //zoomToSlice(d.data.unitId); }, styles.durations.stepRotation + 50); } else { //console.log('Already zoomed - rotation only, no zoom translation'); } } lastTapTime = currentTime; isTouchDragging = false; touchDragStart = null; }) .on("touchcancel", function(event, d) { // Just prevent default on cancel event.preventDefault(); }) .on("mouseenter", function(event, d) { // Set hovered cell for scroll-to-zoom const parentClass = d3.select(this.parentNode).attr("class"); const ringType = parentClass.includes("invisible") ? "invisible" : parentClass.includes("outer") ? "outer" : parentClass.includes("middle") ? "middle" : "inner"; setHoveredCell({ unitId: d.data.unitId, ringType: ringType }); if(focusedPair && d.data.pairId === dialecticalData[focusedPair.thesis].pairId) { d3.select(this) .style("stroke-dasharray", "1,0"); if(clickedCell && clickedCell.name != d.data.name) { d3.select(this) .style("cursor", "pointer"); } else if(clickedCell && clickedCell.name == d.data.name) { d3.select(this) .style("cursor", "default"); } } else if(focusedPair && d.data.pairId !== dialecticalData[focusedPair.thesis].pairId){ d3.select(this) .style("cursor", "default") .style("opacity", ringType === "invisible" ? 0.2 : 1); // Show invisible ring faintly on hover let labelsGroup; if (ringType === "invisible") labelsGroup = invisibleLabelsGroup; else if (ringType === "outer") labelsGroup = outerLabelsGroup; else if (ringType === "middle") labelsGroup = middleLabelsGroup; else labelsGroup = innerLabelsGroup; labelsGroup.selectAll("text") .filter(text => text.data.unitId === d.data.unitId) .style("opacity", 1); } else{ // Highlight all cells with the same unitId across all rings d3.select(this.ownerSVGElement) .selectAll("path.cell") .filter(cellD => cellD && cellD.data && cellD.data.unitId === d.data.unitId) .style("stroke-dasharray", "1,0") .style("cursor", "pointer") .style("opacity", function() { const thisRingType = d3.select(this.parentNode).attr("class").includes("invisible") ? "invisible" : null; return thisRingType === "invisible" ? 0.2 : null; // Show invisible ring faintly on hover }); } }) .on("mouseleave", function(event, d) { setHoveredCell(null); if(focusedPair && d.data.pairId === dialecticalData[focusedPair.thesis].pairId) { if(clickedCell && clickedCell.name != d.data.name) { d3.select(this) .style("stroke-dasharray", "1,3"); } } else if(focusedPair && d.data.pairId !== dialecticalData[focusedPair.thesis].pairId) { d3.select(this) .style("opacity", 0.3); let labelsGroup; if (ringType === "invisible") labelsGroup = invisibleLabelsGroup; else if (ringType === "outer") labelsGroup = outerLabelsGroup; else if (ringType === "middle") labelsGroup = middleLabelsGroup; else labelsGroup = innerLabelsGroup; labelsGroup.selectAll("text") .filter(text => text.data.unitId === d.data.unitId) .style("opacity", 0.3); if(ringType === "invisible"){ d3.select(this) .style("opacity", 0); } } else{ // Remove highlight from all cells with the same unitId d3.select(this.ownerSVGElement) .selectAll("path.cell") .filter(cellD => cellD && cellD.data && cellD.data.unitId === d.data.unitId) .style("stroke-dasharray", "1,3") .style("opacity", function() { const thisRingType = d3.select(this.parentNode).attr("class").includes("invisible") ? "invisible" : null; return thisRingType === "invisible" ? 0 : null; // Hide invisible ring when not hovering }); } }); pathsEnter.append("title") .text(d => d.data.fullText); paths.merge(pathsEnter) .transition() .duration(styles.durations.normal) .attrTween("d", arcTween(arcGenerator)) .style("opacity", d => { if (!cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } if (ringType === "invisible") { return 0; // Paths are invisible, only text shows } const baseOpacity = ringType === "outer" ? 1 : ringType === "middle" ? 0.9 : 0.8; return d.data.opacity * baseOpacity; }); paths.exit() .transition() .duration(styles.durations.normal) .style("opacity", 0) .remove(); updateLabels(labelsGroup, pieData, arcGenerator, ringType); } function updateLabels(labelsGroup, pieData, arcGenerator, ringType) { const labels = labelsGroup.selectAll("text") .data(pieData, d => d.data.name); const labelsEnter = labels.enter() .append("text") .attr("class", "cell-label") .style("opacity", d => { if (d.data.value === 0 || !cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } return d.data.opacity; }) .attr("transform", function(d) { // Use the simple text transform function return calculateTextTransform(d, arcGenerator); }) .style("text-anchor", "middle") .style("dominant-baseline", "central") .style("font-family", styles.fonts.family) .style("font-size", function(d) { const baseSizes = styles.fonts.labels.baseSize; return `${ringType === "invisible" ? baseSizes.outer : ringType === "outer" ? baseSizes.outer : ringType === "middle" ? baseSizes.middle : baseSizes.inner}px`; }) .style("font-weight", styles.fonts.labels.weight) .style("fill", function(d) { const textColors = styles.colors.text; if (ringType === "invisible") return 'black'; if (ringType === "inner") return textColors.inner; if (ringType === "outer") return textColors.outer; return textColors.middle; }) .style("pointer-events", "none") .each(function(d) { // Always apply text wrapping on create with up-to-date arc data const textElement = d3.select(this); // Ensure font size is set before wrapping const baseSizes = styles.fonts.labels.baseSize; textElement.style("font-size", `${ringType === "invisible" ? baseSizes.outer : ringType === "outer" ? baseSizes.outer : ringType === "middle" ? baseSizes.middle : baseSizes.inner}px`); const text = d.data.fullText || d.data.name; // Get latest arc data for this cell let pieData, arcGen; const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; if (ringType === "invisible") { pieData = pie(dataToUse.invisible); arcGen = d3.arc().innerRadius(outerRadius).outerRadius(styles.radii.invisible); } else if (ringType === "outer") { pieData = pie(dataToUse.outer); arcGen = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); } else if (ringType === "middle") { pieData = pie(dataToUse.middle); arcGen = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); } else { pieData = pie(dataToUse.inner); arcGen = d3.arc().innerRadius(30).outerRadius(centerRadius); } const arcDatum = pieData.find(p => p.data.unitId === d.data.unitId); const constraints = getTextConstraints(ringType, arcDatum); wrapText(textElement, text, constraints); }); labels.merge(labelsEnter) .transition() .duration(styles.durations.normal) .attr("transform", function(d) { // Use the simple text transform function return calculateTextTransform(d, arcGenerator); }) .style("opacity", d => { if (d.data.value === 0 || !cellVisibility[d.data.unitId] || !cellVisibility[d.data.unitId][ringType]) { return 0; } return d.data.opacity; }) .on("end", function(d) { // Apply text wrapping after transition completes with up-to-date arc data if (d && d.data) { const textElement = d3.select(this); // Ensure font size is set before wrapping const baseSizes = styles.fonts.labels.baseSize; textElement.style("font-size", `${ringType === "invisible" ? baseSizes.outer : ringType === "outer" ? baseSizes.outer : ringType === "middle" ? baseSizes.middle : baseSizes.inner}px`); const text = d.data.fullText || d.data.name; let pieData, arcGen; const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; if (ringType === "invisible") { pieData = pie(dataToUse.invisible); arcGen = d3.arc().innerRadius(outerRadius).outerRadius(styles.radii.invisible); } else if (ringType === "outer") { pieData = pie(dataToUse.outer); arcGen = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); } else if (ringType === "middle") { pieData = pie(dataToUse.middle); arcGen = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); } else { pieData = pie(dataToUse.inner); arcGen = d3.arc().innerRadius(30).outerRadius(centerRadius); } const arcDatum = pieData.find(p => p.data.unitId === d.data.unitId); const constraints = getTextConstraints(ringType, arcDatum); wrapText(textElement, text, constraints); } }); labels.exit() .transition() .duration(styles.durations.normal) .style("opacity", 0) .remove(); } // Update all rings helper function updateAllRings() { // Use animation data if in step mode, otherwise use regular data const dataToUse = isStepMode && Object.keys(animationData).length > 0 ? animationData : nestedData; updateRing(invisibleGroup, invisibleLabelsGroup, dataToUse.invisible, invisibleArc, "invisible", invisibleColor); updateRing(outerGroup, outerLabelsGroup, dataToUse.outer, outerArc, "outer", outerColor); updateRing(middleGroup, middleLabelsGroup, dataToUse.middle, middleArc, "middle", middleColor); updateRing(innerGroup, innerLabelsGroup, dataToUse.inner, innerArc, "inner", innerColor); } // ===== ARROW DRAWING FUNCTIONALITY ===== // Create arrow marker definition using utilities const defs = svg.append("defs"); // Create arrowheads for all the colors we use arrowUtilities.createArrowheadMarker(defs, "#666", "arrowhead-gray"); arrowUtilities.createArrowheadMarker(defs, "#16a34a", "arrowhead-green"); arrowUtilities.createArrowheadMarker(defs, "#dc2626", "arrowhead-red"); arrowUtilities.createArrowheadMarker(defs, "#8b5cf6", "arrowhead-purple"); arrowUtilities.createArrowheadMarker(defs, "#2563eb", "arrowhead-blue"); arrowUtilities.createArrowheadMarker(defs, "#ff9500", "arrowhead-orange"); // Create arrow group const arrowsGroup = contentGroup.append("g") .attr("class", "arrows-group") .style("pointer-events", "none"); // Ensure yellow circle is beneath arrows centerCircle.lower(); // Ensure arrows are above rings but below labels arrowsGroup.raise(); invisibleLabelsGroup.raise(); outerLabelsGroup.raise(); middleLabelsGroup.raise(); innerLabelsGroup.raise(); coordinateGroup.raise(); // Arrow drawing functions function getCellCentroid(unitId, ringType = 'middle') { // Always use the stable data and arc generators, not animated ones const dataToUse = nestedData; // Use stable data, not animationData let pieData, arcGenerator; switch(ringType) { case 'invisible': pieData = pie(dataToUse.invisible); // Create fresh arc generator with stable radii to avoid animation interference arcGenerator = d3.arc().innerRadius(outerRadius).outerRadius(styles.radii.invisible); break; case 'outer': pieData = pie(dataToUse.outer); // Create fresh arc generator with stable radii to avoid animation interference arcGenerator = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius); break; case 'middle': pieData = pie(dataToUse.middle); // Create fresh arc generator with stable radii to avoid animation interference arcGenerator = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); break; case 'inner': pieData = pie(dataToUse.inner); // Create fresh arc generator with stable radii to avoid animation interference arcGenerator = d3.arc().innerRadius(30).outerRadius(centerRadius); break; default: pieData = pie(dataToUse.middle); arcGenerator = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); } // Find the specific cell data for this unitId const cellData = pieData.find(d => d.data.unitId === unitId); if (!cellData) return null; // Use D3's built-in centroid calculation with stable arc generator const centroid = arcGenerator.centroid(cellData); // Calculate the actual radius of the centroid for debugging const calculatedRadius = Math.sqrt(centroid[0] * centroid[0] + centroid[1] * centroid[1]); return { x: centroid[0], y: centroid[1], angle: (cellData.startAngle + cellData.endAngle) / 2 }; } function drawArrow(from, to, color = "#666", strokeWidth = 2, fromRing = 'middle', toRing = 'middle', delay = 0) { const fromPos = getCellCentroid(from, fromRing); const toPos = getCellCentroid(to, toRing); if (!fromPos || !toPos) return; // Use arrow utilities to calculate path const arrowPath = arrowUtilities.calculateArrowPath(fromPos, toPos, 10); const arrowheadId = arrowUtilities.getArrowheadId(color); // Draw the static path (without arrowhead initially) const staticPath = arrowsGroup.append("path") .attr("d", arrowPath.path) .attr("stroke", color) .attr("stroke-width", strokeWidth) .attr("fill", "none") .attr("opacity", 0.3) .attr("stroke-dasharray", "3,3"); // Create the animated arrowhead using SVG polygon for proper arrow shape const animatedArrowhead = arrowsGroup.append("polygon") .attr("points", "0,-3 8,0 0,3") // Arrow shape pointing right .attr("fill", color) .attr("opacity", 0); // Animate the arrowhead along the path using the quadratic curve formula animatedArrowhead .transition() .delay(delay) .duration(1500) .ease(d3.easeQuadInOut) .attrTween("transform", function() { return function(t) { const point = arrowUtilities.getPointAlongQuadraticCurve(arrowPath.start, arrowPath.control, arrowPath.end, t); // Calculate the angle for proper arrowhead orientation const nextT = Math.min(t + 0.01, 1); const nextPoint = arrowUtilities.getPointAlongQuadraticCurve(arrowPath.start, arrowPath.control, arrowPath.end, nextT); const angle = Math.atan2(nextPoint.y - point.y, nextPoint.x - point.x) * 180 / Math.PI; return `translate(${point.x}, ${point.y}) rotate(${angle})`; }; }) .attr("opacity", 1) .on("start", function() { // Make the static path more visible when animation starts staticPath.transition().duration(200).attr("opacity", 0.7); }) .on("end", function() { // Replace animated arrowhead with final arrow marker animatedArrowhead.remove(); staticPath .attr("marker-end", `url(#${arrowheadId})`) .attr("stroke-dasharray", "none") .transition() .duration(300) .attr("opacity", 0.7); }); } function clearArrows() { arrowsGroup.selectAll("*").remove(); } function drawAllArrows() { clearArrows(); const connections = parseArrowConnections(arrowConnections, dialecticalData); connections.forEach((conn, index) => { // Use arrow utilities to calculate color const color = arrowUtilities.calculateArrowColor(conn.fromRing, conn.toRing, conn.from, conn.to); // Stagger arrow animations with 300ms delay between each const delay = index * 300; drawArrow(conn.from, conn.to, color, 2, conn.fromRing, conn.toRing, delay); }); } function drawFlow() { clearArrows(); const connections = parseArrowConnections(flowConnections, dialecticalData); connections.forEach((conn, index) => { // Use arrow utilities to calculate color const color = arrowUtilities.calculateArrowColor(conn.fromRing, conn.toRing, conn.from, conn.to); // Stagger arrow animations with 300ms delay between each const delay = index * 300; drawArrow(conn.from, conn.to, color, 2, conn.fromRing, conn.toRing, delay); }); } // Step-by-step animation functions function initializeAnimationData() { // Use transformToNestedPieData and then modify values for step mode animationData = transformToNestedPieData(dialecticalData); // Set all values to 0 for step mode (start with empty slices) ["invisible", "outer", "middle", "inner"].forEach(ringType => { animationData[ringType].forEach(item => { item.value = 0; // Start with 0 for step mode }); }); } // Initialize build steps (generalized for any number of thesis/antithesis pairs) function initializeBuildStepsLocal() { buildSteps = initializeBuildSteps(dialecticalData); currentStep = 0; } // Reset build state (exact copy from HTML) function resetBuildState() { // Reset all cells to visible in visibility state (for step mode) cells.forEach(cell => { cellVisibility[cell] = { invisible: true, // Always present but invisible outer: false, // Red (negative) - hidden initially middle: true, // White (parent) - visible inner: false // Green (positive) - hidden initially }; }); // Initialize with all values at 0 initializeAnimationData(); // Initial render with all zeros (will show nothing) updateAllRings(); } // Execute a single build step (exact copy from HTML) function executeStep(stepIndex) { if (stepIndex < 0 || stepIndex >= buildSteps.length) return; const step = buildSteps[stepIndex]; switch (step.type) { case 'showWhite': // Determine pair ID and which one comes first in build sequence const isThesis = isThesisType(step.unitId); const pairId = getOppositePrefix(step.unitId); // Find which cell appears first in the build sequence const currentCellFirstStep = buildSteps.findIndex(s => s.unitId === step.unitId && s.type === 'showWhite'); const pairCellFirstStep = buildSteps.findIndex(s => s.unitId === pairId && s.type === 'showWhite'); const isFirstOfPair = currentCellFirstStep < pairCellFirstStep; // Helper function to set up data for first of pair function setupFirstOfPair() { // Set data values for both cells ["outer", "middle", "inner"].forEach(ringType => { const dataArray = animationData[ringType]; const currentData = dataArray.find(d => d.unitId === step.unitId); const pairData = dataArray.find(d => d.unitId === pairId); if (currentData) currentData.value = 1; if (pairData) pairData.value = 1; }); // Set visibility for both cells cellVisibility[step.unitId].outer = true; cellVisibility[step.unitId].inner = true; cellVisibility[step.unitId].middle = true; cellVisibility[pairId].outer = true; cellVisibility[pairId].inner = true; cellVisibility[pairId].middle = true; // Hide pair cells after initial setup setTimeout(() => { ["outer", "middle", "inner"].forEach(ringType => { const dataArray = animationData[ringType]; const pairData = dataArray.find(d => d.unitId === pairId); if (pairData) pairData.opacity = 0; }); updateAllRings(); }, 100); } // Helper function to set up data for second of pair function setupSecondOfPair() { // Just set opacity for current cell (data already set) ["outer", "middle", "inner"].forEach(ringType => { const dataArray = animationData[ringType]; const currentData = dataArray.find(d => d.unitId === step.unitId); if (currentData) currentData.opacity = 1; }); } // Helper function to apply text wrapping function applyTextWrapping() { const latestPieData = pie(animationData.middle); const latestArcGen = d3.arc().innerRadius(innerInnerRadius).outerRadius(middleRadius); const currentRotation = getCurrentRotationFromDOM(); middleLabelsGroup.selectAll("text") .data(latestPieData, d => d.data.unitId) .attr("transform", function(d) { return calculateTextTransform(d, latestArcGen, currentRotation); }) .each(function(d) { const textElement = d3.select(this); // Set the font size explicitly before wrapping const baseSizes = styles.fonts.labels.baseSize; textElement.style("font-size", `${baseSizes.middle}px`); textElement.selectAll("tspan").remove(); const text = d.data.fullText || d.data.name; const arcDatum = latestPieData.find(p => p.data.unitId === d.data.unitId); const constraints = getTextConstraints("middle", arcDatum); wrapText(textElement, text, constraints); }); } // Helper function to hide and restore segments function hideAndRestoreSegments() { setTimeout(() => { hideCell(step.unitId, "outer"); hideCell(step.unitId, "inner"); setTimeout(() => { outerGroup.selectAll("path").filter(d => d.data.unitId === step.unitId).style("opacity", 1); innerGroup.selectAll("path").filter(d => d.data.unitId === step.unitId).style("opacity", 1); }, styles.durations.stepRotation + 50); }, 100); } // Execute the appropriate setup if (isFirstOfPair) { setupFirstOfPair(); } else { setupSecondOfPair(); } // Common operations for both branches focusPair(step.unitId, styles.durations.stepRotation); updateAllRings(); applyTextWrapping(); hideAndRestoreSegments(); break; case 'showGreen': // Show the inner cell (it should now expand from hidden state with full opacity) showCell(step.unitId, "inner"); break; case 'showRed': // Show the outer cell (it should now expand from hidden state with full opacity) showCell(step.unitId, "outer"); break; } } // Step animation functions (exact copy from HTML) function startStepMode() { isStepMode = true; initializeBuildStepsLocal(); resetBuildState(); focusedPair = null; resetZoom(); // Hide coordinate system during step mode coordinateGroup.style("display", "none"); } function stepForward() { if (!isStepMode || currentStep >= buildSteps.length) return false; executeStep(currentStep); currentStep++; return true; } function stepBackward() { if (!isStepMode || currentStep <= 0) return false; currentStep--; // Reset and rebuild up to current step resetBuildState(); for (let i = 0; i < currentStep; i++) { executeStep(i); } return true; } function resetToFull() { isStepMode = false; currentStep = 0; animationData = {}; // Clear animation data // Show all cells cells.forEach(cell => { cellVisibility[cell] = { invisible: true, outer: true, middle: true, inner: true }; }); // Reset focus and zoom focusedPair = null; resetZoom(); // Reset wheel rotation to default position setRotationDirectly(0); // Reset opacities to original values and update with full data ["invisible", "outer", "middle", "inner"].forEach(ringType => { nestedData[ringType].forEach(item => { const originalItem = originalNestedData[ringType].find(orig => orig.unitId === item.unitId); item.opacity = originalItem ? originalItem.opacity : 1; }); }); updateAllRings(); // Show coordinate system in full mode coordinateGroup.style("display", "block"); updateAxisPositions(cells[0]); rotateToSlice(cells[0]); } function getCurrentStepInfo() { if (!isStepMode) return null; const totalSteps = buildSteps.length; if (currentStep === 0) { return { current: currentStep, total: totalSteps, unit: "none", stepType: "start", canStepForward: currentStep < totalSteps, canStepBackward: false }; } const step = buildSteps[currentStep - 1]; const stepTypeMap = { 'showWhite': 'statement', 'showGreen': 'positive', 'showRed': 'negative' }; return { current: currentStep, total: totalSteps, unit: step.unitId, stepType: stepTypeMap[step.type], canStepForward: currentStep < totalSteps, canStepBackward: currentStep > 0 }; } // Initialize - start in full mode resetToFull(); rotateToSlice(cells[0]); updateAxisPositions(cells[0]); // Draw initial arrows //drawAllArrows(); // --- MAKE CHART REACTIVE INITIALLY --- updateChartValue(); // Return the svg node with exposed methods (Observable pattern) return Object.assign(svg.node(), { focusPair, unfocus, get focusedPair() { return focusedPair; }, cells, resetZoom, rotateToSlice, rotate: (angle) => { setRotationDirectly(angle); }, // Step animation methods startStepMode, stepForward, stepBackward, resetToFull, getCurrentStepInfo, // Arrow control methods drawAllArrows, drawFlow, clearArrows, drawArrow, getCellCentroid, // Invisible ring utilities (for debugging) toggleInvisibleRingBorders: () => { // Toggle the visibility of invisible ring borders (not text) const currentStyle = invisibleGroup.style("opacity"); const newOpacity = currentStyle === "0.2" ? "0" : "0.2"; invisibleGroup.style("opacity", newOpacity); return newOpacity === "0.2" ? "Invisible ring borders are now visible" : "Invisible ring borders are now hidden"; } }); })()