@node-projects/web-component-designer-visualization-addons 0.1.145 → 0.1.146

package/dist/components/EventAssignment.d.ts

@@ -2,6 +2,7 @@ import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-cus
 import { IContextMenuItem, IDesignItem, IEvent, InstanceServiceContainer } from "@node-projects/web-component-designer";
 import { VisualizationShell } from "../interfaces/VisualizationShell.js";
 import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
+import { ScriptCommandHelp } from "../scripting/ScriptCommandsDescriptions.js";
 type eventWithDesignItem = IEvent & {
     designItem: IDesignItem;
 };
@@ -27,10 +28,11 @@ export declare class EventAssignment extends BaseCustomWebComponentConstructorAp
     private _visualizationShell;
     private _scriptCommandsTypeInfo;
     private _propertiesTypeInfo;
+    private _commandDescriptions;
     events: (IEvent & {
         designItem: IDesignItem;
     })[];
-    initialize(visualizationHandler: VisualizationHandler, visualizationShell: VisualizationShell, scriptCommandsTypeInfo: any, propertiesTypeInfo: any, blocklyToolbox: any): void;
+    initialize(visualizationHandler: VisualizationHandler, visualizationShell: VisualizationShell, scriptCommandsTypeInfo: any, propertiesTypeInfo: any, blocklyToolbox: any, commandDescriptions?: Record<string, ScriptCommandHelp>): void;
     set instanceServiceContainer(value: InstanceServiceContainer);
     protected _createControlsForScript(eventItem: eventWithDesignItem): any;
     protected _getScriptName(eventItem: IEvent): any;

package/dist/components/EventAssignment.js

@@ -75,13 +75,15 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
     _visualizationShell;
     _scriptCommandsTypeInfo;
     _propertiesTypeInfo;
+    _commandDescriptions;
     events;
-    initialize(visualizationHandler, visualizationShell, scriptCommandsTypeInfo, propertiesTypeInfo, blocklyToolbox) {
+    initialize(visualizationHandler, visualizationShell, scriptCommandsTypeInfo, propertiesTypeInfo, blocklyToolbox, commandDescriptions) {
         this._visualizationHandler = visualizationHandler;
         this._visualizationShell = visualizationShell;
         this._scriptCommandsTypeInfo = scriptCommandsTypeInfo;
         this._propertiesTypeInfo = propertiesTypeInfo;
         this._blocklyToolbox = blocklyToolbox;
+        this._commandDescriptions = commandDescriptions;
     }
     set instanceServiceContainer(value) {
         this._instanceServiceContainer = value;
@@ -375,9 +377,12 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
             sc.propertiesTypeInfo = this._propertiesTypeInfo;
             sc.visualizationShell = this._visualizationShell;
             sc.visualizationHandler = this._visualizationHandler;
+            if (this._commandDescriptions) {
+                sc.commandDescriptions = { ...sc.commandDescriptions, ...this._commandDescriptions };
+            }
             sc.loadScript(script);
             sc.title = "Script '" + eventItem.name + "' on " + eventItem.designItem.name;
-            let res = await this._visualizationShell.openConfirmation(sc, { x: 100, y: 100, width: 600, height: 500 });
+            let res = await this._visualizationShell.openConfirmation(sc, { title: sc.title, width: 600, height: 500 });
             if (res) {
                 let scriptCommands = sc.getScriptCommands();
                 if (scriptCommands && scriptCommands.length) {

package/dist/components/SimpleScriptCommandPicker.d.ts

@@ -0,0 +1,25 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { ScriptCommandHelp } from "../scripting/ScriptCommandsDescriptions.js";
+export declare class SimpleScriptCommandPicker extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    static readonly is = "node-projects-visualization-simple-script-command-picker";
+    private _title;
+    get title(): string;
+    set title(value: string);
+    selectedType: string;
+    commandTypeChosen: TypedEvent<void>;
+    closeRequested: TypedEvent<void>;
+    private _tree;
+    private _filter;
+    private _descriptionDiv;
+    private _addBtn;
+    private _typeInfo;
+    private _descriptions;
+    constructor();
+    ready(): Promise<void>;
+    addClicked(): void;
+    closeClicked(): void;
+    private _renderDescription;
+    loadCommands(scriptCommandsTypeInfo: any, descriptions?: Record<string, ScriptCommandHelp>): void;
+}

package/dist/components/SimpleScriptCommandPicker.js

@@ -0,0 +1,271 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent, css, html } from "@node-projects/base-custom-webcomponent";
+import { defaultOptions, defaultStyle } from "@node-projects/web-component-designer-widgets-wunderbaum";
+import { Wunderbaum } from 'wunderbaum';
+//@ts-ignore
+import wunderbaumStyle from 'wunderbaum/dist/wunderbaum.css' with { type: 'css' };
+import { highlightJson } from "../scripting/JsonSnippetHighlighter.js";
+export class SimpleScriptCommandPicker extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+        :host {
+            display: block;
+            background: white;
+        }
+
+        .root {
+            width: calc(100% - 8px);
+            height: calc(100% - 8px);
+            margin: 4px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #filter {
+            width: 100%;
+            height: 26px;
+            box-sizing: border-box;
+        }
+
+        .content {
+            flex: 1 1 auto;
+            min-height: 0;
+            display: flex;
+        }
+
+        #commandList {
+            width: 40%;
+            overflow: auto;
+            box-sizing: border-box;
+        }
+
+        #description {
+            width: 60%;
+        }
+
+        .detail {
+            padding: 8px;
+            overflow: auto;
+            box-sizing: border-box;
+        }
+
+        .cmd-title {
+            font-size: 14px;
+            font-weight: bold;
+            color: #24405c;
+            border-bottom: 2px solid #2c6e9b;
+            padding-bottom: 4px;
+            margin-bottom: 6px;
+        }
+
+        .cmd-title .hint {
+            font-size: 11px;
+            font-weight: normal;
+            color: #808080;
+            margin-left: 6px;
+        }
+
+        .snippet {
+            font-family: Consolas, "Courier New", monospace;
+            font-size: 11px;
+            background: #f6f8fa;
+            color: #24292e;
+            border: 1px solid #e1e4e8;
+            border-radius: 4px;
+            padding: 6px 10px;
+            white-space: pre;
+            overflow-x: auto;
+            line-height: 1.5;
+        }
+
+        .cs-key  { color: #22863a; }
+        .cs-str  { color: #032f62; }
+        .cs-bool { color: #d73a49; }
+        .cs-num  { color: #e36209; }
+
+        .note {
+            font-size: 11px;
+            color: #666;
+            font-style: italic;
+            margin-top: 6px;
+        }
+
+        .toolbar {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            box-sizing: border-box;
+            flex: 0 0 auto;
+            width: 100%;
+            height: 40px;
+            padding: 4px 8px;
+            border-top: 1px solid #ccc;
+            background-color: rgb(230, 230, 230);
+        }
+
+        .toolbar button {
+            box-sizing: border-box;
+            padding: 6px 16px;
+            border-radius: 4px;
+            border: 1px solid #b0b0b0;
+            background: white;
+            font-size: 12px;
+            cursor: pointer;
+        }
+
+        .toolbar button:hover:not(:disabled) {
+            background: #f0f0f0;
+            border-color: #909090;
+        }
+
+        .toolbar button:active:not(:disabled) {
+            background: #e2e2e2;
+        }
+
+        .toolbar button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .toolbar button.primary {
+            background: #2c6e9b;
+            border-color: #2c6e9b;
+            color: white;
+        }
+
+        .toolbar button.primary:hover:not(:disabled) {
+            background: #255d83;
+            border-color: #255d83;
+        }
+
+        .toolbar button.primary:active:not(:disabled) {
+            background: #1e4d6b;
+        }
+
+        .toolbar .spacer {
+            flex: 1 1 auto;
+        }
+
+        .toolbar .hint {
+            font-size: 11px;
+            font-style: italic;
+            color: #666;
+        }
+    `;
+    static template = html `
+        <div class="root">
+            <input id="filter" placeholder="Filter..." autocomplete="off">
+            <div class="content">
+                <div id="commandList"></div>
+                <div id="description" class="detail"></div>
+            </div>
+            <div class="toolbar">
+                <button id="addBtn" class="primary" disabled @click="[[this.addClicked()]]">Add</button>
+                <span class="hint">or drag a command into the script list</span>
+                <span class="spacer"></span>
+                <button id="closeBtn" @click="[[this.closeClicked()]]">Close</button>
+            </div>
+        </div>
+    `;
+    static is = 'node-projects-visualization-simple-script-command-picker';
+    _title;
+    get title() {
+        return this._title;
+    }
+    set title(value) {
+        this._title = value;
+    }
+    selectedType;
+    commandTypeChosen = new TypedEvent();
+    closeRequested = new TypedEvent();
+    _tree;
+    _filter;
+    _descriptionDiv;
+    _addBtn;
+    _typeInfo;
+    _descriptions;
+    constructor() {
+        super();
+        this._restoreCachedInititalValues();
+        this.shadowRoot.adoptedStyleSheets = [wunderbaumStyle, defaultStyle, SimpleScriptCommandPicker.style];
+        this._descriptionDiv = this._getDomElement('description');
+        this._addBtn = this._getDomElement('addBtn');
+        this._filter = this._getDomElement('filter');
+        this._filter.onkeyup = () => {
+            const match = this._filter.value;
+            this._tree.filterNodes((node) => new RegExp(match, "i").test(node.title), {});
+        };
+        this._tree = new Wunderbaum({
+            ...defaultOptions,
+            element: this._getDomElement('commandList'),
+            icon: false,
+            filter: {
+                autoExpand: true,
+                mode: 'hide',
+                highlight: true
+            },
+            activate: (e) => {
+                this.selectedType = e.node.title;
+                this._addBtn.disabled = false;
+                this._renderDescription(e.node.title);
+            },
+            dblclick: (e) => {
+                this.selectedType = e.node.title;
+                this.commandTypeChosen.emit();
+                return false;
+            },
+            render: (e) => {
+                if (e.isNew) {
+                    e.nodeElem.oncontextmenu = (ev) => {
+                        ev.preventDefault();
+                        return false;
+                    };
+                }
+            },
+            dnd: {
+                guessDropEffect: false,
+                serializeClipboardData: true,
+                dragStart: (e) => {
+                    e.event.dataTransfer.effectAllowed = 'copy';
+                    e.event.dataTransfer.dropEffect = 'copy';
+                    return true;
+                }
+            }
+        });
+    }
+    async ready() {
+        this._parseAttributesToProperties();
+        this._bindingsParse(null, true);
+        this._assignEvents();
+    }
+    addClicked() {
+        if (this.selectedType)
+            this.commandTypeChosen.emit();
+    }
+    closeClicked() {
+        this.closeRequested.emit();
+    }
+    _renderDescription(type) {
+        const help = this._descriptions?.[type];
+        if (help) {
+            this._descriptionDiv.innerHTML = `
+        <div class="cmd-title">${type}<span class="hint">${help.description}</span></div>
+        <pre class="snippet">${highlightJson(help.example)}</pre>
+        ${help.note ? `<div class="note">${help.note}</div>` : ''}
+      `;
+            return;
+        }
+        const schemaDescription = this._typeInfo?.definitions?.[type]?.description;
+        this._descriptionDiv.innerHTML = `
+      <div class="cmd-title">${type}</div>
+      ${schemaDescription ? `<div class="note">${schemaDescription}</div>` : ''}
+    `;
+    }
+    loadCommands(scriptCommandsTypeInfo, descriptions) {
+        this._typeInfo = scriptCommandsTypeInfo;
+        this._descriptions = descriptions ?? {};
+        const names = Object.keys(scriptCommandsTypeInfo.definitions)
+            .filter(x => scriptCommandsTypeInfo.definitions[x].type === 'object' && x !== 'ScriptCommands');
+        this._tree.root.addChildren(names.map(n => ({ title: n })));
+    }
+}
+customElements.define(SimpleScriptCommandPicker.is, SimpleScriptCommandPicker);

package/dist/components/SimpleScriptEditor.d.ts

@@ -1,29 +1,45 @@
-import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from "@node-projects/base-custom-webcomponent";
 import { Script } from "../scripting/Script.js";
 import { InstanceServiceContainer, ServiceContainer } from "@node-projects/web-component-designer";
+import { ScriptCommandHelp } from "../scripting/ScriptCommandsDescriptions.js";
 import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { VisualizationShell } from "../interfaces/VisualizationShell.js";
-import '@node-projects/splitview.webcomponent';
+import "@node-projects/splitview.webcomponent";
 export declare class SimpleScriptEditor extends BaseCustomWebComponentConstructorAppend {
     static readonly style: CSSStyleSheet;
     static readonly template: HTMLTemplateElement;
     static readonly is = "node-projects-visualization-simple-script-editor";
+    private _title;
+    get title(): string;
+    set title(value: string);
     serviceContainer: ServiceContainer;
     instanceServiceContainer: InstanceServiceContainer;
     visualizationHandler: VisualizationHandler;
     visualizationShell: VisualizationShell;
     scriptCommandsTypeInfo: any;
     propertiesTypeInfo: any;
+    helpRequested: TypedEvent<void>;
+    commandDescriptions: Record<string, ScriptCommandHelp>;
     private _script;
     private _commandListDiv;
     private _commandListFancyTree;
-    private _possibleCommands;
     private _propertygrid;
+    private _splitView;
+    private _codeView;
+    private _codeToggleBtn;
+    private _addCommandBtn;
+    private _showingCode;
+    private _dragFromHandle;
+    private _draggedNode;
     constructor();
     ready(): Promise<void>;
-    private addPossibleCommands;
+    helpClicked(): void;
+    toggleCodeView(): void;
+    private _showCodeView;
+    /** Parses+validates the code view's JSON. Returns null (and alerts) on invalid JSON. */
+    private _parseCodeViewScript;
     loadScript(script: Script): void;
     private createTreeItem;
-    addItem(): void;
+    addCommand(): Promise<void>;
     getScriptCommands(): any[];
 }