@visuallyjs/browser-ui-angular 1.2.4 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/controls-component.mjs +8 -4
- package/esm2022/lib/diagram-palette-component.mjs +28 -2
- package/esm2022/lib/palette.component.mjs +13 -2
- package/esm2022/lib/shape.palette.component.mjs +35 -2
- package/fesm2022/visuallyjs-browser-ui-angular.mjs +84 -10
- package/fesm2022/visuallyjs-browser-ui-angular.mjs.map +1 -1
- package/lib/diagram-palette-component.d.ts +33 -3
- package/lib/palette.component.d.ts +16 -3
- package/lib/shape.palette.component.d.ts +37 -2
- package/package.json +2 -2
- package/visuallyjs-browser-ui-angular.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ChangeDetectorRef, Component, computed, effect, ElementRef, inject, Input } from "@angular/core";
|
|
2
|
-
import { EVENT_UNDOREDO_UPDATE, EVENT_SURFACE_MODE_CHANGED, FALSE, TRUE, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, LASSO_PATH, LASSO_VIEW_BOX, PAN_PATH, PAN_VIEW_BOX, LassoPlugin, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, RESET_SELECTION_PATH, RESET_SELECTION_VIEW_BOX, CLEAR_PATH, CLEAR_VIEW_BOX, CLASS_CONTROLS_RESET_SELECTION, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, supportsPathEditing } from "@visuallyjs/browser-ui";
|
|
2
|
+
import { EVENT_UNDOREDO_UPDATE, EVENT_SURFACE_MODE_CHANGED, FALSE, TRUE, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, LASSO_PATH, LASSO_VIEW_BOX, PAN_PATH, PAN_VIEW_BOX, UNDO_PATH, UNDO_VIEW_BOX, REDO_PATH, REDO_VIEW_BOX, LassoPlugin, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, RESET_SELECTION_PATH, RESET_SELECTION_VIEW_BOX, CLEAR_PATH, CLEAR_VIEW_BOX, CLASS_CONTROLS_RESET_SELECTION, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, supportsPathEditing } from "@visuallyjs/browser-ui";
|
|
3
3
|
import { VisuallyJsService } from "./vjs-service";
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "@angular/common";
|
|
@@ -108,7 +108,7 @@ export class ControlsComponent {
|
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
111
|
-
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"] }] }); }
|
|
111
|
+
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"] }] }); }
|
|
112
112
|
}
|
|
113
113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, decorators: [{
|
|
114
114
|
type: Component,
|
|
@@ -140,8 +140,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
140
140
|
<svg viewBox="${ZOOM_IN_OUT_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${ZOOM_OUT_PATH}"></path></svg>
|
|
141
141
|
</i>
|
|
142
142
|
|
|
143
|
-
<i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()"
|
|
144
|
-
|
|
143
|
+
<i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()">
|
|
144
|
+
<svg viewBox="${UNDO_VIEW_BOX}" stroke="currentColor" fill="none"><path d="${UNDO_PATH}" stroke-width="2"></path></svg>
|
|
145
|
+
</i>
|
|
146
|
+
<i *ngIf="undoRedo" class="vjs-redo" data-redo="true" title="Redo last action" (click)="redo()">
|
|
147
|
+
<svg viewBox="${REDO_VIEW_BOX}" stroke="currentColor" fill="none"><path d="${REDO_PATH}" stroke-width="2"></path></svg>
|
|
148
|
+
</i>
|
|
145
149
|
<i class="${CLASS_CONTROLS_RESET_SELECTION}" title="Clear selection" (click)="resetSelection()">
|
|
146
150
|
<svg viewBox="${RESET_SELECTION_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${RESET_SELECTION_PATH}"></path></svg>
|
|
147
151
|
</i>
|
|
@@ -22,11 +22,25 @@ export class DiagramPaletteComponent {
|
|
|
22
22
|
autoExitDrawMode: this.autoExitDrawMode,
|
|
23
23
|
selectAfterAdd: this.selectAfterAdd,
|
|
24
24
|
onVertexAdded: this.onVertexAdded,
|
|
25
|
-
preparedShapes: this.preparedShapes
|
|
25
|
+
preparedShapes: this.preparedShapes,
|
|
26
|
+
allowDropOnEdge: this.allowDropOnEdge,
|
|
27
|
+
allowRotation: this.allowRotation,
|
|
28
|
+
rotationSpeed: this.rotationSpeed,
|
|
29
|
+
autoEdgeConnect: this.autoEdgeConnect,
|
|
30
|
+
showGroups: this.showGroups,
|
|
31
|
+
updateTypeOnPaletteTap: this.updateTypeOnPaletteTap
|
|
26
32
|
});
|
|
27
33
|
}
|
|
28
34
|
}
|
|
29
35
|
constructor() {
|
|
36
|
+
|
|
37
|
+
this.allowDropOnEdge = false;
|
|
38
|
+
|
|
39
|
+
this.allowRotation = true;
|
|
40
|
+
|
|
41
|
+
this.rotationSpeed = 2000;
|
|
42
|
+
|
|
43
|
+
this.showGroups = true;
|
|
30
44
|
this.$el = inject(ElementRef);
|
|
31
45
|
this.$vjs = inject(VisuallyJsService);
|
|
32
46
|
this.initialized = false;
|
|
@@ -43,7 +57,7 @@ export class DiagramPaletteComponent {
|
|
|
43
57
|
}
|
|
44
58
|
}
|
|
45
59
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
-
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 }); }
|
|
60
|
+
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 }); }
|
|
47
61
|
}
|
|
48
62
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
|
|
49
63
|
type: Component,
|
|
@@ -59,6 +73,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
59
73
|
type: Input
|
|
60
74
|
}], inspector: [{
|
|
61
75
|
type: Input
|
|
76
|
+
}], updateTypeOnPaletteTap: [{
|
|
77
|
+
type: Input
|
|
62
78
|
}], iconSize: [{
|
|
63
79
|
type: Input
|
|
64
80
|
}], showLabels: [{
|
|
@@ -84,4 +100,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
84
100
|
type: Input
|
|
85
101
|
}], preparedShapes: [{
|
|
86
102
|
type: Input
|
|
103
|
+
}], allowDropOnEdge: [{
|
|
104
|
+
type: Input
|
|
105
|
+
}], allowRotation: [{
|
|
106
|
+
type: Input
|
|
107
|
+
}], rotationSpeed: [{
|
|
108
|
+
type: Input
|
|
109
|
+
}], autoEdgeConnect: [{
|
|
110
|
+
type: Input
|
|
111
|
+
}], showGroups: [{
|
|
112
|
+
type: Input
|
|
87
113
|
}] } });
|
|
@@ -9,6 +9,8 @@ export class PaletteComponent {
|
|
|
9
9
|
this.$el = inject(ElementRef);
|
|
10
10
|
this.$surface = this.$vjs.surface;
|
|
11
11
|
this.initialized = false;
|
|
12
|
+
|
|
13
|
+
this.allowDropOnEdge = false;
|
|
12
14
|
effect(() => {
|
|
13
15
|
if (!this.initialized) {
|
|
14
16
|
const surface = this.$surface();
|
|
@@ -25,7 +27,10 @@ export class PaletteComponent {
|
|
|
25
27
|
mode: this.mode,
|
|
26
28
|
selectAfterAdd: this.selectAfterAdd,
|
|
27
29
|
allowClickToAdd: this.allowClickToAdd,
|
|
28
|
-
clickToAddOnly: this.clickToAddOnly
|
|
30
|
+
clickToAddOnly: this.clickToAddOnly,
|
|
31
|
+
allowRotation: this.allowRotation,
|
|
32
|
+
rotationSpeed: this.rotationSpeed,
|
|
33
|
+
autoEdgeConnect: this.autoEdgeConnect
|
|
29
34
|
};
|
|
30
35
|
if (this.dataGenerator != null) {
|
|
31
36
|
params.dataGenerator = this.dataGenerator;
|
|
@@ -51,7 +56,7 @@ export class PaletteComponent {
|
|
|
51
56
|
});
|
|
52
57
|
}
|
|
53
58
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
54
|
-
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 }); }
|
|
59
|
+
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 }); }
|
|
55
60
|
}
|
|
56
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, decorators: [{
|
|
57
62
|
type: Directive,
|
|
@@ -88,4 +93,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
88
93
|
type: Input
|
|
89
94
|
}], clickToAddOnly: [{
|
|
90
95
|
type: Input
|
|
96
|
+
}], allowRotation: [{
|
|
97
|
+
type: Input
|
|
98
|
+
}], rotationSpeed: [{
|
|
99
|
+
type: Input
|
|
100
|
+
}], autoEdgeConnect: [{
|
|
101
|
+
type: Input
|
|
91
102
|
}] } });
|
|
@@ -21,6 +21,18 @@ export class ShapePaletteComponent {
|
|
|
21
21
|
this.paletteStrokeWidth = 1;
|
|
22
22
|
|
|
23
23
|
this.dataGenerator = undefined;
|
|
24
|
+
|
|
25
|
+
this.allowDropOnEdge = false;
|
|
26
|
+
|
|
27
|
+
this.allowRotation = true;
|
|
28
|
+
|
|
29
|
+
this.rotationSpeed = 2000;
|
|
30
|
+
|
|
31
|
+
this.showGroups = true;
|
|
32
|
+
|
|
33
|
+
this.inspector = true;
|
|
34
|
+
|
|
35
|
+
this.updateTypeOnPaletteTap = false;
|
|
24
36
|
this.$el = inject(ElementRef);
|
|
25
37
|
this.$vjs = inject(VisuallyJsService);
|
|
26
38
|
this.ui = this.$vjs.ui;
|
|
@@ -43,13 +55,20 @@ export class ShapePaletteComponent {
|
|
|
43
55
|
paletteStrokeWidth: this.paletteStrokeWidth,
|
|
44
56
|
dataGenerator: this.dataGenerator,
|
|
45
57
|
onVertexAdded: this.onVertexAdded,
|
|
46
|
-
preparedShapes: this.preparedShapes
|
|
58
|
+
preparedShapes: this.preparedShapes,
|
|
59
|
+
allowDropOnEdge: this.allowDropOnEdge,
|
|
60
|
+
allowRotation: this.allowRotation,
|
|
61
|
+
rotationSpeed: this.rotationSpeed,
|
|
62
|
+
autoEdgeConnect: this.autoEdgeConnect,
|
|
63
|
+
showGroups: this.showGroups,
|
|
64
|
+
inspector: this.inspector,
|
|
65
|
+
updateTypeOnPaletteTap: this.updateTypeOnPaletteTap
|
|
47
66
|
});
|
|
48
67
|
}
|
|
49
68
|
});
|
|
50
69
|
}
|
|
51
70
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
52
|
-
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 }); }
|
|
71
|
+
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 }); }
|
|
53
72
|
}
|
|
54
73
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
|
|
55
74
|
type: Component,
|
|
@@ -79,4 +98,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
79
98
|
type: Input
|
|
80
99
|
}], preparedShapes: [{
|
|
81
100
|
type: Input
|
|
101
|
+
}], allowDropOnEdge: [{
|
|
102
|
+
type: Input
|
|
103
|
+
}], allowRotation: [{
|
|
104
|
+
type: Input
|
|
105
|
+
}], rotationSpeed: [{
|
|
106
|
+
type: Input
|
|
107
|
+
}], autoEdgeConnect: [{
|
|
108
|
+
type: Input
|
|
109
|
+
}], showGroups: [{
|
|
110
|
+
type: Input
|
|
111
|
+
}], inspector: [{
|
|
112
|
+
type: Input
|
|
113
|
+
}], updateTypeOnPaletteTap: [{
|
|
114
|
+
type: Input
|
|
82
115
|
}] } });
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { signal, Injectable, inject, ElementRef, effect, Input, Component, ChangeDetectorRef, computed, Directive, input, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, TemplateRef, ViewChild, ContentChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
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';
|
|
5
|
+
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';
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
class VisuallyJsService {
|
|
@@ -1011,6 +1011,18 @@ class ShapePaletteComponent {
|
|
|
1011
1011
|
this.paletteStrokeWidth = 1;
|
|
1012
1012
|
|
|
1013
1013
|
this.dataGenerator = undefined;
|
|
1014
|
+
|
|
1015
|
+
this.allowDropOnEdge = false;
|
|
1016
|
+
|
|
1017
|
+
this.allowRotation = true;
|
|
1018
|
+
|
|
1019
|
+
this.rotationSpeed = 2000;
|
|
1020
|
+
|
|
1021
|
+
this.showGroups = true;
|
|
1022
|
+
|
|
1023
|
+
this.inspector = true;
|
|
1024
|
+
|
|
1025
|
+
this.updateTypeOnPaletteTap = false;
|
|
1014
1026
|
this.$el = inject(ElementRef);
|
|
1015
1027
|
this.$vjs = inject(VisuallyJsService);
|
|
1016
1028
|
this.ui = this.$vjs.ui;
|
|
@@ -1033,13 +1045,20 @@ class ShapePaletteComponent {
|
|
|
1033
1045
|
paletteStrokeWidth: this.paletteStrokeWidth,
|
|
1034
1046
|
dataGenerator: this.dataGenerator,
|
|
1035
1047
|
onVertexAdded: this.onVertexAdded,
|
|
1036
|
-
preparedShapes: this.preparedShapes
|
|
1048
|
+
preparedShapes: this.preparedShapes,
|
|
1049
|
+
allowDropOnEdge: this.allowDropOnEdge,
|
|
1050
|
+
allowRotation: this.allowRotation,
|
|
1051
|
+
rotationSpeed: this.rotationSpeed,
|
|
1052
|
+
autoEdgeConnect: this.autoEdgeConnect,
|
|
1053
|
+
showGroups: this.showGroups,
|
|
1054
|
+
inspector: this.inspector,
|
|
1055
|
+
updateTypeOnPaletteTap: this.updateTypeOnPaletteTap
|
|
1037
1056
|
});
|
|
1038
1057
|
}
|
|
1039
1058
|
});
|
|
1040
1059
|
}
|
|
1041
1060
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1042
|
-
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 }); }
|
|
1061
|
+
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 }); }
|
|
1043
1062
|
}
|
|
1044
1063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
|
|
1045
1064
|
type: Component,
|
|
@@ -1069,6 +1088,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1069
1088
|
type: Input
|
|
1070
1089
|
}], preparedShapes: [{
|
|
1071
1090
|
type: Input
|
|
1091
|
+
}], allowDropOnEdge: [{
|
|
1092
|
+
type: Input
|
|
1093
|
+
}], allowRotation: [{
|
|
1094
|
+
type: Input
|
|
1095
|
+
}], rotationSpeed: [{
|
|
1096
|
+
type: Input
|
|
1097
|
+
}], autoEdgeConnect: [{
|
|
1098
|
+
type: Input
|
|
1099
|
+
}], showGroups: [{
|
|
1100
|
+
type: Input
|
|
1101
|
+
}], inspector: [{
|
|
1102
|
+
type: Input
|
|
1103
|
+
}], updateTypeOnPaletteTap: [{
|
|
1104
|
+
type: Input
|
|
1072
1105
|
}] } });
|
|
1073
1106
|
|
|
1074
1107
|
|
|
@@ -1260,7 +1293,7 @@ class ControlsComponent {
|
|
|
1260
1293
|
}
|
|
1261
1294
|
}
|
|
1262
1295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1263
|
-
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"] }] }); }
|
|
1296
|
+
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"] }] }); }
|
|
1264
1297
|
}
|
|
1265
1298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, decorators: [{
|
|
1266
1299
|
type: Component,
|
|
@@ -1292,8 +1325,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1292
1325
|
<svg viewBox="${ZOOM_IN_OUT_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${ZOOM_OUT_PATH}"></path></svg>
|
|
1293
1326
|
</i>
|
|
1294
1327
|
|
|
1295
|
-
<i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()"
|
|
1296
|
-
|
|
1328
|
+
<i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()">
|
|
1329
|
+
<svg viewBox="${UNDO_VIEW_BOX}" stroke="currentColor" fill="none"><path d="${UNDO_PATH}" stroke-width="2"></path></svg>
|
|
1330
|
+
</i>
|
|
1331
|
+
<i *ngIf="undoRedo" class="vjs-redo" data-redo="true" title="Redo last action" (click)="redo()">
|
|
1332
|
+
<svg viewBox="${REDO_VIEW_BOX}" stroke="currentColor" fill="none"><path d="${REDO_PATH}" stroke-width="2"></path></svg>
|
|
1333
|
+
</i>
|
|
1297
1334
|
<i class="${CLASS_CONTROLS_RESET_SELECTION}" title="Clear selection" (click)="resetSelection()">
|
|
1298
1335
|
<svg viewBox="${RESET_SELECTION_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${RESET_SELECTION_PATH}"></path></svg>
|
|
1299
1336
|
</i>
|
|
@@ -1374,6 +1411,8 @@ class PaletteComponent {
|
|
|
1374
1411
|
this.$el = inject(ElementRef);
|
|
1375
1412
|
this.$surface = this.$vjs.surface;
|
|
1376
1413
|
this.initialized = false;
|
|
1414
|
+
|
|
1415
|
+
this.allowDropOnEdge = false;
|
|
1377
1416
|
effect(() => {
|
|
1378
1417
|
if (!this.initialized) {
|
|
1379
1418
|
const surface = this.$surface();
|
|
@@ -1390,7 +1429,10 @@ class PaletteComponent {
|
|
|
1390
1429
|
mode: this.mode,
|
|
1391
1430
|
selectAfterAdd: this.selectAfterAdd,
|
|
1392
1431
|
allowClickToAdd: this.allowClickToAdd,
|
|
1393
|
-
clickToAddOnly: this.clickToAddOnly
|
|
1432
|
+
clickToAddOnly: this.clickToAddOnly,
|
|
1433
|
+
allowRotation: this.allowRotation,
|
|
1434
|
+
rotationSpeed: this.rotationSpeed,
|
|
1435
|
+
autoEdgeConnect: this.autoEdgeConnect
|
|
1394
1436
|
};
|
|
1395
1437
|
if (this.dataGenerator != null) {
|
|
1396
1438
|
params.dataGenerator = this.dataGenerator;
|
|
@@ -1416,7 +1458,7 @@ class PaletteComponent {
|
|
|
1416
1458
|
});
|
|
1417
1459
|
}
|
|
1418
1460
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1419
|
-
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 }); }
|
|
1461
|
+
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 }); }
|
|
1420
1462
|
}
|
|
1421
1463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, decorators: [{
|
|
1422
1464
|
type: Directive,
|
|
@@ -1453,6 +1495,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1453
1495
|
type: Input
|
|
1454
1496
|
}], clickToAddOnly: [{
|
|
1455
1497
|
type: Input
|
|
1498
|
+
}], allowRotation: [{
|
|
1499
|
+
type: Input
|
|
1500
|
+
}], rotationSpeed: [{
|
|
1501
|
+
type: Input
|
|
1502
|
+
}], autoEdgeConnect: [{
|
|
1503
|
+
type: Input
|
|
1456
1504
|
}] } });
|
|
1457
1505
|
|
|
1458
1506
|
|
|
@@ -1803,11 +1851,25 @@ class DiagramPaletteComponent {
|
|
|
1803
1851
|
autoExitDrawMode: this.autoExitDrawMode,
|
|
1804
1852
|
selectAfterAdd: this.selectAfterAdd,
|
|
1805
1853
|
onVertexAdded: this.onVertexAdded,
|
|
1806
|
-
preparedShapes: this.preparedShapes
|
|
1854
|
+
preparedShapes: this.preparedShapes,
|
|
1855
|
+
allowDropOnEdge: this.allowDropOnEdge,
|
|
1856
|
+
allowRotation: this.allowRotation,
|
|
1857
|
+
rotationSpeed: this.rotationSpeed,
|
|
1858
|
+
autoEdgeConnect: this.autoEdgeConnect,
|
|
1859
|
+
showGroups: this.showGroups,
|
|
1860
|
+
updateTypeOnPaletteTap: this.updateTypeOnPaletteTap
|
|
1807
1861
|
});
|
|
1808
1862
|
}
|
|
1809
1863
|
}
|
|
1810
1864
|
constructor() {
|
|
1865
|
+
|
|
1866
|
+
this.allowDropOnEdge = false;
|
|
1867
|
+
|
|
1868
|
+
this.allowRotation = true;
|
|
1869
|
+
|
|
1870
|
+
this.rotationSpeed = 2000;
|
|
1871
|
+
|
|
1872
|
+
this.showGroups = true;
|
|
1811
1873
|
this.$el = inject(ElementRef);
|
|
1812
1874
|
this.$vjs = inject(VisuallyJsService);
|
|
1813
1875
|
this.initialized = false;
|
|
@@ -1824,7 +1886,7 @@ class DiagramPaletteComponent {
|
|
|
1824
1886
|
}
|
|
1825
1887
|
}
|
|
1826
1888
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1827
|
-
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 }); }
|
|
1889
|
+
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 }); }
|
|
1828
1890
|
}
|
|
1829
1891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
|
|
1830
1892
|
type: Component,
|
|
@@ -1840,6 +1902,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1840
1902
|
type: Input
|
|
1841
1903
|
}], inspector: [{
|
|
1842
1904
|
type: Input
|
|
1905
|
+
}], updateTypeOnPaletteTap: [{
|
|
1906
|
+
type: Input
|
|
1843
1907
|
}], iconSize: [{
|
|
1844
1908
|
type: Input
|
|
1845
1909
|
}], showLabels: [{
|
|
@@ -1865,6 +1929,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1865
1929
|
type: Input
|
|
1866
1930
|
}], preparedShapes: [{
|
|
1867
1931
|
type: Input
|
|
1932
|
+
}], allowDropOnEdge: [{
|
|
1933
|
+
type: Input
|
|
1934
|
+
}], allowRotation: [{
|
|
1935
|
+
type: Input
|
|
1936
|
+
}], rotationSpeed: [{
|
|
1937
|
+
type: Input
|
|
1938
|
+
}], autoEdgeConnect: [{
|
|
1939
|
+
type: Input
|
|
1940
|
+
}], showGroups: [{
|
|
1941
|
+
type: Input
|
|
1868
1942
|
}] } });
|
|
1869
1943
|
|
|
1870
1944
|
|