@visuallyjs/browser-ui-angular 1.0.0

package/esm2022/lib/shape.palette.component.mjs

@@ -0,0 +1,78 @@
+import { Component, ElementRef, inject, Input } from "@angular/core";
+import { ShapePalette, ShapeLibraryDefaults } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+
+export class ShapePaletteComponent {
+    constructor() {
+        
+        this.dragSize = { width: 150, height: 100 };
+        
+        this.iconSize = { width: 150, height: 100 };
+        
+        this.fill = ShapeLibraryDefaults.FILL;
+        
+        this.outline = ShapeLibraryDefaults.STROKE;
+        
+        this.showAllMessage = "Show all";
+        
+        this.selectAfterDrop = true;
+        
+        this.paletteStrokeWidth = 1;
+        
+        this.dataGenerator = undefined;
+        this.$el = inject(ElementRef);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    ngAfterViewInit() {
+        this.$vjs.getUI((ui) => {
+            
+            new ShapePalette(ui, {
+                container: this.$el.nativeElement,
+                initialSet: this.initialSet,
+                dragSize: this.dragSize,
+                iconSize: this.iconSize,
+                fill: this.fill,
+                outline: this.outline,
+                shapeLibrary: ui.getShapeLibrary(),
+                showAllMessage: this.showAllMessage,
+                selectAfterDrop: this.selectAfterDrop,
+                paletteStrokeWidth: this.paletteStrokeWidth,
+                dataGenerator: this.dataGenerator,
+                onVertexAdded: this.onVertexAdded,
+                preparedShapes: this.preparedShapes
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapePaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShapePaletteComponent, selector: "vjs-shape-palette", inputs: { initialSet: "initialSet", dragSize: "dragSize", iconSize: "iconSize", fill: "fill", outline: "outline", showAllMessage: "showAllMessage", selectAfterDrop: "selectAfterDrop", paletteStrokeWidth: "paletteStrokeWidth", onVertexAdded: "onVertexAdded", dataGenerator: "dataGenerator", preparedShapes: "preparedShapes" }, ngImport: i0, template: `<div></div>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShapePaletteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `<div></div>`,
+                    selector: `vjs-shape-palette`
+                }]
+        }], propDecorators: { initialSet: [{
+                type: Input
+            }], dragSize: [{
+                type: Input
+            }], iconSize: [{
+                type: Input
+            }], fill: [{
+                type: Input
+            }], outline: [{
+                type: Input
+            }], showAllMessage: [{
+                type: Input
+            }], selectAfterDrop: [{
+                type: Input
+            }], paletteStrokeWidth: [{
+                type: Input
+            }], onVertexAdded: [{
+                type: Input
+            }], dataGenerator: [{
+                type: Input
+            }], preparedShapes: [{
+                type: Input
+            }] } });

package/esm2022/lib/surface-component.mjs

@@ -0,0 +1,286 @@
+import { Component, ElementRef, EventEmitter, Input, NgZone, Output, ViewContainerRef, inject, reflectComponentType } from "@angular/core";
+import { EVENT_EDGE_UPDATED, EVENT_GROUP_UPDATED, EVENT_NODE_UPDATED, EVENT_PORT_ADDED, EVENT_PORT_UPDATED, extend, renderSurface, CustomOverlay, isGroup, EVENT_INTERNAL_CONNECTION, EVENT_DATA_LOAD_END, ELEMENT_DIV } from "@visuallyjs/browser-ui";
+import { AngularComponentOverlayType, } from "./overlay-component";
+import { DefaultGroupComponent } from "./default-group-component";
+import { DefaultNodeComponent } from "./default-node-component";
+import { BasePortComponent } from "./base.port.component";
+import { VisuallyJsService } from "./vjs-service";
+import { BrowserUIAngularModel } from "./model";
+import * as i0 from "@angular/core";
+
+export class SurfaceComponent {
+    constructor() {
+        
+        this.vertexEvent = new EventEmitter();
+        this.$el = inject(ElementRef);
+        this.$viewContainerRef = inject(ViewContainerRef);
+        this.$ngZone = inject(NgZone);
+        this.$vjs = inject(VisuallyJsService);
+    }
+    
+    getNativeElement(component) {
+        return component.location.nativeElement.childNodes[0];
+    }
+    _getComponent(el, tryParent) {
+        if (el == null) {
+            return null;
+        }
+        else {
+            let vjc = el._visuallyJsNgComponent;
+            if (vjc == null && tryParent && el.parentNode != null) {
+                vjc = el.parentNode._visuallyJsNgComponent;
+            }
+            return vjc;
+        }
+    }
+    _getComponentThen(el, then, tryParent) {
+        const c = this._getComponent(el, tryParent);
+        if (c != null) {
+            then(c);
+        }
+    }
+    
+    nodeOrGroupUpdated(params) {
+        const info = this.surface.getObjectInfo(params.vertex, false);
+        this._getComponentThen(info.el, (component) => {
+            component.data = params.vertex.data;
+            component.$data?.set(component.data);
+            if (component.changeDetectorRef) {
+                component.changeDetectorRef.detectChanges();
+            }
+        }, false);
+    }
+    portUpdated(params) {
+        const info = this.surface.getObjectInfo(params.port, false);
+        this._getComponentThen(info.el, (component) => {
+            if (component instanceof BasePortComponent) {
+                component.data = params.port.data;
+                if (component.changeDetectorRef) {
+                    component.changeDetectorRef.detectChanges();
+                }
+            }
+        }, true);
+    }
+    
+    edgeUpdated(params) {
+        const connection = this.surface.getRenderedConnection(params.edge.id);
+        if (connection) {
+            for (let id in connection.overlays) {
+                const canvas = connection.overlays[id].contentElement;
+                this._getComponentThen(canvas, (component) => {
+                    if (component.changeDetectorRef != null) {
+                        component.changeDetectorRef.detectChanges();
+                    }
+                }, false);
+            }
+        }
+    }
+    
+    _processAngularOverlays(view) {
+        const self = this;
+        const edgeTypes = view.edges || {};
+        for (let edgeTypeId in edgeTypes) {
+            const edgeType = edgeTypes[edgeTypeId];
+            if (edgeType.overlays != null) {
+                edgeType.overlays = edgeType.overlays.map((o) => {
+                    if (typeof o === "string") {
+                        return o;
+                    }
+                    else {
+                        const fo = o;
+                        if (fo.type === AngularComponentOverlayType) {
+                            const newSpec = Object.assign(fo, {
+                                type: CustomOverlay.type,
+                            });
+                            newSpec.options = (newSpec.options || {});
+                            newSpec.options.create = (connection) => {
+                                const el = document.createElement(ELEMENT_DIV);
+                                let createdComponent = self.$viewContainerRef.createComponent(newSpec.options.component);
+                                let angularOverlayComponent = createdComponent.instance;
+                                let nativeEl = createdComponent.location.nativeElement.childNodes[0];
+                                el.appendChild(nativeEl);
+                                el._visuallyJsNgComponent = angularOverlayComponent;
+                                
+                                if (connection != null) {
+                                    const edge = connection.edge;
+                                    angularOverlayComponent.edge = edge;
+                                    angularOverlayComponent.data = edge.data;
+                                }
+                                angularOverlayComponent.model = self.model;
+                                angularOverlayComponent.surface = self.surface;
+                                createdComponent.changeDetectorRef.detectChanges();
+                                return el;
+                            };
+                            return newSpec;
+                        }
+                        else {
+                            return fo;
+                        }
+                    }
+                });
+            }
+        }
+        return view;
+    }
+    
+    save(options) {
+        this.surface.save(options);
+    }
+    
+    exportData(options) {
+        return this.surface.model.exportData(options);
+    }
+    
+    dataLoadEnd() {
+        setTimeout(() => {
+            if (this.surface != null) {
+                this.surface.repaintEverything();
+            }
+        }, 0);
+    }
+    $removeNgElement(el) {
+        if (el._ref != null) {
+            el._ref.destroy();
+        }
+        if (el.parentNode != null) {
+            el.parentNode.removeChild(el);
+        }
+    }
+    
+    ngAfterViewInit() {
+        this.$ngZone.runOutsideAngular(() => {
+            const view = this._processAngularOverlays(this.viewOptions || {});
+            const self = this;
+            this.renderOptions = this.renderOptions || {};
+            const render = (directiveId, data, instance, objectType, surface, def, modelObject, eventInfo) => {
+                let component;
+                if (def.component == null) {
+                    if (isGroup(modelObject)) {
+                        component = DefaultGroupComponent;
+                    }
+                    else {
+                        component = DefaultNodeComponent;
+                    }
+                }
+                else {
+                    component = def.component;
+                }
+                let createdComponent = self.$viewContainerRef.createComponent(component);
+                let _componentRef = createdComponent.instance;
+                _componentRef.data = data || {};
+                _componentRef.model = model;
+                _componentRef.surface = surface;
+                _componentRef.modelObject = modelObject;
+                // get the reflection data for the component
+                const componentInfo = reflectComponentType(component);
+                // ..and populate any declared inputs from data
+                componentInfo.inputs.forEach((pt) => {
+                    const pv = _componentRef.data[pt.propName];
+                    if (pv != null) {
+                        _componentRef[pt.propName] = pv;
+                    }
+                });
+                // map to any outputs
+                componentInfo.outputs.forEach((pt) => {
+                    _componentRef[pt.propName].subscribe((d) => self.vertexEvent.emit({
+                        vertex: modelObject,
+                        event: pt.propName,
+                        payload: d,
+                        component: createdComponent,
+                    }));
+                });
+                // if angular def has 'inputs' set, set them on the component. this is different to the mechanism above, in which values are extracted from
+                // each node's backing data. here we inject values either as a string or from some arbitrary function.
+                if (def.inputs != null) {
+                    for (let k in def.inputs) {
+                        const v = def.inputs[k];
+                        const value = typeof v === "string" ? v : v(modelObject);
+                        _componentRef[k] = value;
+                    }
+                }
+                createdComponent.changeDetectorRef.detectChanges();
+                // TODO this should not be necessary
+                const nativeElement = self.getNativeElement(createdComponent);
+                _componentRef._el = nativeElement;
+                _componentRef._el._visuallyJsNgComponent = _componentRef;
+                _componentRef._el._ref = createdComponent; // we store _ref so we can call `destroy` on it later if the node is removed.
+                surface.$vertexRendered(modelObject, nativeElement, def, eventInfo);
+            };
+            const templateRenderer = {
+                asynchronous: false,
+                reactive: true,
+                usesWrapperElement: false,
+                update: (el, data, v, renderer) => { },
+                render,
+                rerender: (directiveId, data, instance, objectType, surface, def, modelObject, eventInfo, originalElement) => {
+                    this.$removeNgElement(originalElement);
+                    render(directiveId, data, instance, objectType, surface, def, modelObject, eventInfo);
+                },
+                cleanupVertex: (objId, el) => {
+                    this.$removeNgElement(el);
+                },
+                cleanupPort: (objId, el) => {
+                    this.$removeNgElement(el);
+                },
+            };
+            const renderParams = extend(this.renderOptions || {}, {
+                view: view,
+            });
+            let model = new BrowserUIAngularModel(this.modelOptions);
+            this.model = model;
+            this.surface = renderSurface(model, self.$el.nativeElement, templateRenderer, renderParams);
+            //this.$service.addSurface(this.surfaceId, this.surface);
+            // new
+            this.$vjs.$setSurface(this.surface);
+            // ----------------
+            this.nodeUpdateFn = this.nodeOrGroupUpdated.bind(this);
+            model.bind(EVENT_NODE_UPDATED, this.nodeUpdateFn);
+            model.bind(EVENT_PORT_ADDED, this.nodeUpdateFn);
+            model.bind(EVENT_GROUP_UPDATED, this.nodeUpdateFn);
+            this.dataLoadEndFn = this.dataLoadEnd.bind(this);
+            model.bind(EVENT_DATA_LOAD_END, this.dataLoadEndFn);
+            this.portUpdateFn = this.portUpdated.bind(this);
+            model.bind(EVENT_PORT_UPDATED, this.portUpdateFn);
+            this.edgeUpdateFn = this.edgeUpdated.bind(this);
+            model.bind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
+            if (this.data) {
+                this.model.load({ data: this.data });
+            }
+            else if (this.url) {
+                this.model.load({ url: this.url });
+            }
+        });
+    }
+    
+    ngOnDestroy() {
+        this.surface.destroy();
+        this.model.unbind(EVENT_NODE_UPDATED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_GROUP_UPDATED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_PORT_ADDED, this.nodeUpdateFn);
+        this.model.unbind(EVENT_PORT_UPDATED, this.portUpdateFn);
+        this.model.unbind(EVENT_EDGE_UPDATED, this.edgeUpdateFn);
+        this.model.unbind(EVENT_DATA_LOAD_END, this.dataLoadEndFn);
+        this.surface.unbind(EVENT_INTERNAL_CONNECTION, this.edgeAddFn);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurfaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SurfaceComponent, selector: "vjs-surface", inputs: { viewOptions: "viewOptions", renderOptions: "renderOptions", modelOptions: "modelOptions", data: "data", url: "url" }, outputs: { vertexEvent: "vertexEvent" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurfaceComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-surface",
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { viewOptions: [{
+                type: Input
+            }], renderOptions: [{
+                type: Input
+            }], modelOptions: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], url: [{
+                type: Input
+            }], vertexEvent: [{
+                type: Output
+            }] } });

package/esm2022/lib/vjs-service.mjs

@@ -0,0 +1,176 @@
+import { log, Paper, Surface } from "@visuallyjs/browser-ui";
+import { Injectable } from "@angular/core";
+import * as i0 from "@angular/core";
+
+export class VisuallyJsService {
+    constructor() {
+        this.inspectorListeners = [];
+        this.surfaceListeners = [];
+        this.paperListeners = [];
+        this.modelListeners = [];
+        this.diagramListeners = [];
+        this.uiListeners = [];
+    }
+    $setInspector(i) {
+        this.$inspector = i;
+        this.$notifyInspector();
+    }
+    $notifyInspector() {
+        this.inspectorListeners.forEach(sl => {
+            try {
+                sl(this.$inspector);
+            }
+            catch (e) {
+                log(`WARN: could not notify Inspector listener ${e}`);
+            }
+        });
+        this.inspectorListeners.length = 0;
+    }
+    $setSurface(s) {
+        // @ts-ignore
+        this.$setModel(s.model);
+        this.$surface = s;
+        this.$notifySurface();
+    }
+    $notifySurface() {
+        this.surfaceListeners.forEach(sl => {
+            try {
+                sl(this.$surface);
+            }
+            catch (e) {
+                log(`WARN: could not notify Surface listener ${e}`);
+            }
+        });
+        this.surfaceListeners.length = 0;
+        this.$notifyUI(this.$surface);
+    }
+    
+    getSurface(cb) {
+        if (this.$surface != null) {
+            cb(this.$surface);
+        }
+        else {
+            this.surfaceListeners.push(cb);
+        }
+    }
+    
+    getInspector(cb) {
+        if (this.$inspector != null) {
+            cb(this.$inspector);
+        }
+        else {
+            this.inspectorListeners.push(cb);
+        }
+    }
+    $setPaper(p) {
+        // @ts-ignore
+        this.$setModel(p.model);
+        this.$paper = p;
+        this.$notifyPaper();
+    }
+    $notifyPaper() {
+        this.paperListeners.forEach(sl => {
+            try {
+                sl(this.$paper);
+            }
+            catch (e) {
+                log(`WARN: could not notify Paper listener ${e}`);
+            }
+        });
+        this.paperListeners.length = 0;
+        this.$notifyUI(this.$paper);
+    }
+    
+    getPaper(cb) {
+        if (this.$paper != null) {
+            cb(this.$paper);
+        }
+        else {
+            this.paperListeners.push(cb);
+        }
+    }
+    $setDiagram(d) {
+        this.$diagram = d;
+        if (d.$ui instanceof Surface) {
+            this.$setSurface(d.$ui);
+        }
+        if (d.$ui instanceof Paper) {
+            this.$setPaper(d.$ui);
+        }
+        this.$notifyDiagram();
+    }
+    $notifyDiagram() {
+        this.diagramListeners.forEach(sl => {
+            try {
+                sl(this.$diagram);
+            }
+            catch (e) {
+                log(`WARN: could not notify Diagram listener ${e}`);
+            }
+        });
+        this.diagramListeners.length = 0;
+    }
+    
+    getDiagram(cb) {
+        if (this.$diagram != null) {
+            cb(this.$diagram);
+        }
+        else {
+            this.diagramListeners.push(cb);
+        }
+    }
+    
+    getModel(cb) {
+        if (this.$model != null) {
+            cb(this.$model);
+        }
+        else {
+            this.modelListeners.push(cb);
+        }
+    }
+    
+    $setModel(m) {
+        this.$model = m;
+        this.$notifyModel();
+    }
+    $notifyModel() {
+        this.modelListeners.forEach(sl => {
+            try {
+                sl(this.$model);
+            }
+            catch (e) {
+                log(`WARN: could not notify Model listener ${e}`);
+            }
+        });
+        this.modelListeners.length = 0;
+    }
+    $notifyUI(ui) {
+        this.uiListeners.forEach(sl => {
+            try {
+                sl(ui);
+            }
+            catch (e) {
+                log(`WARN: could not notify UI listener ${e}`);
+            }
+        });
+        this.uiListeners.length = 0;
+    }
+    
+    getUI(cb) {
+        const ui = this.$surface || this.$paper;
+        if (ui != null) {
+            cb(ui);
+        }
+        else {
+            this.uiListeners.push(cb);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VisuallyJsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });

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

@@ -0,0 +1,2 @@
+
+export * from './index';