;
70 | }
--------------------------------------------------------------------------------
/cmd/mdl/webapp/src/graph-view/intersect.ts:
--------------------------------------------------------------------------------
1 | interface Point {
2 | x: number;
3 | y: number;
4 | }
5 |
6 | interface BBox extends Point {
7 | width: number;
8 | height: number;
9 | }
10 |
11 |
12 | export function insideBox(p: Point, b: BBox, centeredBox = true): boolean {
13 | return centeredBox ?
14 | (p.x > b.x - b.width / 2 && p.x < b.x + b.width / 2 && p.y > b.y - b.height / 2 && p.y < b.y + b.height / 2) :
15 | (p.x > b.x && p.x < b.x + b.width && p.y > b.y && p.y < b.y + b.height)
16 | }
17 |
18 | export function boxesOverlap(b1: BBox, b2: BBox): boolean {
19 | return b1.x < b2.x + b2.width && b1.y < b2.y + b2.height && b1.x + b1.width > b2.x && b1.y + b1.height > b2.y
20 | }
21 |
22 | export function uncenterBox(b: BBox): BBox {
23 | return {x: b.x - b.width / 2, y: b.y - b.height / 2, width: b.width, height: b.height}
24 | }
25 |
26 | export function scaleBox(b: BBox, sc: number): BBox {
27 | return {x: b.x * sc, y: b.y * sc, width: b.width * sc, height: b.height * sc}
28 | }
29 |
30 | // intersect 2 segments (p1->q1) with (p2, q2)
31 | // if the lines intersect, the result contains the x and y of the intersection (treating the lines as infinite)
32 | // and booleans for whether line segment 1 or line segment 2 contain the point
33 | function segmentIntersection(p1: Point, q1: Point, p2: Point, q2: Point) {
34 | let denominator, a, b, numerator1, numerator2,
35 | result: { x: number, y: number, onLine1: boolean, onLine2: boolean } = {
36 | x: null,
37 | y: null,
38 | onLine1: false,
39 | onLine2: false
40 | };
41 | denominator = (q2.y - p2.y) * (q1.x - p1.x) - (q2.x - p2.x) * (q1.y - p1.y);
42 | if (denominator == 0) {
43 | return result;
44 | }
45 | a = p1.y - p2.y;
46 | b = p1.x - p2.x;
47 | numerator1 = ((q2.x - p2.x) * a) - ((q2.y - p2.y) * b);
48 | numerator2 = ((q1.x - p1.x) * a) - ((q1.y - p1.y) * b);
49 | a = numerator1 / denominator;
50 | b = numerator2 / denominator;
51 |
52 | // if we cast these lines infinitely in both directions, they intersect here:
53 | result.x = p1.x + (a * (q1.x - p1.x));
54 | result.y = p1.y + (a * (q1.y - p1.y));
55 |
56 | // if line1 is a segment and line2 is infinite, they intersect if:
57 | if (a > 0 && a < 1) {
58 | result.onLine1 = true;
59 | }
60 | // if line2 is a segment and line1 is infinite, they intersect if:
61 | if (b >= 0 && b <= 1) {
62 | result.onLine2 = true;
63 | }
64 | // if line1 and line2 are segments, they intersect if both of the above are true
65 | return result;
66 | }
67 |
68 | // intersects a segment (p1->p2) with a box
69 | export function intersectRectFull(p1: Point, p2: Point, box: BBox): Point[] {
70 | const w = box.width / 2
71 | const h = box.height / 2
72 | const segs: { p: Point; q: Point }[] = [
73 | {p: {x: box.x - w, y: box.y - h}, q: {x: box.x - w, y: box.y + h}},
74 | {p: {x: box.x - w, y: box.y - h}, q: {x: box.x + w, y: box.y - h}},
75 | {p: {x: box.x + w, y: box.y - h}, q: {x: box.x + w, y: box.y + h}},
76 | {p: {x: box.x - w, y: box.y + h}, q: {x: box.x + w, y: box.y + h}},
77 | ]
78 | return segs.map(s => segmentIntersection(p1, p2, s.p, s.q)).filter(ret => ret.onLine1 && ret.onLine2)
79 | }
80 |
81 | // intersects a line that goes from p to the center of the box
82 | export function intersectRect(box: BBox, p: Point): Point {
83 | if (insideBox(p, box)) return {x: box.x, y: box.y}
84 | return intersectRectFull(box, p, box)[0] || {x: box.x, y: box.y}
85 | }
86 |
87 | export function intersectEllipse(ellCenter: Point, rx: number, ry: number, nodeCenter: Point, point: Point) {
88 |
89 | //translate all to center ellipse
90 | const p1 = {x: point.x - ellCenter.x, y: point.y - ellCenter.y}
91 | const p2 = {x: nodeCenter.x - ellCenter.x, y: nodeCenter.y - ellCenter.y}
92 |
93 | if (p2.x == p1.x) { //hack to avoid singularity
94 | p1.x += .0000001
95 | }
96 |
97 | const s = (p2.y - p1.y) / (p2.x - p1.x);
98 | const si = p2.y - (s * p2.x);
99 | const a = (ry * ry) + (rx * rx * s * s);
100 | const b = 2 * rx * rx * si * s;
101 | const c = rx * rx * si * si - rx * rx * ry * ry;
102 |
103 | const radicand_sqrt = Math.sqrt((b * b) - (4 * a * c));
104 | const x = p1.x > p2.x ?
105 | (-b + radicand_sqrt) / (2 * a) :
106 | (-b - radicand_sqrt) / (2 * a)
107 | const pos = {
108 | x: x,
109 | y: s * x + si
110 | }
111 | //translate back
112 | pos.x += ellCenter.x;
113 | pos.y += ellCenter.y
114 |
115 | return pos;
116 | }
117 |
118 | export interface Segment {
119 | p: Point;
120 | q: Point;
121 | }
122 |
123 | // given a polyline as a list of segments, interrupt it over the box so no line is inside the box
124 | export function intersectPolylineBox(segments: Segment[], box: BBox) {
125 | for (let i = 0; i < segments.length; i++) {
126 | const s = segments[i]
127 | if (insideBox(s.p, box)) {
128 | if (insideBox(s.q, box)) { // segment both ends inside box
129 | segments.splice(i, 1)
130 | i -= 1
131 | } else { // segment start inside box
132 | s.p = intersectRectFull(s.p, s.q, box)[0]
133 | }
134 | } else {
135 | if (insideBox(s.q, box)) { // segment end inside box
136 | s.q = intersectRectFull(s.p, s.q, box)[0]
137 | } else { // both ends outside
138 | const ret = intersectRectFull(s.p, s.q, box)
139 | if (ret.length == 2) { // intersects the box, splice segment
140 | // order the intersection points, closest first
141 | const dst1 = Math.abs(ret[0].x - s.p.x) + Math.abs(ret[0].y - s.p.y)
142 | const dst2 = Math.abs(ret[1].x - s.p.x) + Math.abs(ret[1].y - s.p.y)
143 | if (dst1 > dst2) ret.reverse()
144 | // split the segment in 2
145 | const s2 = {p: ret[1], q: s.q}
146 | s.q = ret[0]
147 | segments.splice(i + 1, 0, s2)
148 | i += 1
149 | }
150 | }
151 | }
152 | }
153 | }
154 |
155 | export function project(p: Point, a: Point, b: Point): Point {
156 | let atob = {x: b.x - a.x, y: b.y - a.y};
157 | let atop = {x: p.x - a.x, y: p.y - a.y};
158 | let len = atob.x * atob.x + atob.y * atob.y;
159 | let dot = atop.x * atob.x + atop.y * atob.y;
160 | let t = Math.min(1, Math.max(0, dot / len));
161 | return {
162 | x: a.x + atob.x * t,
163 | y: a.y + atob.y * t
164 | };
165 | }
166 |
167 | export function cabDistance(p1: Point, p2: Point): number {
168 | return Math.abs(p2.x - p1.x) + Math.abs(p2.y - p1.y)
169 | }
--------------------------------------------------------------------------------
/cmd/mdl/webapp/src/graph-view/svg-create.ts:
--------------------------------------------------------------------------------
1 | import {svgTextWrap} from "./svg-text";
2 |
3 | export const create = {
4 | element(type: string, attrs: Record
= {}, className?: string) {
5 | const el = document.createElementNS('http://www.w3.org/2000/svg', type);
6 | Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, String(v)));
7 | if (className) el.classList.add(className);
8 | return el;
9 | },
10 |
11 | use(id: string, attrs: Record = {}) {
12 | const el = this.element('use', attrs);
13 | el.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#' + id);
14 | return el;
15 | },
16 |
17 | path(path: string, attrs: Record = {}, className?: string) {
18 | const p = this.element("path", {...attrs, d: path}, className);
19 | return p;
20 | },
21 |
22 | text(text: string, attrs: Record = {}) {
23 | const t = this.element('text', attrs) as SVGTextElement;
24 | if (text) t.textContent = text;
25 | return t;
26 | },
27 |
28 | textArea(text: string, width: number, fontSize: number, bold: boolean, x = 0, y = 0, anchor = '') {
29 | const attrs: Record = {
30 | 'font-size': `${fontSize}px`,
31 | 'font-weight': bold ? 'bold' : 'normal'
32 | };
33 | const {lines, maxW} = svgTextWrap(text, width, attrs);
34 | const txt = this.text('', {x: 0, y, 'text-anchor': anchor || undefined});
35 |
36 | lines.forEach((line, i) => {
37 | const span = this.element('tspan', {x, dy: `${fontSize + 2}px`, ...attrs});
38 | span.textContent = line;
39 | txt.append(span);
40 | });
41 |
42 | return {txt, dy: (lines.length + 1) * (fontSize + 2), maxW};
43 | },
44 |
45 | rect(width: number, height: number, x = 0, y = 0, r = 0, className?: string) {
46 | return this.element('rect', {x, y, rx: r, ry: r, width, height}, className) as SVGRectElement;
47 | },
48 |
49 | icon(icon: string, x = 0, y = 0) {
50 | return this.use(icon, {x, y});
51 | },
52 |
53 | expand(x: number, y: number, expanded: boolean) {
54 | const g = this.element('g', {transform: `translate(${x},${y})`}, 'expand') as SVGGElement;
55 | g.append(
56 | this.rect(19, 19, 0, 0, 1),
57 | this.text(expanded ? '-' : '+', {x: 10, y: 14, 'text-anchor': 'middle'})
58 | );
59 | return g;
60 | }
61 | };
62 |
63 | export function setPosition(g: SVGGElement, x: number, y: number) {
64 | g.setAttribute('transform', `translate(${x},${y})`);
65 | }
--------------------------------------------------------------------------------
/cmd/mdl/webapp/src/graph-view/svg-text.ts:
--------------------------------------------------------------------------------
1 | const textMeasure = () => {
2 | const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
3 | document.body.appendChild(svg);
4 |
5 | return {
6 | measure: (text: string, attrs: { [key: string]: string }) => {
7 | const node = document.createElementNS('http://www.w3.org/2000/svg', 'text')
8 | node.setAttribute('x', '0');
9 | node.setAttribute('y', '0');
10 | for (let attr in attrs) {
11 | node.setAttribute(attr, attrs[attr]);
12 | }
13 | node.appendChild(document.createTextNode(text));
14 |
15 | svg.appendChild(node);
16 | const {width, height} = node.getBBox();
17 | svg.removeChild(node);
18 | return {width, height};
19 | },
20 | clean: () => {
21 | document.body.removeChild(svg);
22 | }
23 | }
24 | }
25 |
26 | // Helper function to break long words that exceed width
27 | const breakLongWord = (word: string, maxWidth: number, attrs: { [key: string]: string }, mt: any): string[] => {
28 | const parts: string[] = [];
29 | let currentPart = '';
30 |
31 | for (let i = 0; i < word.length; i++) {
32 | const testPart = currentPart + word[i];
33 | const size = mt.measure(testPart, attrs);
34 |
35 | if (size.width > maxWidth && currentPart.length > 0) {
36 | parts.push(currentPart);
37 | currentPart = word[i];
38 | } else {
39 | currentPart = testPart;
40 | }
41 | }
42 |
43 | if (currentPart.length > 0) {
44 | parts.push(currentPart);
45 | }
46 |
47 | return parts;
48 | }
49 |
50 | // split a text in lines wrapped at a certain width
51 | export const svgTextWrap = (text: string, width: number, attrs: { [key: string]: string }) => {
52 | const mt = textMeasure()
53 | let maxW = 0;
54 |
55 | const ret = text.trim().split('\n').map(text => { //split paragraphs
56 | //do one paragraph
57 | const words = text.trim().split(/\s+/);
58 | let lines: string[] = [];
59 | let currentLine: string[] = [];
60 |
61 | words.forEach(word => {
62 | // First check if the single word exceeds the width
63 | const wordSize = mt.measure(word, attrs);
64 | if (wordSize.width > width) {
65 | // If we have content in current line, finish it first
66 | if (currentLine.length > 0) {
67 | lines.push(currentLine.join(' '));
68 | currentLine = [];
69 | }
70 | // Break the long word into smaller parts
71 | const brokenParts = breakLongWord(word, width, attrs, mt);
72 | // Add all but the last part as complete lines
73 | for (let i = 0; i < brokenParts.length - 1; i++) {
74 | lines.push(brokenParts[i]);
75 | maxW = Math.max(maxW, mt.measure(brokenParts[i], attrs).width);
76 | }
77 | // Start new line with the last part
78 | if (brokenParts.length > 0) {
79 | currentLine = [brokenParts[brokenParts.length - 1]];
80 | }
81 | } else {
82 | // Normal word processing
83 | const newLine = [...currentLine, word];
84 | const size = mt.measure(newLine.join(' '), attrs);
85 | if (size.width > width && currentLine.length > 0) {
86 | lines.push(currentLine.join(' '));
87 | currentLine = [word];
88 | } else {
89 | maxW = Math.max(maxW, size.width)
90 | currentLine = newLine;
91 | }
92 | }
93 | });
94 |
95 | if (currentLine.length > 0) {
96 | lines.push(currentLine.join(' '));
97 | }
98 | return lines;
99 | }).reduce((a, v) => a.concat(v), []) //flatten
100 |
101 | mt.clean()
102 | return {lines: ret, maxW};
103 | };
104 |
105 |
106 |
--------------------------------------------------------------------------------
/cmd/mdl/webapp/src/graph-view/undo.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Undo functionality
3 | * at every change in the document, Undo can save a new version
4 | * so the user can "undo" and "redo" changes by reverting to an
5 | * older version of the document
6 | */
7 |
8 | export class Undo {
9 | private readonly versions: Doc[] = [];
10 | private pos: number = 0;
11 | private lastSavedPos: number = 0;
12 | private readonly exportDoc: () => Doc;
13 | private readonly importDoc: (d: Doc) => void;
14 | change: () => void;
15 | private tmpPreviousState: Doc | null = null;
16 |
17 | constructor(id: string, exportDoc: () => Doc, importDoc: (d: Doc) => void) {
18 | this.exportDoc = exportDoc;
19 | this.importDoc = importDoc;
20 | this.change = debounce(() => this.saveNow(), 300);
21 | }
22 |
23 | // Store the state previous to the changes collected in the debounce period
24 | beforeChange() {
25 | if (!this.tmpPreviousState) {
26 | this.tmpPreviousState = this.deepClone(this.exportDoc());
27 | }
28 | }
29 |
30 | length() {
31 | return this.versions.length;
32 | }
33 |
34 | currentState() {
35 | return this.deepClone(this.versions[this.pos - 1]);
36 | }
37 |
38 | private saveNow() {
39 | if (!this.tmpPreviousState) {
40 | throw Error("undo.change() was called without previously calling undo.beforeChange()!");
41 | }
42 |
43 | this.versions[this.pos] = this.deepClone(this.exportDoc());
44 | this.versions[this.pos - 1] = this.tmpPreviousState;
45 | this.tmpPreviousState = null;
46 | this.pos += 1;
47 |
48 | // Remove anything that might be on top of this version
49 | this.versions.splice(this.pos);
50 | }
51 |
52 | private deepClone(doc: Doc): Doc {
53 | // Use modern structuredClone if available, fallback to JSON
54 | if (typeof structuredClone !== 'undefined') {
55 | return structuredClone(doc);
56 | }
57 | return JSON.parse(JSON.stringify(doc));
58 | }
59 |
60 | undo() {
61 | if (this.pos < 2) return;
62 | this.pos -= 1;
63 | const doc = this.versions[this.pos - 1];
64 | this.importDoc(this.deepClone(doc));
65 | }
66 |
67 | redo() {
68 | if (this.pos > this.versions.length - 1) return;
69 | const doc = this.versions[this.pos];
70 | this.importDoc(this.deepClone(doc));
71 | this.pos += 1;
72 | }
73 |
74 | changed() {
75 | return this.pos !== this.lastSavedPos;
76 | }
77 |
78 | setSaved() {
79 | this.lastSavedPos = this.pos;
80 | }
81 | }
82 |
83 | function debounce(func: () => void, wait: number) {
84 | let timeout: ReturnType;
85 | return function () {
86 | const context = this;
87 | const later = function () {
88 | timeout = null;
89 | func.apply(context);
90 | };
91 | clearTimeout(timeout);
92 | timeout = setTimeout(later, wait);
93 | };
94 | }
--------------------------------------------------------------------------------
/cmd/mdl/webapp/src/hooks.ts:
--------------------------------------------------------------------------------
1 | import { useState, useCallback, useEffect } from 'react';
2 | import { GraphData } from './graph-view/graph';
3 | import { parseView } from './parseModel';
4 | import { LayoutOptions } from './graph-view/layout';
5 | import {
6 | findShortcut,
7 | HELP,
8 | SAVE,
9 | TOGGLE_DRAG_MODE,
10 | ALIGN_HORIZONTAL,
11 | ALIGN_VERTICAL,
12 | DISTRIBUTE_HORIZONTAL,
13 | DISTRIBUTE_VERTICAL,
14 | AUTO_LAYOUT,
15 | RESET_POSITION,
16 | TOGGLE_GRID,
17 | TOGGLE_SNAP_TO_GRID,
18 | SNAP_ALL_TO_GRID,
19 | MOVE_LEFT,
20 | MOVE_RIGHT,
21 | MOVE_UP,
22 | MOVE_DOWN,
23 | MOVE_LEFT_FINE,
24 | MOVE_RIGHT_FINE,
25 | MOVE_UP_FINE,
26 | MOVE_DOWN_FINE
27 | } from './shortcuts';
28 |
29 | // Global state for graphs to preserve edits
30 | const graphs: { [key: string]: GraphData } = {};
31 |
32 | // Custom hook for graph management
33 | export const useGraph = (model: any, layouts: any, currentID: string): GraphData | null => {
34 | if (graphs[currentID]) {
35 | return graphs[currentID];
36 | }
37 |
38 | const graph = parseView(model, layouts, currentID);
39 | if (graph) {
40 | graphs[currentID] = graph;
41 | }
42 |
43 | return graph;
44 | };
45 |
46 | // Custom hook for auto layout functionality
47 | export const useAutoLayout = (graph: GraphData) => {
48 | const [layouting, setLayouting] = useState(false);
49 |
50 | const handleAutoLayout = useCallback(async () => {
51 | setLayouting(true);
52 | try {
53 | const options: LayoutOptions = {
54 | direction: 'DOWN',
55 | compactLayout: true
56 | };
57 | await graph.autoLayout(options);
58 | } catch (error) {
59 | console.error('Layout failed:', error);
60 | alert('Layout failed. See console for details.');
61 | } finally {
62 | setLayouting(false);
63 | }
64 | }, [graph]);
65 |
66 | return { layouting, handleAutoLayout };
67 | };
68 |
69 | // Custom hook for save functionality
70 | export const useSave = (graph: GraphData, currentID: string) => {
71 | const [saving, setSaving] = useState(false);
72 |
73 | const handleSave = useCallback(async () => {
74 | setSaving(true);
75 |
76 | try {
77 | const response = await fetch('data/save?id=' + encodeURIComponent(currentID), {
78 | method: 'post',
79 | body: graph.exportSVG()
80 | });
81 |
82 | if (response.status !== 202) {
83 | alert('Error saving\nSee terminal output.');
84 | } else {
85 | graph.setSaved();
86 | }
87 | } catch (error) {
88 | console.error('Save failed:', error);
89 | alert('Save failed. See console for details.');
90 | } finally {
91 | setSaving(false);
92 | }
93 | }, [graph, currentID]);
94 |
95 | return { saving, handleSave };
96 | };
97 |
98 | // Custom hook for keyboard shortcuts
99 | export const useKeyboardShortcuts = (
100 | toggleHelp: () => void,
101 | saveLayout: () => void,
102 | graph?: GraphData,
103 | dragMode?: 'pan' | 'select',
104 | setDragMode?: (mode: 'pan' | 'select') => void,
105 | onAutoLayout?: () => void
106 | ) => {
107 | useEffect(() => {
108 | const handleKeyDown = (e: KeyboardEvent) => {
109 | const shortcut = findShortcut(e);
110 |
111 | // Prevent browser default for all recognized shortcuts
112 | if (shortcut) {
113 | e.preventDefault();
114 | }
115 |
116 | if (shortcut === HELP) {
117 | toggleHelp();
118 | } else if (shortcut === SAVE) {
119 | saveLayout();
120 | } else if (shortcut === TOGGLE_DRAG_MODE && setDragMode && dragMode) {
121 | setDragMode(dragMode === 'pan' ? 'select' : 'pan');
122 | } else if (graph) {
123 | // Graph-dependent shortcuts
124 | if (shortcut === ALIGN_HORIZONTAL) {
125 | graph.alignSelectionH();
126 | } else if (shortcut === ALIGN_VERTICAL) {
127 | graph.alignSelectionV();
128 | } else if (shortcut === DISTRIBUTE_HORIZONTAL) {
129 | graph.distributeSelectionH();
130 | } else if (shortcut === DISTRIBUTE_VERTICAL) {
131 | graph.distributeSelectionV();
132 | } else if (shortcut === AUTO_LAYOUT && onAutoLayout) {
133 | onAutoLayout();
134 | } else if (shortcut === RESET_POSITION) {
135 | graph.alignTopLeft();
136 | graph.resetPanTransform();
137 | } else if (shortcut === TOGGLE_GRID) {
138 | graph.toggleGrid();
139 | } else if (shortcut === TOGGLE_SNAP_TO_GRID) {
140 | graph.toggleSnapToGrid();
141 | } else if (shortcut === SNAP_ALL_TO_GRID) {
142 | graph.snapAllToGrid();
143 | } else if (shortcut === MOVE_LEFT) {
144 | graph.moveSelected(-graph.getGridSize(), 0);
145 | } else if (shortcut === MOVE_LEFT_FINE) {
146 | graph.moveSelected(-1, 0, true); // Disable snap for fine movement
147 | } else if (shortcut === MOVE_RIGHT) {
148 | graph.moveSelected(graph.getGridSize(), 0);
149 | } else if (shortcut === MOVE_RIGHT_FINE) {
150 | graph.moveSelected(1, 0, true); // Disable snap for fine movement
151 | } else if (shortcut === MOVE_UP) {
152 | graph.moveSelected(0, -graph.getGridSize());
153 | } else if (shortcut === MOVE_UP_FINE) {
154 | graph.moveSelected(0, -1, true); // Disable snap for fine movement
155 | } else if (shortcut === MOVE_DOWN) {
156 | graph.moveSelected(0, graph.getGridSize());
157 | } else if (shortcut === MOVE_DOWN_FINE) {
158 | graph.moveSelected(0, 1, true); // Disable snap for fine movement
159 | }
160 | }
161 | };
162 |
163 | window.addEventListener('keydown', handleKeyDown);
164 | return () => window.removeEventListener('keydown', handleKeyDown);
165 | }, [toggleHelp, saveLayout, graph, dragMode, setDragMode, onAutoLayout]);
166 | };
167 |
168 | // Utility function to clear graph cache
169 | export const clearGraphCache = (currentID?: string) => {
170 | if (currentID) {
171 | delete graphs[currentID];
172 | } else {
173 | Object.keys(graphs).forEach(key => delete graphs[key]);
174 | }
175 | };
--------------------------------------------------------------------------------
/cmd/mdl/webapp/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Model - Architecture Diagrams as Code
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/cmd/mdl/webapp/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client';
2 | import React, { Suspense, lazy, useEffect, useState } from 'react';
3 | import { refreshGraph } from "./Root";
4 | import './style.css';
5 | import '@fortawesome/fontawesome-free/css/all.css';
6 | import { RefreshConnector } from "./websocket";
7 |
8 | const Root = lazy(() => import('./Root').then(module => ({ default: module.Root })));
9 |
10 | interface ModelData {
11 | model: any;
12 | layout: any;
13 | }
14 |
15 | interface AppState {
16 | data: ModelData | null;
17 | error: string | null;
18 | loading: boolean;
19 | }
20 |
21 | const App: React.FC = () => {
22 | const [state, setState] = useState({
23 | data: null,
24 | error: null,
25 | loading: true
26 | });
27 |
28 | const loadData = async () => {
29 | setState(prev => ({ ...prev, loading: true, error: null }));
30 |
31 | try {
32 | const [modelResponse, layoutResponse] = await Promise.all([
33 | fetch('data/model.json'),
34 | fetch('data/layout.json')
35 | ]);
36 |
37 | if (!modelResponse.ok) {
38 | throw new Error(`Failed to fetch model: ${modelResponse.statusText}`);
39 | }
40 |
41 | if (!layoutResponse.ok) {
42 | throw new Error(`Failed to fetch layout: ${layoutResponse.statusText}`);
43 | }
44 |
45 | const [model, layout] = await Promise.all([
46 | modelResponse.json(),
47 | layoutResponse.json()
48 | ]);
49 |
50 | setState({
51 | data: { model, layout },
52 | error: null,
53 | loading: false
54 | });
55 | } catch (error) {
56 | console.error('Failed to load data:', error);
57 | setState({
58 | data: null,
59 | error: error instanceof Error ? error.message : 'Unknown error occurred',
60 | loading: false
61 | });
62 | }
63 | };
64 |
65 | const handleFileChange = (path: string) => {
66 | if (path.endsWith('.svg')) {
67 | return; // Ignore SVG changes to avoid infinite loops
68 | }
69 |
70 | console.log('File changed:', path);
71 | refreshGraph();
72 | loadData();
73 | };
74 |
75 | useEffect(() => {
76 | // Setup refresh connector
77 | const refreshConnector = new RefreshConnector(handleFileChange);
78 | refreshConnector.connect();
79 |
80 | // Initial data load
81 | loadData();
82 |
83 | // Cleanup function
84 | return () => {
85 | // RefreshConnector cleanup would go here if it had a disconnect method
86 | };
87 | }, []);
88 |
89 | if (state.loading) {
90 | return ;
91 | }
92 |
93 | if (state.error) {
94 | return ;
95 | }
96 |
97 | if (!state.data) {
98 | return ;
99 | }
100 |
101 | return (
102 | }>
103 |
104 |
105 | );
106 | };
107 |
108 | const LoadingScreen: React.FC = () => (
109 |
118 | );
119 |
120 | const ErrorScreen: React.FC<{ error: string; onRetry: () => void }> = ({ error, onRetry }) => (
121 |
132 |
Error loading application
133 |
{error}
134 |
148 |