From 38f0ecf6da14bc34b64b65aa7af55832f717d073 Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Thu, 21 Sep 2023 15:46:00 +0200 Subject: [PATCH 01/73] current svg progress --- src/lib/components/svg-view/location.svelte | 77 +++++++++++++++++++++ src/lib/components/svg-view/svg-view.svelte | 53 ++++++++++++++ src/routes/+page.svelte | 6 ++ 3 files changed, 136 insertions(+) create mode 100644 src/lib/components/svg-view/location.svelte create mode 100644 src/lib/components/svg-view/svg-view.svelte diff --git a/src/lib/components/svg-view/location.svelte b/src/lib/components/svg-view/location.svelte new file mode 100644 index 00000000..cb39c7e5 --- /dev/null +++ b/src/lib/components/svg-view/location.svelte @@ -0,0 +1,77 @@ + + + + + diff --git a/src/lib/components/svg-view/svg-view.svelte b/src/lib/components/svg-view/svg-view.svelte new file mode 100644 index 00000000..fe41cdb4 --- /dev/null +++ b/src/lib/components/svg-view/svg-view.svelte @@ -0,0 +1,53 @@ + + + + + + + + + + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5982b0ae..17bf659f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,2 +1,8 @@ + +

Welcome to SvelteKit

Visit kit.svelte.dev to read the documentation

+ + From 9e61c6802625b58925d32e7b1ef58f4ff3c7445f Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Wed, 27 Sep 2023 14:09:56 +0200 Subject: [PATCH 02/73] moveable actual svelte components Co-authored-by: Albert Hald --- .../components/svg-view/DraggableSVG.svelte | 35 ++++++++ src/lib/components/svg-view/location.svelte | 84 ++++--------------- src/lib/components/svg-view/svg-view.svelte | 21 ++--- 3 files changed, 57 insertions(+), 83 deletions(-) create mode 100644 src/lib/components/svg-view/DraggableSVG.svelte diff --git a/src/lib/components/svg-view/DraggableSVG.svelte b/src/lib/components/svg-view/DraggableSVG.svelte new file mode 100644 index 00000000..5b4b66e3 --- /dev/null +++ b/src/lib/components/svg-view/DraggableSVG.svelte @@ -0,0 +1,35 @@ + + + + + + + diff --git a/src/lib/components/svg-view/location.svelte b/src/lib/components/svg-view/location.svelte index cb39c7e5..ab850408 100644 --- a/src/lib/components/svg-view/location.svelte +++ b/src/lib/components/svg-view/location.svelte @@ -1,77 +1,27 @@ - + + + + + {locationID} + + - export function draw(){ - const circleGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g'); - - // Set circle attributes - const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); - circle.setAttribute('cx', x.toString()); - circle.setAttribute('cy', y.toString()); - circle.setAttribute('r', '20'); - circle.setAttribute('fill', color); - - const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); - text.textContent = name; - text.setAttribute('text-anchor', 'middle'); - text.setAttribute('x', x.toString()); - text.setAttribute('y', (y + 40).toString()); - - //Draggable - circle.setAttribute('draggable', 'true'); - - // Add event listeners for dragging - let offsetX = 0; - let offsetY = 0; - let isDragging = false; - - circle.addEventListener('mousedown', (event) => { - isDragging = true; - offsetX = event.clientX - parseFloat(circle.getAttribute('cx') || '0'); - offsetY = event.clientY - parseFloat(circle.getAttribute('cy') || '0'); - }); - - document.addEventListener('mousemove', (event) => { - if (!isDragging) return; - - const newCx = event.clientX - offsetX; - const newCy = event.clientY - offsetY; - circle.setAttribute('cx', newCx.toString()); - circle.setAttribute('cy', newCy.toString()); - // Update the 'N' text position to follow the circle - const text = circleGroup.querySelector('text'); - if (text) { - text.setAttribute('x', newCx.toString()); - text.setAttribute('y', (newCy + 40).toString()); // Adjust the 'N' position below the circle - } - - }); - document.addEventListener('mouseup', () => { - isDragging = false; - }); - - - circleGroup.append(text); - circleGroup.append(circle); - location.append(circleGroup); - } - - diff --git a/src/lib/components/svg-view/svg-view.svelte b/src/lib/components/svg-view/svg-view.svelte index fe41cdb4..beb6d1cd 100644 --- a/src/lib/components/svg-view/svg-view.svelte +++ b/src/lib/components/svg-view/svg-view.svelte @@ -4,7 +4,6 @@ const Locations: Record = {}; - onMount(() => { Locations["1"] = new Location({ @@ -12,8 +11,6 @@ props: { x: 100, y: 100, - color: "gray", - name: "Developer", locationID: "1" } }); @@ -23,22 +20,15 @@ props: { x: 150, y: 100, - color: "green", - name: "Developer", locationID: "2" } }); - - Locations["1"].draw(); - Locations["2"].draw(); }); - export function draw() {} - - export function move(id: string, x: number, y: number) { - Locations[id].x = x; - Locations[id].y = y; - Locations[id].draw(); + export function move(id: string) { + console.log(Locations[id].x); + Locations[id].x += 10; + Locations[id].y += 10; } @@ -47,7 +37,6 @@ - - + From c8ff5b9e9dcc9112b4b175ef21dfe755eaf2f25e Mon Sep 17 00:00:00 2001 From: AlbertHald <43075950+AlbertHald@users.noreply.github.com> Date: Wed, 27 Sep 2023 14:23:31 +0200 Subject: [PATCH 03/73] accessor added Co-authored-by: Arnar Freyr --- src/lib/components/svg-view/location.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/svg-view/location.svelte b/src/lib/components/svg-view/location.svelte index ab850408..9c3d70cb 100644 --- a/src/lib/components/svg-view/location.svelte +++ b/src/lib/components/svg-view/location.svelte @@ -1,4 +1,4 @@ - + + + diff --git a/src/lib/components/svg-view/location.svelte b/src/lib/components/svg-view/Node.svelte similarity index 80% rename from src/lib/components/svg-view/location.svelte rename to src/lib/components/svg-view/Node.svelte index 9c3d70cb..76db7510 100644 --- a/src/lib/components/svg-view/location.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -1,4 +1,4 @@ - +

Welcome to SvelteKit

From 7f25dd6a5ffbe230c9644bf79a2937a57bd25385 Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Thu, 28 Sep 2023 11:09:52 +0200 Subject: [PATCH 05/73] cahnge --- src/lib/components/svg-view/Location.svelte | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/lib/components/svg-view/Location.svelte b/src/lib/components/svg-view/Location.svelte index e69de29b..2e74420f 100644 --- a/src/lib/components/svg-view/Location.svelte +++ b/src/lib/components/svg-view/Location.svelte @@ -0,0 +1,16 @@ + + + + + From 44fc6d62fcaa6e7aa7f7caecf08f93ab19c26431 Mon Sep 17 00:00:00 2001 From: AlbertHald <43075950+AlbertHald@users.noreply.github.com> Date: Thu, 28 Sep 2023 11:13:50 +0200 Subject: [PATCH 06/73] Added rad Co-authored-by: Arnar Freyr --- src/lib/components/svg-view/Location.svelte | 5 +++-- src/lib/components/svg-view/Nail.svelte | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/lib/components/svg-view/Location.svelte b/src/lib/components/svg-view/Location.svelte index 2e74420f..22275cc3 100644 --- a/src/lib/components/svg-view/Location.svelte +++ b/src/lib/components/svg-view/Location.svelte @@ -2,9 +2,10 @@ - + diff --git a/src/lib/components/svg-view/Nail.svelte b/src/lib/components/svg-view/Nail.svelte index 2e74420f..7141c4ce 100644 --- a/src/lib/components/svg-view/Nail.svelte +++ b/src/lib/components/svg-view/Nail.svelte @@ -2,9 +2,10 @@ - + From ab1757f3f0883c2cb7a2fec6e96da86dfbd562b9 Mon Sep 17 00:00:00 2001 From: AlbertHald <43075950+AlbertHald@users.noreply.github.com> Date: Thu, 5 Oct 2023 09:24:20 +0200 Subject: [PATCH 07/73] Implemented point with svg Co-Authored-By: Arnar Freyr --- src/lib/components/svg-view/Location.svelte | 14 +++++++------- src/lib/components/svg-view/Nail.svelte | 10 +++++----- src/lib/components/svg-view/Node.svelte | 15 +++++++-------- src/lib/components/svg-view/SvgView.svelte | 11 +++++------ src/routes/+page.svelte | 7 +++---- 5 files changed, 27 insertions(+), 30 deletions(-) diff --git a/src/lib/components/svg-view/Location.svelte b/src/lib/components/svg-view/Location.svelte index 22275cc3..20a7531a 100644 --- a/src/lib/components/svg-view/Location.svelte +++ b/src/lib/components/svg-view/Location.svelte @@ -1,17 +1,17 @@ - + diff --git a/src/lib/components/svg-view/Nail.svelte b/src/lib/components/svg-view/Nail.svelte index 7141c4ce..183ffd76 100644 --- a/src/lib/components/svg-view/Nail.svelte +++ b/src/lib/components/svg-view/Nail.svelte @@ -1,17 +1,17 @@ - + diff --git a/src/lib/components/svg-view/Node.svelte b/src/lib/components/svg-view/Node.svelte index 76db7510..6f89c4e3 100644 --- a/src/lib/components/svg-view/Node.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -2,27 +2,26 @@ - - {locationID} + + {locationID} diff --git a/src/lib/components/svg-view/SvgView.svelte b/src/lib/components/svg-view/SvgView.svelte index 32b1939e..d2f2c99e 100644 --- a/src/lib/components/svg-view/SvgView.svelte +++ b/src/lib/components/svg-view/SvgView.svelte @@ -1,6 +1,7 @@ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2b6d8470..2d251e07 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,4 +1,6 @@ @@ -32,4 +30,3 @@ - diff --git a/src/lib/components/svg-view/Edge.svelte b/src/lib/components/svg-view/Edge.svelte new file mode 100644 index 00000000..127d23e7 --- /dev/null +++ b/src/lib/components/svg-view/Edge.svelte @@ -0,0 +1,7 @@ + diff --git a/src/lib/components/svg-view/Node.svelte b/src/lib/components/svg-view/Node.svelte index 6f89c4e3..300d3503 100644 --- a/src/lib/components/svg-view/Node.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -15,6 +15,7 @@ function updatePos(_x: number, _y:number){ position.x += _x; position.y += _y; + console.log(position); } diff --git a/src/lib/components/svg-view/SvgView.svelte b/src/lib/components/svg-view/SvgView.svelte index d2f2c99e..6bc0a16a 100644 --- a/src/lib/components/svg-view/SvgView.svelte +++ b/src/lib/components/svg-view/SvgView.svelte @@ -1,10 +1,10 @@ - - diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2d251e07..5f90cd0f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,5 @@ - - + + - diff --git a/src/lib/components/svg-view/Location.svelte b/src/lib/components/svg-view/Location.svelte index 20a7531a..00ef287c 100644 --- a/src/lib/components/svg-view/Location.svelte +++ b/src/lib/components/svg-view/Location.svelte @@ -1,17 +1,15 @@ - + - + diff --git a/src/lib/components/svg-view/Nail.svelte b/src/lib/components/svg-view/Nail.svelte index 183ffd76..8d0f141a 100644 --- a/src/lib/components/svg-view/Nail.svelte +++ b/src/lib/components/svg-view/Nail.svelte @@ -1,17 +1,15 @@ - + - + diff --git a/src/lib/components/svg-view/Node.svelte b/src/lib/components/svg-view/Node.svelte index 300d3503..5c71f34b 100644 --- a/src/lib/components/svg-view/Node.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -1,29 +1,27 @@ - - - - - - {locationID} - + + + + {locationID} + - - diff --git a/src/lib/components/svg-view/SvgView.svelte b/src/lib/components/svg-view/SvgView.svelte index 6bc0a16a..05774153 100644 --- a/src/lib/components/svg-view/SvgView.svelte +++ b/src/lib/components/svg-view/SvgView.svelte @@ -4,42 +4,38 @@ const Locations: Record = {}; - - onMount(() => { - Locations["1"] = new Location({ - target: document.getElementById("svg-container")?? document.body, + Locations['1'] = new Location({ + target: document.getElementById('svg-container') ?? document.body, props: { - position: {x: 100, y: 100}, - locationID: "1" + x: 100, + y: 100, + locationID: '1' } }); - Locations["2"] = new Location({ - target: document.getElementById("svg-container")?? document.body, + Locations['2'] = new Location({ + target: document.getElementById('svg-container') ?? document.body, props: { - position: {x: 100, y: 150}, - locationID: "2" + x: 100, + y: 150, + locationID: '2' } }); }); - /** * Function for moving a Location when the button "draw" is clicked * @param {string} id */ export function move(id: string): void { - console.log(Locations[id].position.x); - Locations[id].position.x += 10; - Locations[id].position.y += 10; - Locations[id].position = Locations[id].position; + console.log(Locations[id].x); + Locations[id].x += 10; + Locations[id].y += 10; } - - - - + + From 9f8dcc2273836ecba718bb3976094adbe5147574 Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Thu, 5 Oct 2023 13:30:38 +0200 Subject: [PATCH 10/73] bind .......... --- src/lib/components/svg-view/Location.svelte | 2 +- src/lib/components/svg-view/Node.svelte | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/components/svg-view/Location.svelte b/src/lib/components/svg-view/Location.svelte index 00ef287c..aeb42b06 100644 --- a/src/lib/components/svg-view/Location.svelte +++ b/src/lib/components/svg-view/Location.svelte @@ -12,4 +12,4 @@ $: locationID; - + diff --git a/src/lib/components/svg-view/Node.svelte b/src/lib/components/svg-view/Node.svelte index 5c71f34b..d9f40b7b 100644 --- a/src/lib/components/svg-view/Node.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -1,13 +1,13 @@ diff --git a/src/lib/components/svg-view/Nail.svelte b/src/lib/components/svg-view/Nail.svelte index 8d0f141a..b3c7769c 100644 --- a/src/lib/components/svg-view/Nail.svelte +++ b/src/lib/components/svg-view/Nail.svelte @@ -6,10 +6,6 @@ export let x: number; export let y: number; export let locationID: string; - - $: x; - $: y; - $: locationID; diff --git a/src/lib/components/svg-view/Node.svelte b/src/lib/components/svg-view/Node.svelte index d9f40b7b..7e0743b9 100644 --- a/src/lib/components/svg-view/Node.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -1,19 +1,12 @@ diff --git a/src/lib/components/svg-view/Edge.svelte b/src/lib/components/svg-view/Edge.svelte index dcbc2648..26f67d0a 100644 --- a/src/lib/components/svg-view/Edge.svelte +++ b/src/lib/components/svg-view/Edge.svelte @@ -1,7 +1,7 @@
+ + +
Date: Mon, 9 Oct 2023 13:31:21 +0200 Subject: [PATCH 14/73] Remove colors used for seeing borders, fix height to stop scroll on svgview --- src/lib/components/svg-view/SvgView.svelte | 2 +- src/routes/+page.svelte | 30 ++++++++-------------- 2 files changed, 12 insertions(+), 20 deletions(-) diff --git a/src/lib/components/svg-view/SvgView.svelte b/src/lib/components/svg-view/SvgView.svelte index 050b92bd..cc2932c0 100644 --- a/src/lib/components/svg-view/SvgView.svelte +++ b/src/lib/components/svg-view/SvgView.svelte @@ -4,7 +4,7 @@ import Edge from "./Edge.svelte"; - + {#each $activeModel.edges as edge} - +
- +

Left

@@ -75,7 +75,7 @@ />
- +
@@ -90,7 +90,7 @@ />
- +

Right

@@ -101,6 +101,7 @@ nav { height: 5em; background-color: slategrey; + flex-shrink: 0; } #main-nav { @@ -112,20 +113,6 @@ height: 100%; } - .inner-nav1, - .inner-nav3 { - background-color: slategrey; - } - - .inner-nav2 { - background-color: lightslategrey; - } - - .sidePanel { - background-color: whitesmoke; - flex-basis: 10em; - } - .resizer { background-color: black; flex-basis: 0.3em; @@ -133,10 +120,15 @@ } .canvas { - background-color: whitesmoke; flex-grow: 1; } + .canvas, + .sidePanel { + display: flex; + flex-direction: column; + } + footer { height: 2.5em; background-color: slategrey; From 685ed695188cc3ec626ec76712b88dce0a0e4b46 Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Mon, 9 Oct 2023 13:32:03 +0200 Subject: [PATCH 15/73] made lines reactive --- src/lib/components/svg-view/Edge.svelte | 26 +++++++++++++++---------- src/lib/components/svg-view/Node.svelte | 8 ++++---- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/src/lib/components/svg-view/Edge.svelte b/src/lib/components/svg-view/Edge.svelte index 26f67d0a..c98da258 100644 --- a/src/lib/components/svg-view/Edge.svelte +++ b/src/lib/components/svg-view/Edge.svelte @@ -1,5 +1,5 @@ -{#each nails as nail} - -{/each} - {#each lines as line} {/each} + +{#each nails as nail} + +{/each} diff --git a/src/lib/components/svg-view/Node.svelte b/src/lib/components/svg-view/Node.svelte index 9520aae3..54869ecf 100644 --- a/src/lib/components/svg-view/Node.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -8,11 +8,11 @@ export let radius: number; function updatePos(_x: number, _y: number) { - position.x += _x; - position.y += _y; + $activeModel.locations[locationID].position.x += _x; + $activeModel.locations[locationID].position.y += _y; - // Update the position of the location in the active model - $activeModel.locations[locationID].position = position; + // Update the position of the active model + activeModel.set($activeModel); } From 211868f08abaa9f8e4f3eca4a670d1398ba0a1ea Mon Sep 17 00:00:00 2001 From: Skrome Date: Mon, 9 Oct 2023 14:02:12 +0200 Subject: [PATCH 16/73] SVGContainer no longer gets pushed by side panels --- src/lib/components/svg-view/SvgView.svelte | 2 +- src/routes/+page.svelte | 14 +++++++++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/lib/components/svg-view/SvgView.svelte b/src/lib/components/svg-view/SvgView.svelte index cc2932c0..0abd9aee 100644 --- a/src/lib/components/svg-view/SvgView.svelte +++ b/src/lib/components/svg-view/SvgView.svelte @@ -4,7 +4,7 @@ import Edge from "./Edge.svelte"; - + {#each $activeModel.edges as edge}
- +
+ +
Date: Mon, 9 Oct 2023 14:02:47 +0200 Subject: [PATCH 17/73] made nails reactive --- src/lib/components/svg-view/Edge.svelte | 2 +- src/lib/components/svg-view/Nail.svelte | 2 +- src/lib/components/svg-view/Node.svelte | 13 +++++++------ src/lib/globalState/activeModel.ts | 6 +++--- src/lib/interfaces/iNail.ts | 6 ++++-- 5 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/lib/components/svg-view/Edge.svelte b/src/lib/components/svg-view/Edge.svelte index c98da258..9854c0a0 100644 --- a/src/lib/components/svg-view/Edge.svelte +++ b/src/lib/components/svg-view/Edge.svelte @@ -42,5 +42,5 @@ {/each} {#each nails as nail} - + {/each} diff --git a/src/lib/components/svg-view/Nail.svelte b/src/lib/components/svg-view/Nail.svelte index abb4e584..26bfe1d7 100644 --- a/src/lib/components/svg-view/Nail.svelte +++ b/src/lib/components/svg-view/Nail.svelte @@ -5,7 +5,7 @@ import Node from "./Node.svelte"; export let position: Point; - export let locationID: string; + export let locationID: string | null; diff --git a/src/lib/components/svg-view/Node.svelte b/src/lib/components/svg-view/Node.svelte index 54869ecf..eccd806c 100644 --- a/src/lib/components/svg-view/Node.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -4,15 +4,16 @@ import DraggableSVG from "./DraggableSVG.svelte"; export let position: Point; - export let locationID: string; + export let locationID: string | null; export let radius: number; function updatePos(_x: number, _y: number) { - $activeModel.locations[locationID].position.x += _x; - $activeModel.locations[locationID].position.y += _y; + position.x += _x; + position.y += _y; - // Update the position of the active model - activeModel.set($activeModel); + // Update the position of the location in the active model + if (locationID) $activeModel.locations[locationID].position = position; + else activeModel.set($activeModel); } @@ -26,7 +27,7 @@ role="none" /> {locationID}{locationID ?? "Nail"} diff --git a/src/lib/globalState/activeModel.ts b/src/lib/globalState/activeModel.ts index 9a057ff1..3af56025 100644 --- a/src/lib/globalState/activeModel.ts +++ b/src/lib/globalState/activeModel.ts @@ -63,9 +63,9 @@ activeModel.set( "4": { color: "#0000ff", // Example color for location 4 id: "4", - invariant: new Invariant("c >= 10", { x: 700, y: 700 }), // Example invariant - nickname: new Nickname("nickname4", { x: 700, y: 700 }), // Example nickname - position: { x: 700, y: 700 }, // Example position + invariant: new Invariant("c >= 10", { x: 700, y: 300 }), // Example invariant + nickname: new Nickname("nickname4", { x: 700, y: 300 }), // Example nickname + position: { x: 700, y: 300 }, // Example position type: LocationType.INITIAL, // Example location type urgency: Urgency.NORMAL, // Example urgency }, diff --git a/src/lib/interfaces/iNail.ts b/src/lib/interfaces/iNail.ts index 3b5077f4..415bc1d0 100644 --- a/src/lib/interfaces/iNail.ts +++ b/src/lib/interfaces/iNail.ts @@ -1,7 +1,9 @@ -import type { Property } from "$lib/classes/automaton/property"; -import type { Point } from "$lib/classes/draw/point"; +import type { Property } from "$lib/classes/automaton/Property"; +import type { Point } from "$lib/classes/draw/Point"; export interface iNail { + edgeId: string; + nailId: number; position: Point; property: Property; } From 32658de89577d0346a37ae455347d388e32f753b Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Mon, 9 Oct 2023 14:24:52 +0200 Subject: [PATCH 18/73] remove console log --- src/lib/components/svg-view/Edge.svelte | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/lib/components/svg-view/Edge.svelte b/src/lib/components/svg-view/Edge.svelte index 9854c0a0..27230b8e 100644 --- a/src/lib/components/svg-view/Edge.svelte +++ b/src/lib/components/svg-view/Edge.svelte @@ -15,10 +15,7 @@ targetPoint, ]; - console.log("Edge: ", sourcePoint, targetPoint); - // logic that calculates the lines from the source to the target - let lines: { from: Point; to: Point }[] = []; $: updateLines(points); function updateLines(_points: Point[]) { From 4eec104aec5fe1c7dae4e36c216fa57b98eff9d6 Mon Sep 17 00:00:00 2001 From: Skrome Date: Mon, 9 Oct 2023 14:26:05 +0200 Subject: [PATCH 19/73] Funny z-index stuff? --- src/lib/components/svg-view/SvgView.svelte | 9 ++++++++- src/routes/+page.svelte | 16 +++++++--------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/lib/components/svg-view/SvgView.svelte b/src/lib/components/svg-view/SvgView.svelte index 0abd9aee..7ccdd9d4 100644 --- a/src/lib/components/svg-view/SvgView.svelte +++ b/src/lib/components/svg-view/SvgView.svelte @@ -4,7 +4,7 @@ import Edge from "./Edge.svelte"; - + {#each $activeModel.edges as edge} {/each} + + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 1160cae6..d3884ee3 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -76,9 +76,7 @@
-
- -
+
Footer/Console diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index d3884ee3..4216560c 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -76,7 +76,9 @@
- +
+ +
Footer/Console diff --git a/src/lib/globalState/scaleStore.ts b/src/lib/globalState/scaleStore.ts deleted file mode 100644 index 9c16c561..00000000 --- a/src/lib/globalState/scaleStore.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { writable } from "svelte/store"; - -export const scale = writable(1); - -export function updateScale(newScale: number) { - scale.set(newScale); -} From 7e1ed882051a110ceddbfd66449da908adda7674 Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Thu, 12 Oct 2023 08:47:38 +0200 Subject: [PATCH 25/73] changed to text --- src/lib/components/svg-view/Edge.svelte | 2 +- src/lib/components/svg-view/Location.svelte | 11 ++++++++++- src/lib/components/svg-view/Nail.svelte | 4 ++-- src/lib/components/svg-view/Node.svelte | 4 ++-- src/lib/components/svg-view/SvgView.svelte | 6 +++++- src/lib/globalState/activeModel.ts | 5 ++++- src/lib/interfaces/iLocation.ts | 12 ++++++------ src/lib/interfaces/iNickname.ts | 13 +++++++++++++ 8 files changed, 43 insertions(+), 14 deletions(-) create mode 100644 src/lib/interfaces/iNickname.ts diff --git a/src/lib/components/svg-view/Edge.svelte b/src/lib/components/svg-view/Edge.svelte index 27230b8e..4b8ed653 100644 --- a/src/lib/components/svg-view/Edge.svelte +++ b/src/lib/components/svg-view/Edge.svelte @@ -39,5 +39,5 @@ {/each} {#each nails as nail} - + {/each} diff --git a/src/lib/components/svg-view/Location.svelte b/src/lib/components/svg-view/Location.svelte index dcb6be6e..643c3f25 100644 --- a/src/lib/components/svg-view/Location.svelte +++ b/src/lib/components/svg-view/Location.svelte @@ -5,9 +5,18 @@ import type { iLocation } from "$lib/interfaces/iLocation"; import type { Point } from "$lib/classes/draw"; import { activeModel } from "$lib/globalState/activeModel"; + import { Nickname } from "$lib/classes/automaton"; + import type { iNickname } from "$lib/interfaces/iNickname"; + import Label from "./Label.svelte"; export let position: Point; export let locationID: string; + export let nickname: iNickname; - +
+
+ {#if currentTab == Tabs.Frontend} + {#each frontEndErrors as error} + + {/each} + {:else if currentTab == Tabs.Backend} + {#each backEndErrors as error} + + {/each} + {/if} +
+
+ + diff --git a/src/lib/components/console/ConsoleLine.svelte b/src/lib/components/console/ConsoleLine.svelte new file mode 100644 index 00000000..800dac91 --- /dev/null +++ b/src/lib/components/console/ConsoleLine.svelte @@ -0,0 +1,35 @@ + + +
+

>

+

{componentText}

+
+ + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index f989a4d1..96f328a3 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -29,6 +29,6 @@ padding: 0; height: 100vh; display: flex; - flex-flow: column; + flex-direction: column; } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 8e421ce7..665bfc45 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,4 +1,5 @@ -
-
+
+
{#if currentlyCollapsed} - + {:else} - + {/if} @@ -173,7 +215,7 @@ Backend
-
+
{#if currentTab == Tabs.Frontend} {#each frontEndErrors as error} @@ -188,16 +230,19 @@ diff --git a/src/lib/components/svg-view/Node.svelte b/src/lib/components/svg-view/Node.svelte index 468a6dbb..704d7674 100644 --- a/src/lib/components/svg-view/Node.svelte +++ b/src/lib/components/svg-view/Node.svelte @@ -16,7 +16,7 @@ r={radius} fill="gray" role="none" - id={"node" + text} + id="node-{text}" /> { - -}) +test.beforeEach(async ({ page }) => { + await page.goto("/"); + await page.click("#start-new-project"); +}); test("drag and drop a location to a new position", async ({ page }) => { - await page.goto("/"); - const svg = page.locator("#node1"); + const svg = page.locator("#node-1"); // Get the origiganl position of the element const svgY = parseInt((await svg.getAttribute("cy")) ?? "1"); @@ -35,9 +34,8 @@ test("drag and drop a location to a new position", async ({ page }) => { }); test("drag and drop a nail", async ({ page }) => { - await page.goto("/"); - const svg = page.locator("#node\\!"); + const svg = page.locator("#node-\\!"); // Get the origiganl position of the element const svgY = parseInt((await svg.getAttribute("cy")) ?? "1"); @@ -63,13 +61,11 @@ test("drag and drop a nail", async ({ page }) => { }); test("see if the svg line moves with the nodes", async ({ page }) => { - await page.goto("/"); - const location = page.locator("#node3"); - const nail = page.locator("#node\\!"); + const location = page.locator("#node-3"); // get the line location between the location and the nail - const line = page.locator("edgeINPUT1"); + const line = page.locator("#edge-OUTPUT-1"); // get the original location of the line const oldSourceLocation: iPoint = { @@ -97,8 +93,7 @@ test("see if the svg line moves with the nodes", async ({ page }) => { }; // check if the line has moved (target is the location) - expect(newSourceLocation).not.toBe(oldSourceLocation); - expect(newTargetLocation).not.toBe(oldTargetLocation); - + expect(newSourceLocation).toEqual(oldSourceLocation); + expect(newTargetLocation).not.toEqual(oldTargetLocation); }); From 51cffc4a04538ddd91add6e8d448f8983f03d1af Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Thu, 26 Oct 2023 10:17:59 +0200 Subject: [PATCH 67/73] format --- tests/svgViewTests.test.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/tests/svgViewTests.test.ts b/tests/svgViewTests.test.ts index a747fd41..b4d5e3e1 100644 --- a/tests/svgViewTests.test.ts +++ b/tests/svgViewTests.test.ts @@ -7,7 +7,6 @@ test.beforeEach(async ({ page }) => { }); test("drag and drop a location to a new position", async ({ page }) => { - const svg = page.locator("#node-1"); // Get the origiganl position of the element @@ -34,7 +33,6 @@ test("drag and drop a location to a new position", async ({ page }) => { }); test("drag and drop a nail", async ({ page }) => { - const svg = page.locator("#node-\\!"); // Get the origiganl position of the element @@ -61,32 +59,34 @@ test("drag and drop a nail", async ({ page }) => { }); test("see if the svg line moves with the nodes", async ({ page }) => { - const location = page.locator("#node-3"); // get the line location between the location and the nail const line = page.locator("#edge-OUTPUT-1"); - + // get the original location of the line const oldSourceLocation: iPoint = { x: parseInt((await line.getAttribute("x1")) ?? "1"), y: parseInt((await line.getAttribute("y1")) ?? "1"), }; - + const oldTargetLocation: iPoint = { x: parseInt((await line.getAttribute("x2")) ?? "1"), y: parseInt((await line.getAttribute("y2")) ?? "1"), }; // move the location by an offset of 80 - await location.dragTo(location, { targetPosition: { x: 20, y: 100 }, force: true }); - + await location.dragTo(location, { + targetPosition: { x: 20, y: 100 }, + force: true, + }); + // get the new location of the line const newSourceLocation: iPoint = { x: parseInt((await line.getAttribute("x1")) ?? "1"), y: parseInt((await line.getAttribute("y1")) ?? "1"), }; - + const newTargetLocation: iPoint = { x: parseInt((await line.getAttribute("x2")) ?? "1"), y: parseInt((await line.getAttribute("y2")) ?? "1"), @@ -95,5 +95,4 @@ test("see if the svg line moves with the nodes", async ({ page }) => { // check if the line has moved (target is the location) expect(newSourceLocation).toEqual(oldSourceLocation); expect(newTargetLocation).not.toEqual(oldTargetLocation); - }); From c19a21de6bc5857bc45562c6388247332c316db1 Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Thu, 26 Oct 2023 10:19:39 +0200 Subject: [PATCH 68/73] remove unused --- src/routes/+page.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 35fa2e87..149f4db3 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,8 +3,6 @@ import StartScreen from "$lib/components/startScreen/StartScreen.svelte"; import SvgView from "$lib/components/svg-view/SvgView.svelte"; import Console from "$lib/components/console/Console.svelte"; - import DropDownMenu from "$lib/components/samplesImplementations/DropDownMenu.svelte"; - import LocationsWithContextMenu from "$lib/components/samplesImplementations/LocationsWithContextMenu.svelte"; import Components from "$lib/components/project/component/Components.svelte"; import Systems from "$lib/components/project/system/Systems.svelte"; import ProjectNav from "$lib/components/project/ProjectNav.svelte"; From f38dc69f36886d004e35d2658d375b5714bfcd75 Mon Sep 17 00:00:00 2001 From: TSKsmiley Date: Thu, 26 Oct 2023 10:31:56 +0200 Subject: [PATCH 69/73] i cancel you @atjn Co-authored-by: @AlbertHald --- src/lib/components/svg-view/DraggableSVG.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/components/svg-view/DraggableSVG.svelte b/src/lib/components/svg-view/DraggableSVG.svelte index 74f66891..0f1af836 100644 --- a/src/lib/components/svg-view/DraggableSVG.svelte +++ b/src/lib/components/svg-view/DraggableSVG.svelte @@ -14,6 +14,7 @@ signal = controller.signal; window.addEventListener("pointermove", onPointerMove, { signal }); window.addEventListener("pointerup", onPointerUp, { signal }); + window.addEventListener("pointercancel", onPointerUp, { signal }); } //Updates the position of the svg From 18a31e12a802accc2c405ee1027e1674566de407 Mon Sep 17 00:00:00 2001 From: Anton Date: Thu, 26 Oct 2023 11:03:18 +0200 Subject: [PATCH 70/73] Make netlify rebuild --- src/lib/globalState/activeModel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/globalState/activeModel.ts b/src/lib/globalState/activeModel.ts index 7e56a72f..0b897af9 100644 --- a/src/lib/globalState/activeModel.ts +++ b/src/lib/globalState/activeModel.ts @@ -94,7 +94,7 @@ activeModel.set( sync: "", update: "", }, - // Add more edge objects here for additional connections + // Add more edge objects here for additional connection { guard: "c < 8", id: "2", From d5b42667680f0fa4e4b89e9525bf377fc409d4f4 Mon Sep 17 00:00:00 2001 From: Anton Date: Thu, 26 Oct 2023 11:03:33 +0200 Subject: [PATCH 71/73] Make netlify rebuild --- src/lib/globalState/activeModel.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/globalState/activeModel.ts b/src/lib/globalState/activeModel.ts index 0b897af9..7e56a72f 100644 --- a/src/lib/globalState/activeModel.ts +++ b/src/lib/globalState/activeModel.ts @@ -94,7 +94,7 @@ activeModel.set( sync: "", update: "", }, - // Add more edge objects here for additional connection + // Add more edge objects here for additional connections { guard: "c < 8", id: "2", From 8bd0e08a616023b9eec442fabfe04b20f0734eda Mon Sep 17 00:00:00 2001 From: BaBrixx Date: Thu, 26 Oct 2023 11:23:15 +0200 Subject: [PATCH 72/73] Set up colors for the sidepanels --- src/lib/GlobalCssProperties.json | 81 +++++++++++++++++++ src/lib/components/console/Console.svelte | 2 +- .../project/component/Component.svelte | 4 +- .../components/project/system/System.svelte | 5 +- src/lib/components/query/Queries.svelte | 8 +- src/lib/components/query/Query.svelte | 23 +++--- src/lib/components/query/QueryNav.svelte | 6 +- src/routes/+page.svelte | 5 +- 8 files changed, 110 insertions(+), 24 deletions(-) diff --git a/src/lib/GlobalCssProperties.json b/src/lib/GlobalCssProperties.json index bfb51ab8..5511ae82 100644 --- a/src/lib/GlobalCssProperties.json +++ b/src/lib/GlobalCssProperties.json @@ -29,6 +29,33 @@ "valueTwo": 0.34901960784, "valueThree": 0.38823529411 } + }, + { + "attributeName": "--query-success-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.31372549019, + "valueTwo": 0.54901960784, + "valueThree": 0.27450980392 + } + }, + { + "attributeName": "--query-warning-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.98431372549, + "valueTwo": 0.75294117647, + "valueThree": 0.17647058823 + } + }, + { + "attributeName": "--query-error-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.82745098039, + "valueTwo": 0.18431372549, + "valueThree": 0.18431372549 + } } ], "border": [ @@ -145,6 +172,33 @@ "valueTwo": 0, "valueThree": 0 } + }, + { + "attributeName": "--sidebar-element-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.93333333333, + "valueTwo": 0.93333333333, + "valueThree": 0.93333333333 + } + }, + { + "attributeName": "--sidebar-element-hover-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.81176470588, + "valueTwo": 0.84705882352, + "valueThree": 0.86274509803 + } + }, + { + "attributeName": "--queries-input-background-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 1, + "valueTwo": 1, + "valueThree": 1 + } } ] }, @@ -231,6 +285,33 @@ "valueTwo": 1, "valueThree": 1 } + }, + { + "attributeName": "--sidebar-element-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.19215686274, + "valueTwo": 0.21176470588, + "valueThree": 0.23529411764 + } + }, + { + "attributeName": "--sidebar-element-hover-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.12215686274, + "valueTwo": 0.23176470588, + "valueThree": 0.25529411764 + } + }, + { + "attributeName": "--queries-input-background-color", + "color": { + "colorGamut": "display-p3", + "valueOne": 0.05490196078, + "valueTwo": 0.06666666666, + "valueThree": 0.09019607843 + } } ] } diff --git a/src/lib/components/console/Console.svelte b/src/lib/components/console/Console.svelte index a3747fd9..c83dc85a 100644 --- a/src/lib/components/console/Console.svelte +++ b/src/lib/components/console/Console.svelte @@ -230,7 +230,7 @@ } .collapsible:hover { - background-color: slategrey; + background-color: var(--console-selectedtab-color); } .outerOverflow { diff --git a/src/lib/components/project/component/Component.svelte b/src/lib/components/project/component/Component.svelte index 5952f28b..b281cca2 100644 --- a/src/lib/components/project/component/Component.svelte +++ b/src/lib/components/project/component/Component.svelte @@ -28,7 +28,7 @@ width: 100%; } .component { - background-color: #eceff1; + background-color: var(--sidebar-element-color); cursor: pointer; display: flex; justify-content: flex-start; @@ -38,7 +38,7 @@ transition: background-color 200ms; } .component:hover { - background-color: #cfd8dc; + background-color: var(--sidebar-element-hover-color); } .icon { display: flex; diff --git a/src/lib/components/project/system/System.svelte b/src/lib/components/project/system/System.svelte index 080a6ff8..d7a3e61b 100644 --- a/src/lib/components/project/system/System.svelte +++ b/src/lib/components/project/system/System.svelte @@ -28,18 +28,17 @@ width: 100%; } .system { - background-color: #eceff1; + background-color: var(--sidebar-element-color); cursor: pointer; display: flex; justify-content: flex-start; align-items: center; padding: 10px; border-bottom: 1px solid black; - transition: background-color 200ms; height: 60px; } .system:hover { - background-color: #cfd8dc; + background-color: var(--sidebar-element-hover-color); } .icon { display: flex; diff --git a/src/lib/components/query/Queries.svelte b/src/lib/components/query/Queries.svelte index d0cf1d55..6691a123 100644 --- a/src/lib/components/query/Queries.svelte +++ b/src/lib/components/query/Queries.svelte @@ -6,7 +6,7 @@ name: "Admin1", type: "Spec", server: "Reveaal", - color: "limegreen", + color: "var(--query-success-color)", }, { name: "Admin2", @@ -24,19 +24,19 @@ name: "Admin1", type: "Spec", server: "Reveaal", - color: "red", + color: "var(--query-error-color)", }, { name: "Admin1", type: "Spec", server: "Reveaal", - color: "limegreen", + color: "var(--query-success-color)", }, { name: "Admin1", type: "Spec", server: "Reveaal", - color: "yellow", + color: "var(--query-warning-color)", }, ]; diff --git a/src/lib/components/query/Query.svelte b/src/lib/components/query/Query.svelte index 17818f8c..67f1c5d5 100644 --- a/src/lib/components/query/Query.svelte +++ b/src/lib/components/query/Query.svelte @@ -1,6 +1,6 @@