@node-projects/web-component-designer-visualization-addons 0.1.46 → 0.1.49
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.
- package/dist/components/BindingsEditor.js +1 -1
- package/dist/components/EventAssignment.js +13 -10
- package/dist/components/SimpleScriptEditor.js +1 -1
- package/dist/helpers/BindingsHelper.d.ts +1 -0
- package/dist/helpers/BindingsHelper.js +10 -1
- package/dist/interfaces/IScriptMultiplexValue.d.ts +3 -2
- package/dist/interfaces/IScriptMultiplexValue.js +2 -1
- package/package.json +31 -31
- package/dist/blockly/components/fields/FieldObjectId.d.ts +0 -1
- package/dist/blockly/components/fields/FieldObjectId.js +0 -6
- package/dist/components/PropertyGridExt.d.ts +0 -0
- package/dist/components/PropertyGridExt.js +0 -1
- package/dist/components/ScriptEditor.d.ts +0 -28
- package/dist/components/ScriptEditor.js +0 -254
- package/dist/interfaces/VisualizationUiHandler.d.ts +0 -5
- package/dist/interfaces/VisualizationUiHandler.js +0 -2
- package/dist/services/BindingsService.d.ts +0 -11
- package/dist/services/BindingsService.js +0 -46
|
@@ -46,7 +46,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
|
|
|
46
46
|
<span style="cursor: pointer;" title="javascript expression. access property with 'value'">formula write back (two way)</span>
|
|
47
47
|
</div>
|
|
48
48
|
<div class="row">
|
|
49
|
-
<node-projects-code-view-monaco id="expression2way" read-only="[[!this.twoWay]]" $readonly="[[!this.twoWay]]" single-row language="javascript" style="width: 100%; min-height: 17px; height: 17px; position: relative; overflow: hidden; resize: vertical;" .code="{{?this.expressionTwoWay}}"></iobroker-webui-monaco-editor>
|
|
49
|
+
<node-projects-code-view-monaco id="expression2way" .read-only="[[!this.twoWay]]" $readonly="[[!this.twoWay]]" single-row language="javascript" style="width: 100%; min-height: 17px; height: 17px; position: relative; overflow: hidden; resize: vertical;" .code="{{?this.expressionTwoWay}}"></iobroker-webui-monaco-editor>
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
52
|
</div>
|
|
@@ -271,10 +271,11 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
|
|
|
271
271
|
}
|
|
272
272
|
}
|
|
273
273
|
async _editParameter(e, eventItem) {
|
|
274
|
+
let selectedItem = this.selectedItems[0];
|
|
274
275
|
const edt = new ParameterEditor();
|
|
275
276
|
let existingParameter = {};
|
|
276
|
-
edt.title = "ParameterEditor for '" + eventItem.name + "' of '" +
|
|
277
|
-
let data =
|
|
277
|
+
edt.title = "ParameterEditor for '" + eventItem.name + "' of '" + selectedItem.name + "'";
|
|
278
|
+
let data = selectedItem.getAttribute('@' + eventItem.name);
|
|
278
279
|
if (data && data[0] == '{') {
|
|
279
280
|
try {
|
|
280
281
|
const parsed = JSON.parse(data);
|
|
@@ -297,14 +298,15 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
|
|
|
297
298
|
if (par == null)
|
|
298
299
|
delete newObj.parameters;
|
|
299
300
|
const newData = JSON.stringify(newObj);
|
|
300
|
-
|
|
301
|
+
selectedItem.setAttribute('@' + eventItem.name, newData);
|
|
301
302
|
this._bindingsRefresh();
|
|
302
303
|
}
|
|
303
304
|
}
|
|
304
305
|
async _editBlockly(e, eventItem) {
|
|
306
|
+
let selectedItem = this.selectedItems[0];
|
|
305
307
|
const edt = new BlocklyScriptEditor();
|
|
306
|
-
edt.title = "Blockly Script for '" + eventItem.name + "' of '" +
|
|
307
|
-
let data =
|
|
308
|
+
edt.title = "Blockly Script for '" + eventItem.name + "' of '" + selectedItem.name + "'";
|
|
309
|
+
let data = selectedItem.getAttribute('@' + eventItem.name);
|
|
308
310
|
let parameters = null;
|
|
309
311
|
let relativeSignalsPath = null;
|
|
310
312
|
if (data) {
|
|
@@ -322,7 +324,7 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
|
|
|
322
324
|
if (relativeSignalsPath) {
|
|
323
325
|
blockObj.relativeSignalsPath = relativeSignalsPath;
|
|
324
326
|
}
|
|
325
|
-
|
|
327
|
+
selectedItem.setAttribute('@' + eventItem.name, JSON.stringify(blockObj));
|
|
326
328
|
this._bindingsRefresh();
|
|
327
329
|
}
|
|
328
330
|
}
|
|
@@ -330,7 +332,8 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
|
|
|
330
332
|
// todo ?
|
|
331
333
|
}
|
|
332
334
|
async _editSimpleScript(e, eventItem) {
|
|
333
|
-
let
|
|
335
|
+
let selectedItem = this.selectedItems[0];
|
|
336
|
+
let scriptString = selectedItem.getAttribute('@' + eventItem.name);
|
|
334
337
|
if (!scriptString || scriptString.startsWith('{')) {
|
|
335
338
|
let script = { commands: [] };
|
|
336
339
|
let parameters = null;
|
|
@@ -343,13 +346,13 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
|
|
|
343
346
|
relativeSignalsPath = script.relativeSignalsPath;
|
|
344
347
|
}
|
|
345
348
|
let sc = new SimpleScriptEditor();
|
|
346
|
-
sc.serviceContainer =
|
|
349
|
+
sc.serviceContainer = selectedItem.serviceContainer;
|
|
347
350
|
sc.scriptCommandsTypeInfo = this._scriptCommandsTypeInfo;
|
|
348
351
|
sc.propertiesTypeInfo = this._propertiesTypeInfo;
|
|
349
352
|
sc.visualizationShell = this._visualizationShell;
|
|
350
353
|
sc.visualizationHandler = this._visualizationHandler;
|
|
351
354
|
sc.loadScript(script);
|
|
352
|
-
sc.title = "Script '" + eventItem.name + "' on " +
|
|
355
|
+
sc.title = "Script '" + eventItem.name + "' on " + selectedItem.name;
|
|
353
356
|
let res = await this._visualizationShell.openConfirmation(sc, { x: 100, y: 100, width: 600, height: 500 });
|
|
354
357
|
if (res) {
|
|
355
358
|
let scriptCommands = sc.getScriptCommands();
|
|
@@ -364,7 +367,7 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
|
|
|
364
367
|
sc.relativeSignalsPath = relativeSignalsPath;
|
|
365
368
|
}
|
|
366
369
|
let json = JSON.stringify(sc);
|
|
367
|
-
|
|
370
|
+
selectedItem.setAttribute('@' + eventItem.name, json);
|
|
368
371
|
this._bindingsRefresh();
|
|
369
372
|
}
|
|
370
373
|
}
|
|
@@ -89,7 +89,7 @@ export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend
|
|
|
89
89
|
pg.selectedObject = data.value ?? {};
|
|
90
90
|
else
|
|
91
91
|
pg.selectedObject = {};
|
|
92
|
-
let res = await this.visualizationShell.openConfirmation(pg, { x: 100, y: 100, width:
|
|
92
|
+
let res = await this.visualizationShell.openConfirmation(pg, { x: 100, y: 100, width: 400, height: 400, parent: this });
|
|
93
93
|
if (res) {
|
|
94
94
|
this._propertygrid.setPropertyValue(data.propertyPath, pg.selectedObject);
|
|
95
95
|
this._propertygrid.refresh();
|
|
@@ -7,6 +7,7 @@ export declare const bindingPrefixClass = "bind-class:";
|
|
|
7
7
|
export declare const bindingPrefixCss = "bind-css:";
|
|
8
8
|
export declare const bindingPrefixCssVar = "bind-cssvar:";
|
|
9
9
|
export declare const bindingPrefixContent = "bind-content:";
|
|
10
|
+
export declare const bindingPrefixVisible = "bind-visible:";
|
|
10
11
|
export declare const bindingPrefixInsideCss = "bind(";
|
|
11
12
|
export declare const bindingPrefixInsideCssVarName = "--tmpBinding_";
|
|
12
13
|
export declare const bindingsInCssRegex: RegExp;
|
|
@@ -8,6 +8,7 @@ export const bindingPrefixClass = 'bind-class:';
|
|
|
8
8
|
export const bindingPrefixCss = 'bind-css:';
|
|
9
9
|
export const bindingPrefixCssVar = 'bind-cssvar:';
|
|
10
10
|
export const bindingPrefixContent = 'bind-content:';
|
|
11
|
+
export const bindingPrefixVisible = 'bind-visible:';
|
|
11
12
|
export const bindingPrefixInsideCss = 'bind(';
|
|
12
13
|
export const bindingPrefixInsideCssVarName = '--tmpBinding_';
|
|
13
14
|
export const bindingsInCssRegex = /{{(.*)}}/;
|
|
@@ -207,7 +208,7 @@ export class BindingsHelper {
|
|
|
207
208
|
else if (!isLit(element) && binding.events?.[0] == targetName + '-changed')
|
|
208
209
|
delete bindingCopy.events;
|
|
209
210
|
}
|
|
210
|
-
const eventsString =
|
|
211
|
+
const eventsString = bindingCopy.twoWay && bindingCopy.events?.length > 0 ? '::' + bindingCopy.events.join(',') : '';
|
|
211
212
|
let needsJson = false;
|
|
212
213
|
if (eventsString && binding.expression?.includes('::') || binding.expressionTwoWay?.includes('::'))
|
|
213
214
|
needsJson = true;
|
|
@@ -344,6 +345,9 @@ export class BindingsHelper {
|
|
|
344
345
|
if (propertyTarget == BindingTarget.css) {
|
|
345
346
|
return bindingPrefixCss + PropertiesHelper.camelToDashCase(propertyName);
|
|
346
347
|
}
|
|
348
|
+
if (propertyTarget == BindingTarget.visible) {
|
|
349
|
+
return bindingPrefixVisible;
|
|
350
|
+
}
|
|
347
351
|
if (propertyTarget == BindingTarget.cssvar) {
|
|
348
352
|
return bindingPrefixCssVar + BindingsHelper.camelToDotCase(propertyName);
|
|
349
353
|
}
|
|
@@ -376,6 +380,9 @@ export class BindingsHelper {
|
|
|
376
380
|
else if (a.name.startsWith(bindingPrefixCssVar)) {
|
|
377
381
|
yield this.parseBinding(element, a.name, a.value, BindingTarget.cssvar, bindingPrefixCssVar);
|
|
378
382
|
}
|
|
383
|
+
else if (a.name.startsWith(bindingPrefixVisible)) {
|
|
384
|
+
yield this.parseBinding(element, a.name, a.value, BindingTarget.visible, bindingPrefixVisible);
|
|
385
|
+
}
|
|
379
386
|
}
|
|
380
387
|
}
|
|
381
388
|
}
|
|
@@ -767,6 +774,8 @@ export class BindingsHelper {
|
|
|
767
774
|
else
|
|
768
775
|
element.classList.remove(binding[0]);
|
|
769
776
|
}
|
|
777
|
+
else if (binding[1].target == BindingTarget.visible)
|
|
778
|
+
element.style.visibility = v ? '' : 'collapse';
|
|
770
779
|
}
|
|
771
780
|
static camelToDotCase(text) {
|
|
772
781
|
return text.replace(/([A-Z])/g, (g) => `.${g[0].toLowerCase()}`);
|
|
@@ -6,10 +6,11 @@ export declare class IScriptMultiplexValue {
|
|
|
6
6
|
* parameter - a parameter you hand over
|
|
7
7
|
* complexString - a string with signals (contained in {})
|
|
8
8
|
* complexSignal - read the value from a signal wich name is build here (it can contain other signals in {})
|
|
9
|
+
* not yet implemented: expression - js expression, member access needs to be defined {event, parameter, component/this, signals??? - async? }
|
|
9
10
|
*/
|
|
10
|
-
source: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal';
|
|
11
|
+
source: 'signal' | 'property' | 'event' | 'parameter' | 'complexString' | 'complexSignal' | 'expression';
|
|
11
12
|
/**
|
|
12
|
-
* Name of the
|
|
13
|
+
* Name of the signal, the property of the component or the parameter of the script
|
|
13
14
|
* or for example in a event : srcElement.value to get the value of a input wich raises the event
|
|
14
15
|
* @TJS-format signal
|
|
15
16
|
*/
|
|
@@ -6,10 +6,11 @@ export class IScriptMultiplexValue {
|
|
|
6
6
|
* parameter - a parameter you hand over
|
|
7
7
|
* complexString - a string with signals (contained in {})
|
|
8
8
|
* complexSignal - read the value from a signal wich name is build here (it can contain other signals in {})
|
|
9
|
+
* not yet implemented: expression - js expression, member access needs to be defined {event, parameter, component/this, signals??? - async? }
|
|
9
10
|
*/
|
|
10
11
|
source;
|
|
11
12
|
/**
|
|
12
|
-
* Name of the
|
|
13
|
+
* Name of the signal, the property of the component or the parameter of the script
|
|
13
14
|
* or for example in a event : srcElement.value to get the value of a input wich raises the event
|
|
14
15
|
* @TJS-format signal
|
|
15
16
|
*/
|
package/package.json
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
{
|
|
2
|
-
"description": "web-component-designer addon for visualizations",
|
|
3
|
-
"name": "@node-projects/web-component-designer-visualization-addons",
|
|
4
|
-
"version": "0.1.
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./dist/index.js",
|
|
7
|
-
"author": "jochen.kuehner@gmx.de",
|
|
8
|
-
"license": "MIT",
|
|
9
|
-
"scripts": {
|
|
10
|
-
"tsc": "tsc",
|
|
11
|
-
"build": "tsc",
|
|
12
|
-
"link": "npm link",
|
|
13
|
-
"prepublishOnly": "npm run build"
|
|
14
|
-
},
|
|
15
|
-
"dependencies": {
|
|
16
|
-
"@adobe/css-tools": "^4.
|
|
17
|
-
"@blockly/zoom-to-fit": "^6.0.
|
|
18
|
-
"@node-projects/base-custom-webcomponent": ">=0.19.0",
|
|
19
|
-
"@node-projects/propertygrid.webcomponent": ">=1.
|
|
20
|
-
"@node-projects/splitview.webcomponent": ">=1.0.1",
|
|
21
|
-
"@node-projects/web-component-designer": ">=0.1.
|
|
22
|
-
"@node-projects/web-component-designer-codeview-monaco": ">=0.1.
|
|
23
|
-
"@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.
|
|
24
|
-
"blockly": "^11.
|
|
25
|
-
"long": "^5.2.3"
|
|
26
|
-
},
|
|
27
|
-
"repository": {
|
|
28
|
-
"type": "git",
|
|
29
|
-
"url": "git+https://github.com/node-projects/web-component-designer.git"
|
|
30
|
-
}
|
|
31
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"description": "web-component-designer addon for visualizations",
|
|
3
|
+
"name": "@node-projects/web-component-designer-visualization-addons",
|
|
4
|
+
"version": "0.1.49",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"author": "jochen.kuehner@gmx.de",
|
|
8
|
+
"license": "MIT",
|
|
9
|
+
"scripts": {
|
|
10
|
+
"tsc": "tsc",
|
|
11
|
+
"build": "tsc",
|
|
12
|
+
"link": "npm link",
|
|
13
|
+
"prepublishOnly": "npm run build"
|
|
14
|
+
},
|
|
15
|
+
"dependencies": {
|
|
16
|
+
"@adobe/css-tools": "^4.4.0",
|
|
17
|
+
"@blockly/zoom-to-fit": "^6.0.7",
|
|
18
|
+
"@node-projects/base-custom-webcomponent": ">=0.19.0",
|
|
19
|
+
"@node-projects/propertygrid.webcomponent": ">=1.1.1",
|
|
20
|
+
"@node-projects/splitview.webcomponent": ">=1.0.1",
|
|
21
|
+
"@node-projects/web-component-designer": ">=0.1.215",
|
|
22
|
+
"@node-projects/web-component-designer-codeview-monaco": ">=0.1.27",
|
|
23
|
+
"@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.27",
|
|
24
|
+
"blockly": "^11.1.1",
|
|
25
|
+
"long": "^5.2.3"
|
|
26
|
+
},
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/node-projects/web-component-designer.git"
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
File without changes
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
|
|
2
|
-
import { Script } from "../scripting/Script.js";
|
|
3
|
-
import { ServiceContainer } from "@node-projects/web-component-designer";
|
|
4
|
-
import { VisualizationHandler } from "../interfaces/VisualizationHandler";
|
|
5
|
-
import { VisualizationShell } from "../interfaces/VisualizationShell";
|
|
6
|
-
import '@node-projects/splitview.webcomponent';
|
|
7
|
-
export declare class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
|
|
8
|
-
static readonly style: CSSStyleSheet;
|
|
9
|
-
static readonly template: HTMLTemplateElement;
|
|
10
|
-
static readonly is = "node-projects-simple-script-editor";
|
|
11
|
-
serviceContainer: ServiceContainer;
|
|
12
|
-
visualizationHandler: VisualizationHandler;
|
|
13
|
-
visualizationShell: VisualizationShell;
|
|
14
|
-
scriptCommandsTypeInfo: any;
|
|
15
|
-
propertiesTypeInfo: any;
|
|
16
|
-
private _script;
|
|
17
|
-
private _commandListDiv;
|
|
18
|
-
private _commandListFancyTree;
|
|
19
|
-
private _possibleCommands;
|
|
20
|
-
private _propertygrid;
|
|
21
|
-
constructor();
|
|
22
|
-
ready(): Promise<void>;
|
|
23
|
-
private addPossibleCommands;
|
|
24
|
-
loadScript(script: Script): void;
|
|
25
|
-
private createTreeItem;
|
|
26
|
-
addItem(): void;
|
|
27
|
-
getScriptCommands(): any[];
|
|
28
|
-
}
|
|
@@ -1,254 +0,0 @@
|
|
|
1
|
-
import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
|
|
2
|
-
import { ContextMenu } from "@node-projects/web-component-designer";
|
|
3
|
-
import { typeInfoFromJsonSchema } from "@node-projects/propertygrid.webcomponent";
|
|
4
|
-
import { defaultOptions } from "@node-projects/web-component-designer-widgets-wunderbaum";
|
|
5
|
-
import { Wunderbaum } from 'wunderbaum';
|
|
6
|
-
//@ts-ignore
|
|
7
|
-
import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' assert { type: 'css' };
|
|
8
|
-
import { VisualizationPropertyGrid } from "./VisualizationPropertyGrid";
|
|
9
|
-
import '@node-projects/splitview.webcomponent';
|
|
10
|
-
export class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
|
|
11
|
-
static style = css `
|
|
12
|
-
:host {
|
|
13
|
-
background: white;
|
|
14
|
-
}
|
|
15
|
-
.list{
|
|
16
|
-
display: grid;
|
|
17
|
-
grid-template-columns: 1fr 40px;
|
|
18
|
-
width: calc(100% - 6px);
|
|
19
|
-
box-sizing: border-box;
|
|
20
|
-
margin: 3px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.list button{
|
|
24
|
-
padding: 5px 10px;
|
|
25
|
-
box-sizing: border-box;
|
|
26
|
-
display: flex;
|
|
27
|
-
justify-content: center;
|
|
28
|
-
margin-right: 5px;
|
|
29
|
-
margin-left: 5px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
node-projects-visualization-property-grid {
|
|
33
|
-
width: 100%;
|
|
34
|
-
height: 100%;
|
|
35
|
-
}
|
|
36
|
-
`;
|
|
37
|
-
static template = html `
|
|
38
|
-
<div style="width:100%; height:100%; overflow: hidden;">
|
|
39
|
-
<node-projects-split-view style="height: 100%; width: 100%; position: relative;" orientation="horizontal">
|
|
40
|
-
<div style="width: 40%; position: relative;">
|
|
41
|
-
<div style="width:calc(100% - 4px); height:calc(100% - 4px)">
|
|
42
|
-
<div id="commandList" style="overflow-x: hidden; overflow-y: auto; width:100%; height: calc(100% - 34px);"></div>
|
|
43
|
-
<div class="list">
|
|
44
|
-
<select id="possibleCommands" style="width: 100%"></select>
|
|
45
|
-
<button @click="[[this.addItem()]]">Add</button>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
<div style="width: 60%; position: relative;">
|
|
50
|
-
<node-projects-visualization-property-grid id="propertygrid"></node-projects-visualization-property-grid>
|
|
51
|
-
</div>
|
|
52
|
-
</node-projects-split-view>
|
|
53
|
-
</div>
|
|
54
|
-
`;
|
|
55
|
-
static is = 'node-projects-simple-script-editor';
|
|
56
|
-
serviceContainer;
|
|
57
|
-
visualizationHandler;
|
|
58
|
-
visualizationShell;
|
|
59
|
-
scriptCommandsTypeInfo;
|
|
60
|
-
propertiesTypeInfo;
|
|
61
|
-
_script;
|
|
62
|
-
_commandListDiv;
|
|
63
|
-
_commandListFancyTree;
|
|
64
|
-
_possibleCommands;
|
|
65
|
-
_propertygrid;
|
|
66
|
-
constructor() {
|
|
67
|
-
super();
|
|
68
|
-
this._restoreCachedInititalValues();
|
|
69
|
-
this._commandListDiv = this._getDomElement('commandList');
|
|
70
|
-
this._possibleCommands = this._getDomElement('possibleCommands');
|
|
71
|
-
this._propertygrid = this._getDomElement('propertygrid');
|
|
72
|
-
this.shadowRoot.adoptedStyleSheets = [wunderbaumStyle, SimpleScriptEditor.style];
|
|
73
|
-
}
|
|
74
|
-
async ready() {
|
|
75
|
-
this.addPossibleCommands();
|
|
76
|
-
this._parseAttributesToProperties();
|
|
77
|
-
this._bindingsParse(null, true);
|
|
78
|
-
this._assignEvents();
|
|
79
|
-
let editComplex = async (data) => {
|
|
80
|
-
let pg = new VisualizationPropertyGrid();
|
|
81
|
-
pg.visualizationHandler = this.visualizationHandler;
|
|
82
|
-
pg.visualizationShell = this.visualizationShell;
|
|
83
|
-
pg.serviceContainer = this.serviceContainer;
|
|
84
|
-
pg.getTypeInfo = (obj, type) => typeInfoFromJsonSchema(this.propertiesTypeInfo, obj, type);
|
|
85
|
-
pg.showHead = false;
|
|
86
|
-
pg.typeName = 'IScriptMultiplexValue';
|
|
87
|
-
pg.title = 'Complex for "' + data.propertyPath + '"';
|
|
88
|
-
if (typeof data.value === 'object')
|
|
89
|
-
pg.selectedObject = data.value ?? {};
|
|
90
|
-
else
|
|
91
|
-
pg.selectedObject = {};
|
|
92
|
-
let res = await this.visualizationShell.openConfirmation(pg, { x: 100, y: 100, width: 300, height: 300, parent: this });
|
|
93
|
-
if (res) {
|
|
94
|
-
this._propertygrid.setPropertyValue(data.propertyPath, pg.selectedObject);
|
|
95
|
-
this._propertygrid.refresh();
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
this._propertygrid.visualizationHandler = this.visualizationHandler;
|
|
99
|
-
this._propertygrid.visualizationShell = this.visualizationShell;
|
|
100
|
-
this._propertygrid.serviceContainer = this.serviceContainer;
|
|
101
|
-
this._propertygrid.getTypeInfo = (obj, type) => typeInfoFromJsonSchema(this.scriptCommandsTypeInfo, obj, type);
|
|
102
|
-
this._propertygrid.getSpecialEditorForType = async (property, currentValue, propertyPath, wbRender, additionalInfo) => {
|
|
103
|
-
if (typeof currentValue === 'object' && currentValue !== null) {
|
|
104
|
-
let rB = document.createElement('button');
|
|
105
|
-
rB.style.height = 'calc(100% - 6px)';
|
|
106
|
-
rB.style.position = 'relative';
|
|
107
|
-
rB.style.display = 'flex';
|
|
108
|
-
rB.style.justifyContent = 'center';
|
|
109
|
-
rB.style.width = '20px';
|
|
110
|
-
rB.style.boxSizing = 'content-box';
|
|
111
|
-
rB.innerText = 'del';
|
|
112
|
-
rB.onclick = () => {
|
|
113
|
-
this._propertygrid.setPropertyValue(propertyPath, undefined);
|
|
114
|
-
this._propertygrid.refresh();
|
|
115
|
-
};
|
|
116
|
-
wbRender.nodeElem.insertAdjacentElement('afterbegin', rB);
|
|
117
|
-
let d = document.createElement('div');
|
|
118
|
-
d.style.display = 'flex';
|
|
119
|
-
let sp = document.createElement('span');
|
|
120
|
-
sp.innerText = 'complex: ' + JSON.stringify(currentValue);
|
|
121
|
-
sp.style.overflow = 'hidden';
|
|
122
|
-
sp.style.whiteSpace = 'nowrap';
|
|
123
|
-
sp.style.textOverflow = 'ellipsis';
|
|
124
|
-
sp.style.flexGrow = '1';
|
|
125
|
-
sp.title = JSON.stringify(currentValue);
|
|
126
|
-
d.appendChild(sp);
|
|
127
|
-
let b = document.createElement('button');
|
|
128
|
-
b.innerText = '...';
|
|
129
|
-
b.onclick = () => {
|
|
130
|
-
editComplex({ value: currentValue, propertyPath });
|
|
131
|
-
};
|
|
132
|
-
d.appendChild(b);
|
|
133
|
-
wbRender.nodeElem.style.display = 'flex';
|
|
134
|
-
return d;
|
|
135
|
-
}
|
|
136
|
-
else {
|
|
137
|
-
let b = document.createElement('button');
|
|
138
|
-
b.style.height = 'calc(100% - 6px)';
|
|
139
|
-
b.style.position = 'relative';
|
|
140
|
-
b.style.display = 'flex';
|
|
141
|
-
b.style.justifyContent = 'center';
|
|
142
|
-
b.style.width = '20px';
|
|
143
|
-
b.style.boxSizing = 'content-box';
|
|
144
|
-
b.title = 'complex';
|
|
145
|
-
b.style.opacity = '0.2';
|
|
146
|
-
b.innerText = '...';
|
|
147
|
-
b.onclick = () => {
|
|
148
|
-
editComplex({ value: currentValue, propertyPath });
|
|
149
|
-
};
|
|
150
|
-
wbRender.nodeElem.insertAdjacentElement('afterbegin', b);
|
|
151
|
-
wbRender.nodeElem.style.display = 'flex';
|
|
152
|
-
}
|
|
153
|
-
return null;
|
|
154
|
-
};
|
|
155
|
-
this._propertygrid.propertyNodeContextMenu.on((data) => {
|
|
156
|
-
ContextMenu.show([{
|
|
157
|
-
title: 'edit complex value',
|
|
158
|
-
action: async () => {
|
|
159
|
-
editComplex(data);
|
|
160
|
-
}
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
title: 'remove complex value',
|
|
164
|
-
action: async () => {
|
|
165
|
-
this._propertygrid.setPropertyValue(data.propertyPath, undefined);
|
|
166
|
-
this._propertygrid.refresh();
|
|
167
|
-
}
|
|
168
|
-
}], data.event);
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
//Converter from TypscriptJsonSchema to our Property list...
|
|
172
|
-
async addPossibleCommands() {
|
|
173
|
-
let commands = Object.keys(this.scriptCommandsTypeInfo.definitions);
|
|
174
|
-
for (let c of commands) {
|
|
175
|
-
if (c == 'ScriptCommands')
|
|
176
|
-
continue;
|
|
177
|
-
let option = document.createElement('option');
|
|
178
|
-
option.innerText = c;
|
|
179
|
-
this._possibleCommands.add(option);
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
loadScript(script) {
|
|
183
|
-
this._script = script;
|
|
184
|
-
let commandListTreeItems = [];
|
|
185
|
-
for (let c of this._script.commands) {
|
|
186
|
-
commandListTreeItems.push(this.createTreeItem(c));
|
|
187
|
-
}
|
|
188
|
-
;
|
|
189
|
-
this._commandListFancyTree = new Wunderbaum({
|
|
190
|
-
...defaultOptions,
|
|
191
|
-
element: this._commandListDiv,
|
|
192
|
-
icon: false,
|
|
193
|
-
source: commandListTreeItems,
|
|
194
|
-
activate: (e) => {
|
|
195
|
-
this._propertygrid.selectedObject = e.node.data.data.item;
|
|
196
|
-
},
|
|
197
|
-
render: (e) => {
|
|
198
|
-
if (e.isNew) {
|
|
199
|
-
let span = e.nodeElem;
|
|
200
|
-
span.oncontextmenu = (ev) => {
|
|
201
|
-
e.node.setActive();
|
|
202
|
-
if (e.node.data.contextMenu) {
|
|
203
|
-
e.node.data.contextMenu(ev, e.node.data, e.node);
|
|
204
|
-
}
|
|
205
|
-
ev.preventDefault();
|
|
206
|
-
return false;
|
|
207
|
-
};
|
|
208
|
-
}
|
|
209
|
-
},
|
|
210
|
-
dnd: {
|
|
211
|
-
guessDropEffect: true,
|
|
212
|
-
preventRecursion: true,
|
|
213
|
-
preventVoidMoves: false,
|
|
214
|
-
serializeClipboardData: false,
|
|
215
|
-
dragStart: (e) => {
|
|
216
|
-
e.event.dataTransfer.effectAllowed = "move";
|
|
217
|
-
e.event.dataTransfer.dropEffect = "move";
|
|
218
|
-
return true;
|
|
219
|
-
},
|
|
220
|
-
dragEnter: (e) => {
|
|
221
|
-
e.event.dataTransfer.dropEffect = 'move';
|
|
222
|
-
return true;
|
|
223
|
-
},
|
|
224
|
-
dragOver: (e) => {
|
|
225
|
-
e.event.dataTransfer.dropEffect = 'move';
|
|
226
|
-
},
|
|
227
|
-
drop: async (e) => {
|
|
228
|
-
e.sourceNode.moveTo(e.node, e.region == 'before' ? 'before' : 'after');
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
});
|
|
232
|
-
}
|
|
233
|
-
createTreeItem(currentItem) {
|
|
234
|
-
let cti = {
|
|
235
|
-
title: currentItem.type,
|
|
236
|
-
data: { item: currentItem },
|
|
237
|
-
contextMenu: (e, data, node) => {
|
|
238
|
-
ContextMenu.show([{ title: 'Remove Item', action: (e) => node.remove() }], e);
|
|
239
|
-
}
|
|
240
|
-
};
|
|
241
|
-
return cti;
|
|
242
|
-
}
|
|
243
|
-
addItem() {
|
|
244
|
-
const cmdName = this._possibleCommands.value;
|
|
245
|
-
const command = { type: cmdName };
|
|
246
|
-
const ti = this.createTreeItem(command);
|
|
247
|
-
this._commandListFancyTree.addChildren(ti);
|
|
248
|
-
}
|
|
249
|
-
getScriptCommands() {
|
|
250
|
-
let children = this._commandListFancyTree.root.children;
|
|
251
|
-
return children.map(x => x.data.data.item);
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
customElements.define(SimpleScriptEditor.is, SimpleScriptEditor);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { BindingTarget, IBinding, IBindingService, IDesignItem } from "@node-projects/web-component-designer";
|
|
2
|
-
import { BindingsHelper } from "../helpers/BindingsHelper.js";
|
|
3
|
-
export declare class BindingsService implements IBindingService {
|
|
4
|
-
constructor(bindingsHelper: BindingsHelper);
|
|
5
|
-
private _bindingsHelper;
|
|
6
|
-
getBindings(designItem: IDesignItem): (IBinding & {
|
|
7
|
-
converter: Record<string, any>;
|
|
8
|
-
})[];
|
|
9
|
-
setBinding(designItem: IDesignItem, binding: IBinding): boolean;
|
|
10
|
-
clearBinding(designItem: IDesignItem, propertyName: string, propertyTarget: BindingTarget): boolean;
|
|
11
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { BindingMode, PropertiesHelper } from "@node-projects/web-component-designer";
|
|
2
|
-
export class BindingsService {
|
|
3
|
-
constructor(bindingsHelper) {
|
|
4
|
-
this._bindingsHelper = bindingsHelper;
|
|
5
|
-
}
|
|
6
|
-
_bindingsHelper;
|
|
7
|
-
getBindings(designItem) {
|
|
8
|
-
const iobBindings = Array.from(this._bindingsHelper.getBindings(designItem.element));
|
|
9
|
-
return iobBindings.map(x => ({
|
|
10
|
-
targetName: x[1].target == 'css' ? PropertiesHelper.camelToDashCase(x[0]) : x[0],
|
|
11
|
-
target: x[1].target,
|
|
12
|
-
mode: x[1].twoWay ? BindingMode.twoWay : BindingMode.oneWay,
|
|
13
|
-
invert: x[1].inverted,
|
|
14
|
-
bindableObjectNames: x[1].signal.split(';'),
|
|
15
|
-
expression: x[1].expression,
|
|
16
|
-
expressionTwoWay: x[1].expressionTwoWay,
|
|
17
|
-
converter: x[1].converter,
|
|
18
|
-
type: x[1].type,
|
|
19
|
-
changedEvents: x[1].events,
|
|
20
|
-
historic: x[1].historic
|
|
21
|
-
}));
|
|
22
|
-
}
|
|
23
|
-
setBinding(designItem, binding) {
|
|
24
|
-
let bnd = { signal: binding.bindableObjectNames.join(';'), target: binding.target };
|
|
25
|
-
bnd.inverted = binding.invert;
|
|
26
|
-
bnd.twoWay = binding.mode == BindingMode.twoWay;
|
|
27
|
-
bnd.expression = binding.expression;
|
|
28
|
-
bnd.expressionTwoWay = binding.expressionTwoWay;
|
|
29
|
-
//@ts-ignore
|
|
30
|
-
bnd.historic = binding.historic;
|
|
31
|
-
bnd.type = binding.type;
|
|
32
|
-
bnd.converter = binding.converters;
|
|
33
|
-
bnd.target = binding.target;
|
|
34
|
-
bnd.events = binding.changedEvents;
|
|
35
|
-
let serializedBnd = this._bindingsHelper.serializeBinding(designItem.element, binding.targetName, bnd);
|
|
36
|
-
let group = designItem.openGroup('edit_binding');
|
|
37
|
-
designItem.setAttribute(serializedBnd[0], serializedBnd[1]);
|
|
38
|
-
group.commit();
|
|
39
|
-
return true;
|
|
40
|
-
}
|
|
41
|
-
clearBinding(designItem, propertyName, propertyTarget) {
|
|
42
|
-
const name = this._bindingsHelper.getBindingAttributeName(designItem.element, propertyName, propertyTarget);
|
|
43
|
-
designItem.removeAttribute(name);
|
|
44
|
-
return true;
|
|
45
|
-
}
|
|
46
|
-
}
|