windmill-components 1.60.4 → 1.75.0

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

@@ -0,0 +1,131 @@
+<script>const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
+import { createStoreEmpty, populateSvelvetStoreFromUserInput } from '../../store/controllers/storeApi';
+import { afterUpdate, onMount } from 'svelte';
+import GraphView from './GraphView.svelte';
+import { sanitizeCanvasOptions, sanitizeUserNodesAndEdges } from '../controllers/middleware';
+export let nodes; // TODO: update type to make possible user id being a number
+export let edges; // TODO: update type to make possible user id being a number
+export let bgColor = '#ffffff'; // this is used to set the background color of the the Svelvet canvas
+export let minimap = false;
+export let width = 600;
+export let height = 600;
+export let background = true;
+export let movement = true;
+export let canvasId = pkStringGenerator();
+export let snap = false;
+export let snapTo = 30;
+export let nodeCreate = false;
+export let initialZoom = 3;
+export let initialLocation = { x: 0, y: 0 };
+export let boundary = false;
+export let collapsible = false;
+export let shareable = false; // used for "importExport" feature
+export let locked = false; // if true, node movement is disabled
+export let editable = false;
+export let resizable = true;
+export let highlightEdges = true;
+export let scroll = false;
+// generates a unique string for each svelvet component's unique store instance
+// creates a store that uses the unique sting as the key to create and look up the corresponding store
+// this way we can have multiple Svelvet Components on the same page and prevent overlap of information
+const store = createStoreEmpty(canvasId);
+// stores (state) within stores, so that we cannot access values from everywhere
+//   const { widthStore, heightStore, nodesStore, derivedEdges } = svelvetStore;
+let error = '';
+// sets the state of the store to the values passed in from the Svelvet Component on initial render
+onMount(() => {
+    try {
+        // sanitize user input
+        let output = sanitizeUserNodesAndEdges(nodes, edges);
+        const userNodes = output['userNodes'];
+        const userEdges = output['userEdges'];
+        // set canvas related stores. you need to do this before setting node/edge related stores because
+        // initializing nodes/edges might read relevant options from the store.
+        store.widthStore.set(width);
+        store.heightStore.set(height);
+        store.backgroundStore.set(background);
+        store.movementStore.set(movement);
+        const optionsObj = { snap, snapTo }; // TODO: rename to snap
+        store.options.set(optionsObj); //
+        store.nodeCreate.set(nodeCreate);
+        store.boundary.set(boundary);
+        store.collapsibleOption.set(collapsible);
+        store.lockedOption.set(locked);
+        store.editableOption.set(editable);
+        store.resizableOption.set(resizable);
+        store.highlightEdgesOption.set(highlightEdges);
+        // make sure that all canvas options are compatible
+        sanitizeCanvasOptions(store);
+        // set node/edge related stores
+        populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges);
+        error = '';
+    }
+    catch (e) {
+        error = 'There was an error displaying the flow. Please report the error.' + e.message;
+        console.error(e);
+    }
+});
+// // enables data reactivity. TODO: this needs to be added back in
+// Probably need to use findStore, not create store
+afterUpdate(() => {
+    try {
+        // sanitize user input
+        let output = sanitizeUserNodesAndEdges(nodes, edges);
+        const userNodes = output['userNodes'];
+        const userEdges = output['userEdges'];
+        // set canvas related stores. you need to do this before setting node/edge related stores because
+        // initializing nodes/edges might read relevant options from the store.
+        store.widthStore.set(width);
+        store.heightStore.set(height);
+        store.backgroundStore.set(background);
+        store.movementStore.set(movement);
+        const optionsObj = { snap, snapTo }; // TODO: rename to snap
+        store.options.set(optionsObj); //
+        store.nodeCreate.set(nodeCreate);
+        store.boundary.set(boundary);
+        store.collapsibleOption.set(collapsible);
+        store.lockedOption.set(locked);
+        store.editableOption.set(editable);
+        store.resizableOption.set(resizable);
+        store.highlightEdgesOption.set(highlightEdges);
+        // make sure that all canvas options are compatible
+        sanitizeCanvasOptions(store);
+        // set node/edge related stores
+        populateSvelvetStoreFromUserInput(canvasId, userNodes, userEdges);
+        error = '';
+    }
+    catch (e) {
+        error = 'There was an error displaying the flow. Please report the error.' + e.message;
+        console.error(e);
+    }
+});
+</script>
+
+<!-- Now that a store has been created from the initial nodes and initial edges we drill props from the store down to the D3 GraphView along with the unique key -->
+<div
+	class="Svelvet"
+	style={`width: ${width}px; height: ${height}px; background-color: ${bgColor};`}
+>
+	{#if error != ''}
+		<div class="error text-red-600 center-center p-4">{error}</div>
+	{:else}
+		<GraphView
+			{scroll}
+			{canvasId}
+			{width}
+			{height}
+			{initialLocation}
+			{initialZoom}
+			{boundary}
+			{minimap}
+		/>
+	{/if}
+</div>
+
+<style>
+	.Svelvet {
+		position: relative;
+		overflow: hidden;
+		display: grid;
+		font-family: 'Segoe UI', sans-serif;
+	}</style>

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

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from "svelte";
+import type { UserEdgeType, UserNodeType } from '../../types/types';
+declare const __propDef: {
+    props: {
+        nodes: UserNodeType[];
+        edges: UserEdgeType[];
+        bgColor?: string | undefined;
+        minimap?: boolean | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        background?: boolean | undefined;
+        movement?: boolean | undefined;
+        canvasId?: string | undefined;
+        snap?: boolean | undefined;
+        snapTo?: number | undefined;
+        nodeCreate?: boolean | undefined;
+        initialZoom?: number | undefined;
+        initialLocation?: {
+            x: number;
+            y: number;
+        } | undefined;
+        boundary?: boolean | undefined;
+        collapsible?: boolean | undefined;
+        shareable?: boolean | undefined;
+        locked?: boolean | undefined;
+        editable?: boolean | undefined;
+        resizable?: boolean | undefined;
+        highlightEdges?: boolean | undefined;
+        scroll?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SvelvetProps = typeof __propDef.props;
+export type SvelvetEvents = typeof __propDef.events;
+export type SvelvetSlots = typeof __propDef.slots;
+export default class Svelvet extends SvelteComponentTyped<SvelvetProps, SvelvetEvents, SvelvetSlots> {
+}
+export {};

package/components/graph/svelvet/customCss/controllers/getCss.d.ts

@@ -0,0 +1,2 @@
+import type { NodeType, StoreType } from '../../store/types/types';
+export declare const forceCssHeightAndWidth: (store: StoreType, node: NodeType) => void;

package/components/graph/svelvet/customCss/controllers/getCss.js

@@ -0,0 +1,57 @@
+// Required for "custom css" feature
+// WHAT: For a given node with a user-defined classname, see if there are any css properties for height and width
+//       Get that height and width and set properties in node store. This is necessary for
+export const forceCssHeightAndWidth = (store, node) => {
+    let width, height, innerText;
+    // Look through each CSS rule to find the one the user defined
+    for (let i = 0; i < document.styleSheets.length; i++) {
+        const styleSheet = document.styleSheets[i];
+        const styleRules = styleSheet.cssRules;
+        for (let j = 0; j < styleRules.length; j++) {
+            const rule = styleRules[j];
+            // this is necessary to get rid of typescript warning for rule.selectorText
+            if (!(rule instanceof CSSStyleRule))
+                continue;
+            if (rule.selectorText === `.${node.className}`) {
+                const initialText = rule.cssText; // getting the full text of the CSS rule
+                const i = initialText.indexOf('{'); // finding index of first bracket
+                innerText = initialText.substring(i + 1, initialText.length - 1); // extracting the CSS to insert into inline style
+                // Adjusting the width and height if they are set via the custom class
+                const arr = innerText.split(' ');
+                arr.forEach((str, i) => {
+                    if (str === 'width:') {
+                        width = str.concat(arr[i + 1]); // go through the array and join width and the number
+                        const w = parseInt(arr[i + 1]); // getting the number for the width
+                        width = w;
+                    }
+                    if (str === 'height:') {
+                        height = str.concat(arr[i + 1]); // same as with the width
+                        const h = parseInt(arr[i + 1]);
+                        height = h;
+                    }
+                });
+            }
+        }
+    }
+    // update the width/height of the node
+    store.nodesStore.update((nodes) => {
+        if (width !== undefined)
+            nodes[node.id].width = width;
+        if (height !== undefined)
+            nodes[node.id].height = height;
+        return { ...nodes };
+    });
+    // move the node a bit to force update to anchors, potential anchors
+    node.setPositionFromMovement(0, 0);
+    // update the position of the resize node. TODO: this should be refactored so that it cascades from movement
+    store.resizeNodesStore.update((resizeNodes) => {
+        for (let resizeNode of Object.values(resizeNodes)) {
+            if (resizeNode.nodeId === node.id) {
+                // set resizeNode position to bottom left corner of Node
+                resizeNode.positionX = node.positionX + node.width;
+                resizeNode.positionY = node.positionY + node.height;
+            }
+        }
+        return { ...resizeNodes };
+    });
+};

package/components/graph/svelvet/d3/controllers/README.md

@@ -0,0 +1,3 @@
+d3 is responsible for zooming and panning.
+
+The code works but is obviously in a bad state. However, at least it is modularized so it doesn't clutter graphview anymore.

package/components/graph/svelvet/d3/controllers/d3.d.ts

@@ -0,0 +1,5 @@
+import type { ZoomBehavior } from 'd3-zoom';
+export declare function zoomInit(d3: any, canvasId: any, d3Zoom: any, d3Translate: any, initialLocation: any, initialZoom: any, d3Scale: any): any;
+export declare function determineD3Instance(boundary: any, d3: {
+    zoom: () => ZoomBehavior<any, any>;
+}, nodeSelected: any, width: any, height: any, movementStore: any, backgroundStore: any, gridSize: any, dotSize: any, canvasId: any, d3Scale: any, handleZoom: any): ZoomBehavior<any, any>;

package/components/graph/svelvet/d3/controllers/d3.js

@@ -0,0 +1,59 @@
+import { get } from 'svelte/store';
+export function zoomInit(d3, canvasId, d3Zoom, d3Translate, initialLocation, initialZoom, d3Scale) {
+    //set default zoom logic
+    d3.select(`.Edges-${canvasId}`)
+        //makes sure translation is default at center coordinates
+        .transition()
+        .duration(0)
+        .call(d3Zoom.translateTo, 0, 0)
+        //moves camera to coordinates
+        .transition()
+        .duration(0)
+        .call(d3Zoom.translateTo, initialLocation.x / initialZoom, initialLocation.y / initialZoom)
+        // zooms in on selected point
+        .transition()
+        .duration(0)
+        .call(d3Zoom.scaleTo, initialZoom.toFixed(2));
+    // updates d3Translate with d3 object with x, y, and k values to be sent down to the minimap to be further calculated further
+    d3Translate = d3.zoomIdentity
+        .translate(initialLocation.x, initialLocation.y)
+        .scale(initialZoom.toFixed(2));
+    d3.select(`.Nodes-${canvasId}`)
+        .transition()
+        .duration(0)
+        .call(d3Zoom.translateTo, 0, 0)
+        .transition()
+        .duration(0)
+        .call(d3Zoom.translateTo, initialLocation.x / initialZoom, initialLocation.y / initialZoom)
+        .transition()
+        .duration(0)
+        .call(d3Zoom.scaleTo, initialZoom.toFixed(2));
+    // sets D3 scale to current k of object
+    d3Scale.set(d3.zoomTransform(d3.select(`.Nodes-${canvasId}`)).k);
+    return d3Translate;
+}
+// create d3 instance conditionally based on boundary prop
+export function determineD3Instance(boundary, d3, nodeSelected, width, height, movementStore, backgroundStore, gridSize, dotSize, canvasId, d3Scale, handleZoom) {
+    if (boundary) {
+        return d3
+            .zoom()
+            .filter(() => !get(nodeSelected))
+            .scaleExtent([0.4, 4]) // limits for zooming in/out
+            .translateExtent([
+            [0, 0],
+            [boundary.x, boundary.y],
+        ]) // world extent
+            .extent([
+            [0, 0],
+            [width, height],
+        ])
+            .on('zoom', handleZoom);
+    }
+    else {
+        return d3
+            .zoom()
+            .filter(() => !get(nodeSelected))
+            .scaleExtent([0.4, 2])
+            .on('zoom', handleZoom);
+    }
+}

package/components/graph/svelvet/d3/controllers/d3Old.d.ts

@@ -0,0 +1 @@
+export declare function d3ZoomCreator(nodeSelected: any, movementStore: any, backgroundStore: any, canvasId: any, gridSize: any, dotSize: any, d3Scale: any, d3: any): any;

package/components/graph/svelvet/d3/controllers/d3Old.js

@@ -0,0 +1,43 @@
+import { writable, derived, get, readable } from 'svelte/store';
+export function d3ZoomCreator(nodeSelected, movementStore, backgroundStore, canvasId, gridSize, dotSize, d3Scale, d3) {
+    // TODO: Update d3Zoom type (refer to d3Zoom docs)
+    let d3Zoom = d3
+        .zoom()
+        .filter(() => !get(nodeSelected))
+        .scaleExtent([0.4, 2])
+        .on('zoom', handleZoom);
+    return d3Zoom;
+    // function to handle zoom events - arguments: d3ZoomEvent
+    function handleZoom(e) {
+        if (!get(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);
+        // should not run d3.select below if backgroundStore is false
+        if (get(backgroundStore)) {
+            d3.select(`#background-${canvasId}`)
+                .attr('x', e.transform.x)
+                .attr('y', e.transform.y)
+                .attr('width', gridSize * e.transform.k)
+                .attr('height', gridSize * e.transform.k)
+                .selectAll('#dot')
+                .attr('x', (gridSize * e.transform.k) / 2 - dotSize / 2)
+                .attr('y', (gridSize * e.transform.k) / 2 - dotSize / 2)
+                .attr('opacity', Math.min(e.transform.k, 1));
+        }
+        // transform 'g' SVG elements (edge, edge text, edge anchor)
+        d3.select(`.Edges-${canvasId} g`).attr('transform', e.transform);
+        // transform div elements (nodes)
+        let transform = d3.zoomTransform(this);
+        // 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');
+    }
+}

package/components/graph/svelvet/docs/CHANGELOG.md

@@ -0,0 +1,145 @@
+# CHANGELOG
+
+This article documents the changes from Svelvet5 to Svelvet6. It is for internal use.
+
+## custom-nodes
+
+https://www.svelvet.io/docs/custom-nodes/
+
+Anchor points no longer display on nodes in isolation. This is because anchor points are no longer tied to the node object.
+
+<img src="./images/custom-nodes-before.png" width="150" height="150">
+<img src="./images/custom-nodes-after.png" width="150" height="150">
+
+## custom-edges
+
+https://www.svelvet.io/docs/custom-edges/
+
+Edges now use adaptive anchors by default. Previously, source/target anchors were placed on the top/bottom of the node by default. It looks nice in the specific causes when target nodes are located below source nodes, but in the general case there will be intersecting edges.
+
+<img src="./images/custom-edges-before.png" width="150" height="150">
+<img src="./images/custom-edges-after.png" width="150" height="150">
+
+## panning and zooming
+
+https://www.svelvet.io/docs/pan-and-zoom/
+
+Panning and zooming is functional. Removed option to stop panning, lock nodes due to store pollution. This is simple to add back if it is a community requested feature.
+
+TODO: need to update this text in docs:
+
+```
+play around with the flow diagram below! If you wish to stop panning, set the movement prop to false. If you wish to stop node dragging, pass in the locked prop.
+```
+
+## usage with typescript
+
+https://www.svelvet.io/docs/typescript/
+
+Type names changed from Node, Edge ,to UserNodeType, UserEdgeType. The main reason for this is:
+
+- The internal state of Svelvet is stored in objects Node, Edge which are different from the specifications passed in by users (hereafter referred to as UserNode, UserEdge). For example, UserNodes have "sourcePosition" and "targetPosition" parameters. However, the internal node project does not have "sourcePosition" and "targetPosition"; instead that functionality has been abstracted to a separate Anchor class. This promotes greater code modularity.
+
+## CSS-Background
+
+https://www.svelvet.io/docs/CSS-Background/
+
+<img src="./images/css-background-before.png" width="150" height="150">
+<img src="./images/css-background-after.png" width="150" height="150">
+
+No visual changes. Moved background color out of store in order to minimize store pollution. This means that background color will not be serialized using the import-export-store feature. We talk more about this later in import-export-store section.
+
+## node-grouping
+
+https://www.svelvet.io/docs/node-grouping/
+
+No change in functionality.
+
+## snap-to-grid
+
+https://www.svelvet.io/docs/snap-to-grid/
+http://localhost:3000/compatability-8-snap-to-grid/
+
+No change in functionality
+
+## html-docs
+
+https://www.svelvet.io/docs/snap-to-grid/
+http://localhost:3000/compatability-8-snap-to-grid/
+
+<img src="./images/html-docs-before.png" width="150" height="150">
+<img src="./images/html-docs-after.png" width="150" height="150">
+
+no change in functionality
+
+## node-create
+
+https://www.svelvet.io/docs/Interactive-Nodes/
+http://localhost:3000/compatibility-10-node-create/
+
+<img src="./images/node-create-before.png" width="150" height="150">
+<img src="./images/node-create-after.png" width="150" height="150">
+
+- Previously, the new node inherits from the old node. Now, the new node is created with default parameters. Note that we have functionality to edit nodes.
+- edge creation works the same as before (not shown)
+- there are now 4 potential anchor points, rather than one source / on target anchor point.
+
+## custom-svelte-components
+
+https://www.svelvet.io/docs/Custom-Svelte/
+http://localhost:3000/compatibility-11-custom-svelte-components/
+
+<img src="./images/custom-svelte-components-before.png" width="150" height="150">
+<img src="./images/custom-svelte-components-after.png" width="150" height="150">
+
+Same functionality as before. The reason why it looks different is because I created my own dummy Svelte component to test.
+
+## Minimap
+
+http://localhost:3000/compatibility-12-minimap/
+https://www.svelvet.io/docs/Minimap/
+
+Same functionality as before. It looks like there is a big with HTML feature (unrelated to minimap)
+
+<img src="./images/minimap-before.png" width="150" height="150">
+<img src="./images/minimap-after.png" width="150" height="150">
+
+## Initial zoom and location
+
+Same functionality as Svelvet5. It appears the center of the canvas is 0,0
+
+## node classes
+
+<img src="./images/node-classes-before.png" width="150" height="150">
+<img src="./images/node-classes-after.png" width="150" height="150">
+
+You need to put !important in the CSS
+
+## ImportDiagrams
+
+https://www.svelvet.io/docs/importDiagrams/
+http://localhost:3000/featureImportExport/
+
+Feature works as expected. Note that previous version of Svelvet did not serialize callbacks (there is no general way to do this since callbacks can involve closures). We do not do serialize callbacks in Svelvet6; this includes anchors which are reset to adaptive upon serialization.
+
+As before, any canvas-wide parameters (such as nodeCreate, backgroundColor, etc.) will not be serialized.
+
+This feature is fragile since there is no guarantee that it will work with new features involving nodes and edges. In order to future-proof this feature, it would be best to specify that import/export of diagrams only serializes certain parameters.
+
+## Diagram Boundary
+
+http://localhost:3000/compatibility-15-diagramBoundary/
+https://www.svelvet.io/docs/boundary/
+
+Feature works as expected
+
+## Iteractive Editable nodes
+
+http://localhost:3000/compatibility-16-nodeEdit/
+https://www.svelvet.io/docs/editNodes/
+
+Feature works as expected. NodeEdit is now active by default. This is to reduce store pollution. In addition, node edit chaning width/height of nodes has been removed because this functionality is duplicated by resizableNodes
+
+## Deletable nodes
+
+This feature has been removed to reduce feature bloat. Its functionality is duplicated by Interactive Editable nodes feature.

package/components/graph/svelvet/docs/DESIGN_PATTERNS.md

@@ -0,0 +1,44 @@
+# Design Patterns
+
+Svelvet was originally written as a monolith. This increased development speed but made the code fragile. Teams struggled to implement simple features such as deleting nodes and resizing nodes. One major goal of Svelvet6 was to re-design Svelvet with more robust design patterns. This document serves as an opinionated guide towards how Svelvet should be structured.
+
+## Each Svelvet feature should have its own folder
+
+Svelvet has a lot of features that interact with each other. In order to encourage modularity, each feature should be given its own folder. For example, code related to the "resizableNodes" feature can be found in the folder `$lib/resizableNodes`.
+
+## Svelvet should follow an MVC Architecture
+
+While Svelvet is a frontend libray, it has components that interact in a complex way. As such, code should adhere to an MVC architecture to increase modularity. One useful way to think about MVC is drawing an analogy to frontend/backend/database. The frontend is the "view" of MVC, the backend is the "controller" of MVC, and the database is the "model" of MVC. To that end, within each feature folder there should be four folders: models, views, controllers, types.
+
+- models: holds code related to the internal state of Svelvet
+- controllers: holds code used to interact with the Svelvet models. Ideally, all interaction with Svelvet models/stores should take place through controllers.
+- views: holds code used to visualize the Svelvet state. Ideally, views should not modify models directly.
+- types: holds types/interfaces for Typescript. This is unrelated to MVC.
+
+More comments: Explicitly labeling folders as model/view/controller increases verbosity and most projects do not do this. We feel that this increased verbosity is worth the tradeoff of reminding developers they should be following establshed design patterns when coding. If you are considering removing explicit model/view/controller folders, consider that Svelvet is an OSP where developers may have little to no prior coding experience; increased verbosity may be helpful in guiding developers towards established design principles.
+
+## Svelvet's internal state should be an object-relational data structure
+
+Too Long Didn't Read: The main takeaway can be summed up as: make the Svelvet store look more like PostgreSQL and less like mongoDB.
+
+### A longer explanation
+
+The store holds Svelvet's internal state. We urge future developers to structure the store as a relational object rather than an unstructured object. To give an analogy, if Svelvet was a full-stack app with a backend and database, you should use a postgreSQL instead of mongoDB to store the internal state of Svelvet because nodes/edges are inherently relational. We give an example of a bad design pattern and a good design pattern below.
+
+Suppose you want to implement a "resizableNodes" feature, where users can resize nodes by dragging a node corner. One (bad) way to do this is by could do this by hacking in an extra div on the Node component representing a draggable control point, then hacking in a "resizeNode" method on the Node object so that when the control point is dragged the node is resized. While it may be easier to throw everything on an unstructured Node object, this is bad for modularity. As more and more features get added in, the Node object becomes bloated, difficult to read, and difficult to debug.
+
+The better way to do this is to create a brand new resizableNodes model. This model should hold `nodeId` (a foreign key to a node object), `positionX` (its x-position), and `positionY` (its y-position). This model should also have a method `setPosition` that sets its x,y position, but also sets the width/height of the associated node defined by `nodeId`. Note the similarity of the process described above to adding extra data to a SQL database; a big advantage of SQL is that it is easy to add new relational data by creating a brand new table and linking with a foreign key.
+
+By creating new objects/tables whenever adding new features, you make the code more readable, more modular, and more testable.
+
+### Foreign keys
+
+One question you may come up with when adding new tables is how to structure foreign keys. In our resizableNodes example, we placed a foreign key `nodeId` on our ResizableNode object/table. Alternatively, we could have placed a foreign key `ResizableNodeId` on our Node object/table. How do we choose between these two alternatives (or maybe we could even do two foreign keys)?
+
+You can make the decision on foreign keys based on your component heirarchy. A Node can exist without functionality to resize itself, but a ResizableNode should not exist if its parent Node does not exist. Therefore, you should place a `nodeId` foreign key on ResizableNode.
+
+This decision has the following advantages:
+
+- Increased readability: When developers are reading the Node class definition, they are not overwhelmed by all the different Svelvet features. On the other hand, when developers are reading the ResizableNode class definition, they should realize that ResizableNodes are children of Nodes.
+- Increased modularity: You can remove a ResizableNode without disturbing core Node functionality.
+- Easy deletes: Previous teams struggled with implementing delete functionality. When you think about a SQL database, deleting rows is very simple. You simply delete the row, then specify cascade to delete other rows that reference the primary key of the row you deleted. Keeping a disciplined approach when structuring foreign keys makes the entity hierarchies clear, and makes operations such as delete easy to implement.

package/components/graph/svelvet/docs/DOCUMENTATION.md

@@ -0,0 +1,5 @@
+# Documentation
+
+- Documentation should be written assuming the developer working on Svelvet has coding experience equivalent to six weeks of bootcamp.
+- If you write documents in tsDoc format, you can use TypeDoc to generate documentation automatically. For instructions on how to use TypeDoc, see Tutorials.md
+- Write READMEs for every feature so that future teams can understand how they work. Put your email down if you want to be a resource for future teams.

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

@@ -0,0 +1,34 @@
+# README
+
+This README provides suggestions to developers working on Svelvet.
+
+## What is Svelvet?
+
+Svelvet is a frontend library that allows users to programmatically create graph diagrams. Graphs are composed of nodes and edges; each edge connects two nodes. There are two main challenges when working with Svelvet: (1) nodes and edges interact in complex ways, making new features difficult to implement without interfering with old features, and (2) Svelvet has an active userbase, making breaking changes undesirable.
+
+## Things to think about as a Svelvet developer
+
+- Svelvet teams have 3.5 weeks to iterate on the project, less if you consider time spent on marketing/deployment. It is important for code to be readable, otherwise future teams will be unable to understand the codebase within a reasonable timeframe.
+- It is important to write documentation that is easy understand. Write comments/documentation assuming that developers have ~6 weeks of prior bootcamp experience.
+- Writing non-modular code with zero tests and zero documentation increases technical debt and puts future teams in a bad place. Accumulated technical debt can kill projects.
+- Svelvet has an active userbase. When possible, breaking changes should be avoided. However, if a breaking change must occur, it is better that it happen sooner rather than later.
+
+## Suggestions
+
+- Write modular code, separated by feature. For suggestions, see `./DESIGN_PATTERNS.md`
+
+- Write tests. Svelvet components interact with each other in complex ways, making it difficult to predict whether changes will break Svelvet without tests.
+
+- Writing tests and documentation is good for your resume. A long list of features by itself makes for poor resume; mentioning testing, documentation, and specific technologies used to implement specific features make for a stronger resume.
+
+- Don't leave typescript warnings unaddressed. This makes it so much easier to debug.
+
+## Where to start
+
+Here is one way to start understanding the Svelvet codebase
+
+(1) Read the Node class (`$lib/nodes/models/Node.ts`)
+(2) Create a new branch, delete all features except for nodes, containers, and store, then try to get Svelvet to running only rendering nodes to the screen. You can test Svelvet using routes such as `testingplayground` at `http://localhost:3000/testingplayground`.
+(3) Try to refactor Node.ts. You may notice that Node.ts has 16 fields, when really only six of them are important (id, canvasId, positionX, positionY, widthX, widthY). Create a new table `NodeAttributes` that links to Node via foreign key, move all attributes (bgColor, textColor, etc) to this new table and get Node rendering again.
+(4) After understanding how Node works, add back the "edges" folder. Try to get Svelvet working rendering only nodes and edges to the screen.
+(5) Node / Edge / Anchor form the core tables of Svelvet. All other feature build on top of these core tables.

package/components/graph/svelvet/docs/TODO.md

@@ -0,0 +1,14 @@
+## custom node functionality should be refactored into its own table.''
+
+## tay10alan60@gmail.com - minimap, d3, node deletion, interactiveNodes
+
+## dillan - customSvelete components, deletable nodes, node classes
+
+## Minimap 75 boundless, 200 bounded
+
+## New team:
+
+- split up the website and the svelvet npm package
+- continue store refactoring
+- refactor store dispatch into flux architecture
+- testing - 1 full iteration

package/components/graph/svelvet/docs/Tutorials.md

@@ -0,0 +1,25 @@
+# Tutorials
+
+This file contains instructions on how to do useful things such as generating developer documentation, publishing to npm, etc.
+
+## TypeDoc
+
+You may notice TSDoc comments throughout our code. These TSDoc comments can be converted into documentation using TypeDoc:
+
+```
+npx typedoc --entryPointStrategy expand src/lib
+```
+
+This command will create documentation in root folder `./docs`.
+
+## Publishing to npm
+
+- create an account on npm.js. You can skip this step if you already have an account
+- log in with `$ npm login`
+- Within the `src/lib` directory, type `npm version patch` to increment version number. Or if you want a new name, you can modify `src/lib/package.json` directly
+- In the base directory, type `npm run package`. This will use svelte-kit's package feature to create an npm package in `./package`.
+- Within the `./package` directory, type `npm publish` to publish to npm. Note that you cannot "overwrite" previous publishes, you must increment the version number
+
+## Testing npm package
+
+- install locally with `npm install svelvet-lime@latest -f`, where svelvet-lime is replaced with whatever you named your package. Note that if you have a previously installed version of svelvet, you must force a re-install otherwise you will be using an outdated npm package.