INSTRUO D3 Replica

/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import * as d3 from "https://esm.sh/d3"; function App() { const svgRef = useRef(); const [cables, setCables] = useState([]); const [draggedCable, setDraggedCable] = useState(null); useEffect(() => { if (svgRef.current) { const svg = d3.select(svgRef.current); const width = 500; const height = 600; // Clear previous content svg.selectAll("*").remove(); // Background svg.append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#1A1A1A"); // Title svg.append("text") .attr("x", width / 2) .attr("y", 40) .attr("text-anchor", "middle") .attr("fill", "#D4AF37") .style("font-size", "36px") .style("font-weight", "bold") .text("INSTRUO"); // Function to create a knob function createKnob(x, y, radius, label, labelY) { const knob = svg.append("g") .attr("transform", `translate(${x}, ${y})`); const gradient = svg.append("defs") .append("radialGradient") .attr("id", `knob-gradient-${x}-${y}`) .attr("cx", "30%") .attr("cy", "30%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", "#333"); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", "#111"); knob.append("circle") .attr("r", radius) .attr("fill", `url(#knob-gradient-${x}-${y})`) .attr("stroke", "#D4AF37") .attr("stroke-width", 2); knob.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", -radius + 5) .attr("stroke", "#FFF") .attr("stroke-width", 2); svg.append("text") .attr("x", x) .attr("y", y + labelY) .attr("text-anchor", "middle") .attr("fill", "#D4AF37") .style("font-size", "14px") .text(label); // Make knob interactive let rotation = 0; knob.call(d3.drag() .on("drag", (event) => { rotation += event.dx; knob.attr("transform", `translate(${x}, ${y}) rotate(${rotation})`); })); } // Create knobs createKnob(100, 150, 40, "COARSE", 60); createKnob(220, 150, 25, "FINE", 45); createKnob(340, 150, 25, "FM", 45); createKnob(100, 300, 25, "LIN", 45); createKnob(220, 300, 25, "EXP", 45); createKnob(340, 300, 25, "WAVEFOLD", 45); createKnob(100, 450, 25, "PWM", 45); createKnob(220, 450, 25, "SYNC", 45); createKnob(340, 450, 25, "SUB", 45); // Function to create a jack input function createJack(x, y, label) { const jack = svg.append("g") .attr("transform", `translate(${x}, ${y})`); jack.append("circle") .attr("r", 10) .attr("fill", "none") .attr("stroke", "#D4AF37") .attr("stroke-width", 2); jack.append("circle") .attr("r", 5) .attr("fill", "#D4AF37"); svg.append("text") .attr("x", x) .attr("y", y + 25) .attr("text-anchor", "middle") .attr("fill", "#D4AF37") .style("font-size", "12px") .text(label); // Make jack interactive jack.on("mousedown", (event) => { const newCable = { x1: x, y1: y, x2: x, y2: y }; setCables(prev => [...prev, newCable]); setDraggedCable(newCable); }); } // Create jack inputs createJack(50, 520, "1V/OCT"); createJack(120, 520, "FM"); createJack(190, 520, "PWM"); createJack(260, 520, "SYNC"); createJack(330, 520, "SUB"); createJack(400, 520, "MOD"); // Create connecting lines svg.append("path") .attr("d", "M100 190 Q160 220 220 190") .attr("fill", "none") .attr("stroke", "#D4AF37") .attr("stroke-width", 2); svg.append("path") .attr("d", "M220 175 Q280 205 340 175") .attr("fill", "none") .attr("stroke", "#D4AF37") .attr("stroke-width", 2); // Add Cš-L text svg.append("text") .attr("x", width - 20) .attr("y", height - 20) .attr("text-anchor", "end") .attr("fill", "#D4AF37") .style("font-size", "18px") .style("font-weight", "bold") .text("Cš-L"); // Draw cables const cableGroup = svg.append("g").attr("class", "cables"); function updateCables() { const cableElements = cableGroup.selectAll("path") .data(cables); cableElements.enter() .append("path") .merge(cableElements) .attr("d", d => `M${d.x1},${d.y1} C${(d.x1+d.x2)/2},${d.y1} ${(d.x1+d.x2)/2},${d.y2} ${d.x2},${d.y2}`) .attr("stroke", "#D4AF37") .attr("stroke-width", 2) .attr("fill", "none"); cableElements.exit().remove(); } updateCables(); // Handle cable dragging svg.on("mousemove", (event) => { if (draggedCable) { const [x, y] = d3.pointer(event); setCables(prev => prev.map(cable => cable === draggedCable ? {...cable, x2: x, y2: y} : cable )); } }); svg.on("mouseup", () => { setDraggedCable(null); }); } }, [cables, draggedCable]); return (

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(req: Request): Promise { return new Response(` INSTRUO D3 Replica

`, { headers: { "content-type": "text/html", }, }); }

audio03