@visuallyjs/browser-ui-angular 1.2.3 → 1.2.5

package/fesm2022/visuallyjs-browser-ui-angular.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { signal, Injectable, inject, ElementRef, effect, Input, Component, ChangeDetectorRef, computed, Directive, input, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, TemplateRef, ViewChild, ContentChild, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { log, Surface, Paper, MiniviewPlugin, EVENT_EDGE_UPDATED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED, EVENT_PORT_UPDATED, EVENT_ZOOM, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_PORT_ADDED, EVENT_DATA_LOAD_END, EVENT_EDGE_ADDED, EVENT_EDGE_REMOVED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, BackgroundPlugin, SimpleBackground, TiledBackground, GeneratedGridBackground, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
+import { log, Surface, Paper, MiniviewPlugin, EVENT_EDGE_UPDATED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED, EVENT_PORT_UPDATED, EVENT_ZOOM, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_PORT_ADDED, EVENT_DATA_LOAD_END, EVENT_EDGE_ADDED, EVENT_EDGE_REMOVED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, UNDO_VIEW_BOX, UNDO_PATH, REDO_VIEW_BOX, REDO_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, BackgroundPlugin, SimpleBackground, TiledBackground, GeneratedGridBackground, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
 
 
 class VisuallyJsService {
@@ -657,7 +657,7 @@ class SurfaceComponent {
             if (currentData) {
                 if (this.model) {
                     this.model.clear();
-                    this.model.load({ data: currentData });
+                    this.model.load({ data: currentData, dataType: this.dataType });
                 }
             }
         });
@@ -668,7 +668,7 @@ class SurfaceComponent {
                 // For example, if you need to reload the model with new data:
                 if (this.model) {
                     this.model.clear();
-                    this.model.load({ url: currentUrl });
+                    this.model.load({ url: currentUrl, dataType: this.dataType });
                 }
             }
         });
@@ -948,10 +948,10 @@ class SurfaceComponent {
             const initialData = this.data();
             const initialUrl = this.url();
             if (initialData) {
-                this.model.load({ data: initialData });
+                this.model.load({ data: initialData, dataType: this.dataType });
             }
             else if (initialUrl) {
-                this.model.load({ url: initialUrl });
+                this.model.load({ url: initialUrl, dataType: this.dataType });
             }
         });
     }
@@ -969,7 +969,7 @@ class SurfaceComponent {
         this.surface.unbind(EVENT_INTERNAL_CONNECTION, this.edgeAddFn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SurfaceComponent, selector: "vjs-surface", inputs: { inputModel: { classPropertyName: "inputModel", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, viewOptions: { classPropertyName: "viewOptions", publicName: "viewOptions", isSignal: false, isRequired: false, transformFunction: null }, renderOptions: { classPropertyName: "renderOptions", publicName: "renderOptions", isSignal: false, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: SurfaceComponent, selector: "vjs-surface", inputs: { inputModel: { classPropertyName: "inputModel", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, viewOptions: { classPropertyName: "viewOptions", publicName: "viewOptions", isSignal: false, isRequired: false, transformFunction: null }, renderOptions: { classPropertyName: "renderOptions", publicName: "renderOptions", isSignal: false, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SurfaceComponent, decorators: [{
             type: Component,
@@ -986,6 +986,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], modelOptions: [{
                 type: Input
+            }], dataType: [{
+                type: Input
             }], vertexEvent: [{
                 type: Output
             }] } });
@@ -1009,6 +1011,18 @@ class ShapePaletteComponent {
         this.paletteStrokeWidth = 1;
         
         this.dataGenerator = undefined;
+        
+        this.allowDropOnEdge = false;
+        
+        this.allowRotation = true;
+        
+        this.rotationSpeed = 2000;
+        
+        this.showGroups = true;
+        
+        this.inspector = true;
+        
+        this.updateTypeOnPaletteTap = false;
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
         this.ui = this.$vjs.ui;
@@ -1031,13 +1045,20 @@ class ShapePaletteComponent {
                     paletteStrokeWidth: this.paletteStrokeWidth,
                     dataGenerator: this.dataGenerator,
                     onVertexAdded: this.onVertexAdded,
-                    preparedShapes: this.preparedShapes
+                    preparedShapes: this.preparedShapes,
+                    allowDropOnEdge: this.allowDropOnEdge,
+                    allowRotation: this.allowRotation,
+                    rotationSpeed: this.rotationSpeed,
+                    autoEdgeConnect: this.autoEdgeConnect,
+                    showGroups: this.showGroups,
+                    inspector: this.inspector,
+                    updateTypeOnPaletteTap: this.updateTypeOnPaletteTap
                 });
             }
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapePaletteComponent, selector: "vjs-shape-palette", inputs: { initialSet: "initialSet", dragSize: "dragSize", iconSize: "iconSize", fill: "fill", outline: "outline", showAllMessage: "showAllMessage", selectAfterDrop: "selectAfterDrop", paletteStrokeWidth: "paletteStrokeWidth", onVertexAdded: "onVertexAdded", dataGenerator: "dataGenerator", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapePaletteComponent, selector: "vjs-shape-palette", inputs: { initialSet: "initialSet", dragSize: "dragSize", iconSize: "iconSize", fill: "fill", outline: "outline", showAllMessage: "showAllMessage", selectAfterDrop: "selectAfterDrop", paletteStrokeWidth: "paletteStrokeWidth", onVertexAdded: "onVertexAdded", dataGenerator: "dataGenerator", preparedShapes: "preparedShapes", allowDropOnEdge: "allowDropOnEdge", allowRotation: "allowRotation", rotationSpeed: "rotationSpeed", autoEdgeConnect: "autoEdgeConnect", showGroups: "showGroups", inspector: "inspector", updateTypeOnPaletteTap: "updateTypeOnPaletteTap" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
             type: Component,
@@ -1067,6 +1088,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], preparedShapes: [{
                 type: Input
+            }], allowDropOnEdge: [{
+                type: Input
+            }], allowRotation: [{
+                type: Input
+            }], rotationSpeed: [{
+                type: Input
+            }], autoEdgeConnect: [{
+                type: Input
+            }], showGroups: [{
+                type: Input
+            }], inspector: [{
+                type: Input
+            }], updateTypeOnPaletteTap: [{
+                type: Input
             }] } });
 
 
@@ -1258,7 +1293,7 @@ class ControlsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ControlsComponent, selector: "vjs-controls", inputs: { undoRedo: "undoRedo", zoomToExtents: "zoomToExtents", zoomButtons: "zoomButtons", clear: "clear", clearMessage: "clearMessage", buttons: "buttons", orientation: "orientation" }, ngImport: i0, template: "<div class=\"vjs-controls\" [attr.data-vjs-orientation]=\"orientation\">\n    <i *ngIf=\"showPanButton\" class=\"vjs-pan-mode vjs-selected-mode\" data-mode=\"pan\" title=\"Pan Mode\" (click)=\"panMode()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\">\n        <path d=\"M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5 M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5 M14 5.5a1.5 1.5 0 0 1 3 0v6.5 M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47\"></path>\n      </svg>\n    </i>\n    <i *ngIf=\"showLassoButton\" class=\"vjs-select-mode\" data-mode=\"select\" title=\"Select Mode\" (click)=\"selectMode()\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path d=\"M18.2848192,17.5777124 L20.8535534,20.1464466 C21.0488155,20.3417088 21.0488155,20.6582912 20.8535534,20.8535534 C20.6582912,21.0488155 20.3417088,21.0488155 20.1464466,20.8535534 L17.5777124,18.2848192 L15.9160251,20.7773501 C15.6899572,21.116452 15.1749357,21.0571624 15.0318354,20.6755617 L12.0318354,12.6755617 C11.8811067,12.2736185 12.2736185,11.8811067 12.6755617,12.0318354 L20.6755617,15.0318354 C21.0571624,15.1749357 21.116452,15.6899572 20.7773501,15.9160251 L18.2848192,17.5777124 L18.2848192,17.5777124 Z M17.2312404,17.0782479 L19.4104716,15.6254271 L13.3544004,13.3544004 L15.6254271,19.4104716 L17.0782479,17.2312404 C17.0974475,17.2011742 17.1201804,17.1727128 17.1464466,17.1464466 C17.1727128,17.1201804 17.2011742,17.0974475 17.2312404,17.0782479 L17.2312404,17.0782479 Z M5.5,3 C5.77614237,3 6,3.22385763 6,3.5 C6,3.77614237 5.77614237,4 5.5,4 C4.67157288,4 4,4.67157288 4,5.5 C4,5.77614237 3.77614237,6 3.5,6 C3.22385763,6 3,5.77614237 3,5.5 C3,4.11928813 4.11928813,3 5.5,3 Z M8.5,4 C8.22385763,4 8,3.77614237 8,3.5 C8,3.22385763 8.22385763,3 8.5,3 L10.5,3 C10.7761424,3 11,3.22385763 11,3.5 C11,3.77614237 10.7761424,4 10.5,4 L8.5,4 Z M13.5,4 C13.2238576,4 13,3.77614237 13,3.5 C13,3.22385763 13.2238576,3 13.5,3 L15.5,3 C15.7761424,3 16,3.22385763 16,3.5 C16,3.77614237 15.7761424,4 15.5,4 L13.5,4 Z M8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L10.5,20 C10.7761424,20 11,20.2238576 11,20.5 C11,20.7761424 10.7761424,21 10.5,21 L8.5,21 Z M3,8.5 C3,8.22385763 3.22385763,8 3.5,8 C3.77614237,8 4,8.22385763 4,8.5 L4,10.5 C4,10.7761424 3.77614237,11 3.5,11 C3.22385763,11 3,10.7761424 3,10.5 L3,8.5 Z M3,13.5 C3,13.2238576 3.22385763,13 3.5,13 C3.77614237,13 4,13.2238576 4,13.5 L4,15.5 C4,15.7761424 3.77614237,16 3.5,16 C3.22385763,16 3,15.7761424 3,15.5 L3,13.5 Z M3,18.5 C3,18.2238576 3.22385763,18 3.5,18 C3.77614237,18 4,18.2238576 4,18.5 C4,19.3284271 4.67157288,20 5.5,20 C5.77614237,20 6,20.2238576 6,20.5 C6,20.7761424 5.77614237,21 5.5,21 C4.11928813,21 3,19.8807119 3,18.5 Z M21,10.5 C21,10.7761424 20.7761424,11 20.5,11 C20.2238576,11 20,10.7761424 20,10.5 L20,8.5 C20,8.22385763 20.2238576,8 20.5,8 C20.7761424,8 21,8.22385763 21,8.5 L21,10.5 Z M21,5.5 C21,5.77614237 20.7761424,6 20.5,6 C20.2238576,6 20,5.77614237 20,5.5 C20,4.67157288 19.3284271,4 18.5,4 C18.2238576,4 18,3.77614237 18,3.5 C18,3.22385763 18.2238576,3 18.5,3 C19.8807119,3 21,4.11928813 21,5.5 Z\"></path>\n      </svg>\n    </i>\n\n    <i *ngFor=\"let button of modeButtons\" data-mode=\"{{ button.mode }}\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n\n    <i *ngIf=\"zoomToExtents\" class=\"vjs-zoom-to-fit\" data-reset=\"true\"title=\"Zoom To Fit\" (click)=\"zoomToFit()\">\n        <svg viewBox=\"0 0 32 30\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-in\" data-zoom-in=\"true\" title=\"Zoom In\" (click)=\"zoomIn()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 13 6 L 13 20 M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-out\" data-zoom-out=\"true\" title=\"Zoom Out\" (click)=\"zoomOut()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"undoRedo\" class=\"vjs-undo\" data-undo=\"true\" title=\"Undo last action\" (click)=\"undo()\"></i>\n    <i *ngIf=\"undoRedo\" class=\"vjs-redo\" data-redo=\"true\" title=\"Redo last action\" (click)=\"redo()\"></i>\n    <i class=\"vjs-controls-reset-selection\" title=\"Clear selection\" (click)=\"resetSelection()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M2,5 V2 H5 M9,2 H11 M13,2 H15 M19,2 H22 V5 M22,9 V11 M22,13 V15 M22,19 V22 H19 M15,22 H13 M11,22 H9 M5,22 H2 V19 M2,15 V13 M2,11 V9 M9,9 L15,15 M15,9 L9,15\"></path></svg>\n    </i>\n    <i *ngIf=\"clear\" class=\"vjs-clear-dataset\" [title]=\"clearMessage\" (click)=\"doClear()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path></svg>\n    </i>\n    <i *ngFor=\"let button of otherButtons\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ControlsComponent, selector: "vjs-controls", inputs: { undoRedo: "undoRedo", zoomToExtents: "zoomToExtents", zoomButtons: "zoomButtons", clear: "clear", clearMessage: "clearMessage", buttons: "buttons", orientation: "orientation" }, ngImport: i0, template: "<div class=\"vjs-controls\" [attr.data-vjs-orientation]=\"orientation\">\n    <i *ngIf=\"showPanButton\" class=\"vjs-pan-mode vjs-selected-mode\" data-mode=\"pan\" title=\"Pan Mode\" (click)=\"panMode()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\">\n        <path d=\"M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5 M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5 M14 5.5a1.5 1.5 0 0 1 3 0v6.5 M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47\"></path>\n      </svg>\n    </i>\n    <i *ngIf=\"showLassoButton\" class=\"vjs-select-mode\" data-mode=\"select\" title=\"Select Mode\" (click)=\"selectMode()\">\n      <svg fill=\"currentColor\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n        <path d=\"M18.2848192,17.5777124 L20.8535534,20.1464466 C21.0488155,20.3417088 21.0488155,20.6582912 20.8535534,20.8535534 C20.6582912,21.0488155 20.3417088,21.0488155 20.1464466,20.8535534 L17.5777124,18.2848192 L15.9160251,20.7773501 C15.6899572,21.116452 15.1749357,21.0571624 15.0318354,20.6755617 L12.0318354,12.6755617 C11.8811067,12.2736185 12.2736185,11.8811067 12.6755617,12.0318354 L20.6755617,15.0318354 C21.0571624,15.1749357 21.116452,15.6899572 20.7773501,15.9160251 L18.2848192,17.5777124 L18.2848192,17.5777124 Z M17.2312404,17.0782479 L19.4104716,15.6254271 L13.3544004,13.3544004 L15.6254271,19.4104716 L17.0782479,17.2312404 C17.0974475,17.2011742 17.1201804,17.1727128 17.1464466,17.1464466 C17.1727128,17.1201804 17.2011742,17.0974475 17.2312404,17.0782479 L17.2312404,17.0782479 Z M5.5,3 C5.77614237,3 6,3.22385763 6,3.5 C6,3.77614237 5.77614237,4 5.5,4 C4.67157288,4 4,4.67157288 4,5.5 C4,5.77614237 3.77614237,6 3.5,6 C3.22385763,6 3,5.77614237 3,5.5 C3,4.11928813 4.11928813,3 5.5,3 Z M8.5,4 C8.22385763,4 8,3.77614237 8,3.5 C8,3.22385763 8.22385763,3 8.5,3 L10.5,3 C10.7761424,3 11,3.22385763 11,3.5 C11,3.77614237 10.7761424,4 10.5,4 L8.5,4 Z M13.5,4 C13.2238576,4 13,3.77614237 13,3.5 C13,3.22385763 13.2238576,3 13.5,3 L15.5,3 C15.7761424,3 16,3.22385763 16,3.5 C16,3.77614237 15.7761424,4 15.5,4 L13.5,4 Z M8.5,21 C8.22385763,21 8,20.7761424 8,20.5 C8,20.2238576 8.22385763,20 8.5,20 L10.5,20 C10.7761424,20 11,20.2238576 11,20.5 C11,20.7761424 10.7761424,21 10.5,21 L8.5,21 Z M3,8.5 C3,8.22385763 3.22385763,8 3.5,8 C3.77614237,8 4,8.22385763 4,8.5 L4,10.5 C4,10.7761424 3.77614237,11 3.5,11 C3.22385763,11 3,10.7761424 3,10.5 L3,8.5 Z M3,13.5 C3,13.2238576 3.22385763,13 3.5,13 C3.77614237,13 4,13.2238576 4,13.5 L4,15.5 C4,15.7761424 3.77614237,16 3.5,16 C3.22385763,16 3,15.7761424 3,15.5 L3,13.5 Z M3,18.5 C3,18.2238576 3.22385763,18 3.5,18 C3.77614237,18 4,18.2238576 4,18.5 C4,19.3284271 4.67157288,20 5.5,20 C5.77614237,20 6,20.2238576 6,20.5 C6,20.7761424 5.77614237,21 5.5,21 C4.11928813,21 3,19.8807119 3,18.5 Z M21,10.5 C21,10.7761424 20.7761424,11 20.5,11 C20.2238576,11 20,10.7761424 20,10.5 L20,8.5 C20,8.22385763 20.2238576,8 20.5,8 C20.7761424,8 21,8.22385763 21,8.5 L21,10.5 Z M21,5.5 C21,5.77614237 20.7761424,6 20.5,6 C20.2238576,6 20,5.77614237 20,5.5 C20,4.67157288 19.3284271,4 18.5,4 C18.2238576,4 18,3.77614237 18,3.5 C18,3.22385763 18.2238576,3 18.5,3 C19.8807119,3 21,4.11928813 21,5.5 Z\"></path>\n      </svg>\n    </i>\n\n    <i *ngFor=\"let button of modeButtons\" data-mode=\"{{ button.mode }}\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n\n    <i *ngIf=\"zoomToExtents\" class=\"vjs-zoom-to-fit\" data-reset=\"true\"title=\"Zoom To Fit\" (click)=\"zoomToFit()\">\n        <svg viewBox=\"0 0 32 30\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-in\" data-zoom-in=\"true\" title=\"Zoom In\" (click)=\"zoomIn()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 13 6 L 13 20 M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"zoomButtons\" class=\"vjs-zoom-out\" data-zoom-out=\"true\" title=\"Zoom Out\" (click)=\"zoomOut()\">\n      <svg viewBox=\"0 0 32 32\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M 6 13 L 20 13 M 22,22 L 30,30 M1, 13 a 12,12 0 1,0 24,0 a 12,12 0 1,0 -24,0\"></path></svg>\n    </i>\n\n    <i *ngIf=\"undoRedo\" class=\"vjs-undo\" data-undo=\"true\" title=\"Undo last action\" (click)=\"undo()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\"><path d=\"M3 7v6h6 M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13\" stroke-width=\"2\"></path></svg>\n    </i>\n    <i *ngIf=\"undoRedo\" class=\"vjs-redo\" data-redo=\"true\" title=\"Redo last action\" (click)=\"redo()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"none\"><path d=\"M21 7v6h-6 M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13\" stroke-width=\"2\"></path></svg>\n    </i>\n    <i class=\"vjs-controls-reset-selection\" title=\"Clear selection\" (click)=\"resetSelection()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M2,5 V2 H5 M9,2 H11 M13,2 H15 M19,2 H22 V5 M22,9 V11 M22,13 V15 M22,19 V22 H19 M15,22 H13 M11,22 H9 M5,22 H2 V19 M2,15 V13 M2,11 V9 M9,9 L15,15 M15,9 L9,15\"></path></svg>\n    </i>\n    <i *ngIf=\"clear\" class=\"vjs-clear-dataset\" [title]=\"clearMessage\" (click)=\"doClear()\">\n      <svg viewBox=\"0 0 24 24\" stroke=\"currentColor\" fill=\"currentColor\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"></path></svg>\n    </i>\n    <i *ngFor=\"let button of otherButtons\" class=\"{{ button.class }}\" title=\"{{ button.title }}\"></i>\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, decorators: [{
             type: Component,
@@ -1290,8 +1325,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <svg viewBox="${ZOOM_IN_OUT_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${ZOOM_OUT_PATH}"></path></svg>
     </i>
 
-    <i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()"></i>
-    <i *ngIf="undoRedo" class="vjs-redo" data-redo="true" title="Redo last action" (click)="redo()"></i>
+    <i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()">
+      <svg viewBox="${UNDO_VIEW_BOX}" stroke="currentColor" fill="none"><path d="${UNDO_PATH}" stroke-width="2"></path></svg>
+    </i>
+    <i *ngIf="undoRedo" class="vjs-redo" data-redo="true" title="Redo last action" (click)="redo()">
+      <svg viewBox="${REDO_VIEW_BOX}" stroke="currentColor" fill="none"><path d="${REDO_PATH}" stroke-width="2"></path></svg>
+    </i>
     <i class="${CLASS_CONTROLS_RESET_SELECTION}" title="Clear selection" (click)="resetSelection()">
       <svg viewBox="${RESET_SELECTION_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${RESET_SELECTION_PATH}"></path></svg>
     </i>
@@ -1372,6 +1411,8 @@ class PaletteComponent {
         this.$el = inject(ElementRef);
         this.$surface = this.$vjs.surface;
         this.initialized = false;
+        
+        this.allowDropOnEdge = false;
         effect(() => {
             if (!this.initialized) {
                 const surface = this.$surface();
@@ -1388,7 +1429,10 @@ class PaletteComponent {
                         mode: this.mode,
                         selectAfterAdd: this.selectAfterAdd,
                         allowClickToAdd: this.allowClickToAdd,
-                        clickToAddOnly: this.clickToAddOnly
+                        clickToAddOnly: this.clickToAddOnly,
+                        allowRotation: this.allowRotation,
+                        rotationSpeed: this.rotationSpeed,
+                        autoEdgeConnect: this.autoEdgeConnect
                     };
                     if (this.dataGenerator != null) {
                         params.dataGenerator = this.dataGenerator;
@@ -1414,7 +1458,7 @@ class PaletteComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PaletteComponent, selector: "[vjs-palette]", inputs: { selector: "selector", dataGenerator: "dataGenerator", typeGenerator: "typeGenerator", groupIdentifier: "groupIdentifier", allowDropOnEdge: "allowDropOnEdge", allowDropOnGroup: "allowDropOnGroup", allowDropOnCanvas: "allowDropOnCanvas", allowDropOnNode: "allowDropOnNode", onVertexAdded: "onVertexAdded", dragSize: "dragSize", canvasDropFilter: "canvasDropFilter", mode: "mode", selectAfterAdd: "selectAfterAdd", allowClickToAdd: "allowClickToAdd", clickToAddOnly: "clickToAddOnly" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PaletteComponent, selector: "[vjs-palette]", inputs: { selector: "selector", dataGenerator: "dataGenerator", typeGenerator: "typeGenerator", groupIdentifier: "groupIdentifier", allowDropOnEdge: "allowDropOnEdge", allowDropOnGroup: "allowDropOnGroup", allowDropOnCanvas: "allowDropOnCanvas", allowDropOnNode: "allowDropOnNode", onVertexAdded: "onVertexAdded", dragSize: "dragSize", canvasDropFilter: "canvasDropFilter", mode: "mode", selectAfterAdd: "selectAfterAdd", allowClickToAdd: "allowClickToAdd", clickToAddOnly: "clickToAddOnly", allowRotation: "allowRotation", rotationSpeed: "rotationSpeed", autoEdgeConnect: "autoEdgeConnect" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, decorators: [{
             type: Directive,
@@ -1451,6 +1495,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], clickToAddOnly: [{
                 type: Input
+            }], allowRotation: [{
+                type: Input
+            }], rotationSpeed: [{
+                type: Input
+            }], autoEdgeConnect: [{
+                type: Input
             }] } });
 
 
@@ -1801,11 +1851,25 @@ class DiagramPaletteComponent {
                 autoExitDrawMode: this.autoExitDrawMode,
                 selectAfterAdd: this.selectAfterAdd,
                 onVertexAdded: this.onVertexAdded,
-                preparedShapes: this.preparedShapes
+                preparedShapes: this.preparedShapes,
+                allowDropOnEdge: this.allowDropOnEdge,
+                allowRotation: this.allowRotation,
+                rotationSpeed: this.rotationSpeed,
+                autoEdgeConnect: this.autoEdgeConnect,
+                showGroups: this.showGroups,
+                updateTypeOnPaletteTap: this.updateTypeOnPaletteTap
             });
         }
     }
     constructor() {
+        
+        this.allowDropOnEdge = false;
+        
+        this.allowRotation = true;
+        
+        this.rotationSpeed = 2000;
+        
+        this.showGroups = true;
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
         this.initialized = false;
@@ -1822,7 +1886,7 @@ class DiagramPaletteComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DiagramPaletteComponent, selector: "vjs-diagram-palette", inputs: { fill: "fill", outline: "outline", dragSize: "dragSize", inspector: "inspector", iconSize: "iconSize", showLabels: "showLabels", paletteStrokeWidth: "paletteStrokeWidth", showAllMessage: "showAllMessage", onCellAdded: "onCellAdded", mode: "mode", allowClickToAdd: "allowClickToAdd", autoExitDrawMode: "autoExitDrawMode", selectAfterAdd: "selectAfterAdd", inputDiagram: ["diagram", "inputDiagram"], onVertexAdded: "onVertexAdded", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DiagramPaletteComponent, selector: "vjs-diagram-palette", inputs: { fill: "fill", outline: "outline", dragSize: "dragSize", inspector: "inspector", updateTypeOnPaletteTap: "updateTypeOnPaletteTap", iconSize: "iconSize", showLabels: "showLabels", paletteStrokeWidth: "paletteStrokeWidth", showAllMessage: "showAllMessage", onCellAdded: "onCellAdded", mode: "mode", allowClickToAdd: "allowClickToAdd", autoExitDrawMode: "autoExitDrawMode", selectAfterAdd: "selectAfterAdd", inputDiagram: ["diagram", "inputDiagram"], onVertexAdded: "onVertexAdded", preparedShapes: "preparedShapes", allowDropOnEdge: "allowDropOnEdge", allowRotation: "allowRotation", rotationSpeed: "rotationSpeed", autoEdgeConnect: "autoEdgeConnect", showGroups: "showGroups" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
             type: Component,
@@ -1838,6 +1902,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], inspector: [{
                 type: Input
+            }], updateTypeOnPaletteTap: [{
+                type: Input
             }], iconSize: [{
                 type: Input
             }], showLabels: [{
@@ -1863,6 +1929,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], preparedShapes: [{
                 type: Input
+            }], allowDropOnEdge: [{
+                type: Input
+            }], allowRotation: [{
+                type: Input
+            }], rotationSpeed: [{
+                type: Input
+            }], autoEdgeConnect: [{
+                type: Input
+            }], showGroups: [{
+                type: Input
             }] } });
 
 
@@ -2210,7 +2286,7 @@ class PaperComponent {
             if (currentData) {
                 if (this.model) {
                     this.model.clear();
-                    this.model.load({ data: currentData });
+                    this.model.load({ data: currentData, dataType: this.dataType });
                 }
             }
         });
@@ -2221,7 +2297,7 @@ class PaperComponent {
                 // For example, if you need to reload the model with new data:
                 if (this.model) {
                     this.model.clear();
-                    this.model.load({ url: currentUrl });
+                    this.model.load({ url: currentUrl, dataType: this.dataType });
                 }
             }
         });
@@ -2496,10 +2572,10 @@ class PaperComponent {
             const initialData = this.data();
             const initialUrl = this.url();
             if (initialData) {
-                this.model.load({ data: initialData });
+                this.model.load({ data: initialData, dataType: this.dataType });
             }
             else if (initialUrl) {
-                this.model.load({ url: initialUrl });
+                this.model.load({ url: initialUrl, dataType: this.dataType });
             }
         });
     }
@@ -2517,7 +2593,7 @@ class PaperComponent {
         this.paper.unbind(EVENT_INTERNAL_CONNECTION, this.edgeAddFn);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: PaperComponent, selector: "vjs-paper", inputs: { inputModel: { classPropertyName: "inputModel", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, viewOptions: { classPropertyName: "viewOptions", publicName: "viewOptions", isSignal: false, isRequired: false, transformFunction: null }, renderOptions: { classPropertyName: "renderOptions", publicName: "renderOptions", isSignal: false, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: PaperComponent, selector: "vjs-paper", inputs: { inputModel: { classPropertyName: "inputModel", publicName: "model", isSignal: false, isRequired: false, transformFunction: null }, viewOptions: { classPropertyName: "viewOptions", publicName: "viewOptions", isSignal: false, isRequired: false, transformFunction: null }, renderOptions: { classPropertyName: "renderOptions", publicName: "renderOptions", isSignal: false, isRequired: false, transformFunction: null }, modelOptions: { classPropertyName: "modelOptions", publicName: "modelOptions", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaperComponent, decorators: [{
             type: Component,
@@ -2534,6 +2610,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], modelOptions: [{
                 type: Input
+            }], dataType: [{
+                type: Input
             }], vertexEvent: [{
                 type: Output
             }] } });