2f:T652,30:T5ae,function TimedEventGraphComponent() { const tegRef = useRef(timedEventGraph); const [currentMode, setCurrentMode] = useState(tegRef.current.mode); const [currentTool, setCurrentTool] = useState("cursor"); //default tool const handleModeChange = (newMode) => { tegRef.current.mode = newMode; setCurrentMode(newMode); tegRef.current.update(); }; const addNewMode = (newMode) => { tegRef.current.addMode(newMode); tegRef.current.update(); }; const deleteMode = (modeName) => { if (currentMode === modeName) { setCurrentMode(Object.keys(tegRef.current.arcs)[0]); tegRef.current.mode = Object.keys(tegRef.current.arcs)[0]; } tegRef.current.removeMode(modeName); tegRef.current.update(); }; const handleModeAdd = (modeName) => { tegRef.current.addMode(modeName); tegRef.current.update(); }; const handleModeRemove = (modeName) => { tegRef.current.removeMode(modeName); tegRef.current.update(); }; return jsx`

<${Toolbar} onModeAdd={handleModeAdd} onModeRemove={handleModeRemove} onModeChange=${handleModeChange} tegRef=${tegRef} addNewMode=${addNewMode} deleteMode=${deleteMode} currentMode=${currentMode} setCurrentTool=${setCurrentTool} currentTool={currentTool} /> <${Canvas} tegRef=${tegRef} currentMode=${currentMode} currentTool=${currentTool}/>

`; }31:Td5e,function Toolbar({ onModeChange, tegRef, addNewMode, deleteMode, currentMode, setCurrentTool, currentTool }) { const toolbarRef = useRef(); //const [currentTool, setCurrentTool] = useState(null); useEffect(() => { initDragging(); }, []); const selectTool = (tool) => { setCurrentTool(tool); //console.log("I have selected current Tool... " + tool); // Emit a custom event to notify the Canvas about the tool change }; const toggleVisibility = () => { toolbarRef.current.classList.toggle("hidden"); }; const initDragging = () => { let isDragging = false; let offsetX = 0; let offsetY = 0; const onMouseDown = (event) => { isDragging = true; offsetX = event.clientX - toolbarRef.current.offsetLeft; offsetY = event.clientY - toolbarRef.current.offsetTop; }; const onMouseMove = (event) => { if (!isDragging) return; toolbarRef.current.style.left = `${event.clientX - offsetX}px`; toolbarRef.current.style.top = `${event.clientY - offsetY}px`; }; const onMouseUp = () => { isDragging = false; }; toolbarRef.current.addEventListener("mousedown", onMouseDown); document.addEventListener("mousemove", onMouseMove); document.addEventListener("mouseup", onMouseUp); }; const [showNewModeInput, setShowNewModeInput] = useState(false); const [newModeName, setNewModeName] = useState(""); var modes = Object.keys(tegRef.current.arcs); // let currentMode = tegRef.current.mode; const handleChange = (event) => { if (event.target.value === "new") { setShowNewModeInput(true); } else { onModeChange(event.target.value); } }; const handleNewModeChange = (event) => { setNewModeName(event.target.value); }; const handleNewModeSubmit = (event) => { event.preventDefault(); if (newModeName) { addNewMode(newModeName); onModeChange(newModeName); setShowNewModeInput(false); setNewModeName(""); } }; const handleDeleteMode = () => { deleteMode(currentMode); }; const tools = [ { id: "cursor", label: "🖱️" }, { id: "place", label: "⚪" }, { id: "transition", label: "▭" }, { id: "connect", label: "🔗" }, { id: "edit", label: "✏️" } ]; return jsx` `; }32:T28fc,function Canvas({ tegRef, currentTool }) { const canvasRef = useRef(); const [showInput, setShowInput] = useState(false); const [newName, setNewName] = useState(""); const [inputPosition, setInputPosition] = useState({ x: 0, y: 0 }); const [selectedElement, setSelectedElement] = useState(null); const [blurTimeout, setBlurTimeout] = useState(null); const [singleClickTimeout, setSingleClickTimeout] = useState(null); const clearBlurTimeout = () => { if (blurTimeout) { clearTimeout(blurTimeout); setBlurTimeout(null); } }; const handleNameChange = (event) => { setNewName(event.target.value); }; const handleElementUpdate = (event) => { event.preventDefault(); if (selectedElement) { selectedElement.elementData.id = selectedElement.id; selectedElement.elementData.holdingTime = selectedElement.holdingTime; tegRef.current.update(); //if (updatedElement) { setSelectedElement(null); //} } }; const handleElementNameChange = (event) => { setSelectedElement({ ...selectedElement, id: event.target.value }); }; const handleElementHoldingTimeChange = (event) => { setSelectedElement({ ...selectedElement, holdingTime: parseFloat(event.target.value) }); }; const handlePlaceNameSubmit = (event) => { event.preventDefault(); if (newName) { // Create a new place and add it to the timedEventGraph switch (currentTool) { case "place": tegRef.current.addPlace( new Place(newName, 0, inputPosition.x, inputPosition.y) ); break; case "transition": tegRef.current.addTransition( new Transition(newName, 0, inputPosition.x, inputPosition.y) ); break; case "connect": // Connect two elements and add the arc to the timedEventGraph break; default: // Handle other cases or do nothing break; } tegRef.current.update(); setNewName(""); setShowInput(false); } }; const handleCancelInput = () => { setNewName(""); setShowInput(false); }; const handleKeyDown = (event) => { if (event.key === "Escape") { handleCancelInput(); } }; const handleElementUpdateBlur = () => { setBlurTimeout(setTimeout(() => setSelectedElement(null), 100)); }; const handleElementUpdateKeyDown = (event) => { if (event.key === "Escape") { setSelectedElement(null); } }; useEffect(() => { if (canvasRef.current) { function tools(ref) { //let startNode; const svgPoint = ref.svg.node().createSVGPoint(); let arrow; if (currentTool === "connect") { ref.simulation.stop(); ref.animate = false; } function dragstarted(event, d) { if (currentTool === "connect") { ref.simulation.stop(); //startNode = d; arrow = ref.svg .append("line") .attr("stroke", "black") .attr("stroke-width", 2) .attr("marker-end", "url(#arrowend)"); } else { if (!event.active) { ref.tickCount = 0; ref.simulation.alphaTarget(0.3).restart(); } d.fx = d.x; d.fy = d.y; } } function dragged(event, d) { //console.log(arrow, currentTool === "connect", "dragged"); if (currentTool === "connect" && arrow) { var x = event.x; var y = event.y; // Remove highlight class from all elements d3.selectAll("g").classed("highlight", false); let endNode = d3 .selectAll("g") // selecting both circles (places) and rectangles (transitions) .filter((node) => node !== d) .filter(function (node) { const bbox = this.getBBox(); var res = x >= bbox.x + node.x && x <= bbox.x + node.x + bbox.width && y >= bbox.y + node.y && y <= bbox.y + node.y + bbox.height; return res; }); endNode.classed("highlight", true); console.log("hightlight added"); arrow .attr("x1", d.x) .attr("y1", d.y) .attr("x2", event.x) .attr("y2", event.y); } else { ref.tickCount = 0; d.fx = event.x; d.fy = event.y; } } function dragended(event, d) { if (currentTool === "connect" && arrow) { var x = event.x; var y = event.y; // Remove highlight class from all elements d3.selectAll("g").classed("highlight", false); let endNode2 = d3 .selectAll("g") // selecting both circles (places) and rectangles (transitions) .filter((node) => node !== d) .each(function (node) { // console.log("for all nides", node, this); }) .filter(function (node) { const bbox = this.getBBox(); var res = x >= bbox.x + node.x && x <= bbox.x + node.x + bbox.width && y >= bbox.y + node.y && y <= bbox.y + node.y + bbox.height; // console.log(res, node, bbox, "WHAt???", event, x, y); return res; }); arrow.remove(); if (endNode2.node()) { var endNode = endNode2.datum(); if (d !== endNode) { //what && d.type !== endNode.type tegRef.current.addArc(new Arc(d, endNode)); tegRef.current.update(); } } else { console.log("NO ENDNODE found!!!", endNode2); } //console.log("CONNECT", d, endNode); arrow = null; } else { ref.tickCount = 0; if (!event.active) ref.simulation.alphaTarget(0); d.fx = null; d.fy = null; } } ref.svg.on("click", (event) => onClick(event, tegRef.current)); ref.svg.on("dblclick", (event) => onDoubleClick(event)); return { dragstarted, dragged, dragended }; } //Thanks to d3 we have to recreate the whole graph because it's so hard to unset drag operators :/ drawTimedEventGraph(tegRef.current, canvasRef.current, tools); } }, [tegRef.current, currentTool]); const onDoubleClick = (event) => { // Clear the single click timeout to prevent it from executing if (singleClickTimeout) { clearTimeout(singleClickTimeout); setSingleClickTimeout(null); } // Handle double-click event logic here console.log("Double-click detected", currentTool); switch (currentTool) { case "cursor": //console.log(event.target.__data__, tegRef, "AYY"); break; case "transition": break; case "place": break; case "connect": // Connect two elements and add the arc to the timedEventGraph break; default: // Handle other cases or do nothing break; } }; const onClick = (event, tegRef) => { // If there's already a single click timeout set, clear it if (singleClickTimeout) { clearTimeout(singleClickTimeout); setSingleClickTimeout(null); } const [x, y] = d3.pointer(event); switch (currentTool) { case "edit": // Set a new single click timeout // setSingleClickTimeout( // setTimeout(() => { const elementData = event.target.__data__; if (elementData) { setInputPosition({ x, y }); setSelectedElement({ elementData, x, y, id: elementData.id, holdingTime: elementData.holdingTime }); } else { console.log("nothing to edit"); } // }, 300) // ); break; case "transition": case "place": setInputPosition({ x, y }); setShowInput(true); break; case "connect": // Connect two elements and add the arc to the timedEventGraph break; case "cursor": tegRef.fireTransition(event.target.__data__); highlightTransition(event.target); break; default: // Handle other cases or do nothing break; } }; function highlightTransition(transitionElement) { d3.select(transitionElement).classed("highlight-transition", true); setTimeout(() => { d3.select(transitionElement).classed("highlight-transition", false); }, 100); // 1000ms or 1 second highlight duration } return jsx`

${ showInput && jsx` ` } ${ selectedElement && jsx` ` }

`; }33:Tb61,TimedEventGraph = { class TimedEventGraph { constructor() { /** @type {Place[]} */ this.places = []; /** @type {Transition[]} */ this.transitions = []; /** @type {Object} */ this.arcs = { a: [] }; /** @type {Function} */ this.updateCallback = null; /** @type {string} */ this.mode = "a"; } setUpdateCallback(callback) { this.updateCallback = callback; } fireTransition(transition) { // Find all input and output places for the given transition const inputPlaces = this.arcs[this.mode] .filter((arc) => arc.target === transition) .map((arc) => arc.source); const outputPlaces = this.arcs[this.mode] .filter((arc) => arc.source === transition) .map((arc) => arc.target); // Check if the transition is enabled (i.e., if all input places have at least one token) const isEnabled = inputPlaces.every((place) => place.tokens > 0); if (isEnabled) { // Subtract a token from each input place and add a token to each output place inputPlaces.forEach((place) => place.tokens--); outputPlaces.forEach((place) => place.tokens++); // Update the visualization to reflect the new token counts this.update(); } else { console.log(`Transition ${transition.id} is not enabled.`); } } fromId(id) { // Search for a matching Place object const place = this.places.find((p) => p.id === id); if (place) { return place; } // Search for a matching Transition object const transition = this.transitions.find((t) => t.id === id); if (transition) { return transition; } // Search for a matching Arc object const arc = this.arcs.find((t) => t.id === id); if (arc) { return arc; } // Return null if no matching object is found return null; } addPlace(place, position) { if (position) { this.places.x = position.x; this.places.y = position.y; } this.places.push(place); this.update(); } addMode(newMode) { if (!this.arcs[newMode]) { this.arcs[newMode] = []; this.update(); } else { console.log(`Mode "${newMode}" already exists.`); } } removeMode(modeName) { if (this.arcs[modeName]) { delete this.arcs[modeName]; this.update(); } else { console.log(`Mode "${modeName}" does not exist.`); } } addTransition(transition) { this.transitions.push(transition); this.update(); } addArc(arc) { this.arcs[this.mode].push(arc); this.update(); } update() { if (this.updateCallback) { this.updateCallback(); } } } // Create the timed event graph return TimedEventGraph; }34:T1a80,function drawTimedEventGraph(timedEventGraph, containerSelector, tools) { //const width = 800; const height = 600; const nodeRadius = 20; const container = d3.select(containerSelector); // Check if an SVG container already exists let svg = container.select("svg"); // If there's no existing SVG container, create one if (svg.empty()) { svg = container.append("svg").attr("width", width).attr("height", height); } else { // If an SVG container exists, clear its contents svg.selectAll("*").remove(); } let nodes = [...timedEventGraph.places, ...timedEventGraph.transitions]; let links = timedEventGraph.arcs[timedEventGraph.mode]; let tickCount2 = 0; const maxTicks = 200; let simulation = d3 .forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-30)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("link", d3.forceLink(links).distance(100).strength(0.3)) .force("collide", d3.forceCollide(nodeRadius * 2)); var changeable = { simulation, tickCount: tickCount2, svg, animate: true }; simulation.restart(); let toolf = tools(changeable); var link = applyLink(svg.selectAll(".link")); let place = applyPlace(svg.selectAll(".place")); function applyLink(link) { // console.log("links", links); return link .data(links) .join("line") .attr("class", "link") .attr("marker-end", "url(#arrowhead)"); } function applyPlace(place) { return place .data(timedEventGraph.places) .join("g") .attr("class", "place") .call( d3 .drag() .on("start", toolf.dragstarted) .on("drag", toolf.dragged) .on("end", toolf.dragended) ); } function applyTransition(transition) { return transition .data(timedEventGraph.transitions) .join("g") .attr("class", "transition-container") .call( d3 .drag() .on("start", toolf.dragstarted) .on("drag", toolf.dragged) .on("end", toolf.dragended) ); } place .append("circle") .attr("class", "outer-circle") .attr("r", nodeRadius * 1.3) .style("display", (d) => (d.holdingTime ? "block" : "none")); place .append("circle") .attr("class", "inner-circle") .attr("r", nodeRadius) .style("display", (d) => "block"); place .append("text") .attr("class", "label") .text((d) => d.id) .attr("text-anchor", "middle") .attr("dy", 1.8 * nodeRadius + 10); // Adjust this value to position the label below the place element let transitionheight = nodeRadius * 4; // Create transition elements let transition = applyTransition(svg.selectAll(".transition")); transition .append("text") .attr("class", "label") .text((d) => d.id) .attr("text-anchor", "middle") .attr("dy", +0.6 * transitionheight + 10); const marker = svg .append("defs") .append("marker") .attr("id", "arrowhead") .attr("viewBox", "0 -5 10 10") .attr("refX", nodeRadius * 1.3 + 5) // adjust the position of the arrowhead along the line .attr("refY", 0) .attr("markerWidth", 6) .attr("markerHeight", 6) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5") .attr("class", "arrowhead"); // let label = applyLabel(svg.selectAll(".label")); // console.log("before setUpdateCallback", timedEventGraph); timedEventGraph.setUpdateCallback(updateVisualization); updateVisualization(); function updateVisualization() { // Update nodes and links data nodes = [...timedEventGraph.places, ...timedEventGraph.transitions]; links = timedEventGraph.arcs[timedEventGraph.mode]; // Update the simulation's nodes and links changeable.simulation.nodes(nodes); changeable.simulation.force("link").links(links); changeable.simulation.restart(); if (changeable.animate) { // Restart the simulation changeable.tickCount = 0; } else { changeable.tickCount = maxTicks - 2; //it needs to animate at least a bit } // Update the visualization elements link = applyLink(link); place = applyPlace(place); place .selectAll(".outer-circle") .data((d) => [d]) .join("circle") .attr("class", "outer-circle") .attr("r", nodeRadius * 1.3) .style("display", (d) => (d.holdingTime ? "block" : "none")); place .selectAll(".inner-circle") .data((d) => [d]) .join("circle") .attr("class", "inner-circle") .attr("r", nodeRadius) .style("display", (d) => "block"); // Draw tokens as dots inside the inner circle // console.log("does this get executed"); place .selectAll(".token-dot") .data((d) => (d.tokens < 6 ? Array(d.tokens).fill(d) : [])) .join("circle") .attr("class", "token-dot") .attr("r", 3) .attr( "cx", (d, i) => nodeRadius * 0.5 * Math.cos((i * 2 * Math.PI) / d.tokens) ) .attr( "cy", (d, i) => nodeRadius * 0.5 * Math.sin((i * 2 * Math.PI) / d.tokens) ) .style("display", (d) => "block"); // Display the numeric value for 6 or more tokens in the center place .selectAll(".token-count") .data((d) => [d]) .join("text") .attr("class", "token-count") .attr("text-anchor", "middle") .attr("dy", ".3em") .text((d) => (d.tokens >= 6 ? d.tokens : "")) .style("display", (d) => (d.tokens >= 6 ? "block" : "none")); // Update transition elements transition = applyTransition(transition); transition .selectAll("rect") .data((d) => [d]) .join("rect") .attr("class", (d) => d.holdingTime ? "transition" : "transition-filled" ) .attr("width", nodeRadius) .attr("height", transitionheight) .attr("rx", 3) .attr("ry", 3) .attr("x", -nodeRadius / 2) .attr("y", -transitionheight / 2); place .selectAll(".label") .data((d) => [d]) .text((d) => d.id); transition .selectAll(".label") .data((d) => [d]) .text((d) => d.id); // label = applyLabel(label); } function ticked() { if (changeable.tickCount >= maxTicks) { changeable.simulation.stop(); } else { changeable.tickCount++; } link .attr("x1", (d) => d.source.x) .attr("y1", (d) => d.source.y) .attr("x2", (d) => d.target.x) .attr("y2", (d) => d.target.y); place.attr("transform", (d) => `translate(${d.x}, ${d.y})`); transition.attr("transform", (d) => `translate(${d.x}, ${d.y})`); // label.attr("x", (d) => d.x).attr("y", (d) => d.y - transitionheight); } changeable.simulation.on("tick", ticked); }35:[] 2d:{"title":"Untitled","cells":[{"id":0,"value":"# Untitled","pinned":false,"hidden":false,"mode":"md"},{"id":565,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"\n","pinned":false,"hidden":false,"mode":"md"},{"id":214,"value":"import {\n render,\n jsx,\n component,\n useState,\n useEffect,\n useRef\n} from \"@j-f1/react\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"timedEventGraph","pinned":true,"hidden":false,"mode":"ojs"},{"id":498,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"{\n return render((_) => jsx`<${TimedEventGraphComponent} />`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"/*{\n // Draw the timed event graph using D3.js\n let div = html`

`;\n drawTimedEventGraph(timedEventGraph, div);\n return div;\n}*/","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"timedEventGraph.fireTransition(timedEventGraph.transitions[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"{\n //debugger;\n // timedEventGraph.addPlace(new timedEventGraph._inner.Place(\"p3\", 1));\n var t0 = timedEventGraph.fromId(\"T1\");\n timedEventGraph.fireTransition(t0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"class Place {\n /**\n * Creates a Place instance\n * @param {string} id - ID of the Place\n * @param {Object} holdingTime - Holding time per mode\n * @param {number} [x] - X coordinate\n * @param {number} [y] - Y coordinate\n */\n constructor(id, holdingTime = 0, x = undefined, y = undefined) {\n this.id = id;\n this.holdingTime = holdingTime;\n this.tokens = 0;\n this.x = x;\n this.y = y;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"class Transition {\n /**\n * Creates a Transition instance\n * @param {string} id - ID of the Transition\n * @param {Object} holdingTime - Holding time per mode\n * @param {number} [x] - X coordinate\n * @param {number} [y] - Y coordinate\n */\n constructor(id, holdingTime = 0, x = undefined, y = undefined) {\n this.id = id;\n this.holdingTime = holdingTime;\n this.x = x;\n this.y = y;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":427,"value":"class Arc {\n constructor(source, target) {\n this.source = source;\n this.target = target;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"timedEventGraph = {\n const timedEventGraph = new TimedEventGraph();\n timedEventGraph._inner = { Arc, Place, Transition };\n\n const place1 = new Place(\"P1\", 5);\n const place2 = new Place(\"P2\", 0);\n const transition1 = new Transition(\"T1\", 0);\n const input = new Transition(\"T0\", 0);\n timedEventGraph.addPlace(place1);\n timedEventGraph.addPlace(place2);\n timedEventGraph.addTransition(transition1);\n timedEventGraph.addTransition(input);\n timedEventGraph.addArc(new Arc(place1, transition1));\n timedEventGraph.addArc(new Arc(transition1, place2));\n timedEventGraph.addArc(new Arc(input, place1));\n\n return timedEventGraph;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"tools=function(ref){\n function dragstarted(event, d) {\n if (!event.active) {\n ref.tickCount = 0;\n ref.simulation.alphaTarget(0.3).restart();\n }\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(event, d) {\n ref.tickCount = 0;\n d.fx = event.x;\n d.fy = event.y;\n }\n\n function dragended(event, d) {\n ref.tickCount = 0;\n if (!event.active) ref.simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n return {dragstarted,dragged,dragended}\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}