2f:T54b,/** * Creates a TimedEventGraph from a parsed matrix. * @param {Object.>} matrix - The parsed data object with nested numeric keys. * @param {TimedEventGraph} teg - The TimedEventGraph to populate. */ function createTEG(matrix, teg) { // Keep track of created transitions and places const transitions = {}; const places = {}; // Iterate over all elements in the matrix for (const [t1, targets] of Object.entries(matrix)) { for (const [t2, gd] of Object.entries(targets)) { // Create transitions if they don't exist if (!transitions[t1]) { transitions[t1] = new Transition(`T${t1}`, { a: 0 }); teg.addTransition(transitions[t1]); } if (!transitions[t2]) { transitions[t2] = new Transition(`T${t2}`, { a: 0 }); teg.addTransition(transitions[t2]); } // Create the intermediate place const placeID = `P${t1}-${t2}`; if (!places[placeID]) { console.log("gd", gd); places[placeID] = new Place(placeID, { a: gd.d }, gd.g); console.log(places[placeID]); teg.addPlace(places[placeID]); } // Add arcs from T1 to Place and from Place to T2 teg.addArc(new Arc(transitions[t1], places[placeID])); teg.addArc(new Arc(places[placeID], transitions[t2])); } } }30:T1292,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 or Transition object with mode-dependent holding time const element = this.places.find((p) => p.id === id) || this.transitions.find((t) => t.id === id); if (element) { return { ...element, holdingTime: element.holdingTime[this.mode] }; } // 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] = []; // Add newMode to all places and transitions for (let place of this.places) { place.holdingTime[newMode] = place.holdingTime[this.mode]; } for (let transition of this.transitions) { transition.holdingTime[newMode] = transition.holdingTime[this.mode]; } this.update(); } else { console.log(`Mode "${newMode}" already exists.`); } } removeMode(modeName) { if (this.arcs[modeName]) { delete this.arcs[modeName]; // Remove modeName from all places and transitions for (let place of this.places) { delete place.holdingTime[modeName]; } for (let transition of this.transitions) { delete transition.holdingTime[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(); } /** * Remove a place from the graph * @param {Place} place - The place to remove */ removePlace(place) { this.places = this.places.filter((p) => p !== place); this.update(); } /** * Remove a transition from the graph * @param {Transition} transition - The transition to remove */ removeTransition(transition) { this.transitions = this.transitions.filter((t) => t !== transition); this.update(); } /** * Remove an arc from the graph * @param {Arc} arc - The arc to remove */ removeArc(arc) { this.arcs[this.mode] = this.arcs[this.mode].filter((a) => a !== arc); this.update(); } /** * Remove an element from the graph * @param {Arc|Transition|Place} elementData - The element to remove */ removeElement(elementData) { if (elementData instanceof Place) { this.removePlace(elementData); } else if (elementData instanceof Transition) { this.removeTransition(elementData); } else if (elementData instanceof Arc) { this.removeArc(elementData); } else { console.log( "Invalid element data. Expected an instance of Arc, Transition, or Place." ); } } update() { if (this.updateCallback) { this.updateCallback(); } } } // Create the timed event graph return TimedEventGraph; }31:T1ad8,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[timedEventGraph.mode] ? "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[timedEventGraph.mode] ? "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[timedEventGraph.mode] ? "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); }32:[] 2d:{"title":"Debug tokencount","cells":[{"id":0,"value":"# Debug tokencount","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":690,"value":"timedEventGraph.places[0].tokens","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 = {}, tokens = 0, x = undefined, y = undefined) {\n this.id = id;\n this.holdingTime = holdingTime;\n this.tokens = tokens;\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 = {}, 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":681,"value":"timedEventGraph","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"parseGDMatrix(`[0,12]=(g1.d0)\n[0,23]=(g1.d6)`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"timedEventGraph = {\n const timedEventGraph = new TimedEventGraph();\n timedEventGraph._inner = { Arc, Place, Transition };\n createTEG(\n parseGDMatrix(`[0,12]=(g1.d0)\n[0,23]=(g1.d6)`),\n timedEventGraph\n );\n console.log(\"its time\", timedEventGraph.places[0].tokens);\n\n /* const place1 = new Place(\"P1\", {a:5});\n const place2 = new Place(\"P2\", {a:0});\n const transition1 = new Transition(\"T1\", {a:0});\n const input = new Transition(\"T0\", {a: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":635,"value":"/**\n * Parses the file content and returns a data object.\n * @param {string} fileContent - The content of the file to parse.\n * @returns {Object.>} - The parsed data object with nested numeric keys.\n */\nfunction parseGDMatrix(fileContent) {\n const rows = fileContent.trim().split(\"\\n\");\n const data = {};\n\n for (let i = 0; i < rows.length; i++) {\n const row = rows[i];\n const [coord, value] = row.split(\"=\");\n const [r, c] = coord\n .replace(/[\\[\\]]/g, \"\")\n .split(\",\")\n .map((x) => parseInt(x));\n\n // Split the value string at 'd' and 'g', and convert the parts to number.\n const g = parseInt(value.match(/g(\\d+)/)[1]);\n const d = parseInt(value.match(/d(\\d+)/)[1]);\n\n if (!(r in data)) {\n data[r] = {};\n }\n\n data[r][c] = { g: g, d: d };\n }\n\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":633,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$30","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":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}