@visuallyjs/browser-ui-angular 1.2.4 → 1.2.6
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.component.mjs +6 -2
- package/esm2022/lib/shape.palette.component.mjs +35 -2
- package/fesm2022/visuallyjs-browser-ui-angular.mjs +90 -12
- 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.component.d.ts +6 -2
- 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
|
}] } });
|
|
@@ -13,7 +13,7 @@ export class ShapeComponent {
|
|
|
13
13
|
const lbl = this.shapeLibrary.renderShapeLabel(this.obj, this.labelProperty, this.labelStrokeWidth, this.label, this.obj.color || "#000000", this.obj.color || "#000000", this.font);
|
|
14
14
|
svg.appendChild(lbl);
|
|
15
15
|
if (this.multilineLabels !== false) {
|
|
16
|
-
convertToMultilineText(lbl, this.label || this.obj[this.labelProperty] || "", this.width * this.labelFillRatio);
|
|
16
|
+
convertToMultilineText(lbl, this.label || this.obj[this.labelProperty] || "", this.width * this.labelFillRatio, this.labelPosition);
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
}
|
|
@@ -27,6 +27,8 @@ export class ShapeComponent {
|
|
|
27
27
|
this.multilineLabels = true;
|
|
28
28
|
|
|
29
29
|
this.labelFillRatio = DEFAULT_LABEL_FILL_RATIO;
|
|
30
|
+
|
|
31
|
+
this.labelPosition = "center";
|
|
30
32
|
this.$el = inject(ElementRef);
|
|
31
33
|
this.$vjs = inject(VisuallyJsService);
|
|
32
34
|
this.ui = this.$vjs.ui;
|
|
@@ -42,7 +44,7 @@ export class ShapeComponent {
|
|
|
42
44
|
this._render();
|
|
43
45
|
}
|
|
44
46
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
45
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
|
|
47
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", labelPosition: "labelPosition", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
|
|
46
48
|
[attr.stroke-width]="obj.outlineWidth || 2"
|
|
47
49
|
attr.fill="{{ obj.fill }}"
|
|
48
50
|
attr.stroke="{{ obj.outline }}"
|
|
@@ -82,6 +84,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
82
84
|
type: Input
|
|
83
85
|
}], labelFillRatio: [{
|
|
84
86
|
type: Input
|
|
87
|
+
}], labelPosition: [{
|
|
88
|
+
type: Input
|
|
85
89
|
}], font: [{
|
|
86
90
|
type: Input
|
|
87
91
|
}] } });
|
|
@@ -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
|
|
|
@@ -1082,7 +1115,7 @@ class ShapeComponent {
|
|
|
1082
1115
|
const lbl = this.shapeLibrary.renderShapeLabel(this.obj, this.labelProperty, this.labelStrokeWidth, this.label, this.obj.color || "#000000", this.obj.color || "#000000", this.font);
|
|
1083
1116
|
svg.appendChild(lbl);
|
|
1084
1117
|
if (this.multilineLabels !== false) {
|
|
1085
|
-
convertToMultilineText(lbl, this.label || this.obj[this.labelProperty] || "", this.width * this.labelFillRatio);
|
|
1118
|
+
convertToMultilineText(lbl, this.label || this.obj[this.labelProperty] || "", this.width * this.labelFillRatio, this.labelPosition);
|
|
1086
1119
|
}
|
|
1087
1120
|
}
|
|
1088
1121
|
}
|
|
@@ -1096,6 +1129,8 @@ class ShapeComponent {
|
|
|
1096
1129
|
this.multilineLabels = true;
|
|
1097
1130
|
|
|
1098
1131
|
this.labelFillRatio = DEFAULT_LABEL_FILL_RATIO;
|
|
1132
|
+
|
|
1133
|
+
this.labelPosition = "center";
|
|
1099
1134
|
this.$el = inject(ElementRef);
|
|
1100
1135
|
this.$vjs = inject(VisuallyJsService);
|
|
1101
1136
|
this.ui = this.$vjs.ui;
|
|
@@ -1111,7 +1146,7 @@ class ShapeComponent {
|
|
|
1111
1146
|
this._render();
|
|
1112
1147
|
}
|
|
1113
1148
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1114
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
|
|
1149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", labelPosition: "labelPosition", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
|
|
1115
1150
|
[attr.stroke-width]="obj.outlineWidth || 2"
|
|
1116
1151
|
attr.fill="{{ obj.fill }}"
|
|
1117
1152
|
attr.stroke="{{ obj.outline }}"
|
|
@@ -1151,6 +1186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1151
1186
|
type: Input
|
|
1152
1187
|
}], labelFillRatio: [{
|
|
1153
1188
|
type: Input
|
|
1189
|
+
}], labelPosition: [{
|
|
1190
|
+
type: Input
|
|
1154
1191
|
}], font: [{
|
|
1155
1192
|
type: Input
|
|
1156
1193
|
}] } });
|
|
@@ -1260,7 +1297,7 @@ class ControlsComponent {
|
|
|
1260
1297
|
}
|
|
1261
1298
|
}
|
|
1262
1299
|
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"] }] }); }
|
|
1300
|
+
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
1301
|
}
|
|
1265
1302
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ControlsComponent, decorators: [{
|
|
1266
1303
|
type: Component,
|
|
@@ -1292,8 +1329,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1292
1329
|
<svg viewBox="${ZOOM_IN_OUT_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${ZOOM_OUT_PATH}"></path></svg>
|
|
1293
1330
|
</i>
|
|
1294
1331
|
|
|
1295
|
-
<i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()"
|
|
1296
|
-
|
|
1332
|
+
<i *ngIf="undoRedo" class="vjs-undo" data-undo="true" title="Undo last action" (click)="undo()">
|
|
1333
|
+
<svg viewBox="${UNDO_VIEW_BOX}" stroke="currentColor" fill="none"><path d="${UNDO_PATH}" stroke-width="2"></path></svg>
|
|
1334
|
+
</i>
|
|
1335
|
+
<i *ngIf="undoRedo" class="vjs-redo" data-redo="true" title="Redo last action" (click)="redo()">
|
|
1336
|
+
<svg viewBox="${REDO_VIEW_BOX}" stroke="currentColor" fill="none"><path d="${REDO_PATH}" stroke-width="2"></path></svg>
|
|
1337
|
+
</i>
|
|
1297
1338
|
<i class="${CLASS_CONTROLS_RESET_SELECTION}" title="Clear selection" (click)="resetSelection()">
|
|
1298
1339
|
<svg viewBox="${RESET_SELECTION_VIEW_BOX}" stroke="currentColor" fill="currentColor"><path d="${RESET_SELECTION_PATH}"></path></svg>
|
|
1299
1340
|
</i>
|
|
@@ -1374,6 +1415,8 @@ class PaletteComponent {
|
|
|
1374
1415
|
this.$el = inject(ElementRef);
|
|
1375
1416
|
this.$surface = this.$vjs.surface;
|
|
1376
1417
|
this.initialized = false;
|
|
1418
|
+
|
|
1419
|
+
this.allowDropOnEdge = false;
|
|
1377
1420
|
effect(() => {
|
|
1378
1421
|
if (!this.initialized) {
|
|
1379
1422
|
const surface = this.$surface();
|
|
@@ -1390,7 +1433,10 @@ class PaletteComponent {
|
|
|
1390
1433
|
mode: this.mode,
|
|
1391
1434
|
selectAfterAdd: this.selectAfterAdd,
|
|
1392
1435
|
allowClickToAdd: this.allowClickToAdd,
|
|
1393
|
-
clickToAddOnly: this.clickToAddOnly
|
|
1436
|
+
clickToAddOnly: this.clickToAddOnly,
|
|
1437
|
+
allowRotation: this.allowRotation,
|
|
1438
|
+
rotationSpeed: this.rotationSpeed,
|
|
1439
|
+
autoEdgeConnect: this.autoEdgeConnect
|
|
1394
1440
|
};
|
|
1395
1441
|
if (this.dataGenerator != null) {
|
|
1396
1442
|
params.dataGenerator = this.dataGenerator;
|
|
@@ -1416,7 +1462,7 @@ class PaletteComponent {
|
|
|
1416
1462
|
});
|
|
1417
1463
|
}
|
|
1418
1464
|
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 }); }
|
|
1465
|
+
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
1466
|
}
|
|
1421
1467
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PaletteComponent, decorators: [{
|
|
1422
1468
|
type: Directive,
|
|
@@ -1453,6 +1499,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1453
1499
|
type: Input
|
|
1454
1500
|
}], clickToAddOnly: [{
|
|
1455
1501
|
type: Input
|
|
1502
|
+
}], allowRotation: [{
|
|
1503
|
+
type: Input
|
|
1504
|
+
}], rotationSpeed: [{
|
|
1505
|
+
type: Input
|
|
1506
|
+
}], autoEdgeConnect: [{
|
|
1507
|
+
type: Input
|
|
1456
1508
|
}] } });
|
|
1457
1509
|
|
|
1458
1510
|
|
|
@@ -1803,11 +1855,25 @@ class DiagramPaletteComponent {
|
|
|
1803
1855
|
autoExitDrawMode: this.autoExitDrawMode,
|
|
1804
1856
|
selectAfterAdd: this.selectAfterAdd,
|
|
1805
1857
|
onVertexAdded: this.onVertexAdded,
|
|
1806
|
-
preparedShapes: this.preparedShapes
|
|
1858
|
+
preparedShapes: this.preparedShapes,
|
|
1859
|
+
allowDropOnEdge: this.allowDropOnEdge,
|
|
1860
|
+
allowRotation: this.allowRotation,
|
|
1861
|
+
rotationSpeed: this.rotationSpeed,
|
|
1862
|
+
autoEdgeConnect: this.autoEdgeConnect,
|
|
1863
|
+
showGroups: this.showGroups,
|
|
1864
|
+
updateTypeOnPaletteTap: this.updateTypeOnPaletteTap
|
|
1807
1865
|
});
|
|
1808
1866
|
}
|
|
1809
1867
|
}
|
|
1810
1868
|
constructor() {
|
|
1869
|
+
|
|
1870
|
+
this.allowDropOnEdge = false;
|
|
1871
|
+
|
|
1872
|
+
this.allowRotation = true;
|
|
1873
|
+
|
|
1874
|
+
this.rotationSpeed = 2000;
|
|
1875
|
+
|
|
1876
|
+
this.showGroups = true;
|
|
1811
1877
|
this.$el = inject(ElementRef);
|
|
1812
1878
|
this.$vjs = inject(VisuallyJsService);
|
|
1813
1879
|
this.initialized = false;
|
|
@@ -1824,7 +1890,7 @@ class DiagramPaletteComponent {
|
|
|
1824
1890
|
}
|
|
1825
1891
|
}
|
|
1826
1892
|
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 }); }
|
|
1893
|
+
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
1894
|
}
|
|
1829
1895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
|
|
1830
1896
|
type: Component,
|
|
@@ -1840,6 +1906,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1840
1906
|
type: Input
|
|
1841
1907
|
}], inspector: [{
|
|
1842
1908
|
type: Input
|
|
1909
|
+
}], updateTypeOnPaletteTap: [{
|
|
1910
|
+
type: Input
|
|
1843
1911
|
}], iconSize: [{
|
|
1844
1912
|
type: Input
|
|
1845
1913
|
}], showLabels: [{
|
|
@@ -1865,6 +1933,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
1865
1933
|
type: Input
|
|
1866
1934
|
}], preparedShapes: [{
|
|
1867
1935
|
type: Input
|
|
1936
|
+
}], allowDropOnEdge: [{
|
|
1937
|
+
type: Input
|
|
1938
|
+
}], allowRotation: [{
|
|
1939
|
+
type: Input
|
|
1940
|
+
}], rotationSpeed: [{
|
|
1941
|
+
type: Input
|
|
1942
|
+
}], autoEdgeConnect: [{
|
|
1943
|
+
type: Input
|
|
1944
|
+
}], showGroups: [{
|
|
1945
|
+
type: Input
|
|
1868
1946
|
}] } });
|
|
1869
1947
|
|
|
1870
1948
|
|