@visuallyjs/browser-ui-angular 1.0.0

package/esm2022/lib/diagram-component.mjs

@@ -0,0 +1,53 @@
+import { Component, ElementRef, inject, Input, NgZone } from "@angular/core";
+import { createDiagram } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class DiagramComponent {
+    constructor() {
+        this.$ngZone = inject(NgZone);
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    ngAfterViewInit() {
+        this.$ngZone.runOutsideAngular(() => {
+            this.diagram = createDiagram(this.$el.nativeElement, this.options, this.modelOptions);
+            this.$vjs.$setDiagram(this.diagram);
+            if (this.data != null) {
+                this.diagram.load({ data: this.data });
+            }
+            else if (this.url != null) {
+                this.diagram.load({ url: this.url });
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.diagram.$destroy();
+        //this.$service.removeDiagram(this.diagramId, this.diagram)
+    }
+    
+    save(options) {
+        return this.diagram.save(options);
+    }
+    
+    saveToUrl(options) {
+        this.diagram.saveToUrl(options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiagramComponent, selector: "vjs-diagram", inputs: { options: "options", data: "data", url: "url", modelOptions: "modelOptions" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-diagram",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], modelOptions: [{
+                type: Input
+            }] } });

package/esm2022/lib/diagram-palette-component.mjs

@@ -0,0 +1,82 @@
+import { DiagramPalette } from "@visuallyjs/browser-ui";
+import { Component, ElementRef, inject, Input } from "@angular/core";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+export class DiagramPaletteComponent {
+    constructor() {
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    $init() {
+        
+        new DiagramPalette(this.$el.nativeElement, this.diagram, {
+            fill: this.fill,
+            outline: this.outline,
+            dragSize: this.dragSize,
+            inspector: this.inspector,
+            iconSize: this.iconSize,
+            showLabels: this.showLabels,
+            paletteStrokeWidth: this.paletteStrokeWidth,
+            showAllMessage: this.showAllMessage,
+            onCellAdded: this.onCellAdded,
+            mode: this.mode,
+            allowClickToAdd: this.allowClickToAdd,
+            autoExitDrawMode: this.autoExitDrawMode,
+            selectAfterAdd: this.selectAfterAdd,
+            onVertexAdded: this.onVertexAdded,
+            preparedShapes: this.preparedShapes
+        });
+    }
+    ngAfterViewInit() {
+        if (this.diagram != null) {
+            this.$init();
+        }
+        else {
+            this.$vjs.getDiagram((d) => {
+                this.diagram = d;
+                this.$init();
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DiagramPaletteComponent, selector: "vjs-diagram-palette", inputs: { fill: "fill", outline: "outline", dragSize: "dragSize", inspector: "inspector", iconSize: "iconSize", showLabels: "showLabels", paletteStrokeWidth: "paletteStrokeWidth", showAllMessage: "showAllMessage", onCellAdded: "onCellAdded", mode: "mode", allowClickToAdd: "allowClickToAdd", autoExitDrawMode: "autoExitDrawMode", selectAfterAdd: "selectAfterAdd", diagram: "diagram", onVertexAdded: "onVertexAdded", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DiagramPaletteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-diagram-palette",
+                    template: `<div></div>`,
+                }]
+        }], propDecorators: { fill: [{
+                type: Input
+            }], outline: [{
+                type: Input
+            }], dragSize: [{
+                type: Input
+            }], inspector: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], showLabels: [{
+                type: Input
+            }], paletteStrokeWidth: [{
+                type: Input
+            }], showAllMessage: [{
+                type: Input
+            }], onCellAdded: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], allowClickToAdd: [{
+                type: Input
+            }], autoExitDrawMode: [{
+                type: Input
+            }], selectAfterAdd: [{
+                type: Input
+            }], diagram: [{
+                type: Input
+            }], onVertexAdded: [{
+                type: Input
+            }], preparedShapes: [{
+                type: Input
+            }] } });

package/esm2022/lib/edge.type.picker.component.mjs

@@ -0,0 +1,46 @@
+import { Component, Input, Output, EventEmitter, inject } from "@angular/core";
+import { INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class EdgeTypePickerComponent {
+    constructor(el) {
+        this.el = el;
+        
+        this.changeEvent = new EventEmitter();
+        this.$vjs = inject(VisuallyJsService);
+    }
+    resolveMappings() {
+        const mappings = this.edgeMappings || this.inspector.getFromContext(INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS);
+        return mappings || this.inspector.$ui.$getEdgePropertyMappings();
+    }
+    ngAfterViewInit() {
+        this.$vjs.getInspector(inspector => {
+            this.inspector = inspector;
+            this.inspector.onChange(() => {
+                this.edgeTypePicker.select(this.propertyName, this.inspector.getValue(this.propertyName));
+            });
+            const current = this.inspector.getValue(this.propertyName) || '';
+            this.edgeTypePicker = new EdgeTypePicker(this.inspector.$ui, this.el.nativeElement, this.resolveMappings(), current, (p, v) => {
+                this.inspector.setValue(this.propertyName, v);
+                this.changeEvent.emit(v);
+            });
+            this.edgeTypePicker.render(this.propertyName, this.inspector._currentCommonData);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTypePickerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EdgeTypePickerComponent, selector: "vjs-edge-type", inputs: { propertyName: "propertyName", edgeMappings: "edgeMappings" }, outputs: { changeEvent: "changeEvent" }, ngImport: i0, template: `<div [attr.vjs-att]="propertyName"></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EdgeTypePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-edge-type",
+                    template: `<div [attr.vjs-att]="propertyName"></div>`
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { propertyName: [{
+                type: Input
+            }], edgeMappings: [{
+                type: Input
+            }], changeEvent: [{
+                type: Output
+            }] } });

package/esm2022/lib/export-controls-component.mjs

@@ -0,0 +1,75 @@
+import { Component, ElementRef, inject, Input, } from "@angular/core";
+import { CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, ImageExportUI, SvgExportUI, } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+
+export class ExportControlsComponent {
+    constructor() {
+        
+        this.showLabel = true;
+        
+        this.label = "Export:";
+        
+        this.allowSvgExport = true;
+        
+        this.allowPngExport = true;
+        
+        this.allowJpgExport = true;
+        // new
+        this.$vjs = inject(VisuallyJsService);
+        this.$el = inject(ElementRef);
+    }
+    ngOnInit() {
+        this.$vjs.getUI((b) => {
+            this.ui = b;
+        });
+    }
+    exportSVG() {
+        new SvgExportUI(this.ui).export(this.svgOptions);
+    }
+    exportPNG() {
+        new ImageExportUI(this.ui).export(this.imageOptions);
+    }
+    exportJPG() {
+        new ImageExportUI(this.ui).export(Object.assign(this.imageOptions || {}, {
+            type: "image/jpeg",
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ExportControlsComponent, selector: "vjs-export-controls", inputs: { showLabel: "showLabel", label: "label", margins: "margins", svgOptions: "svgOptions", imageOptions: "imageOptions", allowSvgExport: "allowSvgExport", allowPngExport: "allowPngExport", allowJpgExport: "allowJpgExport" }, ngImport: i0, template: "<div class=\"vjs-controls vjs-export-controls\">\n    <span *ngIf=\"showLabel\">{{ label }}</span>\n    <i *ngIf=\"allowSvgExport\"\n      ><a href=\"#\" id=\"exportSvg\" (click)=\"exportSVG()\">SVG</a></i\n    >\n    <i *ngIf=\"allowPngExport\"\n      ><a href=\"#\" id=\"exportPng\" (click)=\"exportPNG()\">PNG</a></i\n    >\n    <i *ngIf=\"allowJpgExport\"\n      ><a href=\"#\" id=\"exportJpg\" (click)=\"exportJPG()\">JPG</a></i\n    >\n  </div>", isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ExportControlsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-export-controls",
+                    template: `<div class="${CLASS_CONTROLS} ${CLASS_EXPORT_CONTROLS}">
+    <span *ngIf="showLabel">{{ label }}</span>
+    <i *ngIf="allowSvgExport"
+      ><a href="#" id="exportSvg" (click)="exportSVG()">SVG</a></i
+    >
+    <i *ngIf="allowPngExport"
+      ><a href="#" id="exportPng" (click)="exportPNG()">PNG</a></i
+    >
+    <i *ngIf="allowJpgExport"
+      ><a href="#" id="exportJpg" (click)="exportJPG()">JPG</a></i
+    >
+  </div>`,
+                }]
+        }], propDecorators: { showLabel: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], margins: [{
+                type: Input
+            }], svgOptions: [{
+                type: Input
+            }], imageOptions: [{
+                type: Input
+            }], allowSvgExport: [{
+                type: Input
+            }], allowPngExport: [{
+                type: Input
+            }], allowJpgExport: [{
+                type: Input
+            }] } });

package/esm2022/lib/inspector.component.mjs

@@ -0,0 +1,77 @@
+import { ChangeDetectorRef, ElementRef, Input, inject, Directive, } from "@angular/core";
+import { Inspector, Edge, Node, Group, Port } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class InspectorComponent {
+    constructor() {
+        
+        this.currentType = "";
+        
+        this.currentObjectType = "";
+        
+        this.EDGE = Edge.objectType;
+        
+        this.NODE = Node.objectType;
+        
+        this.GROUP = Group.objectType;
+        
+        this.PORT = Port.objectType;
+        
+        this.context = {};
+        
+        this.changeDetector = inject(ChangeDetectorRef);
+        
+        this.el = inject(ElementRef);
+        // new
+        this.$vjs = inject(VisuallyJsService);
+    }
+    
+    ngAfterViewInit() {
+        this.$vjs.getUI((ui) => {
+            this.ui = ui;
+            this.inspector = new Inspector({
+                context: this.context,
+                container: this.el.nativeElement,
+                cssClass: this.cssClass,
+                showCloseButton: this.showCloseButton,
+                ui,
+                renderEmptyContainer: () => {
+                    this.reset();
+                    this.changeDetector.detectChanges();
+                },
+                refresh: (obj, cb) => {
+                    this.currentObj = obj;
+                    this.refresh(obj);
+                    setTimeout(cb, 0);
+                    this.changeDetector.detectChanges();
+                },
+                afterUpdate: () => this.afterUpdate(ui),
+            });
+            this.$vjs.$setInspector(this.inspector);
+        });
+    }
+    
+    refresh(obj) {
+        this.currentType = obj.data.type;
+        this.currentObjectType = obj.objectType;
+    }
+    
+    reset() {
+        this.currentType = "";
+        this.currentObjectType = '';
+    }
+    
+    afterUpdate(ui) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: InspectorComponent, inputs: { cssClass: "cssClass", showCloseButton: "showCloseButton", context: "context" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InspectorComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { cssClass: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], context: [{
+                type: Input
+            }] } });

package/esm2022/lib/miniview-component.mjs

@@ -0,0 +1,63 @@
+import { Component, ElementRef, inject, Input } from "@angular/core";
+import { MiniviewPlugin } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class MiniviewComponent {
+    constructor(ngZone) {
+        this.ngZone = ngZone;
+        
+        this.activeTracking = true;
+        
+        this.clickToCenter = true;
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            // this.$service.addMiniview(this.surfaceId, {
+            //   container: this.el.nativeElement.childNodes[0],
+            //   elementFilter: this.elementFilter,
+            //   typeFunction: this.typeFunction,
+            //   activeTracking: this.activeTracking,
+            //   clickToCenter: this.clickToCenter !== false
+            // })
+            this.$vjs.getUI((b) => {
+                this.$miniview = b.addPlugin({
+                    type: MiniviewPlugin.type,
+                    options: {
+                        container: this.$el.nativeElement.childNodes[0],
+                        elementFilter: this.elementFilter,
+                        typeFunction: this.typeFunction,
+                        activeTracking: this.activeTracking,
+                        clickToCenter: this.clickToCenter !== false
+                    },
+                });
+            });
+        });
+    }
+    
+    redraw() {
+        if (this.$miniview != null) {
+            this.$miniview.invalidate();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MiniviewComponent, selector: "vjs-miniview", inputs: { elementFilter: "elementFilter", typeFunction: "typeFunction", activeTracking: "activeTracking", clickToCenter: "clickToCenter" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MiniviewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vjs-miniview',
+                    template: `<div></div>`
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { elementFilter: [{
+                type: Input
+            }], typeFunction: [{
+                type: Input
+            }], activeTracking: [{
+                type: Input
+            }], clickToCenter: [{
+                type: Input
+            }] } });

package/esm2022/lib/model.mjs

@@ -0,0 +1,8 @@
+import { BrowserUIModel, log } from "@visuallyjs/browser-ui";
+
+export class BrowserUIAngularModel extends BrowserUIModel {
+    render(container, options) {
+        log("render called directly on BrowserUIAngularModel class: should not happen. UI should use internal render.");
+        return null;
+    }
+}

package/esm2022/lib/overlay-component.mjs

@@ -0,0 +1,18 @@
+import { ChangeDetectorRef, inject } from "@angular/core";
+
+export const AngularComponentOverlayType = "AngularComponent";
+
+export class BaseAngularOverlayComponent {
+    constructor() {
+        
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+    }
+    
+    updateEdge(updates) {
+        this.model.updateEdge(this.edge, updates);
+    }
+    
+    removeEdge() {
+        this.model.removeEdge(this.edge);
+    }
+}

package/esm2022/lib/palette.component.mjs

@@ -0,0 +1,86 @@
+import { Directive, ElementRef, inject, Input } from "@angular/core";
+import { Palette, } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class PaletteComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this.$el = inject(ElementRef);
+    }
+    
+    ngAfterViewInit() {
+        this.$vjs.getSurface((surface) => {
+            let self = this;
+            let params = {
+                source: self.$el.nativeElement,
+                selector: self.selector,
+                allowDropOnEdge: this.allowDropOnEdge,
+                allowDropOnCanvas: this.allowDropOnCanvas,
+                allowDropOnGroup: this.allowDropOnGroup,
+                allowDropOnNode: this.allowDropOnNode,
+                mode: this.mode,
+                selectAfterAdd: this.selectAfterAdd,
+                allowClickToAdd: this.allowClickToAdd,
+                clickToAddOnly: this.clickToAddOnly
+            };
+            if (this.dataGenerator != null) {
+                params.dataGenerator = this.dataGenerator;
+            }
+            if (this.typeGenerator != null) {
+                params.typeGenerator = this.typeGenerator;
+            }
+            if (this.groupIdentifier != null) {
+                params.groupIdentifier = this.groupIdentifier;
+            }
+            if (this.onVertexAdded != null) {
+                params.onVertexAdded = this.onVertexAdded;
+            }
+            if (this.dragSize != null) {
+                params.dragSize = this.dragSize;
+            }
+            if (this.canvasDropFilter != null) {
+                params.canvasDropFilter = this.canvasDropFilter;
+            }
+            this.palette = new Palette(surface, params);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: PaletteComponent, selector: "[vjs-palette]", inputs: { selector: "selector", dataGenerator: "dataGenerator", typeGenerator: "typeGenerator", groupIdentifier: "groupIdentifier", allowDropOnEdge: "allowDropOnEdge", allowDropOnGroup: "allowDropOnGroup", allowDropOnCanvas: "allowDropOnCanvas", allowDropOnNode: "allowDropOnNode", onVertexAdded: "onVertexAdded", dragSize: "dragSize", canvasDropFilter: "canvasDropFilter", mode: "mode", selectAfterAdd: "selectAfterAdd", allowClickToAdd: "allowClickToAdd", clickToAddOnly: "clickToAddOnly" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PaletteComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[vjs-palette]",
+                }]
+        }], propDecorators: { selector: [{
+                type: Input
+            }], dataGenerator: [{
+                type: Input
+            }], typeGenerator: [{
+                type: Input
+            }], groupIdentifier: [{
+                type: Input
+            }], allowDropOnEdge: [{
+                type: Input
+            }], allowDropOnGroup: [{
+                type: Input
+            }], allowDropOnCanvas: [{
+                type: Input
+            }], allowDropOnNode: [{
+                type: Input
+            }], onVertexAdded: [{
+                type: Input
+            }], dragSize: [{
+                type: Input
+            }], canvasDropFilter: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], selectAfterAdd: [{
+                type: Input
+            }], allowClickToAdd: [{
+                type: Input
+            }], clickToAddOnly: [{
+                type: Input
+            }] } });

package/esm2022/lib/shape.component.mjs

@@ -0,0 +1,85 @@
+import { Component, ElementRef, inject, Input, } from "@angular/core";
+import { DEFAULT_LABEL_FILL_RATIO, convertToMultilineText } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class ShapeComponent {
+    constructor() {
+        
+        this.showLabels = false;
+        
+        this.labelProperty = "label";
+        
+        this.multilineLabels = true;
+        
+        this.labelFillRatio = DEFAULT_LABEL_FILL_RATIO;
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    _render() {
+        if (this.shapeLibrary != null) {
+            const svg = this.$el.nativeElement.childNodes[0];
+            const el = this.shapeLibrary.renderCompiledShape(this.obj, this.obj.outlineWidth || 2);
+            svg.replaceChildren(el);
+            if (this.showLabels) {
+                const lbl = this.shapeLibrary.renderShapeLabel(this.obj, this.labelProperty, this.labelStrokeWidth, this.label, this.obj.color || "#000000", this.obj.color || "#000000", this.font);
+                svg.appendChild(lbl);
+                if (this.multilineLabels !== false) {
+                    convertToMultilineText(lbl, this.label || this.obj[this.labelProperty] || "", this.width * this.labelFillRatio);
+                }
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.$vjs.getUI((b) => {
+            this.shapeLibrary = b.getShapeLibrary();
+            this._render();
+        });
+    }
+    ngOnChanges(changes) {
+        this._render();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
+    [attr.stroke-width]="obj.outlineWidth || 2"
+    attr.fill="{{ obj.fill }}"
+    attr.stroke="{{ obj.outline }}"
+    style="width:100%;height:100%;inset:0;position:absolute;"
+    preserveAspectRatio="none"
+    attr.viewBox="0 0 {{ width }} {{ height }}"
+  ></svg:svg>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<svg:svg
+    [attr.stroke-width]="obj.outlineWidth || 2"
+    attr.fill="{{ obj.fill }}"
+    attr.stroke="{{ obj.outline }}"
+    style="width:100%;height:100%;inset:0;position:absolute;"
+    preserveAspectRatio="none"
+    attr.viewBox="0 0 {{ width }} {{ height }}"
+  ></svg:svg>`,
+                    selector: `vjs-shape`,
+                }]
+        }], propDecorators: { obj: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], showLabels: [{
+                type: Input
+            }], labelProperty: [{
+                type: Input
+            }], labelStrokeWidth: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], multilineLabels: [{
+                type: Input
+            }], labelFillRatio: [{
+                type: Input
+            }], font: [{
+                type: Input
+            }] } });