From 7823050d3d94ebb6b2b39388ff6cc9456b948c6b Mon Sep 17 00:00:00 2001 From: stackdump Date: Sun, 6 Apr 2025 20:58:26 -0500 Subject: [PATCH 1/2] refactor split css & js --- public/model.svg | 39 +++-- static/editor.html | 263 -------------------------------- static/index.html | 275 ++++++++++++++++++++++++++++++++-- static/model.svg | 293 +----------------------------------- static/pflow.css | 11 ++ static/pflow.js | 363 +++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 676 insertions(+), 568 deletions(-) delete mode 100644 static/editor.html create mode 100644 static/pflow.css create mode 100644 static/pflow.js diff --git a/public/model.svg b/public/model.svg index 08f7e5e..f00860d 100644 --- a/public/model.svg +++ b/public/model.svg @@ -242,14 +242,14 @@ console.log("Initializing Petri net visualization..."); let metadataElement = document.getElementById("metadata"); if (metadataElement) { - let metadata = metadataElement.textContent.trim(); - try { - petriNet = JSON.parse(metadata); - createElements(); - updateTokens(); - } catch (error) { - console.error("Failed to parse metadata: ", error); - } + let metadata = metadataElement.textContent.trim(); + try { + petriNet = JSON.parse(metadata); + createElements(); + updateTokens(); + } catch (error) { + console.error("Failed to parse metadata: ", error); + } } else { console.error("Metadata element not found"); } @@ -304,7 +304,28 @@ } }); + window.addEventListener('message', (event) => { + if (event.data.type === 'resize') { + resizeSvg(event.data.width, event.data.height); + } + if (event.data.type === 'setModel') { + try { + // Expecting a JSON string for the petri net + //petriNet = JSON.parse(event.data.model); + petriNet = event.data.model; + createElements(); + updateTokens(); + } catch (error) { + console.error("Failed to set model: ", error); + } + } + if (event.data.type === 'restart') { + resetPetriNet(); + } + }); + + window.addEventListener('load', init); document.addEventListener('DOMContentLoaded', init); ]]> - \ No newline at end of file + diff --git a/static/editor.html b/static/editor.html deleted file mode 100644 index b02be85..0000000 --- a/static/editor.html +++ /dev/null @@ -1,263 +0,0 @@ - - - - - - pflow | model.svg - - - - - - - - pflow.xyz - PetriNet Metamodels - - - - - - - - - - - - - Status: Ready - - - - - - - - - - - - - - - - diff --git a/static/index.html b/static/index.html index a0349d0..3281a18 100644 --- a/static/index.html +++ b/static/index.html @@ -1,20 +1,273 @@ - + + + - pflow | metamodel + pflow | model.svg - + + + + + pflow.xyz - PetriNet Metamodels + + + + + + + + + + + + + Status: Ready + + + + + + + + + + + + + + - \ No newline at end of file + diff --git a/static/model.svg b/static/model.svg index 619d35f..f41fe41 100644 --- a/static/model.svg +++ b/static/model.svg @@ -1,23 +1,13 @@ - \ No newline at end of file + +window.addEventListener('load', init); +document.addEventListener('DOMContentLoaded', init); +]]> + diff --git a/src/App.css b/src/App.css index c1ad4dc..1fcc316 100644 --- a/src/App.css +++ b/src/App.css @@ -25,6 +25,7 @@ body { outline: none; margin-left: 15px; margin-top: 40px; + overflow: auto; } #controls { diff --git a/src/App.tsx b/src/App.tsx index ae49711..b927bba 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react'; import { Model, importUrl, ModelData } from './model/model'; import './App.css'; import CodeEditor from "@uiw/react-textarea-code-editor"; - import rehypePrism from "rehype-prism-plus"; const defaultModel: ModelData = { "modelType": "PetriNet", @@ -64,7 +63,7 @@ import React, { useEffect, useState } from 'react'; sourceElement.style.height = `${Math.max(height, 300)}px`; sourceElement.style.width = `${Math.max(width - 40, 300)}px`; } - setEditorHeight(window.innerHeight - 680); + setEditorHeight(height); }; handleResize(); @@ -90,7 +89,12 @@ import React, { useEffect, useState } from 'react'; @@ -125,18 +129,14 @@ import React, { useEffect, useState } from 'react'; value={modelState.toJson()} data-color-mode="light" language={"js"} - placeholder="source" - rehypePlugins={[ - [rehypePrism, { ignoreMissing: true, showLineNumbers: false }], - ]} + placeholder="source v1" padding={10} // @ts-ignore style={{ - fontSize: 14, minHeight: editorHeight, backgroundColor: "#FFFFFF", border: "1px solid #E0E0E0", - fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace", + fontFamily: "monospace", }} onChange={(evt) => { try {