@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.
@@ -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 '" + this._selectedItems[0].name + "'";
277
- let data = this._selectedItems[0].getAttribute('@' + eventItem.name);
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
- this._selectedItems[0].setAttribute('@' + eventItem.name, newData);
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 '" + this._selectedItems[0].name + "'";
307
- let data = this._selectedItems[0].getAttribute('@' + eventItem.name);
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
- this._selectedItems[0].setAttribute('@' + eventItem.name, JSON.stringify(blockObj));
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 scriptString = this.selectedItems[0].getAttribute('@' + eventItem.name);
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 = this.selectedItems[0].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 " + this.selectedItems[0].name;
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
- this.selectedItems[0].setAttribute('@' + eventItem.name, json);
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: 300, height: 300, parent: this });
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 = binding.twoWay && binding.events?.length > 0 ? '::' + binding.events.join(',') : '';
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 ioBroker object or the property of the component or the parameter of the script
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 ioBroker object or the property of the component or the parameter of the script
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.46",
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.3.3",
17
- "@blockly/zoom-to-fit": "^6.0.0",
18
- "@node-projects/base-custom-webcomponent": ">=0.19.0",
19
- "@node-projects/propertygrid.webcomponent": ">=1.0.2",
20
- "@node-projects/splitview.webcomponent": ">=1.0.1",
21
- "@node-projects/web-component-designer": ">=0.1.1",
22
- "@node-projects/web-component-designer-codeview-monaco": ">=0.1.18",
23
- "@node-projects/web-component-designer-widgets-wunderbaum": ">=0.1.12",
24
- "blockly": "^11.0.0",
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 {};
@@ -1,6 +0,0 @@
1
- //@ts-ignore
2
- class FieldObjectId extends Blockly.FieldTextInput {
3
- }
4
- //@ts-ignore
5
- Blockly.FieldObjectId = FieldObjectId;
6
- 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,5 +0,0 @@
1
- export interface VisualizationUiHandler {
2
- switchLanguage(language: string): any;
3
- closeDialog(element: HTMLElement): any;
4
- openDialog(): any;
5
- }
@@ -1,2 +0,0 @@
1
- //dialog:{screenName: string, title: string, moveable: boolean, closeable: boolean, width: string, height: string, left: string, top: string}
2
- export {};
@@ -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
- }