@visuallyjs/browser-ui-svelte 1.2.4 → 1.2.6

package/DiagramPaletteComponent.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
 
 	import {type DiagramPaletteProps} from "./definitions";
-    import {Diagram, DiagramPalette, log} from "@visuallyjs/browser-ui";
-    import {internal_getDiagramContext} from "./diagram-store";
-    import {onMount} from "svelte";
+    import {DiagramPalette} from "@visuallyjs/browser-ui";
     import {useDiagram} from "./use-diagram.svelte";
 
     let initialised = false
@@ -30,7 +28,13 @@
                 autoExitDrawMode:props.autoExitDrawMode,
                 selectAfterAdd:props.selectAfterAdd,
                 onVertexAdded:props.onVertexAdded,
-                preparedShapes:props.preparedShapes
+                preparedShapes:props.preparedShapes,
+                allowDropOnEdge:props.allowDropOnEdge,
+                allowRotation:props.allowRotation,
+                rotationSpeed:props.rotationSpeed,
+                autoEdgeConnect:props.autoEdgeConnect,
+                showGroups:props.showGroups !== false,
+                updateTypeOnPaletteTap:props.updateTypeOnPaletteTap
             })
 		}
 	})

package/PaletteComponent.svelte

@@ -27,7 +27,10 @@
 		allowDropOnGroup = true,
 		allowDropOnCanvas = true,
 		allowDropOnNode = false,
-		ignoreDropOnNode = false
+		ignoreDropOnNode = false,
+		allowRotation = true,
+		rotationSpeed = 2000,
+		autoEdgeConnect = false
     }:PaletteComponentProps = $props()
 
     $effect(() => {
@@ -48,7 +51,10 @@
                 allowDropOnEdge,
                 allowDropOnCanvas,
                 allowDropOnGroup,
-                ignoreDropOnNode
+                ignoreDropOnNode,
+                allowRotation,
+                rotationSpeed,
+                autoEdgeConnect
             })
         }
 

package/PaperComponent.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, type Snippet } from "svelte";
+    import { onMount, untrack, type Snippet } from "svelte";
     import {
         BrowserUISvelteModel,
         newInstance,
@@ -55,7 +55,7 @@
 
     const paperContext = internal_getPaperContext(false);
 
-    let paper:Paper;
+    let paper = $state<Paper>();
 
     export function getPaper() {
         return paper
@@ -201,6 +201,30 @@
         el.parentNode && el.parentNode.removeChild(el);
     }
 
+    $effect(() => {
+        if (url != null && paper != null) {
+            untrack(() => {
+                paper.model.clear();
+                requestAnimationFrame(() => {
+                    paper.model.load({ url, dataType });
+				})
+
+            });
+        }
+    });
+
+    $effect(() => {
+        if (data != null && paper != null) {
+            untrack(() => {
+                paper.model.clear();
+                requestAnimationFrame(() => {
+                    paper.model.load({ data, dataType });
+				})
+
+            });
+        }
+    });
+
     onMount(async () => {
         model = model || newInstance(modelOptions || {});
 
@@ -336,14 +360,6 @@
             _overlays = []
             _updateOverlayState()
         })
-
-        $effect(() => {
-            if (url != null && model != null) {
-                model.load({ url, dataType });
-            } else if (data != null && model != null) {
-                model.load({ data, dataType });
-            }
-        })
     });
 
 </script>

package/ShapeComponent.svelte

@@ -11,6 +11,7 @@
         showLabels = false,
         labelProperty = DEFAULT_LABEL_PROPERTY,
         labelStrokeWidth = "0.25px",
+		labelPosition = "center",
 		font
     }:ShapeComponentProps = $props()
 

package/ShapePaletteComponent.svelte

@@ -22,7 +22,13 @@
 		allowClickToAdd,
 		autoExitDrawMode,
 		inspector = true,
-		preparedShapes
+		updateTypeOnPaletteTap = false,
+		preparedShapes,
+		allowDropOnEdge,
+		allowRotation = true,
+		rotationSpeed = 2000,
+		autoEdgeConnect,
+		showGroups = true
     }:ShapePaletteComponentProps = $props()
 
     let container:HTMLElement
@@ -57,8 +63,13 @@
 					fill,
 					dragSize,
 					inspector,
-					preparedShapes
-
+					updateTypeOnPaletteTap,
+					preparedShapes,
+					allowDropOnEdge,
+					allowRotation,
+					rotationSpeed,
+					autoEdgeConnect,
+					showGroups
                 })
 
 			}

package/SurfaceComponent.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount, type Snippet } from "svelte";
+    import {onMount, type Snippet, untrack} from "svelte";
     import {
         BrowserUISvelteModel, internal_createDiagramContext,
         newInstance,
@@ -55,7 +55,7 @@
 
     const surfaceContext = internal_getSurfaceContext(false);
 
-    let surface:Surface;
+    let surface = $state<Surface>();
 
     export function getSurface() {
         return surface
@@ -201,6 +201,28 @@
         el.parentNode && el.parentNode.removeChild(el);
     }
 
+    $effect(() => {
+        if (url != null && surface != null) {
+            untrack(() => {
+                surface.model.clear();
+                requestAnimationFrame(() => {
+                    surface.model.load({url, dataType});
+                })
+            });
+        }
+    });
+
+    $effect(() => {
+        if (data != null && surface != null) {
+            untrack(() => {
+                surface.model.clear();
+                requestAnimationFrame(() => {
+                    surface.model.load({data, dataType});
+                })
+            });
+        }
+    });
+
     onMount(async () => {
         model = model || newInstance(modelOptions || {});
 
@@ -329,7 +351,6 @@
         model.bind<EdgeUpdatedParams>(EVENT_EDGE_UPDATED, (p) => updateOverlays(p.edge.id, p));
         model.bind<EdgeRemovedParams>(EVENT_EDGE_REMOVED, (p) => removeOverlays(p.edge.id));
 
-
         model.bind(EVENT_GRAPH_CLEARED, () => {
             _vertices = []
             _updateVertexState()
@@ -337,14 +358,6 @@
             _updateOverlayState()
         })
 
-		// TODO how can this be made reactive
-        $effect(() => {
-            if (url != null && model != null) {
-                model.load({ url, dataType });
-            } else if (data != null && model != null) {
-                model.load({ data, dataType });
-            }
-        })
     });
 
 </script>

package/definitions.d.ts

@@ -1,6 +1,6 @@
 import { type Snippet } from "svelte";
 import type { DOMAttributes } from "svelte/elements";
-import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, DropTargetInfo, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, BrowserUI, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, FontSpec, BrowserUIModel, PreparedShape, PointXY, FixedElementConstraints, PopupPosition, OverlaySpec, PaperOptions, TilingStrategy, GridType, Grid } from "@visuallyjs/browser-ui";
+import { SurfaceOptions, Vertex, Group, Node, ControlsComponentButtons, DataGeneratorFunction, type BrowserElement, Base, Size, ObjectData, PaletteMode, SvgExportUIOptions, ImageExportUIOptions, ShapeLibraryImpl, ModelOptions, DiagramOptions, Diagram, DiagramCell, NodeMapping, GroupMapping, PortMapping, BrowserUI, EdgeMapping, OnVertexAddedCallback, CanvasDropFilter, FontSpec, BrowserUIModel, PreparedShape, PointXY, FixedElementConstraints, PopupPosition, OverlaySpec, PaperOptions, TilingStrategy, type GridType, Grid, type AutoEdgeConnectOptions, CanDropOnEdgeFilter, LabelPosition } from "@visuallyjs/browser-ui";
 /**
  * Render options for a SurfaceComponent. This interface is the same as SurfaceOptions but with several vanilla-only options removed.
  */
@@ -334,7 +334,7 @@ export interface PaletteComponentProps extends DOMAttributes<HTMLDivElement> {
     /**
      * Whether or not to allow drop on edge. Defaults to false.
      */
-    allowDropOnEdge?: boolean;
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
     /**
      * Whether or not to allow drop on whitespace in the canvas. Defaults to true.
      */
@@ -351,6 +351,22 @@ export interface PaletteComponentProps extends DOMAttributes<HTMLDivElement> {
      * Defaults to false. When true, the palette treats nodes as if they are part of the canvas - a user can drag new items on top of existing nodes and the new item will be added to the canvas. If you want to force your users to drop on canvas whitespace, don't set this.  Note that this flag will force `allowDropOnNode` to `false`.
      */
     ignoreDropOnNode?: boolean;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
+    /**
+     * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     */
+    showGroups?: boolean;
 }
 /**
  * @group Props
@@ -444,7 +460,7 @@ export interface ShapePaletteComponentProps extends DOMAttributes<HTMLDivElement
      * @param v
      * @param dropTarget
      */
-    onVertexAdded?: (v: Vertex, dropTarget?: DropTargetInfo) => any;
+    onVertexAdded?: OnVertexAddedCallback;
     /**
      * Mode to operate in - 'drag' or 'tap'. Defaults to 'drag' (DROP_MANAGER_MODE_DRAG).
      */
@@ -458,13 +474,38 @@ export interface ShapePaletteComponentProps extends DOMAttributes<HTMLDivElement
      */
     autoExitDrawMode?: boolean;
     /**
-     * Indicates two things: first, when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Secondly, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
+     * When `true`, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
      */
     inspector?: boolean;
+    /**
+     * When `true`, clicking on an entry in the palette will change the type of any selected vertices to that type. Defaults to `false`.
+     * This is a potentially destructive operation if the properties of the new shape type are not compatible with the old one.
+     */
+    updateTypeOnPaletteTap?: boolean;
     /**
      * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
      */
     preparedShapes?: Array<PreparedShape>;
+    /**
+     * Whether or not to allow drop on edge. Defaults to false.
+     */
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
+    /**
+     * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     */
+    showGroups?: boolean;
 }
 /**
  * @group Props
@@ -486,6 +527,10 @@ export interface ShapeComponentProps extends DOMAttributes<HTMLDivElement> {
      * Stroke width to use on the text element rendering a label. Defaults to "0.25px".
      */
     labelStrokeWidth: string;
+    /**
+    * Defaults to "center". Use "top" or "bottom" to set the label above or below the shape.
+    */
+    labelPosition?: LabelPosition;
     /**
      * Optional font size/style.
      */
@@ -707,9 +752,14 @@ export interface DiagramPaletteProps extends DOMAttributes<HTMLDivElement> {
      */
     dragSize?: Size;
     /**
-     * Indicates that when one or more vertices are selected, clicking on an entry in the palette will change the type of the selected vertices to that type. Defaults to true.
+     * When `true`, selecting an element in the canvas will cause its related shape to be selected in the palette. Defaults to true.
      */
     inspector?: boolean;
+    /**
+     * When `true`, clicking on an entry in the palette will change the type of any selected vertices to that type. Defaults to `false`.
+     * This is a potentially destructive operation if the properties of the new shape type are not compatible with the old one.
+     */
+    updateTypeOnPaletteTap?: boolean;
     /**
      * Optional size to use for icons. Defaults to 150x100 pixels. If you provide this but not `dragSize` this size will also be used for an icon that is being dragged.
      */
@@ -764,6 +814,26 @@ export interface DiagramPaletteProps extends DOMAttributes<HTMLDivElement> {
      * Optional set of prepared shapes to show in the palette. When this is provided, the palette will only render these shapes, and not the contents of the shape library.
      */
     preparedShapes?: Array<PreparedShape>;
+    /**
+     * Whether or not to allow drop on edge. Defaults to false.
+     */
+    allowDropOnEdge?: boolean | CanDropOnEdgeFilter<any>;
+    /**
+     * Whether or not to allow rotation of elements being dragged. Defaults to true.
+     */
+    allowRotation?: boolean;
+    /**
+     * The number of milliseconds required to complete a full rotation of an element when the trigger key is held down. Defaults to 2000.
+     */
+    rotationSpeed?: number;
+    /**
+     * Controls whether the palette will automatically connect a new vertex being dragged onto the canvas to existing vertices, if the shape definitions for the new vertex and/or the existing vertices have source/target elements. You can set this to simply 'true', and use defaults, or you can provide values for various options.
+     */
+    autoEdgeConnect?: boolean | AutoEdgeConnectOptions;
+    /**
+     * Whether or not to show groups in the palette. Defaults to true.
+     */
+    showGroups?: boolean;
 }
 /**
  * Props for the ColorPicker inspector component.

package/package.json

@@ -1 +1 @@
-{"name":"@visuallyjs/browser-ui-svelte","version":"1.2.4","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","PaperComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaperProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","OverlayWrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte","SurfacePopup.svelte","GridBackgroundComponent.svelte","ImageBackgroundComponent.svelte","TiledImageBackgroundComponent.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.4"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
+{"name":"@visuallyjs/browser-ui-svelte","version":"1.2.6","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","PaperComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaperProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","OverlayWrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte","SurfacePopup.svelte","GridBackgroundComponent.svelte","ImageBackgroundComponent.svelte","TiledImageBackgroundComponent.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.6"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}