@visuallyjs/browser-ui-angular 1.2.6 → 1.2.8

package/esm2022/lib/edge.property.mappings.inspector.component.mjs

@@ -0,0 +1,69 @@
+import { Component, Input, inject } from "@angular/core";
+import { INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+import * as i1 from "./edge.type.picker.component";
+
+export class EdgePropertyMappingsInspectorComponent {
+    constructor() {
+        this.$vjs = inject(VisuallyJsService);
+        this._inspector = this.$vjs.inspector;
+    }
+    get cls() {
+        return this.cssClass || "vjs-inspector-section";
+    }
+    resolveMappings() {
+        if (this.mappings) {
+            return this.mappings;
+        }
+        else {
+            const mappings = this._inspector().getFromContext(INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS);
+            return mappings || this._inspector().$ui.$getEdgePropertyMappings();
+        }
+    }
+    toList(pm) {
+        const p = pm.property;
+        return Array.isArray(p) ? p : [p];
+    }
+    getPropertyKey(pm) {
+        return this.toList(pm).join(" ");
+    }
+    getName(pm) {
+        return this.getPropertyName ? this.getPropertyName(pm) : pm.name || this.getPropertyKey(pm);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgePropertyMappingsInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: EdgePropertyMappingsInspectorComponent, selector: "vjs-edge-properties-inspector", inputs: { getPropertyName: "getPropertyName", showName: "showName", cssClass: "cssClass", mappings: "mappings" }, ngImport: i0, template: `
+        @for (pm of resolveMappings(); track getPropertyKey(pm)) {
+            <div [class]="cls">
+                @if (showName !== false) {
+                    <div>{{ getName(pm) }}</div>
+                }
+                <vjs-edge-type [propertyName]="getPropertyKey(pm)"></vjs-edge-type>
+            </div>
+        }
+    `, isInline: true, dependencies: [{ kind: "component", type: i1.EdgeTypePickerComponent, selector: "vjs-edge-type", inputs: ["propertyName", "edgeMappings"], outputs: ["changeEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EdgePropertyMappingsInspectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "vjs-edge-properties-inspector",
+                    template: `
+        @for (pm of resolveMappings(); track getPropertyKey(pm)) {
+            <div [class]="cls">
+                @if (showName !== false) {
+                    <div>{{ getName(pm) }}</div>
+                }
+                <vjs-edge-type [propertyName]="getPropertyKey(pm)"></vjs-edge-type>
+            </div>
+        }
+    `
+                }]
+        }], propDecorators: { getPropertyName: [{
+                type: Input
+            }], showName: [{
+                type: Input
+            }], cssClass: [{
+                type: Input
+            }], mappings: [{
+                type: Input
+            }] } });

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

@@ -21,6 +21,7 @@ export class EdgeTypePickerComponent {
                 if (inspector != null) {
                     this.initialised = true;
                     inspector.onChange(() => {
+                        this.edgeTypePicker.reset();
                         this.edgeTypePicker.select(this.propertyName, inspector.getValue(this.propertyName));
                     });
                     const current = inspector.getValue(this.propertyName) || '';

package/esm2022/lib/shape-properties-inspector.component.mjs

@@ -0,0 +1,255 @@
+import { Component, Input, inject, effect, signal } from "@angular/core";
+import { EVENT_CHANGE, isNode, isString } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+import * as i1 from "./color.tag.component";
+const MAX_RADIOS = 7;
+const TRUE_FALSE = ["True", "False"];
+
+export class ShapePropertiesInspectorComponent {
+    constructor() {
+        
+        this.vertex = null;
+        this.$vjs = inject(VisuallyJsService);
+        this._inspector = this.$vjs.inspector;
+        this._inspectorRevision = signal(0);
+        this._inspectorChangeListener = () => this._inspectorRevision.update(revision => revision + 1);
+        this._inspectorChangeEffect = effect(onCleanup => {
+            const inspector = this._inspector();
+            if (inspector) {
+                inspector.bind(EVENT_CHANGE, this._inspectorChangeListener);
+                onCleanup(() => inspector.unbind(EVENT_CHANGE, this._inspectorChangeListener));
+            }
+        });
+    }
+    get currentMaxRadios() {
+        return this.maxRadios == null ? MAX_RADIOS : this.maxRadios;
+    }
+    get shapeDef() {
+        if (this._inspector() == null || this.vertex == null || !isNode(this.vertex)) {
+            return null;
+        }
+        const { type, category } = this.vertex.data;
+        if (!type || !category) {
+            return null;
+        }
+        const shapeLibrary = this._inspector().$ui.getShapeLibrary();
+        const shapeSet = shapeLibrary.getShapeSet(category);
+        if (!shapeSet) {
+            return null;
+        }
+        return shapeSet.shapes.find(s => s.type === type);
+    }
+    getBooleanLabel(prop, value) {
+        const labels = prop.booleanLabels || TRUE_FALSE;
+        return labels[value ? 0 : 1];
+    }
+    getShapePropertyValueLabel(v) {
+        return isString(v) ? v : v.label;
+    }
+    getShapePropertyValueValue(v) {
+        return isString(v) ? v : v.value;
+    }
+    getPropertyDisplayValue(prop) {
+        // Reading this signal makes the rendered value refresh on inspector changes.
+        this._inspectorRevision();
+        const inspector = this._inspector();
+        let value = inspector?.getValue(prop.id);
+        if (value == null && this.vertex) {
+            value = prop.id.split(".").reduce((current, part) => current == null ? current : current[part], this.vertex.data);
+        }
+        if (value == null) {
+            value = prop.defaultValue;
+        }
+        if (value == null) {
+            return "";
+        }
+        if (typeof value === "object") {
+            return JSON.stringify(value) || "";
+        }
+        return String(value);
+    }
+    isBoolean(prop) {
+        return prop.type === 'boolean';
+    }
+    hasValues(prop) {
+        return prop.values && prop.values.length > 0;
+    }
+    useRadio(prop) {
+        return this.hasValues(prop) && prop.editor !== 'select' && prop.values.length <= this.currentMaxRadios;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePropertiesInspectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ShapePropertiesInspectorComponent, selector: "vjs-shape-properties-inspector", inputs: { vertex: "vertex", maxRadios: "maxRadios" }, ngImport: i0, template: `
+        @if (shapeDef && shapeDef.properties) {
+            @for (prop of shapeDef.properties; track prop.id) {
+
+                <div class="vjs-inspector-field">
+                    @if (prop.readOnly || !isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
+                        <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
+                    }
+
+                    @if (prop.readOnly) {
+                        <output class="vjs-inspector-property-value">{{ getPropertyDisplayValue(prop) }}</output>
+                    } @else if (prop.type === 'string') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
+                                        </label>
+                                    }
+                                </div>
+                            } @else {
+                                <select [attr.vjs-att]="prop.id">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <option [value]="getShapePropertyValueValue(v)">{{ getShapePropertyValueLabel(v) }}</option>
+                                    }
+                                </select>
+                            }
+                        } @else {
+                            <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
+                        }
+                    } @else if (prop.type === 'text') {
+                        <textarea rows="5" [attr.vjs-att]="prop.id" [placeholder]="prop.description"></textarea>
+                    } @else if (prop.type === 'number') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
+                                        </label>
+                                    }
+                                </div>
+                            } @else {
+                                <select [attr.vjs-att]="prop.id">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <option [value]="getShapePropertyValueValue(v)">{{ getShapePropertyValueLabel(v) }}</option>
+                                    }
+                                </select>
+                            }
+                        } @else {
+                            <input type="number" [attr.vjs-att]="prop.id" [placeholder]="prop.description" [attr.min]="prop.min" [attr.max]="prop.max" />
+                        }
+                    } @else if (prop.type === 'color') {
+                        <vjs-color [propertyName]="prop.id"></vjs-color>
+                    } @else if (isBoolean(prop)) {
+                        @if (prop.editor === 'select') {
+                            <select [attr.vjs-att]="prop.id" vjs-datatype="boolean">
+                                <option value=""></option>
+                                <option value="true">{{ getBooleanLabel(prop, true) }}</option>
+                                <option value="false">{{ getBooleanLabel(prop, false) }}</option>
+                            </select>
+                        } @else if (prop.editor === 'radio') {
+                            <div class="vjs-radio-group">
+                                <label><input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" vjs-datatype="boolean" value="true" /><span>{{ getBooleanLabel(prop, true) }}</span></label>
+                                <label><input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" vjs-datatype="boolean" value="false" /><span>{{ getBooleanLabel(prop, false) }}</span></label>
+                            </div>
+                        } @else {
+                            <label>
+                                <input type="checkbox" vjs-datatype="boolean" [attr.vjs-att]="prop.id" /> {{ prop.label || prop.id }}
+                            </label>
+                        }
+                    } @else {
+                        <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
+                    }
+
+                    @if (prop.description) {
+                        <div class="vjs-field-desc">{{ prop.description }}</div>
+                    }
+                </div>
+            }
+        }
+    `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: i1.ColorPickerComponent, selector: "vjs-color", inputs: ["propertyName", "maxColors"], outputs: ["changeEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePropertiesInspectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vjs-shape-properties-inspector', template: `
+        @if (shapeDef && shapeDef.properties) {
+            @for (prop of shapeDef.properties; track prop.id) {
+
+                <div class="vjs-inspector-field">
+                    @if (prop.readOnly || !isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
+                        <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
+                    }
+
+                    @if (prop.readOnly) {
+                        <output class="vjs-inspector-property-value">{{ getPropertyDisplayValue(prop) }}</output>
+                    } @else if (prop.type === 'string') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
+                                        </label>
+                                    }
+                                </div>
+                            } @else {
+                                <select [attr.vjs-att]="prop.id">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <option [value]="getShapePropertyValueValue(v)">{{ getShapePropertyValueLabel(v) }}</option>
+                                    }
+                                </select>
+                            }
+                        } @else {
+                            <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
+                        }
+                    } @else if (prop.type === 'text') {
+                        <textarea rows="5" [attr.vjs-att]="prop.id" [placeholder]="prop.description"></textarea>
+                    } @else if (prop.type === 'number') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
+                                        </label>
+                                    }
+                                </div>
+                            } @else {
+                                <select [attr.vjs-att]="prop.id">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <option [value]="getShapePropertyValueValue(v)">{{ getShapePropertyValueLabel(v) }}</option>
+                                    }
+                                </select>
+                            }
+                        } @else {
+                            <input type="number" [attr.vjs-att]="prop.id" [placeholder]="prop.description" [attr.min]="prop.min" [attr.max]="prop.max" />
+                        }
+                    } @else if (prop.type === 'color') {
+                        <vjs-color [propertyName]="prop.id"></vjs-color>
+                    } @else if (isBoolean(prop)) {
+                        @if (prop.editor === 'select') {
+                            <select [attr.vjs-att]="prop.id" vjs-datatype="boolean">
+                                <option value=""></option>
+                                <option value="true">{{ getBooleanLabel(prop, true) }}</option>
+                                <option value="false">{{ getBooleanLabel(prop, false) }}</option>
+                            </select>
+                        } @else if (prop.editor === 'radio') {
+                            <div class="vjs-radio-group">
+                                <label><input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" vjs-datatype="boolean" value="true" /><span>{{ getBooleanLabel(prop, true) }}</span></label>
+                                <label><input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" vjs-datatype="boolean" value="false" /><span>{{ getBooleanLabel(prop, false) }}</span></label>
+                            </div>
+                        } @else {
+                            <label>
+                                <input type="checkbox" vjs-datatype="boolean" [attr.vjs-att]="prop.id" /> {{ prop.label || prop.id }}
+                            </label>
+                        }
+                    } @else {
+                        <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
+                    }
+
+                    @if (prop.description) {
+                        <div class="vjs-field-desc">{{ prop.description }}</div>
+                    }
+                </div>
+            }
+        }
+    `, styles: [":host{display:contents}\n"] }]
+        }], propDecorators: { vertex: [{
+                type: Input
+            }], maxRadios: [{
+                type: Input
+            }] } });