@metadev/daga-angular 2.0.2 → 3.1.0
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/Changelog.md +25 -1
- package/README.md +11 -1
- package/assets/styles/_palette.scss +0 -1
- package/assets/styles/_property-editor.scss +1 -1
- package/assets/styles/daga.scss +7 -7
- package/fesm2022/metadev-daga-angular.mjs +216 -155
- package/fesm2022/metadev-daga-angular.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/lib/diagram/diagram.component.d.ts +16 -5
- package/lib/diagram-editor/diagram-editor.component.d.ts +3 -8
- package/lib/palette/palette.component.d.ts +2 -1
- package/package.json +5 -7
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Side, DiagramCanvas, DiagramActions, layouts,
|
|
2
|
-
export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, DagaExporter, DagaImporter, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, EditFieldAction, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, layouts } from '@metadev/daga';
|
|
1
|
+
import { Side, DiagramCanvas, DiagramActions, layouts, getLocationsOfNodes, ApplyLayoutAction, Events, setCursorStyle, CursorStyle, DragEvents, filterByOnlyDescendants, AddNodeAction, generalClosedPath, DIAGRAM_FIELD_DEFAULTS, getLeftMargin, getTopMargin, Type, Property, isObject, equals, Keys, Corner, DagaImporter, DagaExporter } from '@metadev/daga';
|
|
2
|
+
export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, EditFieldAction, ForceLayout, HorizontalAlign, HorizontalLayout, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, getLocationsOfNodes, layouts } from '@metadev/daga';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
@@ -92,12 +92,12 @@ class CollapseButtonComponent {
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
96
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
95
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CollapseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
96
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: CollapseButtonComponent, isStandalone: true, selector: "daga-collapse-button", inputs: { collapsableSelector: "collapsableSelector", collapsableAdditionalSelector: "collapsableAdditionalSelector", collapsed: "collapsed", disabled: "disabled", direction: "direction", rule: "rule", collapsedValue: "collapsedValue", visibleValue: "visibleValue" }, ngImport: i0, template: "<button\r\n class=\"daga-collapse-button daga-{{ direction }}\"\r\n (click)=\"toggleCollapse()\"\r\n>\r\n <div [class]=\"getClass()\"></div>\r\n</button>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
97
97
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CollapseButtonComponent, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
|
-
args: [{
|
|
100
|
+
args: [{ selector: 'daga-collapse-button', imports: [CommonModule], template: "<button\r\n class=\"daga-collapse-button daga-{{ direction }}\"\r\n (click)=\"toggleCollapse()\"\r\n>\r\n <div [class]=\"getClass()\"></div>\r\n</button>\r\n" }]
|
|
101
101
|
}], propDecorators: { collapsableSelector: [{
|
|
102
102
|
type: Input
|
|
103
103
|
}], collapsableAdditionalSelector: [{
|
|
@@ -146,10 +146,10 @@ class CanvasProviderService {
|
|
|
146
146
|
getCanvas() {
|
|
147
147
|
return this._canvas;
|
|
148
148
|
}
|
|
149
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
150
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
150
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasProviderService }); }
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CanvasProviderService, decorators: [{
|
|
153
153
|
type: Injectable
|
|
154
154
|
}] });
|
|
155
155
|
|
|
@@ -254,7 +254,11 @@ class DiagramButtonsComponent {
|
|
|
254
254
|
}
|
|
255
255
|
layout() {
|
|
256
256
|
if (this.canvas.layoutFormat && this.canvas.layoutFormat in layouts) {
|
|
257
|
+
const from = getLocationsOfNodes(this.canvas.model);
|
|
257
258
|
layouts[this.canvas.layoutFormat].apply(this.canvas.model);
|
|
259
|
+
const to = getLocationsOfNodes(this.canvas.model);
|
|
260
|
+
const action = new ApplyLayoutAction(this.canvas, from, to);
|
|
261
|
+
this.canvas.actionStack.add(action);
|
|
258
262
|
}
|
|
259
263
|
}
|
|
260
264
|
filter() {
|
|
@@ -285,12 +289,12 @@ class DiagramButtonsComponent {
|
|
|
285
289
|
startMultipleSelection() {
|
|
286
290
|
this.canvas.multipleSelectionOn = true;
|
|
287
291
|
}
|
|
288
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
289
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
292
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramButtonsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
293
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramButtonsComponent, isStandalone: true, selector: "daga-diagram-buttons", inputs: { location: "location", direction: "direction", enableAction: "enableAction", enableFilter: "enableFilter", enableLayout: "enableLayout", enableSelection: "enableSelection", enableZoom: "enableZoom" }, viewQueries: [{ propertyName: "collapsableButtons", first: true, predicate: ["collapsableButtons"], descendants: true }], ngImport: i0, template: "<div class=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n <button\r\n *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n class=\"daga-zoom-in\"\r\n (click)=\"zoomIn()\"\r\n >\r\n <span class=\"daga-tooltip\">Zoom in</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n class=\"daga-zoom-out\"\r\n (click)=\"zoomOut()\"\r\n >\r\n <span class=\"daga-tooltip\">Zoom out</span>\r\n </button>\r\n <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n <button\r\n *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n class=\"daga-center\"\r\n (click)=\"center()\"\r\n >\r\n <span class=\"daga-tooltip\">Fit diagram to screen</span>\r\n </button>\r\n <button *ngIf=\"enableAction\" class=\"daga-undo\" (click)=\"undo()\">\r\n <span class=\"daga-tooltip\">Undo</span>\r\n </button>\r\n <button *ngIf=\"enableAction\" class=\"daga-redo\" (click)=\"redo()\">\r\n <span class=\"daga-tooltip\">Redo</span>\r\n </button>\r\n <button *ngIf=\"enableSelection\" class=\"daga-copy\" (click)=\"copySelection()\">\r\n <span class=\"daga-tooltip\">Copy</span>\r\n </button>\r\n <button *ngIf=\"enableSelection\" class=\"daga-cut\" (click)=\"cutSelection()\">\r\n <span class=\"daga-tooltip\">Cut</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableSelection\"\r\n class=\"daga-multiple-selection\"\r\n [class]=\"canvas.multipleSelectionOn ? 'daga-on' : 'daga-off'\"\r\n (click)=\"startMultipleSelection()\"\r\n >\r\n <span class=\"daga-tooltip\">Multiple selection</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableSelection\"\r\n class=\"daga-paste\"\r\n (click)=\"pasteSelection()\"\r\n >\r\n <span class=\"daga-tooltip\">Paste</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableSelection\"\r\n class=\"daga-delete\"\r\n (click)=\"deleteSelection()\"\r\n >\r\n <span class=\"daga-tooltip\">Delete</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n class=\"daga-layout\"\r\n (click)=\"layout()\"\r\n >\r\n <span class=\"daga-tooltip\">Apply layout</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableFilter\"\r\n class=\"daga-filter\"\r\n [class]=\"filterOn ? 'daga-on' : 'daga-off'\"\r\n (click)=\"filter()\"\r\n >\r\n <span class=\"daga-tooltip\">Apply filter</span>\r\n </button>\r\n </div>\r\n <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n <span *ngIf=\"!collapsed\" class=\"daga-tooltip\">Less options</span>\r\n <span *ngIf=\"collapsed\" class=\"daga-tooltip\">More options</span>\r\n </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
290
294
|
}
|
|
291
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
295
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramButtonsComponent, decorators: [{
|
|
292
296
|
type: Component,
|
|
293
|
-
args: [{
|
|
297
|
+
args: [{ selector: 'daga-diagram-buttons', imports: [CommonModule], template: "<div class=\"daga-diagram-buttons daga-{{ location }} daga-{{ direction }}\">\r\n <button\r\n *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n class=\"daga-zoom-in\"\r\n (click)=\"zoomIn()\"\r\n >\r\n <span class=\"daga-tooltip\">Zoom in</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n class=\"daga-zoom-out\"\r\n (click)=\"zoomOut()\"\r\n >\r\n <span class=\"daga-tooltip\">Zoom out</span>\r\n </button>\r\n <div #collapsableButtons class=\"daga-collapsable-buttons daga-collapsed\">\r\n <button\r\n *ngIf=\"enableZoom && canvas.canUserPerformAction(DiagramActions.Zoom)\"\r\n class=\"daga-center\"\r\n (click)=\"center()\"\r\n >\r\n <span class=\"daga-tooltip\">Fit diagram to screen</span>\r\n </button>\r\n <button *ngIf=\"enableAction\" class=\"daga-undo\" (click)=\"undo()\">\r\n <span class=\"daga-tooltip\">Undo</span>\r\n </button>\r\n <button *ngIf=\"enableAction\" class=\"daga-redo\" (click)=\"redo()\">\r\n <span class=\"daga-tooltip\">Redo</span>\r\n </button>\r\n <button *ngIf=\"enableSelection\" class=\"daga-copy\" (click)=\"copySelection()\">\r\n <span class=\"daga-tooltip\">Copy</span>\r\n </button>\r\n <button *ngIf=\"enableSelection\" class=\"daga-cut\" (click)=\"cutSelection()\">\r\n <span class=\"daga-tooltip\">Cut</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableSelection\"\r\n class=\"daga-multiple-selection\"\r\n [class]=\"canvas.multipleSelectionOn ? 'daga-on' : 'daga-off'\"\r\n (click)=\"startMultipleSelection()\"\r\n >\r\n <span class=\"daga-tooltip\">Multiple selection</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableSelection\"\r\n class=\"daga-paste\"\r\n (click)=\"pasteSelection()\"\r\n >\r\n <span class=\"daga-tooltip\">Paste</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableSelection\"\r\n class=\"daga-delete\"\r\n (click)=\"deleteSelection()\"\r\n >\r\n <span class=\"daga-tooltip\">Delete</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableLayout && canvas.layoutFormat\"\r\n class=\"daga-layout\"\r\n (click)=\"layout()\"\r\n >\r\n <span class=\"daga-tooltip\">Apply layout</span>\r\n </button>\r\n <button\r\n *ngIf=\"enableFilter\"\r\n class=\"daga-filter\"\r\n [class]=\"filterOn ? 'daga-on' : 'daga-off'\"\r\n (click)=\"filter()\"\r\n >\r\n <span class=\"daga-tooltip\">Apply filter</span>\r\n </button>\r\n </div>\r\n <button class=\"daga-more-options\" (click)=\"toggleCollapse()\">\r\n <span *ngIf=\"!collapsed\" class=\"daga-tooltip\">Less options</span>\r\n <span *ngIf=\"collapsed\" class=\"daga-tooltip\">More options</span>\r\n </button>\r\n</div>\r\n" }]
|
|
294
298
|
}], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { collapsableButtons: [{
|
|
295
299
|
type: ViewChild,
|
|
296
300
|
args: ['collapsableButtons']
|
|
@@ -371,12 +375,12 @@ class ErrorsComponent {
|
|
|
371
375
|
this.canvas.parentComponent?.propertyEditor?.highlightProperty(...error.propertyNames);
|
|
372
376
|
}
|
|
373
377
|
}
|
|
374
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
378
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ErrorsComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
379
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ErrorsComponent, isStandalone: true, selector: "daga-errors", viewQueries: [{ propertyName: "errorsContainer", first: true, predicate: ["errors"], descendants: true }], ngImport: i0, template: "<div #errorsContainer class=\"daga-errors\">\r\n <div\r\n *ngIf=\"errors.length === 0\"\r\n class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n >\r\n <span>No errors found</span>\r\n </div>\r\n <div\r\n *ngIf=\"errors.length > 0\"\r\n class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n >\r\n <span>{{ errors.length }} errors found</span>\r\n <div class=\"daga-collapse-button-container\">\r\n <daga-collapse-button\r\n [collapsableSelector]=\"errorsContainer\"\r\n [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n [direction]=\"Side.Top\"\r\n [rule]=\"'display'\"\r\n [collapsedValue]=\"'none'\"\r\n [visibleValue]=\"'block'\"\r\n />\r\n </div>\r\n </div>\r\n <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n <ol>\r\n <li\r\n *ngFor=\"let error of errors; index as i\"\r\n (click)=\"showError(error)\"\r\n [innerHTML]=\"error.message\"\r\n ></li>\r\n </ol>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
|
|
376
380
|
}
|
|
377
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
381
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ErrorsComponent, decorators: [{
|
|
378
382
|
type: Component,
|
|
379
|
-
args: [{
|
|
383
|
+
args: [{ selector: 'daga-errors', imports: [CommonModule, CollapseButtonComponent], template: "<div #errorsContainer class=\"daga-errors\">\r\n <div\r\n *ngIf=\"errors.length === 0\"\r\n class=\"daga-errors-summary daga-no-errors daga-prevent-user-select\"\r\n >\r\n <span>No errors found</span>\r\n </div>\r\n <div\r\n *ngIf=\"errors.length > 0\"\r\n class=\"daga-errors-summary daga-with-errors daga-prevent-user-select\"\r\n >\r\n <span>{{ errors.length }} errors found</span>\r\n <div class=\"daga-collapse-button-container\">\r\n <daga-collapse-button\r\n [collapsableSelector]=\"errorsContainer\"\r\n [collapsableAdditionalSelector]=\"'.daga-error-panel'\"\r\n [direction]=\"Side.Top\"\r\n [rule]=\"'display'\"\r\n [collapsedValue]=\"'none'\"\r\n [visibleValue]=\"'block'\"\r\n />\r\n </div>\r\n </div>\r\n <div *ngIf=\"errors.length > 0\" class=\"daga-error-panel\">\r\n <ol>\r\n <li\r\n *ngFor=\"let error of errors; index as i\"\r\n (click)=\"showError(error)\"\r\n [innerHTML]=\"error.message\"\r\n ></li>\r\n </ol>\r\n </div>\r\n</div>\r\n" }]
|
|
380
384
|
}], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { errorsContainer: [{
|
|
381
385
|
type: ViewChild,
|
|
382
386
|
args: ['errors']
|
|
@@ -406,13 +410,24 @@ class PaletteComponent {
|
|
|
406
410
|
switch (this.direction) {
|
|
407
411
|
case Side.Bottom:
|
|
408
412
|
case Side.Top:
|
|
409
|
-
this.selectPanel()
|
|
413
|
+
this.selectPanel()
|
|
414
|
+
.style('width', this.width)
|
|
415
|
+
.select('.daga-palette-view')
|
|
416
|
+
.style('flex-direction', 'row');
|
|
410
417
|
break;
|
|
411
418
|
case Side.Left:
|
|
412
419
|
case Side.Right:
|
|
413
|
-
this.selectPanel()
|
|
420
|
+
this.selectPanel()
|
|
421
|
+
.style('height', this.width)
|
|
422
|
+
.select('.daga-palette-view')
|
|
423
|
+
.style('flex-direction', 'column');
|
|
414
424
|
break;
|
|
415
425
|
}
|
|
426
|
+
this.selectPanel()
|
|
427
|
+
.select('.daga-palette-view')
|
|
428
|
+
.style('flex-wrap', 'wrap')
|
|
429
|
+
.style('justify-content', 'center')
|
|
430
|
+
.style('gap', this.gap);
|
|
416
431
|
}
|
|
417
432
|
refreshPalette() {
|
|
418
433
|
this.switchPalette(this.currentPalette);
|
|
@@ -503,6 +518,12 @@ class PaletteComponent {
|
|
|
503
518
|
.attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
|
|
504
519
|
.style('width', `${type.defaultWidth}px`)
|
|
505
520
|
.style('height', `${type.defaultHeight}px`)
|
|
521
|
+
.on(Events.MouseEnter, () => {
|
|
522
|
+
setCursorStyle(CursorStyle.Grab);
|
|
523
|
+
})
|
|
524
|
+
.on(Events.MouseLeave, () => {
|
|
525
|
+
setCursorStyle();
|
|
526
|
+
})
|
|
506
527
|
.call(d3
|
|
507
528
|
.drag()
|
|
508
529
|
.on(DragEvents.Drag, (event) => {
|
|
@@ -583,8 +604,21 @@ class PaletteComponent {
|
|
|
583
604
|
if (this.canvas.snapToGrid) {
|
|
584
605
|
newNodeCoords = this.canvas.getClosestGridPoint(newNodeCoords);
|
|
585
606
|
}
|
|
586
|
-
|
|
607
|
+
// check whether we dropped this node on a potential parent
|
|
608
|
+
const nodesAtLocation = this.canvas.model.nodes.getAtCoordinates(pointerCoords[0], pointerCoords[1]);
|
|
609
|
+
// filter by which nodes can have this type as a child
|
|
610
|
+
const nodesAtLocationWhichCanHaveNodeAsAChild = nodesAtLocation.filter((n) => n.type.childrenTypes.includes(type.id));
|
|
611
|
+
// filter by which nodes don't have descendants in this collection
|
|
612
|
+
const filteredNodesAtLocation = filterByOnlyDescendants(nodesAtLocationWhichCanHaveNodeAsAChild);
|
|
613
|
+
const droppedOn = filteredNodesAtLocation[filteredNodesAtLocation.length - 1];
|
|
614
|
+
if (!type.canBeParentless && droppedOn === undefined) {
|
|
615
|
+
// can't place, node must have a parent and no suitable parent has been found
|
|
616
|
+
return;
|
|
617
|
+
}
|
|
618
|
+
const ancestor = droppedOn?.getLastAncestor();
|
|
619
|
+
const addNodeAction = new AddNodeAction(this.canvas, type, newNodeCoords, droppedOn?.id, ancestor?.id, ancestor?.getGeometry(), undefined, templateConfig.label, templateConfig.values);
|
|
587
620
|
addNodeAction.do();
|
|
621
|
+
addNodeAction.toAncestorGeometry = ancestor?.getGeometry();
|
|
588
622
|
this.canvas.actionStack.add(addNodeAction);
|
|
589
623
|
// reset cursor
|
|
590
624
|
setCursorStyle();
|
|
@@ -597,13 +631,14 @@ class PaletteComponent {
|
|
|
597
631
|
.style('top', 0)
|
|
598
632
|
.style('width', '100%')
|
|
599
633
|
.style('height', '100%');
|
|
600
|
-
|
|
634
|
+
const nodeLook = templateConfig.look || type.look;
|
|
635
|
+
switch (nodeLook.lookType) {
|
|
601
636
|
case 'shaped-look':
|
|
602
637
|
thisComponent
|
|
603
638
|
.append('path')
|
|
604
|
-
.attr('d', generalClosedPath(
|
|
605
|
-
.attr('fill',
|
|
606
|
-
.attr('stroke',
|
|
639
|
+
.attr('d', generalClosedPath(nodeLook.shape, 0, 0, type.defaultWidth, type.defaultHeight))
|
|
640
|
+
.attr('fill', nodeLook.fillColor)
|
|
641
|
+
.attr('stroke', nodeLook.borderColor)
|
|
607
642
|
.attr('stroke-width', '1px');
|
|
608
643
|
break;
|
|
609
644
|
case 'image-look':
|
|
@@ -613,7 +648,7 @@ class PaletteComponent {
|
|
|
613
648
|
.attr('y', 0)
|
|
614
649
|
.attr('width', type.defaultWidth)
|
|
615
650
|
.attr('height', type.defaultHeight)
|
|
616
|
-
.attr('href',
|
|
651
|
+
.attr('href', nodeLook.backgroundImage)
|
|
617
652
|
.attr('preserveAspectRatio', 'none');
|
|
618
653
|
break;
|
|
619
654
|
case 'stretchable-image-look':
|
|
@@ -621,73 +656,73 @@ class PaletteComponent {
|
|
|
621
656
|
.append('image')
|
|
622
657
|
.attr('x', 0)
|
|
623
658
|
.attr('y', 0)
|
|
624
|
-
.attr('width',
|
|
625
|
-
.attr('height',
|
|
626
|
-
.attr('href',
|
|
659
|
+
.attr('width', nodeLook.leftMargin)
|
|
660
|
+
.attr('height', nodeLook.topMargin)
|
|
661
|
+
.attr('href', nodeLook.backgroundImageTopLeft)
|
|
627
662
|
.attr('preserveAspectRatio', 'none');
|
|
628
663
|
thisComponent
|
|
629
664
|
.append('image')
|
|
630
|
-
.attr('x',
|
|
665
|
+
.attr('x', nodeLook.leftMargin)
|
|
631
666
|
.attr('y', 0)
|
|
632
|
-
.attr('width', type.defaultWidth -
|
|
633
|
-
.attr('height',
|
|
634
|
-
.attr('href',
|
|
667
|
+
.attr('width', type.defaultWidth - nodeLook.rightMargin - nodeLook.leftMargin)
|
|
668
|
+
.attr('height', nodeLook.topMargin)
|
|
669
|
+
.attr('href', nodeLook.backgroundImageTop)
|
|
635
670
|
.attr('preserveAspectRatio', 'none');
|
|
636
671
|
thisComponent
|
|
637
672
|
.append('image')
|
|
638
|
-
.attr('x', type.defaultWidth -
|
|
673
|
+
.attr('x', type.defaultWidth - nodeLook.rightMargin)
|
|
639
674
|
.attr('y', 0)
|
|
640
|
-
.attr('width',
|
|
641
|
-
.attr('height',
|
|
642
|
-
.attr('href',
|
|
675
|
+
.attr('width', nodeLook.rightMargin)
|
|
676
|
+
.attr('height', nodeLook.topMargin)
|
|
677
|
+
.attr('href', nodeLook.backgroundImageTopRight)
|
|
643
678
|
.attr('preserveAspectRatio', 'none');
|
|
644
679
|
thisComponent
|
|
645
680
|
.append('image')
|
|
646
681
|
.attr('x', 0)
|
|
647
|
-
.attr('y',
|
|
648
|
-
.attr('width',
|
|
649
|
-
.attr('height', type.defaultHeight -
|
|
650
|
-
.attr('href',
|
|
682
|
+
.attr('y', nodeLook.topMargin)
|
|
683
|
+
.attr('width', nodeLook.leftMargin)
|
|
684
|
+
.attr('height', type.defaultHeight - nodeLook.bottomMargin - nodeLook.topMargin)
|
|
685
|
+
.attr('href', nodeLook.backgroundImageLeft)
|
|
651
686
|
.attr('preserveAspectRatio', 'none');
|
|
652
687
|
thisComponent
|
|
653
688
|
.append('image')
|
|
654
|
-
.attr('x',
|
|
655
|
-
.attr('y',
|
|
656
|
-
.attr('width', type.defaultWidth -
|
|
657
|
-
.attr('height', type.defaultHeight -
|
|
658
|
-
.attr('href',
|
|
689
|
+
.attr('x', nodeLook.leftMargin)
|
|
690
|
+
.attr('y', nodeLook.topMargin)
|
|
691
|
+
.attr('width', type.defaultWidth - nodeLook.rightMargin - nodeLook.leftMargin)
|
|
692
|
+
.attr('height', type.defaultHeight - nodeLook.bottomMargin - nodeLook.topMargin)
|
|
693
|
+
.attr('href', nodeLook.backgroundImageCenter)
|
|
659
694
|
.attr('preserveAspectRatio', 'none');
|
|
660
695
|
thisComponent
|
|
661
696
|
.append('image')
|
|
662
|
-
.attr('x', type.defaultWidth -
|
|
663
|
-
.attr('y',
|
|
664
|
-
.attr('width',
|
|
665
|
-
.attr('height', type.defaultHeight -
|
|
666
|
-
.attr('href',
|
|
697
|
+
.attr('x', type.defaultWidth - nodeLook.rightMargin)
|
|
698
|
+
.attr('y', nodeLook.topMargin)
|
|
699
|
+
.attr('width', nodeLook.rightMargin)
|
|
700
|
+
.attr('height', type.defaultHeight - nodeLook.bottomMargin - nodeLook.topMargin)
|
|
701
|
+
.attr('href', nodeLook.backgroundImageRight)
|
|
667
702
|
.attr('preserveAspectRatio', 'none');
|
|
668
703
|
thisComponent
|
|
669
704
|
.append('image')
|
|
670
705
|
.attr('x', 0)
|
|
671
|
-
.attr('y', type.defaultHeight -
|
|
672
|
-
.attr('width',
|
|
673
|
-
.attr('height',
|
|
674
|
-
.attr('href',
|
|
706
|
+
.attr('y', type.defaultHeight - nodeLook.bottomMargin)
|
|
707
|
+
.attr('width', nodeLook.leftMargin)
|
|
708
|
+
.attr('height', nodeLook.bottomMargin)
|
|
709
|
+
.attr('href', nodeLook.backgroundImageBottomLeft)
|
|
675
710
|
.attr('preserveAspectRatio', 'none');
|
|
676
711
|
thisComponent
|
|
677
712
|
.append('image')
|
|
678
|
-
.attr('x',
|
|
679
|
-
.attr('y', type.defaultHeight -
|
|
680
|
-
.attr('width', type.defaultWidth -
|
|
681
|
-
.attr('height',
|
|
682
|
-
.attr('href',
|
|
713
|
+
.attr('x', nodeLook.leftMargin)
|
|
714
|
+
.attr('y', type.defaultHeight - nodeLook.bottomMargin)
|
|
715
|
+
.attr('width', type.defaultWidth - nodeLook.rightMargin - nodeLook.leftMargin)
|
|
716
|
+
.attr('height', nodeLook.bottomMargin)
|
|
717
|
+
.attr('href', nodeLook.backgroundImageBottom)
|
|
683
718
|
.attr('preserveAspectRatio', 'none');
|
|
684
719
|
thisComponent
|
|
685
720
|
.append('image')
|
|
686
|
-
.attr('x', type.defaultWidth -
|
|
687
|
-
.attr('y', type.defaultHeight -
|
|
688
|
-
.attr('width',
|
|
689
|
-
.attr('height',
|
|
690
|
-
.attr('href',
|
|
721
|
+
.attr('x', type.defaultWidth - nodeLook.rightMargin)
|
|
722
|
+
.attr('y', type.defaultHeight - nodeLook.bottomMargin)
|
|
723
|
+
.attr('width', nodeLook.rightMargin)
|
|
724
|
+
.attr('height', nodeLook.bottomMargin)
|
|
725
|
+
.attr('href', nodeLook.backgroundImageBottomRight)
|
|
691
726
|
.attr('preserveAspectRatio', 'none');
|
|
692
727
|
}
|
|
693
728
|
if (templateConfig.label) {
|
|
@@ -718,6 +753,7 @@ class PaletteComponent {
|
|
|
718
753
|
.attr('class', `daga-template-container ${classes !== undefined ? classes : ''}`)
|
|
719
754
|
.style('width', `${templateConfig.width}px`)
|
|
720
755
|
.style('height', `${templateConfig.height}px`)
|
|
756
|
+
.style('cursor', 'pointer')
|
|
721
757
|
.append('svg')
|
|
722
758
|
.attr('class', `palette-button ${type.id}`)
|
|
723
759
|
.style('position', 'relative')
|
|
@@ -728,20 +764,39 @@ class PaletteComponent {
|
|
|
728
764
|
.on('click', () => {
|
|
729
765
|
this.canvas.connectionType = type;
|
|
730
766
|
});
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
767
|
+
if (this.canvas.connectionType !== type) {
|
|
768
|
+
// the connection type of this template is not the currently selected one
|
|
769
|
+
if (templateConfig.icon !== '') {
|
|
770
|
+
thisComponent
|
|
771
|
+
.append('image')
|
|
772
|
+
.attr('x', 0)
|
|
773
|
+
.attr('y', 0)
|
|
774
|
+
.attr('width', templateConfig.width)
|
|
775
|
+
.attr('height', templateConfig.height)
|
|
776
|
+
.attr('href', templateConfig.icon);
|
|
777
|
+
}
|
|
778
|
+
}
|
|
779
|
+
else {
|
|
780
|
+
// the connection type of this template is the currently selected one
|
|
781
|
+
if (templateConfig.selectedIcon !== '') {
|
|
782
|
+
thisComponent
|
|
783
|
+
.append('image')
|
|
784
|
+
.attr('x', 0)
|
|
785
|
+
.attr('y', 0)
|
|
786
|
+
.attr('width', templateConfig.width)
|
|
787
|
+
.attr('height', templateConfig.height)
|
|
788
|
+
.attr('href', templateConfig.selectedIcon);
|
|
789
|
+
}
|
|
790
|
+
else if (templateConfig.icon !== '') {
|
|
791
|
+
// if there's no selectedIcon, use the regular icon instead
|
|
792
|
+
thisComponent
|
|
793
|
+
.append('image')
|
|
794
|
+
.attr('x', 0)
|
|
795
|
+
.attr('y', 0)
|
|
796
|
+
.attr('width', templateConfig.width)
|
|
797
|
+
.attr('height', templateConfig.height)
|
|
798
|
+
.attr('href', templateConfig.icon);
|
|
799
|
+
}
|
|
745
800
|
}
|
|
746
801
|
if (templateConfig.label !== '') {
|
|
747
802
|
thisComponent
|
|
@@ -760,12 +815,12 @@ class PaletteComponent {
|
|
|
760
815
|
.text(templateConfig.label);
|
|
761
816
|
}
|
|
762
817
|
}
|
|
763
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
764
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
818
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaletteComponent, deps: [{ token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
819
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PaletteComponent, isStandalone: true, selector: "daga-palette", inputs: { palettes: "palettes", currentPalette: "currentPalette", currentCategory: "currentCategory", location: "location", direction: "direction", width: "width", gap: "gap" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n <daga-collapse-button\r\n #collapseButton\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n <div class=\"daga-panel-content\">\r\n <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n <div\r\n *ngFor=\"let palette of palettes\"\r\n class=\"daga-panel-tab\"\r\n [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n (click)=\"switchPalette(palette)\"\r\n >\r\n {{ palette.name }}\r\n </div>\r\n </div>\r\n <div class=\"daga-palette-view\"></div>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }] }); }
|
|
765
820
|
}
|
|
766
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaletteComponent, decorators: [{
|
|
767
822
|
type: Component,
|
|
768
|
-
args: [{
|
|
823
|
+
args: [{ selector: 'daga-palette', imports: [CommonModule, CollapseButtonComponent], template: "<div #panel class=\"daga-panel daga-{{ location }} daga-{{ direction }}\">\r\n <daga-collapse-button\r\n #collapseButton\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n <div class=\"daga-panel-content\">\r\n <div *ngIf=\"palettes.length > 1\" class=\"daga-panel-tabs\">\r\n <div\r\n *ngFor=\"let palette of palettes\"\r\n class=\"daga-panel-tab\"\r\n [class]=\"palette === currentPalette ? 'daga-current-tab' : ''\"\r\n (click)=\"switchPalette(palette)\"\r\n >\r\n {{ palette.name }}\r\n </div>\r\n </div>\r\n <div class=\"daga-palette-view\"></div>\r\n </div>\r\n</div>\r\n" }]
|
|
769
824
|
}], ctorParameters: () => [{ type: CanvasProviderService }], propDecorators: { panel: [{
|
|
770
825
|
type: ViewChild,
|
|
771
826
|
args: ['panel']
|
|
@@ -781,6 +836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
781
836
|
type: Input
|
|
782
837
|
}], width: [{
|
|
783
838
|
type: Input
|
|
839
|
+
}], gap: [{
|
|
840
|
+
type: Input
|
|
784
841
|
}] } });
|
|
785
842
|
|
|
786
843
|
/**
|
|
@@ -964,12 +1021,12 @@ class PropertySettingsComponent {
|
|
|
964
1021
|
this.cdr.detectChanges();
|
|
965
1022
|
this.addListeners();
|
|
966
1023
|
}
|
|
967
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
968
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1024
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertySettingsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1025
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PropertySettingsComponent, isStandalone: true, selector: "daga-property-settings", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n<div\r\n *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n class=\"daga-property-and-dropbar\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div class=\"daga-property-name\">\r\n <span>{{ property.name }}</span>\r\n <div class=\"daga-buttons\">\r\n <button class=\"daga-property-button daga-move-button\">\r\n <div class=\"daga-icon daga-move-icon\"></div>\r\n </button>\r\n <button\r\n class=\"daga-property-button daga-hide-button\"\r\n (click)=\"hideProperty(property.name)\"\r\n >\r\n <div class=\"daga-icon daga-hide-icon\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"property.type !== Type.Object\" class=\"daga-property-value\">\r\n {{ asString(valueSet?.getValue(property.name)) }}\r\n </div>\r\n <div *ngIf=\"property.type === Type.Object\">\r\n <daga-property-settings\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-property-settings>\r\n </div>\r\n </div>\r\n <div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n ></div>\r\n</div>\r\n<div\r\n class=\"daga-property\"\r\n *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\"\r\n>\r\n <p class=\"daga-property-name\">Add property:</p>\r\n <select (change)=\"displayProperty($event)\">\r\n <option value=\"\">Select a property</option>\r\n <option\r\n *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n [value]=\"property.name\"\r\n >\r\n {{ property.name }}\r\n </option>\r\n </select>\r\n</div>\r\n", dependencies: [{ kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] }); }
|
|
969
1026
|
}
|
|
970
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1027
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertySettingsComponent, decorators: [{
|
|
971
1028
|
type: Component,
|
|
972
|
-
args: [{
|
|
1029
|
+
args: [{ selector: 'daga-property-settings', imports: [CommonModule, FormsModule], template: "<div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + 0 + ' daga-depth-' + depth\"\r\n></div>\r\n<div\r\n *ngFor=\"let property of valueSet?.displayedProperties || []; index as i\"\r\n class=\"daga-property-and-dropbar\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n <div\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n >\r\n <div class=\"daga-property-name\">\r\n <span>{{ property.name }}</span>\r\n <div class=\"daga-buttons\">\r\n <button class=\"daga-property-button daga-move-button\">\r\n <div class=\"daga-icon daga-move-icon\"></div>\r\n </button>\r\n <button\r\n class=\"daga-property-button daga-hide-button\"\r\n (click)=\"hideProperty(property.name)\"\r\n >\r\n <div class=\"daga-icon daga-hide-icon\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"property.type !== Type.Object\" class=\"daga-property-value\">\r\n {{ asString(valueSet?.getValue(property.name)) }}\r\n </div>\r\n <div *ngIf=\"property.type === Type.Object\">\r\n <daga-property-settings\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-property-settings>\r\n </div>\r\n </div>\r\n <div\r\n class=\"daga-dropbar\"\r\n [class]=\"'daga-index-' + (i + 1) + ' daga-depth-' + depth\"\r\n ></div>\r\n</div>\r\n<div\r\n class=\"daga-property\"\r\n *ngIf=\"valueSet && valueSet.hiddenProperties.length > 0\"\r\n>\r\n <p class=\"daga-property-name\">Add property:</p>\r\n <select (change)=\"displayProperty($event)\">\r\n <option value=\"\">Select a property</option>\r\n <option\r\n *ngFor=\"let property of valueSet?.hiddenProperties || []\"\r\n [value]=\"property.name\"\r\n >\r\n {{ property.name }}\r\n </option>\r\n </select>\r\n</div>\r\n" }]
|
|
973
1030
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
|
|
974
1031
|
type: Input
|
|
975
1032
|
}], depth: [{
|
|
@@ -1154,12 +1211,12 @@ class AutocompleteComponent {
|
|
|
1154
1211
|
this.valueChange.emit(option.key);
|
|
1155
1212
|
}
|
|
1156
1213
|
}
|
|
1157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: AutocompleteComponent, isStandalone: true, selector: "daga-autocomplete", inputs: { value: "value", valueInput: "valueInput", options: "options", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "mainElement", first: true, predicate: ["main"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n #main\r\n class=\"daga-autocomplete\"\r\n [class]=\"showOptions ? 'daga-showing-options' : ''\"\r\n (blur)=\"closeOptions()\"\r\n>\r\n <div class=\"daga-autocomplete-input\">\r\n <input\r\n [(ngModel)]=\"valueInput\"\r\n [disabled]=\"disabled\"\r\n (keyup)=\"onKeyup($event)\"\r\n (focus)=\"openOptions()\"\r\n (blur)=\"onLostFocus()\"\r\n />\r\n <button\r\n *ngIf=\"valueInput !== ''\"\r\n class=\"daga-clear\"\r\n (click)=\"clearInput()\"\r\n ></button>\r\n </div>\r\n <div class=\"daga-autocomplete-options\">\r\n <ul class=\"daga-autocomplete-option-list\">\r\n <li\r\n *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n class=\"daga-autocomplete-option no-options\"\r\n >\r\n (No options)\r\n </li>\r\n <li\r\n *ngFor=\"let option of currentOptions; let index = index\"\r\n class=\"daga-autocomplete-option\"\r\n [class]=\"index === focusIndex ? 'daga-focused' : ''\"\r\n (mousemove)=\"focusOnOption(index)\"\r\n (click)=\"complete(option)\"\r\n >\r\n <span>{{ currentLabelStarts[index] }}</span>\r\n <span class=\"daga-match\">{{ currentLabelMatches[index] }}</span>\r\n <span>{{ currentLabelEnds[index] }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1159
1216
|
}
|
|
1160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
1161
1218
|
type: Component,
|
|
1162
|
-
args: [{
|
|
1219
|
+
args: [{ selector: 'daga-autocomplete', imports: [CommonModule, FormsModule], template: "<div\r\n #main\r\n class=\"daga-autocomplete\"\r\n [class]=\"showOptions ? 'daga-showing-options' : ''\"\r\n (blur)=\"closeOptions()\"\r\n>\r\n <div class=\"daga-autocomplete-input\">\r\n <input\r\n [(ngModel)]=\"valueInput\"\r\n [disabled]=\"disabled\"\r\n (keyup)=\"onKeyup($event)\"\r\n (focus)=\"openOptions()\"\r\n (blur)=\"onLostFocus()\"\r\n />\r\n <button\r\n *ngIf=\"valueInput !== ''\"\r\n class=\"daga-clear\"\r\n (click)=\"clearInput()\"\r\n ></button>\r\n </div>\r\n <div class=\"daga-autocomplete-options\">\r\n <ul class=\"daga-autocomplete-option-list\">\r\n <li\r\n *ngIf=\"(currentOptions?.length || 0) === 0\"\r\n class=\"daga-autocomplete-option no-options\"\r\n >\r\n (No options)\r\n </li>\r\n <li\r\n *ngFor=\"let option of currentOptions; let index = index\"\r\n class=\"daga-autocomplete-option\"\r\n [class]=\"index === focusIndex ? 'daga-focused' : ''\"\r\n (mousemove)=\"focusOnOption(index)\"\r\n (click)=\"complete(option)\"\r\n >\r\n <span>{{ currentLabelStarts[index] }}</span>\r\n <span class=\"daga-match\">{{ currentLabelMatches[index] }}</span>\r\n <span>{{ currentLabelEnds[index] }}</span>\r\n </li>\r\n </ul>\r\n </div>\r\n</div>\r\n" }]
|
|
1163
1220
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mainElement: [{
|
|
1164
1221
|
type: ViewChild,
|
|
1165
1222
|
args: ['main', { static: true }]
|
|
@@ -1271,12 +1328,12 @@ class OptionListEditorComponent {
|
|
|
1271
1328
|
this.addToValue();
|
|
1272
1329
|
}
|
|
1273
1330
|
}
|
|
1274
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1275
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1331
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OptionListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1332
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: OptionListEditorComponent, isStandalone: true, selector: "daga-option-list-editor", inputs: { value: "value", options: "options", valueInput: "valueInput", allowRepeats: "allowRepeats", optionsNotPresentInValue: "optionsNotPresentInValue", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\r\n *ngFor=\"let item of value; let index = index\"\r\n class=\"daga-value-item-element\"\r\n>\r\n <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n <button\r\n *ngIf=\"!disabled\"\r\n class=\"daga-property-button\"\r\n (click)=\"removeFromValue(index)\"\r\n >\r\n <div class=\"daga-icon daga-close-icon\"></div>\r\n </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n <div class=\"daga-input daga-relatively-positioned\">\r\n <daga-autocomplete\r\n [disabled]=\"disabled\"\r\n [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n [(value)]=\"valueInput\"\r\n />\r\n </div>\r\n <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n <div class=\"daga-icon daga-add-icon\"></div>\r\n </button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
1276
1333
|
}
|
|
1277
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OptionListEditorComponent, decorators: [{
|
|
1278
1335
|
type: Component,
|
|
1279
|
-
args: [{
|
|
1336
|
+
args: [{ selector: 'daga-option-list-editor', imports: [AutocompleteComponent, CommonModule, FormsModule], template: "<div\r\n *ngFor=\"let item of value; let index = index\"\r\n class=\"daga-value-item-element\"\r\n>\r\n <span class=\"daga-input\">{{ labelsOfValue[index] }}</span>\r\n <button\r\n *ngIf=\"!disabled\"\r\n class=\"daga-property-button\"\r\n (click)=\"removeFromValue(index)\"\r\n >\r\n <div class=\"daga-icon daga-close-icon\"></div>\r\n </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n <div class=\"daga-input daga-relatively-positioned\">\r\n <daga-autocomplete\r\n [disabled]=\"disabled\"\r\n [options]=\"allowRepeats ? options || [] : optionsNotPresentInValue || []\"\r\n [(value)]=\"valueInput\"\r\n />\r\n </div>\r\n <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n <div class=\"daga-icon daga-add-icon\"></div>\r\n </button>\r\n</div>\r\n" }]
|
|
1280
1337
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
1281
1338
|
type: Input
|
|
1282
1339
|
}], options: [{
|
|
@@ -1366,12 +1423,12 @@ class TextListEditorComponent {
|
|
|
1366
1423
|
this.addToValue();
|
|
1367
1424
|
}
|
|
1368
1425
|
}
|
|
1369
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1370
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1426
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextListEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1427
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TextListEditorComponent, isStandalone: true, selector: "daga-text-list-editor", inputs: { value: "value", valueInput: "valueInput", allowRepeats: "allowRepeats", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\r\n *ngFor=\"let item of value; let index = index\"\r\n class=\"daga-value-item-element\"\r\n>\r\n <input\r\n class=\"daga-input\"\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [value]=\"item\"\r\n (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n />\r\n <button\r\n *ngIf=\"!disabled\"\r\n class=\"daga-property-button\"\r\n (click)=\"removeFromValue(index)\"\r\n >\r\n <div class=\"icon close-icon\"></div>\r\n </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n <div class=\"daga-input daga-relatively-positioned\">\r\n <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n <button\r\n *ngIf=\"valueInput !== ''\"\r\n class=\"daga-clear\"\r\n (click)=\"clearInput()\"\r\n ></button>\r\n </div>\r\n <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n <div class=\"daga-icon daga-add-icon\"></div>\r\n </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1371
1428
|
}
|
|
1372
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextListEditorComponent, decorators: [{
|
|
1373
1430
|
type: Component,
|
|
1374
|
-
args: [{
|
|
1431
|
+
args: [{ selector: 'daga-text-list-editor', imports: [CommonModule, FormsModule], template: "<div\r\n *ngFor=\"let item of value; let index = index\"\r\n class=\"daga-value-item-element\"\r\n>\r\n <input\r\n class=\"daga-input\"\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [value]=\"item\"\r\n (focusout)=\"editFromValue(getValueFromEvent($event), index)\"\r\n />\r\n <button\r\n *ngIf=\"!disabled\"\r\n class=\"daga-property-button\"\r\n (click)=\"removeFromValue(index)\"\r\n >\r\n <div class=\"icon close-icon\"></div>\r\n </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n <div class=\"daga-input daga-relatively-positioned\">\r\n <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n <button\r\n *ngIf=\"valueInput !== ''\"\r\n class=\"daga-clear\"\r\n (click)=\"clearInput()\"\r\n ></button>\r\n </div>\r\n <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n <div class=\"daga-icon daga-add-icon\"></div>\r\n </button>\r\n</div>\r\n" }]
|
|
1375
1432
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
1376
1433
|
type: Input
|
|
1377
1434
|
}], valueInput: [{
|
|
@@ -1457,12 +1514,12 @@ class TextMapEditorComponent {
|
|
|
1457
1514
|
this.addToValue();
|
|
1458
1515
|
}
|
|
1459
1516
|
}
|
|
1460
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1461
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1517
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextMapEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1518
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TextMapEditorComponent, isStandalone: true, selector: "daga-text-map-editor", inputs: { value: "value", keyInput: "keyInput", valueInput: "valueInput", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div *ngFor=\"let item of value | keyvalue\" class=\"daga-value-item-element\">\r\n <input\r\n class=\"daga-input\"\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [value]=\"item.key\"\r\n (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n />\r\n <input\r\n class=\"daga-input\"\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [value]=\"item.value\"\r\n (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n />\r\n <button\r\n *ngIf=\"!disabled\"\r\n class=\"daga-property-button\"\r\n (click)=\"removeFromValue(item.key)\"\r\n >\r\n <div class=\"icon close-icon\"></div>\r\n </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n <div class=\"daga-input daga-relatively-positioned\">\r\n <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n <button\r\n *ngIf=\"keyInput !== ''\"\r\n class=\"daga-clear\"\r\n (click)=\"clearKeyInput()\"\r\n ></button>\r\n </div>\r\n <div class=\"daga-input daga-relatively-positioned\">\r\n <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n <button\r\n *ngIf=\"valueInput !== ''\"\r\n class=\"daga-clear\"\r\n (click)=\"clearValueInput()\"\r\n ></button>\r\n </div>\r\n <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n <div class=\"daga-icon daga-add-icon\"></div>\r\n </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1462
1519
|
}
|
|
1463
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TextMapEditorComponent, decorators: [{
|
|
1464
1521
|
type: Component,
|
|
1465
|
-
args: [{
|
|
1522
|
+
args: [{ selector: 'daga-text-map-editor', imports: [CommonModule, FormsModule], template: "<div *ngFor=\"let item of value | keyvalue\" class=\"daga-value-item-element\">\r\n <input\r\n class=\"daga-input\"\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [value]=\"item.key\"\r\n (focusout)=\"editKey(item.key, getValueFromEvent($event))\"\r\n />\r\n <input\r\n class=\"daga-input\"\r\n type=\"text\"\r\n [disabled]=\"disabled\"\r\n [value]=\"item.value\"\r\n (focusout)=\"editValue(item.key, getValueFromEvent($event))\"\r\n />\r\n <button\r\n *ngIf=\"!disabled\"\r\n class=\"daga-property-button\"\r\n (click)=\"removeFromValue(item.key)\"\r\n >\r\n <div class=\"icon close-icon\"></div>\r\n </button>\r\n</div>\r\n<div *ngIf=\"!disabled\" class=\"daga-value-item-input\">\r\n <div class=\"daga-input daga-relatively-positioned\">\r\n <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"keyInput\" />\r\n <button\r\n *ngIf=\"keyInput !== ''\"\r\n class=\"daga-clear\"\r\n (click)=\"clearKeyInput()\"\r\n ></button>\r\n </div>\r\n <div class=\"daga-input daga-relatively-positioned\">\r\n <input type=\"text\" (keyup)=\"onKeyUp($event)\" [(ngModel)]=\"valueInput\" />\r\n <button\r\n *ngIf=\"valueInput !== ''\"\r\n class=\"daga-clear\"\r\n (click)=\"clearValueInput()\"\r\n ></button>\r\n </div>\r\n <button class=\"daga-property-button\" (click)=\"addToValue()\">\r\n <div class=\"daga-icon daga-add-icon\"></div>\r\n </button>\r\n</div>\r\n" }]
|
|
1466
1523
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
|
|
1467
1524
|
type: Input
|
|
1468
1525
|
}], keyInput: [{
|
|
@@ -1515,8 +1572,6 @@ class ObjectEditorComponent {
|
|
|
1515
1572
|
if (property.editable) {
|
|
1516
1573
|
if (!equals(this.valueSet.getValue(property.name), value)) {
|
|
1517
1574
|
this.valueSet.setValue(property.name, value);
|
|
1518
|
-
// register a diagram change when editing a value
|
|
1519
|
-
this.canvas.diagramChange$?.next();
|
|
1520
1575
|
this.canvas.propertyEditorChanges$?.next();
|
|
1521
1576
|
}
|
|
1522
1577
|
}
|
|
@@ -1537,19 +1592,19 @@ class ObjectEditorComponent {
|
|
|
1537
1592
|
// with no timezone specified, the local time is assumed
|
|
1538
1593
|
return new Date(string);
|
|
1539
1594
|
}
|
|
1540
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1541
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1595
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ObjectEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ObjectEditorComponent, isStandalone: true, selector: "daga-object-editor", inputs: { valueSet: "valueSet", depth: "depth" }, ngImport: i0, template: "<div\r\n *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n <p class=\"daga-property-name\">\r\n {{ property.name }}\r\n </p>\r\n\r\n <input\r\n *ngIf=\"property.type === Type.Text\"\r\n type=\"daga-text\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <textarea\r\n *ngIf=\"property.type === Type.TextArea\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n ></textarea>\r\n <input\r\n *ngIf=\"property.type === Type.Number\"\r\n type=\"number\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Color\"\r\n type=\"text\"\r\n pattern=\"#\\d{6}\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Datetime\"\r\n type=\"datetime-local\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Date\"\r\n type=\"date\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Time\"\r\n type=\"time\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Url\"\r\n type=\"url\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n <label\r\n class=\"daga-radio-item daga-radio-start\"\r\n [class]=\"\r\n valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n \"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"false\"\r\n (change)=\"setValue(property, false)\"\r\n />\r\n No\r\n </label>\r\n <label\r\n class=\"daga-radio-item daga-radio-end\"\r\n [class]=\"valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"true\"\r\n (change)=\"setValue(property, true)\"\r\n />\r\n Yes\r\n </label>\r\n </div>\r\n <div class=\"daga-relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n <daga-autocomplete\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n />\r\n </div>\r\n <daga-option-list-editor\r\n *ngIf=\"\r\n property.type === Type.OptionList || property.type === Type.OptionSet\r\n \"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.OptionList\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-option-list-editor>\r\n <daga-text-list-editor\r\n *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.TextList\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-list-editor>\r\n <daga-text-map-editor\r\n *ngIf=\"property.type === Type.TextMap\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-map-editor>\r\n <div *ngIf=\"property.type === Type.Object\" class=\"daga-left-bar\">\r\n <daga-object-editor\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-object-editor>\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: AutocompleteComponent, selector: "daga-autocomplete", inputs: ["value", "valueInput", "options", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: OptionListEditorComponent, selector: "daga-option-list-editor", inputs: ["value", "options", "valueInput", "allowRepeats", "optionsNotPresentInValue", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextListEditorComponent, selector: "daga-text-list-editor", inputs: ["value", "valueInput", "allowRepeats", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: TextMapEditorComponent, selector: "daga-text-map-editor", inputs: ["value", "keyInput", "valueInput", "disabled"], outputs: ["valueChange"] }] }); }
|
|
1542
1597
|
}
|
|
1543
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ObjectEditorComponent, decorators: [{
|
|
1544
1599
|
type: Component,
|
|
1545
|
-
args: [{
|
|
1600
|
+
args: [{ selector: 'daga-object-editor', imports: [
|
|
1546
1601
|
AutocompleteComponent,
|
|
1547
1602
|
CommonModule,
|
|
1548
1603
|
FormsModule,
|
|
1549
1604
|
OptionListEditorComponent,
|
|
1550
1605
|
TextListEditorComponent,
|
|
1551
1606
|
TextMapEditorComponent
|
|
1552
|
-
], template: "<div\r\n *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n <p class=\"daga-property-name\">\r\n {{ property.name }}\r\n </p>\r\n\r\n <input\r\n *ngIf=\"property.type === Type.Text\"\r\n type=\"daga-text\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <textarea\r\n *ngIf=\"property.type === Type.TextArea\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n ></textarea>\r\n <input\r\n *ngIf=\"property.type === Type.Number\"\r\n type=\"number\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Color\"\r\n type=\"text\"\r\n pattern=\"#\\d{6}\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Datetime\"\r\n type=\"datetime-local\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Date\"\r\n type=\"date\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Time\"\r\n type=\"time\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Url\"\r\n type=\"url\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n <label
|
|
1607
|
+
], template: "<div\r\n *ngFor=\"let property of valueSet?.displayedProperties || []\"\r\n class=\"daga-property\"\r\n [class]=\"getStyleClassName(property.name) + ' daga-depth-' + depth\"\r\n>\r\n <p class=\"daga-property-name\">\r\n {{ property.name }}\r\n </p>\r\n\r\n <input\r\n *ngIf=\"property.type === Type.Text\"\r\n type=\"daga-text\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <textarea\r\n *ngIf=\"property.type === Type.TextArea\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n ></textarea>\r\n <input\r\n *ngIf=\"property.type === Type.Number\"\r\n type=\"number\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Color\"\r\n type=\"text\"\r\n pattern=\"#\\d{6}\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Datetime\"\r\n type=\"datetime-local\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"dateToLocalDatetimeString(valueSet?.getValue(property.name))\"\r\n (ngModelChange)=\"setValue(property, localDatetimeStringToDate($event))\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Date\"\r\n type=\"date\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Time\"\r\n type=\"time\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <input\r\n *ngIf=\"property.type === Type.Url\"\r\n type=\"url\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [ngModel]=\"valueSet?.getValue(property.name)\"\r\n (ngModelChange)=\"setValue(property, $event)\"\r\n />\r\n <div class=\"daga-radio\" *ngIf=\"property.type === Type.Boolean\">\r\n <label\r\n class=\"daga-radio-item daga-radio-start\"\r\n [class]=\"\r\n valueSet?.getValue(property.name) === false ? 'daga-checked' : ''\r\n \"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"false\"\r\n (change)=\"setValue(property, false)\"\r\n />\r\n No\r\n </label>\r\n <label\r\n class=\"daga-radio-item daga-radio-end\"\r\n [class]=\"valueSet?.getValue(property.name) === true ? 'daga-checked' : ''\"\r\n >\r\n <input\r\n type=\"radio\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [name]=\"property.name\"\r\n value=\"true\"\r\n (change)=\"setValue(property, true)\"\r\n />\r\n Yes\r\n </label>\r\n </div>\r\n <div class=\"daga-relatively-positioned\" *ngIf=\"property.type === Type.Option\">\r\n <daga-autocomplete\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n />\r\n </div>\r\n <daga-option-list-editor\r\n *ngIf=\"\r\n property.type === Type.OptionList || property.type === Type.OptionSet\r\n \"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.OptionList\"\r\n [options]=\"property.options || []\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-option-list-editor>\r\n <daga-text-list-editor\r\n *ngIf=\"property.type === Type.TextList || property.type === Type.TextSet\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [allowRepeats]=\"property.type === Type.TextList\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-list-editor>\r\n <daga-text-map-editor\r\n *ngIf=\"property.type === Type.TextMap\"\r\n [disabled]=\"!property.editable || !userCanEdit\"\r\n [value]=\"valueSet?.getValue(property.name)\"\r\n (valueChange)=\"setValue(property, $event)\"\r\n ></daga-text-map-editor>\r\n <div *ngIf=\"property.type === Type.Object\" class=\"daga-left-bar\">\r\n <daga-object-editor\r\n [valueSet]=\"valueSet?.getSubValueSet(property.name)\"\r\n [depth]=\"depth + 1\"\r\n ></daga-object-editor>\r\n </div>\r\n</div>\r\n" }]
|
|
1553
1608
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CanvasProviderService }], propDecorators: { valueSet: [{
|
|
1554
1609
|
type: Input
|
|
1555
1610
|
}], depth: [{
|
|
@@ -1614,12 +1669,12 @@ class PropertyEditorComponent {
|
|
|
1614
1669
|
});
|
|
1615
1670
|
}
|
|
1616
1671
|
}
|
|
1617
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1672
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertyEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1673
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: PropertyEditorComponent, isStandalone: true, selector: "daga-property-editor", inputs: { location: "location", direction: "direction", width: "width", valueSet: "valueSet" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "<div\r\n #panel\r\n class=\"daga-panel daga-bottom daga-{{ location }} daga-{{ direction }}\"\r\n>\r\n <daga-collapse-button\r\n #collapse\r\n [disabled]=\"\r\n !valueSet ||\r\n !valueSet.propertySet ||\r\n !valueSet.propertySet.hasProperties()\r\n \"\r\n [direction]=\"direction\"\r\n [collapsableSelector]=\"panel\"\r\n collapsableAdditionalSelector=\".daga-panel-content\"\r\n rule=\"display\"\r\n collapsedValue=\"none\"\r\n visibleValue=\"block\"\r\n />\r\n <div\r\n *ngIf=\"\r\n valueSet &&\r\n valueSet.propertySet &&\r\n valueSet.propertySet.hasProperties() &&\r\n !collapse.collapsed\r\n \"\r\n class=\"daga-panel-content\"\r\n >\r\n <p *ngIf=\"title\" class=\"daga-title\">\r\n {{ title }}\r\n <button class=\"daga-property-button\" (click)=\"settings = !settings\">\r\n <div\r\n class=\"daga-icon daga-settings-icon\"\r\n [class]=\"\r\n settings === undefined\r\n ? ''\r\n : settings\r\n ? 'daga-unrotate'\r\n : 'daga-rotate'\r\n \"\r\n ></div>\r\n </button>\r\n </p>\r\n <daga-object-editor *ngIf=\"!settings\" [valueSet]=\"valueSet\" />\r\n <daga-property-settings *ngIf=\"settings\" [valueSet]=\"valueSet\" />\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CollapseButtonComponent, selector: "daga-collapse-button", inputs: ["collapsableSelector", "collapsableAdditionalSelector", "collapsed", "disabled", "direction", "rule", "collapsedValue", "visibleValue"] }, { kind: "component", type: ObjectEditorComponent, selector: "daga-object-editor", inputs: ["valueSet", "depth"] }, { kind: "component", type: PropertySettingsComponent, selector: "daga-property-settings", inputs: ["valueSet", "depth"] }] }); }
|
|
1619
1674
|
}
|
|
1620
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PropertyEditorComponent, decorators: [{
|
|
1621
1676
|
type: Component,
|
|
1622
|
-
args: [{
|
|
1677
|
+
args: [{ selector: 'daga-property-editor', imports: [
|
|
1623
1678
|
CommonModule,
|
|
1624
1679
|
CollapseButtonComponent,
|
|
1625
1680
|
ObjectEditorComponent,
|
|
@@ -1662,10 +1717,10 @@ class DagaConfigurationService {
|
|
|
1662
1717
|
getConfig() {
|
|
1663
1718
|
return this._config;
|
|
1664
1719
|
}
|
|
1665
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1666
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1720
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1721
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaConfigurationService }); }
|
|
1667
1722
|
}
|
|
1668
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1723
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaConfigurationService, decorators: [{
|
|
1669
1724
|
type: Injectable
|
|
1670
1725
|
}] });
|
|
1671
1726
|
|
|
@@ -1683,11 +1738,6 @@ class DiagramEditorComponent {
|
|
|
1683
1738
|
constructor(configurationService, canvasProvider) {
|
|
1684
1739
|
this.configurationService = configurationService;
|
|
1685
1740
|
this.canvasProvider = canvasProvider;
|
|
1686
|
-
/**
|
|
1687
|
-
* Output for user events on the diagram's model.
|
|
1688
|
-
* @public
|
|
1689
|
-
*/
|
|
1690
|
-
this.modelEvent = new EventEmitter();
|
|
1691
1741
|
this.Corner = Corner;
|
|
1692
1742
|
this.Side = Side;
|
|
1693
1743
|
}
|
|
@@ -1696,22 +1746,19 @@ class DiagramEditorComponent {
|
|
|
1696
1746
|
}
|
|
1697
1747
|
ngAfterViewInit() {
|
|
1698
1748
|
this.canvasProvider.initCanvasView(this.appendTo.nativeElement);
|
|
1699
|
-
this.canvas.diagramEvent$.subscribe((e) => {
|
|
1700
|
-
this.modelEvent.emit(e);
|
|
1701
|
-
});
|
|
1702
1749
|
}
|
|
1703
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1704
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1750
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramEditorComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1751
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramEditorComponent, isStandalone: true, selector: "daga-diagram-editor", viewQueries: [{ propertyName: "appendTo", first: true, predicate: ["appendTo"], descendants: true }, { propertyName: "diagramButtons", first: true, predicate: ["diagramButtons"], descendants: true }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "propertyEditor", first: true, predicate: ["propertyEditor"], descendants: true }], ngImport: i0, template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n *ngIf=\"\r\n config.components?.buttons !== undefined &&\r\n config.components?.buttons?.enabled !== false\r\n \"\r\n #diagramButtons\r\n [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n [enableAction]=\"config.components?.buttons?.enableAction === true\"\r\n [enableFilter]=\"config.components?.buttons?.enableFilter === true\"\r\n [enableLayout]=\"config.components?.buttons?.enableLayout === true\"\r\n [enableSelection]=\"config.components?.buttons?.enableSelection === true\"\r\n [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n/>\r\n<daga-palette\r\n *ngIf=\"\r\n config.components?.palette !== undefined &&\r\n config.components?.palette?.enabled !== false &&\r\n config.components?.palette?.sections &&\r\n (config.components?.palette?.sections?.length || 0) > 0\r\n \"\r\n #palette\r\n [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n [width]=\"config.components?.palette?.width || '12rem'\"\r\n [gap]=\"config.components?.palette?.gap || '1rem'\"\r\n [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n *ngIf=\"\r\n config.components?.propertyEditor !== undefined &&\r\n config.components?.propertyEditor?.enabled !== false\r\n \"\r\n #propertyEditor\r\n [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors\r\n *ngIf=\"\r\n config.components?.errors !== undefined &&\r\n config.components?.errors?.enabled !== false\r\n \"\r\n/>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DiagramButtonsComponent, selector: "daga-diagram-buttons", inputs: ["location", "direction", "enableAction", "enableFilter", "enableLayout", "enableSelection", "enableZoom"] }, { kind: "component", type: PaletteComponent, selector: "daga-palette", inputs: ["palettes", "currentPalette", "currentCategory", "location", "direction", "width", "gap"] }, { kind: "component", type: PropertyEditorComponent, selector: "daga-property-editor", inputs: ["location", "direction", "width", "valueSet"] }, { kind: "component", type: ErrorsComponent, selector: "daga-errors" }] }); }
|
|
1705
1752
|
}
|
|
1706
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramEditorComponent, decorators: [{
|
|
1707
1754
|
type: Component,
|
|
1708
|
-
args: [{
|
|
1755
|
+
args: [{ selector: 'daga-diagram-editor', imports: [
|
|
1709
1756
|
CommonModule,
|
|
1710
1757
|
DiagramButtonsComponent,
|
|
1711
1758
|
PaletteComponent,
|
|
1712
1759
|
PropertyEditorComponent,
|
|
1713
1760
|
ErrorsComponent
|
|
1714
|
-
], template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n *ngIf=\"\r\n config.components?.buttons !== undefined &&\r\n config.components?.buttons?.enabled !== false\r\n \"\r\n #diagramButtons\r\n [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n [enableAction]=\"config.components?.buttons?.enableAction === true\"\r\n [enableFilter]=\"config.components?.buttons?.enableFilter === true\"\r\n [enableLayout]=\"config.components?.buttons?.enableLayout === true\"\r\n [enableSelection]=\"config.components?.buttons?.enableSelection === true\"\r\n [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n/>\r\n<daga-palette\r\n *ngIf=\"\r\n config.components?.palette !== undefined &&\r\n config.components?.palette?.enabled !== false &&\r\n config.components?.palette?.sections &&\r\n (config.components?.palette?.sections?.length || 0) > 0\r\n \"\r\n #palette\r\n [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n [width]=\"config.components?.palette?.width || '12rem'\"\r\n [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n *ngIf=\"\r\n config.components?.propertyEditor !== undefined &&\r\n config.components?.propertyEditor?.enabled !== false\r\n \"\r\n #propertyEditor\r\n [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors\r\n *ngIf=\"\r\n config.components?.errors !== undefined &&\r\n config.components?.errors?.enabled !== false\r\n \"\r\n/>\r\n" }]
|
|
1761
|
+
], template: "<div class=\"daga-append-to\" #appendTo></div>\r\n<daga-diagram-buttons\r\n *ngIf=\"\r\n config.components?.buttons !== undefined &&\r\n config.components?.buttons?.enabled !== false\r\n \"\r\n #diagramButtons\r\n [location]=\"config.components?.buttons?.location || Corner.BottomRight\"\r\n [direction]=\"config.components?.buttons?.direction || Side.Top\"\r\n [enableAction]=\"config.components?.buttons?.enableAction === true\"\r\n [enableFilter]=\"config.components?.buttons?.enableFilter === true\"\r\n [enableLayout]=\"config.components?.buttons?.enableLayout === true\"\r\n [enableSelection]=\"config.components?.buttons?.enableSelection === true\"\r\n [enableZoom]=\"config.components?.buttons?.enableZoom !== false\"\r\n/>\r\n<daga-palette\r\n *ngIf=\"\r\n config.components?.palette !== undefined &&\r\n config.components?.palette?.enabled !== false &&\r\n config.components?.palette?.sections &&\r\n (config.components?.palette?.sections?.length || 0) > 0\r\n \"\r\n #palette\r\n [location]=\"config.components?.palette?.location || Corner.TopLeft\"\r\n [direction]=\"config.components?.palette?.direction || Side.Bottom\"\r\n [width]=\"config.components?.palette?.width || '12rem'\"\r\n [gap]=\"config.components?.palette?.gap || '1rem'\"\r\n [palettes]=\"config.components?.palette?.sections || []\"\r\n/>\r\n<daga-property-editor\r\n *ngIf=\"\r\n config.components?.propertyEditor !== undefined &&\r\n config.components?.propertyEditor?.enabled !== false\r\n \"\r\n #propertyEditor\r\n [location]=\"config.components?.propertyEditor?.location || Corner.TopRight\"\r\n [direction]=\"config.components?.propertyEditor?.direction || Side.Bottom\"\r\n [width]=\"config.components?.propertyEditor?.width || '24rem'\"\r\n/>\r\n<daga-errors\r\n *ngIf=\"\r\n config.components?.errors !== undefined &&\r\n config.components?.errors?.enabled !== false\r\n \"\r\n/>\r\n" }]
|
|
1715
1762
|
}], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { appendTo: [{
|
|
1716
1763
|
type: ViewChild,
|
|
1717
1764
|
args: ['appendTo']
|
|
@@ -1724,8 +1771,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
1724
1771
|
}], propertyEditor: [{
|
|
1725
1772
|
type: ViewChild,
|
|
1726
1773
|
args: ['propertyEditor']
|
|
1727
|
-
}], modelEvent: [{
|
|
1728
|
-
type: Output
|
|
1729
1774
|
}] } });
|
|
1730
1775
|
|
|
1731
1776
|
/**
|
|
@@ -1734,6 +1779,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
1734
1779
|
* @public
|
|
1735
1780
|
*/
|
|
1736
1781
|
class DiagramComponent {
|
|
1782
|
+
/**
|
|
1783
|
+
* Getter for the canvas of this diagram.
|
|
1784
|
+
* @public
|
|
1785
|
+
*/
|
|
1786
|
+
get canvas() {
|
|
1787
|
+
return this.canvasProvider.getCanvas();
|
|
1788
|
+
}
|
|
1737
1789
|
/**
|
|
1738
1790
|
* Serialized model for the diagram. Used for data binding to the model.
|
|
1739
1791
|
* @public
|
|
@@ -1748,9 +1800,9 @@ class DiagramComponent {
|
|
|
1748
1800
|
set model(model) {
|
|
1749
1801
|
if (this._model !== model) {
|
|
1750
1802
|
this._model = model;
|
|
1751
|
-
const canvas = this.
|
|
1803
|
+
const canvas = this.canvas;
|
|
1752
1804
|
if (canvas) {
|
|
1753
|
-
this.importer.import(
|
|
1805
|
+
this.importer.import(canvas.model, model);
|
|
1754
1806
|
}
|
|
1755
1807
|
}
|
|
1756
1808
|
}
|
|
@@ -1764,49 +1816,57 @@ class DiagramComponent {
|
|
|
1764
1816
|
* @public
|
|
1765
1817
|
*/
|
|
1766
1818
|
this.modelChange = new EventEmitter();
|
|
1819
|
+
/**
|
|
1820
|
+
* Output for user events on the diagram.
|
|
1821
|
+
* @public
|
|
1822
|
+
*/
|
|
1823
|
+
this.diagramEvent = new EventEmitter();
|
|
1767
1824
|
}
|
|
1768
1825
|
ngOnInit() {
|
|
1769
1826
|
this.configurationService.init(this.config);
|
|
1770
1827
|
}
|
|
1771
|
-
ngAfterContentInit() {
|
|
1772
|
-
this.canvasProvider
|
|
1773
|
-
.getCanvas()
|
|
1774
|
-
.viewInitialized$.pipe(delay(1))
|
|
1775
|
-
.subscribe(() => {
|
|
1776
|
-
if (this.model) {
|
|
1777
|
-
this.importer.import(this.canvasProvider.getCanvas().model, this.model);
|
|
1778
|
-
}
|
|
1779
|
-
});
|
|
1780
|
-
}
|
|
1781
1828
|
ngAfterViewInit() {
|
|
1782
|
-
this.
|
|
1783
|
-
|
|
1829
|
+
const canvas = this.canvas;
|
|
1830
|
+
if (this.model) {
|
|
1831
|
+
this.importer.import(canvas.model, this.model);
|
|
1832
|
+
}
|
|
1833
|
+
canvas.diagramEvent$.subscribe((e) => {
|
|
1834
|
+
this.diagramEvent.emit(e);
|
|
1835
|
+
});
|
|
1836
|
+
canvas.diagramChange$.subscribe(() => {
|
|
1837
|
+
const exportedModel = this.exporter.export(this.canvas.model);
|
|
1784
1838
|
this._model = exportedModel;
|
|
1785
1839
|
this.modelChange.emit(exportedModel);
|
|
1786
1840
|
});
|
|
1787
1841
|
}
|
|
1788
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1789
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1842
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramComponent, deps: [{ token: DagaConfigurationService }, { token: CanvasProviderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: DiagramComponent, isStandalone: true, selector: "daga-diagram", inputs: { config: "config", model: "model" }, outputs: { modelChange: "modelChange", diagramEvent: "diagramEvent" }, providers: [CanvasProviderService, DagaConfigurationService], viewQueries: [{ propertyName: "editor", first: true, predicate: DiagramEditorComponent, descendants: true }], ngImport: i0, template: `<daga-diagram-editor /><ng-content />`, isInline: true, dependencies: [{ kind: "component", type: DiagramEditorComponent, selector: "daga-diagram-editor" }] }); }
|
|
1790
1844
|
}
|
|
1791
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DiagramComponent, decorators: [{
|
|
1792
1846
|
type: Component,
|
|
1793
1847
|
args: [{
|
|
1794
1848
|
standalone: true,
|
|
1795
1849
|
selector: 'daga-diagram',
|
|
1796
|
-
template: `<ng-content />`,
|
|
1797
|
-
providers: [CanvasProviderService, DagaConfigurationService]
|
|
1850
|
+
template: `<daga-diagram-editor /><ng-content />`,
|
|
1851
|
+
providers: [CanvasProviderService, DagaConfigurationService],
|
|
1852
|
+
imports: [DiagramEditorComponent]
|
|
1798
1853
|
}]
|
|
1799
|
-
}], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: {
|
|
1854
|
+
}], ctorParameters: () => [{ type: DagaConfigurationService }, { type: CanvasProviderService }], propDecorators: { editor: [{
|
|
1855
|
+
type: ViewChild,
|
|
1856
|
+
args: [DiagramEditorComponent]
|
|
1857
|
+
}], config: [{
|
|
1800
1858
|
type: Input
|
|
1801
1859
|
}], model: [{
|
|
1802
1860
|
type: Input
|
|
1803
1861
|
}], modelChange: [{
|
|
1804
1862
|
type: Output
|
|
1863
|
+
}], diagramEvent: [{
|
|
1864
|
+
type: Output
|
|
1805
1865
|
}] } });
|
|
1806
1866
|
|
|
1807
1867
|
class DagaModule {
|
|
1808
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1809
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1868
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1869
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, imports: [CollapseButtonComponent,
|
|
1810
1870
|
DiagramButtonsComponent,
|
|
1811
1871
|
DiagramComponent,
|
|
1812
1872
|
DiagramEditorComponent,
|
|
@@ -1818,8 +1878,9 @@ class DagaModule {
|
|
|
1818
1878
|
PropertyEditorComponent,
|
|
1819
1879
|
CommonModule,
|
|
1820
1880
|
FormsModule], exports: [DiagramComponent, DiagramEditorComponent] }); }
|
|
1821
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1881
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, providers: [DagaConfigurationService, CanvasProviderService], imports: [CollapseButtonComponent,
|
|
1822
1882
|
DiagramButtonsComponent,
|
|
1883
|
+
DiagramComponent,
|
|
1823
1884
|
DiagramEditorComponent,
|
|
1824
1885
|
ErrorsComponent,
|
|
1825
1886
|
ObjectEditorComponent,
|
|
@@ -1830,7 +1891,7 @@ class DagaModule {
|
|
|
1830
1891
|
CommonModule,
|
|
1831
1892
|
FormsModule] }); }
|
|
1832
1893
|
}
|
|
1833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1894
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DagaModule, decorators: [{
|
|
1834
1895
|
type: NgModule,
|
|
1835
1896
|
args: [{
|
|
1836
1897
|
declarations: [],
|