@visuallyjs/browser-ui-angular 1.2.7 → 1.2.8

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.
Files changed (6) hide show
  1. package/esm2022/lib/shape-properties-inspector.component.mjs +50 -9
  2. package/fesm2022/visuallyjs-browser-ui-angular.mjs +48 -8
  3. package/fesm2022/visuallyjs-browser-ui-angular.mjs.map +1 -1
  4. package/lib/shape-properties-inspector.component.d.ts +4 -0
  5. package/package.json +2 -2
  6. package/visuallyjs-browser-ui-angular.tgz +0 -0
package/esm2022/lib/shape-properties-inspector.component.mjs CHANGED
@@ -1,7 +1,8 @@
1
- import { Component, Input, inject } from "@angular/core";
2
- import { isNode, isString } from "@visuallyjs/browser-ui";
1
+ import { Component, Input, inject, effect, signal } from "@angular/core";
2
+ import { EVENT_CHANGE, isNode, isString } from "@visuallyjs/browser-ui";
3
3
  import { VisuallyJsService } from "./vjs-service";
4
4
  import * as i0 from "@angular/core";
5
+ import * as i1 from "./color.tag.component";
5
6
  const MAX_RADIOS = 7;
6
7
  const TRUE_FALSE = ["True", "False"];
7
8
 
@@ -11,6 +12,15 @@ export class ShapePropertiesInspectorComponent {
11
12
  this.vertex = null;
12
13
  this.$vjs = inject(VisuallyJsService);
13
14
  this._inspector = this.$vjs.inspector;
15
+ this._inspectorRevision = signal(0);
16
+ this._inspectorChangeListener = () => this._inspectorRevision.update(revision => revision + 1);
17
+ this._inspectorChangeEffect = effect(onCleanup => {
18
+ const inspector = this._inspector();
19
+ if (inspector) {
20
+ inspector.bind(EVENT_CHANGE, this._inspectorChangeListener);
21
+ onCleanup(() => inspector.unbind(EVENT_CHANGE, this._inspectorChangeListener));
22
+ }
23
+ });
14
24
  }
15
25
  get currentMaxRadios() {
16
26
  return this.maxRadios == null ? MAX_RADIOS : this.maxRadios;
@@ -40,6 +50,25 @@ export class ShapePropertiesInspectorComponent {
40
50
  getShapePropertyValueValue(v) {
41
51
  return isString(v) ? v : v.value;
42
52
  }
53
+ getPropertyDisplayValue(prop) {
54
+ // Reading this signal makes the rendered value refresh on inspector changes.
55
+ this._inspectorRevision();
56
+ const inspector = this._inspector();
57
+ let value = inspector?.getValue(prop.id);
58
+ if (value == null && this.vertex) {
59
+ value = prop.id.split(".").reduce((current, part) => current == null ? current : current[part], this.vertex.data);
60
+ }
61
+ if (value == null) {
62
+ value = prop.defaultValue;
63
+ }
64
+ if (value == null) {
65
+ return "";
66
+ }
67
+ if (typeof value === "object") {
68
+ return JSON.stringify(value) || "";
69
+ }
70
+ return String(value);
71
+ }
43
72
  isBoolean(prop) {
44
73
  return prop.type === 'boolean';
45
74
  }
@@ -55,11 +84,13 @@ export class ShapePropertiesInspectorComponent {
55
84
  @for (prop of shapeDef.properties; track prop.id) {
56
85
 
57
86
  <div class="vjs-inspector-field">
58
- @if (!isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
87
+ @if (prop.readOnly || !isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
59
88
  <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
60
89
  }
61
90
 
62
- @if (prop.type === 'string') {
91
+ @if (prop.readOnly) {
92
+ <output class="vjs-inspector-property-value">{{ getPropertyDisplayValue(prop) }}</output>
93
+ } @else if (prop.type === 'string') {
63
94
  @if (hasValues(prop)) {
64
95
  @if (useRadio(prop)) {
65
96
  <div class="vjs-radio-group">
@@ -79,13 +110,15 @@ export class ShapePropertiesInspectorComponent {
79
110
  } @else {
80
111
  <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
81
112
  }
113
+ } @else if (prop.type === 'text') {
114
+ <textarea rows="5" [attr.vjs-att]="prop.id" [placeholder]="prop.description"></textarea>
82
115
  } @else if (prop.type === 'number') {
83
116
  @if (hasValues(prop)) {
84
117
  @if (useRadio(prop)) {
85
118
  <div class="vjs-radio-group">
86
119
  @for (v of prop.values; track getShapePropertyValueLabel(v)) {
87
120
  <label>
88
- <input type="radio" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
121
+ <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
89
122
  </label>
90
123
  }
91
124
  </div>
@@ -99,6 +132,8 @@ export class ShapePropertiesInspectorComponent {
99
132
  } @else {
100
133
  <input type="number" [attr.vjs-att]="prop.id" [placeholder]="prop.description" [attr.min]="prop.min" [attr.max]="prop.max" />
101
134
  }
135
+ } @else if (prop.type === 'color') {
136
+ <vjs-color [propertyName]="prop.id"></vjs-color>
102
137
  } @else if (isBoolean(prop)) {
103
138
  @if (prop.editor === 'select') {
104
139
  <select [attr.vjs-att]="prop.id" vjs-datatype="boolean">
@@ -126,7 +161,7 @@ export class ShapePropertiesInspectorComponent {
126
161
  </div>
127
162
  }
128
163
  }
129
- `, isInline: true, styles: [":host{display:contents}\n"] }); }
164
+ `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: i1.ColorPickerComponent, selector: "vjs-color", inputs: ["propertyName", "maxColors"], outputs: ["changeEvent"] }] }); }
130
165
  }
131
166
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePropertiesInspectorComponent, decorators: [{
132
167
  type: Component,
@@ -135,11 +170,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
135
170
  @for (prop of shapeDef.properties; track prop.id) {
136
171
 
137
172
  <div class="vjs-inspector-field">
138
- @if (!isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
173
+ @if (prop.readOnly || !isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
139
174
  <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
140
175
  }
141
176
 
142
- @if (prop.type === 'string') {
177
+ @if (prop.readOnly) {
178
+ <output class="vjs-inspector-property-value">{{ getPropertyDisplayValue(prop) }}</output>
179
+ } @else if (prop.type === 'string') {
143
180
  @if (hasValues(prop)) {
144
181
  @if (useRadio(prop)) {
145
182
  <div class="vjs-radio-group">
@@ -159,13 +196,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
159
196
  } @else {
160
197
  <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
161
198
  }
199
+ } @else if (prop.type === 'text') {
200
+ <textarea rows="5" [attr.vjs-att]="prop.id" [placeholder]="prop.description"></textarea>
162
201
  } @else if (prop.type === 'number') {
163
202
  @if (hasValues(prop)) {
164
203
  @if (useRadio(prop)) {
165
204
  <div class="vjs-radio-group">
166
205
  @for (v of prop.values; track getShapePropertyValueLabel(v)) {
167
206
  <label>
168
- <input type="radio" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
207
+ <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
169
208
  </label>
170
209
  }
171
210
  </div>
@@ -179,6 +218,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
179
218
  } @else {
180
219
  <input type="number" [attr.vjs-att]="prop.id" [placeholder]="prop.description" [attr.min]="prop.min" [attr.max]="prop.max" />
181
220
  }
221
+ } @else if (prop.type === 'color') {
222
+ <vjs-color [propertyName]="prop.id"></vjs-color>
182
223
  } @else if (isBoolean(prop)) {
183
224
  @if (prop.editor === 'select') {
184
225
  <select [attr.vjs-att]="prop.id" vjs-datatype="boolean">
package/fesm2022/visuallyjs-browser-ui-angular.mjs CHANGED
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
2
2
  import { signal, Injectable, inject, ElementRef, effect, Input, Component, ChangeDetectorRef, computed, Directive, input, EventEmitter, ViewContainerRef, NgZone, reflectComponentType, Output, untracked, TemplateRef, ViewChild, ContentChild, NgModule } from '@angular/core';
3
3
  import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
- import { log, Surface, Paper, MiniviewPlugin, EVENT_EDGE_UPDATED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED, EVENT_PORT_UPDATED, EVENT_ZOOM, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_PORT_ADDED, EVENT_DATA_LOAD_END, EVENT_EDGE_ADDED, EVENT_EDGE_REMOVED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, UNDO_VIEW_BOX, UNDO_PATH, REDO_VIEW_BOX, REDO_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, BackgroundPlugin, SimpleBackground, TiledBackground, GeneratedGridBackground, isNode, isString, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
5
+ import { log, Surface, Paper, MiniviewPlugin, EVENT_EDGE_UPDATED, EVENT_NODE_UPDATED, EVENT_GROUP_UPDATED, EVENT_PORT_UPDATED, EVENT_ZOOM, BrowserUIModel, OVERLAY_TYPE_CUSTOM, ELEMENT_DIV, isGroup, extend, renderSurface, EVENT_PORT_ADDED, EVENT_DATA_LOAD_END, EVENT_EDGE_ADDED, EVENT_EDGE_REMOVED, EVENT_INTERNAL_CONNECTION, ShapeLibraryDefaults, ShapePalette, convertToMultilineText, DEFAULT_LABEL_FILL_RATIO, LassoPlugin, EVENT_SURFACE_MODE_CHANGED, EVENT_UNDOREDO_UPDATE, TRUE, FALSE, EVENT_SELECT, EVENT_DESELECT, EVENT_SELECTION_CLEARED, SURFACE_MODE_PAN, SURFACE_MODE_SELECT, supportsPathEditing, PAN_VIEW_BOX, PAN_PATH, LASSO_VIEW_BOX, LASSO_PATH, ZOOM_TO_FIT_VIEW_BOX, ZOOM_TO_FIT_PATH, ZOOM_IN_OUT_VIEW_BOX, ZOOM_IN_PATH, ZOOM_OUT_PATH, UNDO_VIEW_BOX, UNDO_PATH, REDO_VIEW_BOX, REDO_PATH, CLASS_CONTROLS_RESET_SELECTION, RESET_SELECTION_VIEW_BOX, RESET_SELECTION_PATH, CLEAR_VIEW_BOX, CLEAR_PATH, INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS, EdgeTypePicker, Palette, SvgExportUI, ImageExportUI, CLASS_CONTROLS, CLASS_EXPORT_CONTROLS, INSPECTOR_CONTEXT_RECENT_COLORS, EVENT_CONTEXT_UPDATE, CLASS_COLOR_PICKER, CLASS_COLOR_PICKER_SWATCHES, CLASS_COLOR_PICKER_SWATCH, createDiagram, ColumnChart, BarChart, DiagramPalette, CategoryValueChart, LineChart, AreaChart, PieChart, ScatterChart, BubbleChart, SankeyChart, PopupHandler, CLASS_SURFACE_POPUP, renderPaper, BackgroundPlugin, SimpleBackground, TiledBackground, GeneratedGridBackground, EVENT_CHANGE, isNode, isString, Edge, Node, Group, Port, Inspector, EVENT_DATA_UPDATED, EVENT_GRAPH_CLEARED } from '@visuallyjs/browser-ui';
6
6
 
7
7
 
8
8
  class VisuallyJsService {
@@ -2981,6 +2981,15 @@ class ShapePropertiesInspectorComponent {
2981
2981
  this.vertex = null;
2982
2982
  this.$vjs = inject(VisuallyJsService);
2983
2983
  this._inspector = this.$vjs.inspector;
2984
+ this._inspectorRevision = signal(0);
2985
+ this._inspectorChangeListener = () => this._inspectorRevision.update(revision => revision + 1);
2986
+ this._inspectorChangeEffect = effect(onCleanup => {
2987
+ const inspector = this._inspector();
2988
+ if (inspector) {
2989
+ inspector.bind(EVENT_CHANGE, this._inspectorChangeListener);
2990
+ onCleanup(() => inspector.unbind(EVENT_CHANGE, this._inspectorChangeListener));
2991
+ }
2992
+ });
2984
2993
  }
2985
2994
  get currentMaxRadios() {
2986
2995
  return this.maxRadios == null ? MAX_RADIOS : this.maxRadios;
@@ -3010,6 +3019,25 @@ class ShapePropertiesInspectorComponent {
3010
3019
  getShapePropertyValueValue(v) {
3011
3020
  return isString(v) ? v : v.value;
3012
3021
  }
3022
+ getPropertyDisplayValue(prop) {
3023
+ // Reading this signal makes the rendered value refresh on inspector changes.
3024
+ this._inspectorRevision();
3025
+ const inspector = this._inspector();
3026
+ let value = inspector?.getValue(prop.id);
3027
+ if (value == null && this.vertex) {
3028
+ value = prop.id.split(".").reduce((current, part) => current == null ? current : current[part], this.vertex.data);
3029
+ }
3030
+ if (value == null) {
3031
+ value = prop.defaultValue;
3032
+ }
3033
+ if (value == null) {
3034
+ return "";
3035
+ }
3036
+ if (typeof value === "object") {
3037
+ return JSON.stringify(value) || "";
3038
+ }
3039
+ return String(value);
3040
+ }
3013
3041
  isBoolean(prop) {
3014
3042
  return prop.type === 'boolean';
3015
3043
  }
@@ -3025,11 +3053,13 @@ class ShapePropertiesInspectorComponent {
3025
3053
  @for (prop of shapeDef.properties; track prop.id) {
3026
3054
 
3027
3055
  <div class="vjs-inspector-field">
3028
- @if (!isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
3056
+ @if (prop.readOnly || !isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
3029
3057
  <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
3030
3058
  }
3031
3059
 
3032
- @if (prop.type === 'string') {
3060
+ @if (prop.readOnly) {
3061
+ <output class="vjs-inspector-property-value">{{ getPropertyDisplayValue(prop) }}</output>
3062
+ } @else if (prop.type === 'string') {
3033
3063
  @if (hasValues(prop)) {
3034
3064
  @if (useRadio(prop)) {
3035
3065
  <div class="vjs-radio-group">
@@ -3049,13 +3079,15 @@ class ShapePropertiesInspectorComponent {
3049
3079
  } @else {
3050
3080
  <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
3051
3081
  }
3082
+ } @else if (prop.type === 'text') {
3083
+ <textarea rows="5" [attr.vjs-att]="prop.id" [placeholder]="prop.description"></textarea>
3052
3084
  } @else if (prop.type === 'number') {
3053
3085
  @if (hasValues(prop)) {
3054
3086
  @if (useRadio(prop)) {
3055
3087
  <div class="vjs-radio-group">
3056
3088
  @for (v of prop.values; track getShapePropertyValueLabel(v)) {
3057
3089
  <label>
3058
- <input type="radio" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
3090
+ <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
3059
3091
  </label>
3060
3092
  }
3061
3093
  </div>
@@ -3069,6 +3101,8 @@ class ShapePropertiesInspectorComponent {
3069
3101
  } @else {
3070
3102
  <input type="number" [attr.vjs-att]="prop.id" [placeholder]="prop.description" [attr.min]="prop.min" [attr.max]="prop.max" />
3071
3103
  }
3104
+ } @else if (prop.type === 'color') {
3105
+ <vjs-color [propertyName]="prop.id"></vjs-color>
3072
3106
  } @else if (isBoolean(prop)) {
3073
3107
  @if (prop.editor === 'select') {
3074
3108
  <select [attr.vjs-att]="prop.id" vjs-datatype="boolean">
@@ -3096,7 +3130,7 @@ class ShapePropertiesInspectorComponent {
3096
3130
  </div>
3097
3131
  }
3098
3132
  }
3099
- `, isInline: true, styles: [":host{display:contents}\n"] }); }
3133
+ `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: ColorPickerComponent, selector: "vjs-color", inputs: ["propertyName", "maxColors"], outputs: ["changeEvent"] }] }); }
3100
3134
  }
3101
3135
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ShapePropertiesInspectorComponent, decorators: [{
3102
3136
  type: Component,
@@ -3105,11 +3139,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3105
3139
  @for (prop of shapeDef.properties; track prop.id) {
3106
3140
 
3107
3141
  <div class="vjs-inspector-field">
3108
- @if (!isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
3142
+ @if (prop.readOnly || !isBoolean(prop) || prop.editor === 'select' || prop.editor === 'radio') {
3109
3143
  <label class="vjs-inspector-property-label">{{ prop.label || prop.id }}</label>
3110
3144
  }
3111
3145
 
3112
- @if (prop.type === 'string') {
3146
+ @if (prop.readOnly) {
3147
+ <output class="vjs-inspector-property-value">{{ getPropertyDisplayValue(prop) }}</output>
3148
+ } @else if (prop.type === 'string') {
3113
3149
  @if (hasValues(prop)) {
3114
3150
  @if (useRadio(prop)) {
3115
3151
  <div class="vjs-radio-group">
@@ -3129,13 +3165,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3129
3165
  } @else {
3130
3166
  <input type="text" [attr.vjs-att]="prop.id" [placeholder]="prop.description" />
3131
3167
  }
3168
+ } @else if (prop.type === 'text') {
3169
+ <textarea rows="5" [attr.vjs-att]="prop.id" [placeholder]="prop.description"></textarea>
3132
3170
  } @else if (prop.type === 'number') {
3133
3171
  @if (hasValues(prop)) {
3134
3172
  @if (useRadio(prop)) {
3135
3173
  <div class="vjs-radio-group">
3136
3174
  @for (v of prop.values; track getShapePropertyValueLabel(v)) {
3137
3175
  <label>
3138
- <input type="radio" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
3176
+ <input type="radio" [name]="prop.id" [attr.vjs-att]="prop.id" [value]="getShapePropertyValueValue(v)" /> {{ getShapePropertyValueLabel(v) }}
3139
3177
  </label>
3140
3178
  }
3141
3179
  </div>
@@ -3149,6 +3187,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3149
3187
  } @else {
3150
3188
  <input type="number" [attr.vjs-att]="prop.id" [placeholder]="prop.description" [attr.min]="prop.min" [attr.max]="prop.max" />
3151
3189
  }
3190
+ } @else if (prop.type === 'color') {
3191
+ <vjs-color [propertyName]="prop.id"></vjs-color>
3152
3192
  } @else if (isBoolean(prop)) {
3153
3193
  @if (prop.editor === 'select') {
3154
3194
  <select [attr.vjs-att]="prop.id" vjs-datatype="boolean">