Skip to content

SVG components #145

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TSKsmiley wants to merge 12 commits into
base: main
Choose a base branch
from
Open

SVG components #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
3531342
Refactor SVG components and helper functions
TSKsmiley Nov 8, 2023
c5223e6
Refactor component and fix typo in LocationType
TSKsmiley Nov 9, 2023
be4267f
merge
TSKsmiley Nov 30, 2023
a2aff82
progress
TSKsmiley Nov 30, 2023
e30d38d
added todo
TSKsmiley Dec 4, 2023
ae8e3c7
Merge branch 'main' into 97-svgdrawing-for-components
TSKsmiley Dec 4, 2023
ea75484
lint
TSKsmiley Dec 4, 2023
7492111
removed old files
TSKsmiley Dec 4, 2023
31568c7
Merge branch 'main' into 97-svgdrawing-for-components
NybyDK Dec 4, 2023
084a79b
Merge branch 'main' into 97-svgdrawing-for-components
TSKsmiley Dec 4, 2023
a0cbc79
fix darkmode
TSKsmiley Dec 4, 2023
145b6f5
Merge branch 'main' into 97-svgdrawing-for-components
TSKsmiley Dec 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/lib/components/startScreen/StartScreen.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
click={startNewProject}
icon={Add}
id={`start-new-project`}
color="var(--sidebar-text-color)"
color="var(--text-color)"
justifyContent="center"
><p style="font-size: 1.7em">
New Blank Project
Expand All @@ -51,7 +51,7 @@
await projectHandler.openExampleProject(
exampleLoader,
);
}}>{exampleName}</SvgButton
}}><p>{exampleName}</p></SvgButton
>
{/each}
</div>
Expand All @@ -64,7 +64,7 @@
}}
icon={File_open}
id={`open-project`}
color="var(--sidebar-text-color)"
color="var(--text-color)"
justifyContent="center"
><p style="font-size: 1.7em">Open A Project</p></SvgButton
>
Expand All @@ -76,7 +76,7 @@
<SvgButton
icon={File_open}
id={`open-project`}
color="var(--sidebar-text-color)"
color="var(--text-color)"
justifyContent="center"
click={async () => {
await projectHandler.openRecentProject(
Expand Down Expand Up @@ -129,4 +129,8 @@
width: 50%;
margin: 5%;
}

p {
color: var(--text-color);
}
</style>
62 changes: 62 additions & 0 deletions src/lib/components/svgView/Component.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<script lang="ts">
import type { iPoint } from "$lib/interfaces/iPoint";
import DraggableSvg from "./helpers/DraggableSVG.svelte";

export let position: iPoint = { x: 10, y: 10 };

// TODO: these should not be hard coded they should scale with the things inside the component
let width = 800;
let height = 1000;
const cutOff = 100;
</script>

<g transform="translate({position.x}, {position.y})">
<path
class="background stroke"
d="M 0 {cutOff} L {cutOff} 0 L {width} 0 L {width} {height} L 0 {height} Z"
/>
<DraggableSvg bind:position>
<path
class="bar stroke"
d="M {cutOff / 2} {cutOff /
2} L {cutOff} 0 L {width} 0 L {width} {cutOff / 2} Z"
/>
<text x={cutOff} y={cutOff / 3} font-size="2rem">Hello</text>
Copy link
Collaborator

@atjn atjn Dec 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't merge "hello" into main

<g
on:pointerup={() => {
alert("Initiate Text Editor");
}}
>
<rect
x={width - 50}
y="0"
width={cutOff / 2}
height={cutOff / 2}
fill="pink"
class="stroke"
></rect>
<text x={width - 44} y="34" fill="white" font-size="28px"
>&lt; &gt;</text
>
Copy link
Collaborator

@atjn atjn Dec 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text color should change based on the background, and the text should not overflow its container.

image

</g>
<slot />
</DraggableSvg>
</g>

<style>
.background {
fill: blue;
fill-opacity: 0.5;
}

.bar {
fill: blue;
}

.stroke {
stroke: black;
stroke-width: 8;
stroke-linejoin: round;
stroke-linecap: round;
}
</style>
2 changes: 1 addition & 1 deletion src/lib/components/svgView/Label.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import DraggableSvg from "./DraggableSVG.svelte";
import DraggableSvg from "./helpers/DraggableSVG.svelte";
import type { iPoint } from "$lib/interfaces/iPoint";

export let parentPosition: iPoint;
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/svgView/Location.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@

<script lang="ts">
import type { iPoint } from "$lib/interfaces/iPoint";
import type { Nickname } from "$lib/classes/automaton";
import type { LocationId } from "$lib/classes/automaton/LocationId";
import type { iNickname } from "$lib/interfaces/iNickname";
import { contextMenu } from "$lib/components/contextMenu/contextMenu";
import LocationMenu from "$lib/components/contextMenu/contentTypes/locationMenu/LocationMenu.svelte";
import Label from "./Label.svelte";
import Node from "./Node.svelte";

export let position: iPoint;
export let locationId: LocationId;
export let nickname: iNickname | undefined;
export let nickname: Nickname | undefined;

let group: SVGElement;
let menuProps = {
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/svgView/Nail.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
export let text: string;

let radius: number;
// having this reactive fixes some bugs where some nails were small
$: radius = text == "" ? 5 : 10;
</script>

Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/svgView/Node.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import type { iPoint } from "$lib/interfaces/iPoint";
import DraggableSVG from "./DraggableSVG.svelte";
import DraggableSVG from "./helpers/DraggableSVG.svelte";

export let position: iPoint;
export let text: string;
Expand Down
49 changes: 27 additions & 22 deletions src/lib/components/svgView/SvgView.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@
type CurrentValues,
type PanzoomChangeEvent,
} from "./panzoom/panzoom";

import { onMount } from "svelte";
import { scale } from "$lib/globalState/scaleStore";
import { activeView } from "$lib/globalState/activeProject";
import { Component } from "$lib/classes/automaton/component/Component";
import { Component as automatonComponent } from "$lib/classes/automaton/component/Component";
import Edge from "./Edge.svelte";
import Location from "$lib/components/svgView/Location.svelte";
import { System } from "$lib/classes/automaton";
import { System } from "$lib/classes/automaton/system/System";
import Component from "./Component.svelte";

/**
* The parent svg element that the entire view is shown with.
Expand Down Expand Up @@ -70,28 +72,31 @@
style:transform
style:transition
>
{#if $activeView instanceof Component}
{#if $activeView instanceof automatonComponent}
{@const component = $activeView}
<!--All edges are drawn with their reference to their source location-->
{#each $activeView.edges as edge}
<Edge
sourcePoint={component.locations.getSure(edge.source)
.position}
targetPoint={component.locations.getSure(edge.target)
.position}
nails={edge.nails}
edgeType={edge.status}
/>
{/each}

<!--All locations are drawn-->
{#each $activeView.locations as location}
<Location
locationId={location.id}
bind:position={location.position}
bind:nickname={location.nickname}
/>
{/each}
<Component>
<!--All edges are drawn with their reference to their source location-->
{#each $activeView.edges as edge}
<Edge
sourcePoint={component.locations.getSure(edge.source)
.position}
targetPoint={component.locations.getSure(edge.target)
.position}
nails={edge.nails}
edgeType={edge.status}
/>
{/each}

<!--All locations are drawn-->
{#each $activeView.locations as location}
<Location
locationId={location.id}
bind:position={location.position}
bind:nickname={location.nickname}
/>
{/each}
</Component>
{:else if $activeView instanceof System}
<text>TODO: Not implemented yet</text>
{/if}
Expand Down
0 ...ib/components/svgView/DraggableSVG.svelte → ...nents/svgView/helpers/DraggableSVG.svelte
View file
Open in desktop
File renamed without changes.