windmill-components 1.70.0 → 1.75.0

package/components/graph/model.js

@@ -1,5 +1,5 @@
 export function isNode(item) {
-    return typeof item?.['id'] === 'number';
+    return item?.['type'] === 'node';
 }
 export function isLoop(item) {
     return item?.['type'] === 'loop';

package/components/graph/svelvet/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 OSLabs Beta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/graph/svelvet/collapsible/controllers/util.d.ts

@@ -0,0 +1,15 @@
+import type { EdgeType, NodeType, ResizeNodeType, StoreType } from '../../store/types/types';
+import type { UserEdgeType, UserNodeType } from '../../types/types';
+import type { CollapsibleType } from '../types/types';
+import type { AnchorType } from '../../edges/types/types';
+export declare function populateCollapsibleStore(store: StoreType, userNodes: UserNodeType[], userEdges: UserEdgeType[], canvasId: string): void;
+export declare function toggleExpandAndCollapse(store: StoreType, nodeId: string): void;
+export declare function getCollapsibles(store: StoreType, filter?: {
+    [key: string]: any;
+}): CollapsibleType[];
+export declare function filterByCollapsible(store: StoreType, nodes: NodeType[], resizeNodes: ResizeNodeType[], anchors: AnchorType[], edges: EdgeType[]): {
+    filteredNodes: NodeType[];
+    filteredResizeNodes: ResizeNodeType[];
+    filteredAnchors: AnchorType[];
+    filteredEdges: EdgeType[];
+};

package/components/graph/svelvet/collapsible/controllers/util.js

@@ -0,0 +1,144 @@
+import { Collapsible } from '../models/Collapsible';
+import { get } from 'svelte/store';
+import { getAnchorById } from '../../edges/controllers/util';
+import { getAnchors } from '../../edges/controllers/util';
+const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
+/*
+Initializes store with array of Collapsible objects. You shoould only use this if you want the collapsible feature enabled.
+*/
+export function populateCollapsibleStore(store, userNodes, userEdges, canvasId) {
+    const newCollapsibleStore = [];
+    for (let userNode of userNodes) {
+        const collapsible = new Collapsible(pkStringGenerator(), userNode.id, 0, 'expanded');
+        newCollapsibleStore.push(collapsible);
+    }
+    store.collapsibleStore.set(newCollapsibleStore);
+}
+/*
+
+*/
+function incrementHideCount(store, nodeId) {
+    const collapsibles = get(store.collapsibleStore);
+    for (let collapsible of collapsibles)
+        if (collapsible.nodeId === nodeId)
+            collapsible.hideCount++;
+    store.collapsibleStore.set(collapsibles);
+}
+// Given a nodeId, find ids of all connecting target nodes
+function findTargets(store, nodeId) {
+    // get source anchors on the node
+    const anchors = getAnchors(store, {
+        nodeId: nodeId,
+        sourceOrTarget: 'source',
+    });
+    // get target anchors on other node, and record the node id
+    const targetNodeIds = [];
+    for (const anchor of anchors) {
+        const targetAnchorId = anchor.getOtherAnchorId();
+        const targetAnchor = getAnchorById(store, targetAnchorId);
+        targetNodeIds.push(targetAnchor.nodeId);
+    }
+    return targetNodeIds;
+}
+// traverses tree and increments hideCount
+function traverseAndIncrement(store, nodeId, operation) {
+    const collapsibles = get(store.collapsibleStore);
+    recursiveTraverse(nodeId);
+    store.collapsibleStore.set(collapsibles);
+    function recursiveTraverse(nId) {
+        for (const collapsible of collapsibles) {
+            if (collapsible.nodeId === nId) {
+                if (operation === 'increment')
+                    collapsible.hideCount++;
+                else
+                    collapsible.hideCount--;
+                const targetIds = findTargets(store, nId);
+                for (const targetId of targetIds) {
+                    recursiveTraverse(targetId);
+                }
+            }
+        }
+    }
+}
+function collapse(store, nodeId) {
+    const targetNodeIds = findTargets(store, nodeId);
+    for (const targetNodeId of targetNodeIds)
+        traverseAndIncrement(store, targetNodeId, 'increment');
+}
+function expand(store, nodeId) {
+    const targetNodeIds = findTargets(store, nodeId);
+    for (const targetNodeId of targetNodeIds)
+        traverseAndIncrement(store, targetNodeId, 'decrement');
+}
+export function toggleExpandAndCollapse(store, nodeId) {
+    const collapsibles = getCollapsibles(store, { nodeId: nodeId });
+    if (collapsibles.length === 0)
+        return; // when the collapsible feature is disabled, there will be no collapbsible objects
+    if (collapsibles.length > 1)
+        throw 'there should only be one collapsible object per node';
+    const collapsible = collapsibles[0];
+    if (collapsible.state === 'expanded')
+        collapse(store, nodeId);
+    else
+        expand(store, nodeId);
+    store.collapsibleStore.update((arr) => {
+        for (const c of arr)
+            if (c.id === collapsible.id)
+                c.toggleState();
+        return [...arr];
+    });
+}
+export function getCollapsibles(store, filter) {
+    let collapsibles = Object.values(get(store.collapsibleStore));
+    // filter the array of anchors for elements that match filter
+    // Example: if filter = {sourceOrTarget: 'source', positionX: 35} then we will
+    //return all anchors with sourceOrTarget = source AND poxitionX = 35
+    if (filter !== undefined) {
+        collapsibles = collapsibles.filter((collapsible) => {
+            for (let filterKey in filter) {
+                const filterValue = filter[filterKey];
+                if (collapsible[filterKey] !== filterValue)
+                    return false;
+            }
+            return true;
+        });
+    }
+    // return list of anchors
+    return collapsibles;
+}
+/*
+  This function is responsible for filtering nodes should be displayed based on Collapsible.
+  It also filters node-associated elements such as anchors, edges, etc. so that when you collapse a node, the
+  edges also hide.
+  There is a better way to implement this with foreign keys; when collapsing a node, you would also collapse any rows with a foreign key
+  linking to that node (like a cascading delete in SQL, but with hiding instead of deleting)
+*/
+export function filterByCollapsible(store, nodes, resizeNodes, anchors, edges) {
+    // filter nodes for the collapsible nodes feature
+    const filteredNodes = nodes.filter((node) => {
+        const nodeId = node.id;
+        const collapssibleObj = get(store.collapsibleStore).find((e) => e.nodeId === nodeId);
+        if (collapssibleObj === undefined)
+            return true;
+        return collapssibleObj.isHidden() === false;
+    });
+    const filteredNodeIds = filteredNodes.map((e) => e.id);
+    // filter resizeNodes
+    const filteredResizeNodes = resizeNodes.filter((resizeNode) => filteredNodeIds.includes(resizeNode.nodeId));
+    const filteredAnchors = anchors.filter((selfAnchor) => {
+        const otherAnchorId = selfAnchor.getOtherAnchorId();
+        const otherAnchor = get(store.anchorsStore)[otherAnchorId];
+        if (filteredNodeIds.includes(selfAnchor.nodeId) &&
+            filteredNodeIds.includes(otherAnchor.nodeId))
+            return true;
+        return false;
+    });
+    const filteredEdgeIds = new Set(filteredAnchors.map((e) => e.edgeId));
+    const filteredEdges = edges.filter((edge) => filteredEdgeIds.has(edge.id));
+    return {
+        filteredNodes,
+        filteredResizeNodes,
+        filteredAnchors,
+        filteredEdges,
+    };
+}

package/components/graph/svelvet/collapsible/models/Collapsible.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This model implements functionality for nodes to expand and collapse their children
+ */
+import type { CollapsibleType } from '../types/types';
+/** Class that implements collapsible/expandable functionality for Node objects
+ * @param {string} id Unique string that serves as a primary key
+ * @param {string} nodeId Foreign key to a Node Object
+ */
+export declare class Collapsible implements CollapsibleType {
+    id: string;
+    nodeId: string;
+    hideCount: number;
+    state: 'expanded' | 'collapsed';
+    constructor(id: string, nodeId: string, hideCount: number, state: 'expanded' | 'collapsed');
+    isHidden(): boolean;
+    toggleState(): void;
+}

package/components/graph/svelvet/collapsible/models/Collapsible.js

@@ -0,0 +1,25 @@
+/**
+ * This model implements functionality for nodes to expand and collapse their children
+ */
+/** Class that implements collapsible/expandable functionality for Node objects
+ * @param {string} id Unique string that serves as a primary key
+ * @param {string} nodeId Foreign key to a Node Object
+ */
+export class Collapsible {
+    id;
+    nodeId;
+    hideCount;
+    state;
+    constructor(id, nodeId, hideCount, state) {
+        this.id = id;
+        this.nodeId = nodeId;
+        this.hideCount = hideCount;
+        this.state = state;
+    }
+    isHidden() {
+        return this.hideCount > 0;
+    }
+    toggleState() {
+        this.state = this.state === 'expanded' ? 'collapsed' : 'expanded';
+    }
+}

package/components/graph/svelvet/collapsible/types/types.d.ts

@@ -0,0 +1,8 @@
+export interface CollapsibleType {
+    id: string;
+    nodeId: string;
+    hideCount: number;
+    state: 'expanded' | 'collapsed';
+    isHidden: Function;
+    toggleState: Function;
+}

package/components/graph/svelvet/collapsible/types/types.js

@@ -0,0 +1 @@
+export {};

package/components/graph/svelvet/container/README.md

@@ -0,0 +1,7 @@
+# Container
+
+This folder contains two containers: Svelvet and Canvas.
+
+## Svelvet.svelte
+
+Svelvet.svelte is the top level component

package/components/graph/svelvet/container/controllers/middleware.d.ts

@@ -0,0 +1,18 @@
+import type { StoreType } from '../../store/types/types';
+import type { UserEdgeType, UserNodeType } from '../../types/types';
+/**
+ * sanitizeCanvasOptions will sanitize the canvas level options so that incompatible features will not be run simulataneously
+ * @param store The array of nodes that have a UserNodeType
+ * @returns void. The store is modified directly
+ */
+export declare function sanitizeCanvasOptions(store: StoreType): void;
+/**
+ * sanitizeUserNodesAndEdges will sanitize the data initially passed in to Svelvet component. For example, the node that user specified have an integar as its id but to instantiate a Node and be compatible with uuid we will need to convert the integar id to a string.
+ * @param userNodes The array of nodes that have a UserNodeType
+ * @param userEdges The array of edges that have a UserEdgeType
+ * @returns An object of sanitized userNodes and userEdges
+ */
+export declare function sanitizeUserNodesAndEdges(userNodes: UserNodeType[], userEdges: UserEdgeType[]): {
+    userNodes: UserNodeType[];
+    userEdges: UserEdgeType[];
+};

package/components/graph/svelvet/container/controllers/middleware.js

@@ -0,0 +1,101 @@
+/*
+This file contains "middleware" functions that sanitize user input (UserNodeType and UserEdgeType). Put functions that
+maintain consistency between previous
+
+*/
+import { get } from 'svelte/store';
+import { bottomCb, leftCb, rightCb, topCb, } from '../../edges/controllers/anchorCbUser';
+/**
+ * sanitizeCanvasOptions will sanitize the canvas level options so that incompatible features will not be run simulataneously
+ * @param store The array of nodes that have a UserNodeType
+ * @returns void. The store is modified directly
+ */
+export function sanitizeCanvasOptions(store) {
+    enforceCollapsibleCompatibility(store);
+}
+function enforceCollapsibleCompatibility(store) {
+    if (get(store.collapsibleOption)) {
+        store.nodeCreate.set(false);
+    }
+}
+/**
+ * sanitizeUserNodesAndEdges will sanitize the data initially passed in to Svelvet component. For example, the node that user specified have an integar as its id but to instantiate a Node and be compatible with uuid we will need to convert the integar id to a string.
+ * @param userNodes The array of nodes that have a UserNodeType
+ * @param userEdges The array of edges that have a UserEdgeType
+ * @returns An object of sanitized userNodes and userEdges
+ */
+export function sanitizeUserNodesAndEdges(userNodes, userEdges) {
+    convertIdToString(userNodes);
+    convertEdgeIdsToString(userEdges);
+    convertAnchorPositionsToCallbacks(userNodes, userEdges);
+    setDefaultEdgeType(userEdges);
+    return { userNodes, userEdges };
+}
+/**
+ * setDefaultEdgeType ensures a default edge type of 'bezier' if the user does not set one, or sets a nonsense type.
+ * @param userEdges The array of edges that have a UserEdgeType
+ * @returns No return, the function edits the objects in place
+ */
+function setDefaultEdgeType(userEdges) {
+    for (let userEdge of userEdges) {
+        if (!['smoothstep', 'step', 'bezier', 'straight'].includes(userEdge.type))
+            userEdge.type = 'bezier';
+    }
+}
+/**
+ * convertAnchorPositionsToCallbacks
+ * @description
+ * WHY: This function is in order to maintain compliance with earlier versions of Svelvet.
+ * HISTORY: In Svelvet<=5, anchor points were hard-coded onto each node. Each node had a "sourcePosition"
+ * "targetPosition" where the edges would be attached. In Svelvet6, the store was re-designed
+ * from the ground up into an object-relational data model where anchor points could be attached
+ * at any point on the node using callbacks. This enabled features such as custom edge position,
+ * adaptive edge positioning, and dynamic edges.
+ * The purpose of this function is to parse the old way of specifying edge positions (as two source/target
+ * anchors on the node) into the Svelvet6 (where anchors are separate objects) in order to maintain a
+ * consistent user experience. However, we suggest that this functionality (parsing Svelvet5 syntax into
+ * Svelvet6 syntax) be removed completely in favor of only using Svelvet6 syntax in order to reduce edge cases.
+ */
+function convertAnchorPositionsToCallbacks(userNodes, userEdges) {
+    // convert userNodes array into object for constant time lookup by id
+    const userNodesObj = {};
+    for (let userNode of userNodes)
+        userNodesObj[userNode.id] = userNode;
+    // iterate through userEdges, and check the source/target nodes.
+    for (let userEdge of userEdges) {
+        const userNodeSource = userNodesObj[userEdge.source];
+        const userNodeTarget = userNodesObj[userEdge.target];
+        const sourcePosition = userNodeSource.sourcePosition;
+        const targetPosition = userNodeTarget.targetPosition;
+        const cbs = { left: leftCb, right: rightCb, top: topCb, bottom: bottomCb };
+        if (sourcePosition)
+            userEdge.sourceAnchorCb = cbs[sourcePosition];
+        if (targetPosition)
+            userEdge.targetAnchorCb = cbs[targetPosition];
+    }
+}
+/**
+ * Converts node id's to strings. For Svelvet<6, node id's were numbers. These were switched to strings for compatibility with uuid. This function does not return a new array, instead it mutates and sanitizes the original array.
+ * @param userNodes The array of userNodes (not yet sanitized)
+ */
+function convertIdToString(userNodes) {
+    userNodes = userNodes.map((node) => {
+        node.id = node.id.toString();
+        node.childNodes =
+            node.childNodes === undefined
+                ? []
+                : node.childNodes.map((childId) => childId.toString());
+        return node;
+    });
+}
+/**
+ * Converts source/target node id's to string. For Svelvet<6, id's were numbers. These were switched to strings for compatibility with uuid. This function does not return a new array, instead it mutates and sanitizes the original array.
+ * @param userEdges The array of userEdges (not yet sanitized)
+ */
+function convertEdgeIdsToString(userEdges) {
+    userEdges = userEdges.map((edge) => {
+        edge.source = edge.source.toString();
+        edge.target = edge.target.toString();
+        return edge;
+    });
+}

package/components/graph/svelvet/container/views/GraphView.svelte

@@ -0,0 +1,252 @@
+<script>import { onMount } from 'svelte';
+import { zoom, zoomTransform, zoomIdentity } from 'd3-zoom';
+import { select, selectAll, pointer } from 'd3-selection';
+import SimpleBezierEdge from '../../edges/views/Edges/SimpleBezierEdge.svelte';
+import StepEdge from '../../edges/views/Edges/StepEdge.svelte';
+import SmoothStepEdge from '../../edges/views/Edges/SmoothStepEdge.svelte';
+import Node from '../../nodes/views/Node.svelte';
+import { findStore } from '../../store/controllers/storeApi';
+import { determineD3Instance, zoomInit } from '../..//d3/controllers/d3';
+import { filterByCollapsible } from '../../collapsible/controllers/util';
+import { onDestroy } from 'svelte';
+//these are typscripted as any, however they have been transformed inside of store.ts
+export let canvasId;
+export let width;
+export let height;
+export let initialZoom = 3;
+export let initialLocation;
+export let boundary = false;
+export let minimap = false;
+export let scroll = false;
+// here we lookup the store using the unique key
+const store = findStore(canvasId);
+const { edgesStore, nodesStore, anchorsStore, potentialAnchorsStore, temporaryEdgeStore, resizeNodesStore, nodeSelected, backgroundStore, movementStore, widthStore, heightStore, d3Scale, collapsibleStore } = store;
+$: nodes = Object.values($nodesStore);
+$: edges = Object.values($edgesStore);
+$: anchors = Object.values($anchorsStore);
+$: resizeNodes = Object.values($resizeNodesStore);
+$: potentialAnchors = Object.values($potentialAnchorsStore);
+$: tempEdges = $temporaryEdgeStore;
+/*
+This block of code is responsible for reactivity of the collapsible feature
+When collaspsibleStore changes, nodes/edges/resizeNodes/anchors are filtered so that
+only the visible ones are displayed
+*/
+let filteredNodes;
+let filteredEdges;
+let filteredResizeNodes;
+let filteredAnchors;
+$: {
+    const tmp = $collapsibleStore; // assignment is necessary for reactivity
+    const obj = filterByCollapsible(store, nodes, resizeNodes, anchors, edges);
+    filteredNodes = obj['filteredNodes'];
+    filteredEdges = obj['filteredEdges'];
+    filteredResizeNodes = obj['filteredResizeNodes'];
+    filteredAnchors = obj['filteredAnchors'];
+}
+// declaring the grid and dot size for d3's transformations and zoom
+const gridSize = 15;
+const dotSize = 10;
+// leveraging d3 library to zoom/pan
+let d3 = {
+    zoom,
+    zoomTransform,
+    zoomIdentity,
+    select,
+    selectAll,
+    pointer
+};
+let d3Zoom = determineD3Instance(boundary, d3, nodeSelected, width, height, movementStore, backgroundStore, gridSize, dotSize, canvasId, d3Scale, handleZoom);
+// d3Translate is used for the minimap
+let d3Translate = { x: 0, y: 0, k: 1 };
+onMount(() => {
+    // actualizes the d3 instance
+    const nodes = d3.select(`.zoomable`).call(d3Zoom).on('dblclick.zoom', null);
+    if (!scroll) {
+        ;
+        [nodes].forEach((d3Instance) => {
+            d3Instance
+                .on('wheel.zoom', null)
+                .on('mousewheel.zoom', null)
+                .on('mousemove.zoom', null)
+                .on('DOMMouseScroll.zoom', null);
+        });
+    }
+    d3.select('#zoom_in').on('click', function () {
+        try {
+            d3Zoom.scaleBy(nodes.transition().duration(250), 1.4);
+            // d3Zoom.translateTo(edgesd3, d3Translate.x, d3Translate.y)
+            // d3Zoom.translateTo(nodesd3, d3Translate.x, d3Translate.y)
+        }
+        catch (e) {
+            console.log('error', e);
+        }
+    });
+    d3.select('#zoom_out').on('click', function () {
+        try {
+            d3Zoom.scaleBy(nodes.transition().duration(250), 0.714);
+            // d3Zoom.translateTo(edgesd3.transition().duration(0), d3Translate.x, d3Translate.y)
+            // d3Zoom.translateTo(nodesd3.transition().duration(0), d3Translate.x, d3Translate.y)
+        }
+        catch (e) {
+            console.log('error', e);
+        }
+    });
+    // })
+    // d3Translate = zoomInit(d3, canvasId, d3Zoom, d3Translate, initialLocation, initialZoom, d3Scale)
+});
+onDestroy(() => {
+    d3.select('svg').remove();
+});
+// This is necessary to make Graphview reactive to changes in initialZoom
+// When initialZoom changes, then zoomInit will set the zoom/position
+// let prevZoom = initialZoom
+// let prevInitialLocationX = initialLocation.x
+// let prevInitialLocationY = initialLocation.y
+// $: if (
+// 	initialZoom !== prevZoom ||
+// 	prevInitialLocationX !== initialLocation.x ||
+// 	prevInitialLocationY !== initialLocation.y
+// ) {
+// 	prevZoom = initialZoom
+// 	prevInitialLocationX = initialLocation.x
+// 	prevInitialLocationY = initialLocation.y
+// 	d3Translate = zoomInit(d3, canvasId, d3Zoom, d3Translate, initialLocation, initialZoom, d3Scale)
+// }
+// moves canvas when you click on the minimap
+// handles case for when minimap sends message back to initiate translation event (click to traverse minimap)
+// moves camera to the clicked node
+const key = canvasId;
+function handleZoom(e) {
+    if (!$movementStore)
+        return;
+    //add a store that contains the current value of the d3-zoom's scale to be used in onMouseMove function
+    d3Scale.set(e.transform.k);
+    // transform 'g' SVG elements (edge, edge text, edge anchor)
+    d3.select(`.Edges-${canvasId} g`).attr('transform', e.transform);
+    // transform div elements (nodes)
+    //@ts-ignore
+    let transform = d3.zoomTransform(this);
+    d3Translate = transform;
+    store.d3ZoomParameters.set({ ...transform }); // record x,y position of pan, and zoom level
+    // selects and transforms all node divs from class 'Node' and performs transformation
+    d3.select(`.Node-${canvasId}`)
+        .style('transform', 'translate(' + transform.x + 'px,' + transform.y + 'px) scale(' + transform.k + ')')
+        .style('transform-origin', '0 0');
+}
+</script>
+
+<div class="zoomable">
+	<!-- This is the container that holds GraphView and we have disabled right click functionality to prevent a sticking behavior -->
+	<div id="graphview-container">
+		<div class={`Nodes Nodes-${canvasId}`} on:contextmenu|preventDefault>
+			<!-- This container is transformed by d3zoom -->
+			<div class={`Node Node-${canvasId}`}>
+				{#each filteredNodes as node}
+					{#if node.data.html}
+						<Node {node} {canvasId} nodeId={node.id}>{@html node.data.html}</Node>
+					{:else if node.data.custom}
+						<Node isCustom {node} {canvasId} nodeId={node.id}>
+							<svelte:component
+								this={node.data.custom.component}
+								on:new={(e) => node?.data?.custom?.cb?.('new', e.detail)}
+								on:delete={(e) => node?.data?.custom?.cb?.('delete', e.detail)}
+								on:select={(e) => node?.data?.custom?.cb?.('select', e.detail)}
+								on:insert={(e) => node?.data?.custom?.cb?.('insert', e.detail)}
+								on:newBranch={(e) => node?.data?.custom?.cb?.('newBranch', e.detail)}
+								on:deleteBranch={(e) => node?.data?.custom?.cb?.('deleteBranch', e.detail)}
+								on:move={(e) => node?.data?.custom?.cb?.('move', e.detail)}
+								{...node.data.custom.props}
+							/>
+						</Node>
+					{:else}
+						<Node {node} {canvasId} nodeId={node.id}>{node.data.label}</Node>
+					{/if}
+				{/each}
+			</div>
+		</div>
+	</div>
+	<!-- rendering dots on the background depending on the zoom level -->
+	<svg
+		class={`Edges Edges-${canvasId}`}
+		viewBox="0 0 {$widthStore} {$heightStore}"
+		on:contextmenu|preventDefault
+	>
+		<defs>
+			<pattern
+				id={`background-${canvasId}`}
+				x="0"
+				y="0"
+				width={gridSize}
+				height={gridSize}
+				patternUnits="userSpaceOnUse"
+			>
+				<circle
+					id="dot"
+					cx={gridSize / 2 - dotSize / 2}
+					cy={gridSize / 2 - dotSize / 2}
+					r="0.5"
+					style="fill: gray"
+				/>
+			</pattern>
+		</defs>
+
+		<!-- <g> tag defines which edge type to render depending on properties of edge object -->
+		<g>
+			{#each filteredEdges as edge}
+				{#if edge.type === 'smoothstep'}
+					<SmoothStepEdge {edge} {canvasId} />
+				{:else if edge.type === 'step'}
+					<StepEdge {edge} {canvasId} />
+				{:else}
+					<SimpleBezierEdge edgeId={edge.id} {canvasId} />
+				{/if}
+			{/each}
+
+			<!-- {#each filteredAnchors as anchor} -->
+			<!-- note that these are SVG -->
+			<!-- <EdgeAnchor x={anchor.positionX} y={anchor.positionY} /> -->
+			<!-- {/each} -->
+		</g>
+	</svg>
+</div>
+<div id="buttons">
+	<button id="zoom_in">+</button>
+	<button id="zoom_out">-</button>
+</div>
+
+<style>
+	#buttons {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+		z-index: 20;
+	}
+
+	#buttons > button {
+		border-radius: 4px;
+		background-color: white;
+		border: #999 solid 1px;
+		padding-right: 4px;
+		padding-left: 4px;
+		width: 24px;
+	}
+
+	svg {
+	}
+	.Nodes {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+	.Node {
+		color: black; /* remove this once color is set to default via types */
+		width: 100%;
+		height: 100%;
+	}
+	#graphview-container {
+		pointer-events: none;
+	}
+	.pointer-events-auto {
+		pointer-events: auto;
+	}</style>

package/components/graph/svelvet/container/views/GraphView.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        canvasId: string;
+        width: number;
+        height: number;
+        initialZoom?: number | undefined;
+        initialLocation: any;
+        boundary?: boolean | undefined;
+        minimap?: boolean | undefined;
+        scroll?: boolean | undefined;
+    };
+    events: {
+        contextmenu: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GraphViewProps = typeof __propDef.props;
+export type GraphViewEvents = typeof __propDef.events;
+export type GraphViewSlots = typeof __propDef.slots;
+export default class GraphView extends SvelteComponentTyped<GraphViewProps, GraphViewEvents, GraphViewSlots> {
+}
+export {};