@visuallyjs/browser-ui-svelte 1.2.7 → 1.2.9
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.
|
@@ -2,14 +2,16 @@
|
|
|
2
2
|
import {
|
|
3
3
|
isNode,
|
|
4
4
|
isString,
|
|
5
|
+
EVENT_CHANGE,
|
|
5
6
|
type ShapePropertyValueDefinition,
|
|
6
7
|
type Vertex,
|
|
7
8
|
type Inspector,
|
|
8
9
|
log
|
|
9
10
|
} from "@visuallyjs/browser-ui";
|
|
10
|
-
import {onMount} from "svelte";
|
|
11
|
+
import {onDestroy, onMount} from "svelte";
|
|
11
12
|
import type {ShapePropertiesInspectorProps} from "./definitions";
|
|
12
13
|
import {getInspectorContext} from "./inspector-store";
|
|
14
|
+
import ColorPickerComponent from "./ColorPickerComponent.svelte";
|
|
13
15
|
|
|
14
16
|
const MAX_RADIOS = 7;
|
|
15
17
|
const TRUE_FALSE = ["True", "False"]
|
|
@@ -21,6 +23,8 @@
|
|
|
21
23
|
|
|
22
24
|
let inspector: Inspector | null = $state(null)
|
|
23
25
|
let shapeDef = $state(null)
|
|
26
|
+
let inspectorRevision = $state(0)
|
|
27
|
+
let inspectorChangeListener: (() => void) | null = null
|
|
24
28
|
|
|
25
29
|
function getBooleanLabel(prop: any, value: boolean) {
|
|
26
30
|
const labels = prop.booleanLabels || TRUE_FALSE
|
|
@@ -35,6 +39,25 @@
|
|
|
35
39
|
return isString(v) ? v : (v as ShapePropertyValueDefinition).value
|
|
36
40
|
}
|
|
37
41
|
|
|
42
|
+
function getPropertyDisplayValue(prop: any): string {
|
|
43
|
+
// Reading this state makes the rendered value refresh on inspector changes.
|
|
44
|
+
inspectorRevision
|
|
45
|
+
let value: any = inspector?.getValue(prop.id)
|
|
46
|
+
if (value == null && vertex) {
|
|
47
|
+
value = prop.id.split(".").reduce((current: any, part: string) => current == null ? current : current[part], vertex.data)
|
|
48
|
+
}
|
|
49
|
+
if (value == null) {
|
|
50
|
+
value = prop.defaultValue
|
|
51
|
+
}
|
|
52
|
+
if (value == null) {
|
|
53
|
+
return ""
|
|
54
|
+
}
|
|
55
|
+
if (typeof value === "object") {
|
|
56
|
+
return JSON.stringify(value) || ""
|
|
57
|
+
}
|
|
58
|
+
return String(value)
|
|
59
|
+
}
|
|
60
|
+
|
|
38
61
|
function resolveShapeDef(insp: Inspector, v: Vertex) {
|
|
39
62
|
if (!insp || !v || !isNode(v)) return null
|
|
40
63
|
const {type, category} = v.data;
|
|
@@ -52,11 +75,22 @@
|
|
|
52
75
|
log(`WARN: ShapePropertiesInspector cannot find an inspector context; cannot mount.`)
|
|
53
76
|
} else {
|
|
54
77
|
ic.listen(i => {
|
|
78
|
+
if (inspector && inspectorChangeListener) {
|
|
79
|
+
inspector.unbind(EVENT_CHANGE, inspectorChangeListener)
|
|
80
|
+
}
|
|
55
81
|
inspector = i
|
|
82
|
+
inspectorChangeListener = () => inspectorRevision++
|
|
83
|
+
inspector.bind(EVENT_CHANGE, inspectorChangeListener)
|
|
56
84
|
})
|
|
57
85
|
}
|
|
58
86
|
})
|
|
59
87
|
|
|
88
|
+
onDestroy(() => {
|
|
89
|
+
if (inspector && inspectorChangeListener) {
|
|
90
|
+
inspector.unbind(EVENT_CHANGE, inspectorChangeListener)
|
|
91
|
+
}
|
|
92
|
+
})
|
|
93
|
+
|
|
60
94
|
$effect(() => {
|
|
61
95
|
if (inspector && vertex) {
|
|
62
96
|
shapeDef = resolveShapeDef(inspector, vertex)
|
|
@@ -74,11 +108,13 @@
|
|
|
74
108
|
{@const useRadio = hasValues && prop.editor !== 'select' && prop.values.length <= maxRadios}
|
|
75
109
|
|
|
76
110
|
<div class="vjs-inspector-field">
|
|
77
|
-
{#if !isBoolean || prop.editor === 'select' || prop.editor === 'radio'}
|
|
111
|
+
{#if prop.readOnly || !isBoolean || prop.editor === 'select' || prop.editor === 'radio'}
|
|
78
112
|
<label class="vjs-inspector-property-label">{prop.label || prop.id}</label>
|
|
79
113
|
{/if}
|
|
80
114
|
|
|
81
|
-
{#if prop.
|
|
115
|
+
{#if prop.readOnly}
|
|
116
|
+
<output class="vjs-inspector-property-value">{getPropertyDisplayValue(prop)}</output>
|
|
117
|
+
{:else if prop.type === 'string'}
|
|
82
118
|
{#if hasValues}
|
|
83
119
|
{#if useRadio}
|
|
84
120
|
<div class="vjs-radio-group">
|
|
@@ -98,6 +134,10 @@
|
|
|
98
134
|
{:else}
|
|
99
135
|
<input type="text" vjs-att={prop.id} placeholder={prop.description} />
|
|
100
136
|
{/if}
|
|
137
|
+
{:else if prop.type === 'text'}
|
|
138
|
+
<textarea rows="5" vjs-att={prop.id} placeholder={prop.description}></textarea>
|
|
139
|
+
{:else if prop.type === 'color'}
|
|
140
|
+
<ColorPickerComponent propertyName={prop.id} />
|
|
101
141
|
{:else}
|
|
102
142
|
{#if prop.type === 'number'}
|
|
103
143
|
{#if hasValues}
|
|
@@ -105,7 +145,7 @@
|
|
|
105
145
|
<div class="vjs-radio-group">
|
|
106
146
|
{#each prop.values as v (getShapePropertyValueLabel(v))}
|
|
107
147
|
<label>
|
|
108
|
-
<input type="radio" vjs-att={prop.id} value={getShapePropertyValueValue(v)} /> {getShapePropertyValueLabel(v)}
|
|
148
|
+
<input type="radio" name={prop.id} vjs-att={prop.id} value={getShapePropertyValueValue(v)} /> {getShapePropertyValueLabel(v)}
|
|
109
149
|
</label>
|
|
110
150
|
{/each}
|
|
111
151
|
</div>
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@visuallyjs/browser-ui-svelte","version":"1.2.
|
|
1
|
+
{"name":"@visuallyjs/browser-ui-svelte","version":"1.2.9","description":"VisuallyJS Svelte integration for Browser UI renderer","module":"index.js","main":"index.js","types":"index.d.ts","svelte":"index.js","files":["**/*.d.ts","**/*.js","SurfaceComponent.svelte","PaperComponent.svelte","DecoratorComponent.svelte","DefaultGroupComponent.svelte","DefaultNodeComponent.svelte","MiniviewComponent.svelte","ControlsComponent.svelte","SurfaceProvider.svelte","PaperProvider.svelte","PaletteComponent.svelte","InspectorComponent.svelte","EdgeTypePickerComponent.svelte","EdgePropertyMappingsInspector.svelte","ShapePaletteComponent.svelte","ExportControlsComponent.svelte","ShapeComponent.svelte","DiagramComponent.svelte","BarChartComponent.svelte","ColumnChartComponent.svelte","XYChartComponent.svelte","LineChartComponent.svelte","AreaChartComponent.svelte","PieChartComponent.svelte","WrapperComponent.svelte","OverlayWrapperComponent.svelte","DiagramProvider.svelte","DiagramPaletteComponent.svelte","ColorPickerComponent.svelte","ScatterChartComponent.svelte","BubbleChartComponent.svelte","GaugeChartComponent.svelte","SankeyChartComponent.svelte","SurfacePopup.svelte","GridBackgroundComponent.svelte","ImageBackgroundComponent.svelte","TiledImageBackgroundComponent.svelte","ShapePropertiesInspector.svelte"],"author":"VisuallyJs <hello@visuallyjs.com> (https://visuallyjs.com)","license":"Commercial","dependencies":{"@visuallyjs/browser-ui":"1.2.9"},"homepage":"https://visuallyjs.com/svelte","bugs":"https://github.com/visuallyjs/visuallyjs/issues"}
|