@node-projects/web-component-designer-visualization-addons 0.1.18 → 0.1.19
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.
|
@@ -4,53 +4,53 @@ import { typeInfoFromJsonSchema } from "@node-projects/propertygrid.webcomponent
|
|
|
4
4
|
import { defaultOptions } from "@node-projects/web-component-designer-widgets-wunderbaum";
|
|
5
5
|
import { Wunderbaum } from 'wunderbaum';
|
|
6
6
|
//@ts-ignore
|
|
7
|
-
import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css'
|
|
7
|
+
import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { type: 'css' };
|
|
8
8
|
import { VisualizationPropertyGrid } from "./VisualizationPropertyGrid.js";
|
|
9
9
|
import '@node-projects/splitview.webcomponent';
|
|
10
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
|
-
}
|
|
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
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>
|
|
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
54
|
`;
|
|
55
55
|
static is = 'node-projects-visualization-simple-script-editor';
|
|
56
56
|
serviceContainer;
|
|
@@ -3,7 +3,7 @@ export declare class IScriptMultiplexValue {
|
|
|
3
3
|
* signal - read the value from a Signal
|
|
4
4
|
* property - read the value from a property of the customControl (not usable in screens)
|
|
5
5
|
* event - read the value of a property of the event object
|
|
6
|
-
* parameter - a
|
|
6
|
+
* parameter - a parameter you hand over
|
|
7
7
|
*/
|
|
8
8
|
source: 'signal' | 'property' | 'event' | 'parameter';
|
|
9
9
|
/**
|
|
@@ -3,7 +3,7 @@ export class IScriptMultiplexValue {
|
|
|
3
3
|
* signal - read the value from a Signal
|
|
4
4
|
* property - read the value from a property of the customControl (not usable in screens)
|
|
5
5
|
* event - read the value of a property of the event object
|
|
6
|
-
* parameter - a
|
|
6
|
+
* parameter - a parameter you hand over
|
|
7
7
|
*/
|
|
8
8
|
source;
|
|
9
9
|
/**
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"description": "web-component-designer addon for visualizations",
|
|
3
3
|
"name": "@node-projects/web-component-designer-visualization-addons",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.19",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"author": "jochen.kuehner@gmx.de",
|