windmill-components 1.77.0 → 1.79.0

package/components/apps/editor/AppComponentInputs.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../inputType';
-import type { AppComponent } from './component';
-declare const __propDef: {
-    props: {
-        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        component: AppComponent;
-        resourceOnly?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppComponentInputsProps = typeof __propDef.props;
-export type AppComponentInputsEvents = typeof __propDef.events;
-export type AppComponentInputsSlots = typeof __propDef.slots;
-export default class AppComponentInputs extends SvelteComponentTyped<AppComponentInputsProps, AppComponentInputsEvents, AppComponentInputsSlots> {
-}
-export {};

package/components/graph/svelvet/nodes/views/EditNode.svelte

@@ -1,147 +0,0 @@
-<script>
-  import { findStore } from '../../store/controllers/storeApi';
-  import { getNodeById } from '../../nodes/controllers/util';
-
-  export let nodeId;
-  export let canvasId;
-  export let isEditing;
-
-  let label;
-  let width;
-  let height;
-  let customClass;
-  let backgroundColor;
-
-  const store = findStore(canvasId);
-
-  const { nodesStore, nodeSelected } = store;
-  let currentNode = $nodesStore[nodeId];
-
-  const editNode = (e) => {
-    e.preventDefault();
-    if (label) currentNode.data.label = label;
-    if (width) currentNode.width = width;
-    if (height) currentNode.height = height;
-    if (backgroundColor) currentNode.bgColor = backgroundColor;
-    width = '';
-    height = '';
-    customClass = '';
-    label = '';
-
-    store.nodesStore.set($nodesStore);
-  };
-</script>
-
-{#if isEditing}
-  <div
-    on:mouseover={(e) => ($nodeSelected = true)}
-    on:focus
-    on:wheel|preventDefault
-    class="EditNode"
-    style="left:{currentNode.positionX +
-      currentNode.width}px; top:{currentNode.positionY}px"
-  >
-    <form on:submit={editNode}>
-      <label for="label-input">Label</label>
-      <input
-        type="text"
-        id="label-input-{nodeId}"
-        placeholder={currentNode.data.label}
-        bind:value={label}
-      />
-
-      <label for="bg-color-input">Background Color</label>
-      <input
-        type="color"
-        id="bg-color-input-{nodeId}"
-        class="bgci"
-        bind:value={backgroundColor}
-      />
-      <input
-        type="text"
-        placeholder={currentNode.bgColor}
-        bind:value={backgroundColor}
-      />
-    </form>
-    <div class="btn-container">
-      <button
-        on:click={(e) => {
-          const store = findStore(canvasId);
-          const node = getNodeById(store, nodeId);
-          node.delete();
-          isEditing = false;
-        }}>Delete Node</button
-      >
-      <button
-        on:click={(e) => {
-          editNode(e);
-          isEditing = false;
-        }}>Submit</button
-      >
-    </div>
-  </div>
-{/if}
-
-<style>
-  .EditNode {
-    position: absolute;
-    padding: 0 1rem 1rem 1rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    border: 1px solid #333333;
-    border-radius: 0.25rem;
-    background-color: #ffffff;
-    z-index: 10;
-    -webkit-user-select: text;
-       -moz-user-select: text;
-            user-select: text;
-    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
-    color: #333333;
-    pointer-events: auto; /* this is needed for pointer events to work since we disable them in graphview */
-  }
-
-  label {
-    font-size: 0.8rem;
-    font-weight: bold;
-    margin-bottom: 0.15rem;
-  }
-
-  .btn-container {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 0.5rem;
-  }
-
-  button {
-    border-radius: 0.25rem;
-    background-color: white;
-    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.4);
-    margin: 0.2rem;
-  }
-
-  input {
-    height: 1.6rem;
-    border-color: #e45b56;
-  }
-
-  .bgci {
-    height: 2rem;
-    width: 5rem;
-    padding: 0;
-    border: none;
-    background-color: none;
-  }
-
-  button:hover {
-    cursor: pointer;
-    background-color: #e45b56;
-    color: white;
-  }
-
-  form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }</style>

package/components/graph/svelvet/nodes/views/EditNode.svelte.d.ts

@@ -1,33 +0,0 @@
-/** @typedef {typeof __propDef.props}  EditNodeProps */
-/** @typedef {typeof __propDef.events}  EditNodeEvents */
-/** @typedef {typeof __propDef.slots}  EditNodeSlots */
-export default class EditNode extends SvelteComponentTyped<{
-    nodeId: any;
-    canvasId: any;
-    isEditing: any;
-}, {
-    focus: FocusEvent;
-    wheel: WheelEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type EditNodeProps = typeof __propDef.props;
-export type EditNodeEvents = typeof __propDef.events;
-export type EditNodeSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        nodeId: any;
-        canvasId: any;
-        isEditing: any;
-    };
-    events: {
-        focus: FocusEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

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

@@ -1,11 +0,0 @@
-import type { StoreType, ResizeNodeType } from '../../store/types/types';
-/**
- * Finds all resizeNodes that matches the conditions specified in the filter parameter from a Svelvet store and returns these resizeNodes in an array
- *
- * @param store The Svelvet store containing the state of a Svelvet component
- * @param filter An object to specify conditions.
- * @returns An array of resizeNode objects that matches the conditions specified in filter parameter
- */
-export declare function getResizeNodes(store: StoreType, filter?: {
-    [key: string]: any;
-}): ResizeNodeType[];

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

@@ -1,24 +0,0 @@
-import { get } from 'svelte/store';
-/**
- * Finds all resizeNodes that matches the conditions specified in the filter parameter from a Svelvet store and returns these resizeNodes in an array
- *
- * @param store The Svelvet store containing the state of a Svelvet component
- * @param filter An object to specify conditions.
- * @returns An array of resizeNode objects that matches the conditions specified in filter parameter
- */
-export function getResizeNodes(store, filter) {
-    let resizeNodes = Object.values(get(store.resizeNodesStore));
-    // filter the array for elements that match filter
-    if (filter !== undefined) {
-        resizeNodes = resizeNodes.filter((resizeNode) => {
-            for (let filterKey in filter) {
-                const filterValue = filter[filterKey];
-                if (resizeNode[filterKey] !== filterValue)
-                    return false;
-            }
-            return true;
-        });
-    }
-    // return list of anchors
-    return resizeNodes;
-}

package/components/graph/svelvet/resizableNodes/models/ResizeNode.d.ts

@@ -1,33 +0,0 @@
-import type { ResizeNodeType } from '../../store/types/types';
-/** A ResizeNode class that implements ResizeNodeType interface
-* @param {string} id The id of the ResizeNode
-* @param {string} canvasId The canvasId of the Svelvet component that the instantiated ResizeNode will be on.
-* @param {string} nodeId The id of the Node that the instantiated ResizedNode will be attached to.
-* @param {number} positionX The X-axis position of the ResizeNode (left top corner of the ResizeNode)
-* @param {number} positionY The Y-axis position of the ResizeNode (left top corner of the ResizeNode)
-*/
-export declare class ResizeNode implements ResizeNodeType {
-    id: string;
-    canvasId: string;
-    nodeId: string;
-    positionX: number;
-    positionY: number;
-    constructor(id: string, canvasId: string, nodeId: string, positionX: number, positionY: number);
-    /**
-     * setPosition will update the positionX and positionY of the ResizeNode. This will be invoked when the Node that this ResizeNode attached to is moving so that the ResizeNode will follow the Node.
-     *
-     * @param movementX The mouse movement value on the X-axis
-     * @param movementY The mouse movement value on the Y-axis
-     */
-    setPosition(movementX: number, movementY: number): void;
-    /**
-     * setPositionAndCascade will update the positionX and positionY of the ResizeNode and also cascade changes to related Node. This will be invoked when the user drags the ResizeNode so the position of the ResizeNode and the width and height of the Node would change accordingly.
-     * @param movementX The mouse movement value on the X-axis
-     * @param movementY The mouse movement value on the Y-axis
-     */
-    setPositionAndCascade(movementX: number, movementY: number): void;
-    /**
-     * delete is going to delete the ResizeNode from the resizeNodesStore.
-     */
-    delete(): void;
-}

package/components/graph/svelvet/resizableNodes/models/ResizeNode.js

@@ -1,71 +0,0 @@
-// import { writable, derived, get, readable } from 'svelte/store';
-import { stores } from '../../store/models/store';
-/** A ResizeNode class that implements ResizeNodeType interface
-* @param {string} id The id of the ResizeNode
-* @param {string} canvasId The canvasId of the Svelvet component that the instantiated ResizeNode will be on.
-* @param {string} nodeId The id of the Node that the instantiated ResizedNode will be attached to.
-* @param {number} positionX The X-axis position of the ResizeNode (left top corner of the ResizeNode)
-* @param {number} positionY The Y-axis position of the ResizeNode (left top corner of the ResizeNode)
-*/
-export class ResizeNode {
-    id;
-    canvasId;
-    nodeId;
-    positionX;
-    positionY;
-    constructor(id, canvasId, nodeId, positionX, positionY) {
-        this.id = id;
-        this.canvasId = canvasId;
-        this.nodeId = nodeId;
-        this.positionX = positionX;
-        this.positionY = positionY;
-    }
-    /**
-     * setPosition will update the positionX and positionY of the ResizeNode. This will be invoked when the Node that this ResizeNode attached to is moving so that the ResizeNode will follow the Node.
-     *
-     * @param movementX The mouse movement value on the X-axis
-     * @param movementY The mouse movement value on the Y-axis
-     */
-    setPosition(movementX, movementY) {
-        this.positionX += movementX;
-        this.positionY += movementY;
-    }
-    /**
-     * setPositionAndCascade will update the positionX and positionY of the ResizeNode and also cascade changes to related Node. This will be invoked when the user drags the ResizeNode so the position of the ResizeNode and the width and height of the Node would change accordingly.
-     * @param movementX The mouse movement value on the X-axis
-     * @param movementY The mouse movement value on the Y-axis
-     */
-    setPositionAndCascade(movementX, movementY) {
-        //declare variables needed to interact with the corresponding node to this resize anchor
-        const nodeId = this.nodeId;
-        const { nodesStore } = stores[this.canvasId];
-        //Updates the width/height of the corresponding Node
-        nodesStore.update((nodes) => {
-            const node = nodes[nodeId];
-            //sets condition so node cannot be less than 20 px in width or height.
-            if (node.width + movementX > 20 && node.height + movementY > 20) {
-                //Updates position to this resizeNode anchor. Must be done within the update method so ensure the position doesn't change if the width goes below 20px
-                this.positionX += movementX;
-                this.positionY += movementY;
-                //setSizeFromMovement will then update the anchors position as the width & height changes
-                node.setSizeFromMovement(movementX, movementY);
-            }
-            return { ...nodes };
-        });
-    }
-    /**
-     * delete is going to delete the ResizeNode from the resizeNodesStore.
-     */
-    delete() {
-        const store = stores[this.canvasId];
-        const { resizeNodesStore } = stores[this.canvasId];
-        resizeNodesStore.update((resizeNodes) => {
-            for (const resizeNodeId in resizeNodes) {
-                if (resizeNodes[resizeNodeId].id === this.id) {
-                    delete resizeNodes[resizeNodeId];
-                }
-            }
-            return { ...resizeNodes };
-        });
-    }
-}

package/components/graph/svelvet/resizableNodes/views/ResizeNode.svelte

@@ -1,81 +0,0 @@
-<script>import { findStore } from '../../store/controllers/storeApi';
-import { writable, derived, get, readable } from 'svelte/store';
-export let resizeId;
-export let canvasId;
-const store = findStore(canvasId);
-const { resizeNodesStore, nodeSelected } = store;
-let isSelected = false;
-let reactResizeNode;
-$: reactResizeNode = $resizeNodesStore[resizeId];
-</script>
-
-<svelte:window
-  on:mousemove={(e) => {
-    e.preventDefault();
-    if (isSelected) {
-      resizeNodesStore.update((resNode) => {
-        const newResNode = resNode[resizeId];
-        const d3Scale = get(store.d3Scale);
-        newResNode.setPositionAndCascade(
-          e.movementX / d3Scale,
-          e.movementY / d3Scale,
-          resizeId
-        );
-        return { ...resNode };
-      });
-    }
-  }}
-  on:mouseup={(e) => {
-    e.preventDefault();
-    // don't need to set $nodeSelected = false because Node component will do it for you
-    isSelected = false;
-  }}
-/>
-
-<div
-  on:mousedown={(e) => {
-    e.preventDefault();
-    $nodeSelected = true;
-    isSelected = true;
-  }}
-  on:mouseover={(e) => ($nodeSelected = true)}
-  on:focus
-  on:mouseleave={(e) => ($nodeSelected = false)}
-  on:mouseenter={(e) => ($nodeSelected = true)}
-  on:wheel|preventDefault
-  class="ResizeNode"
-  style="
-  left: {reactResizeNode.positionX - 10}px;
-  top: {reactResizeNode.positionY - 10}px;
-  width: {20}px;
-  height: {20}px;
-  background-color: purple;
-  border-color: purple;
-  border-radius: 50%;"
-  id="svelvet-{resizeId}"
-/>
-
-<style>
-  .ResizeNode {
-    position: absolute;
-    display: grid;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    cursor: move;
-    justify-content: center;
-    overscroll-behavior: auto;
-    align-items: center;
-    font-size: 14px;
-    text-align: center;
-    border: solid 1px black;
-    border-radius: 5px;
-    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2);
-    opacity: 0;
-    pointer-events: auto; /* this is needed for pointer events to work since we disable them in graphview */
-  }
-
-  .ResizeNode:hover {
-    cursor: nwse-resize;
-    opacity: 0.5;
-  }</style>

package/components/graph/svelvet/resizableNodes/views/ResizeNode.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        resizeId: string;
-        canvasId: string;
-    };
-    events: {
-        focus: FocusEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ResizeNodeProps = typeof __propDef.props;
-export type ResizeNodeEvents = typeof __propDef.events;
-export type ResizeNodeSlots = typeof __propDef.slots;
-export default class ResizeNode extends SvelteComponentTyped<ResizeNodeProps, ResizeNodeEvents, ResizeNodeSlots> {
-}
-export {};