@visuallyjs/browser-ui-angular 1.2.5 → 1.2.7

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,214 @@
+import { Component, Input, inject } from "@angular/core";
+import { isNode, isString } from "@visuallyjs/browser-ui";
+import { VisuallyJsService } from "./vjs-service";
+import * as i0 from "@angular/core";
+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;
+    }
+    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;
+    }
+    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 (!isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
+                        <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
+                    }
+
+                    @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 === 'number') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [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 (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"] }); }
+}
+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 (!isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
+                        <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
+                    }
+
+                    @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 === 'number') {
+                        @if (hasValues(prop)) {
+                            @if (useRadio(prop)) {
+                                <div class="vjs-radio-group">
+                                    @for (v of prop.values; track getShapePropertyValueLabel(v)) {
+                                        <label>
+                                            <input type="radio" [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 (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
+            }] } });

package/esm2022/lib/shape.component.mjs

@@ -13,7 +13,7 @@ export class ShapeComponent {
                 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);
+                    convertToMultilineText(lbl, this.label || this.obj[this.labelProperty] || "", this.width * this.labelFillRatio, this.labelPosition);
                 }
             }
         }
@@ -27,6 +27,8 @@ export class ShapeComponent {
         this.multilineLabels = true;
         
         this.labelFillRatio = DEFAULT_LABEL_FILL_RATIO;
+        
+        this.labelPosition = "center";
         this.$el = inject(ElementRef);
         this.$vjs = inject(VisuallyJsService);
         this.ui = this.$vjs.ui;
@@ -42,7 +44,7 @@ export class ShapeComponent {
         this._render();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ShapeComponent, selector: "vjs-shape", inputs: { obj: "obj", width: "width", height: "height", showLabels: "showLabels", labelProperty: "labelProperty", labelStrokeWidth: "labelStrokeWidth", label: "label", multilineLabels: "multilineLabels", labelFillRatio: "labelFillRatio", labelPosition: "labelPosition", font: "font" }, usesOnChanges: true, ngImport: i0, template: `<svg:svg
     [attr.stroke-width]="obj.outlineWidth || 2"
     attr.fill="{{ obj.fill }}"
     attr.stroke="{{ obj.outline }}"
@@ -82,6 +84,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], labelFillRatio: [{
                 type: Input
+            }], labelPosition: [{
+                type: Input
             }], font: [{
                 type: Input
             }] } });