@node-projects/web-component-designer 0.1.0 → 0.1.2

package/dist/elements/services/undoService/transactionItems/InsertAction.d.ts

@@ -0,0 +1,13 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class InsertAction implements ITransactionItem {
+    constructor(containerItem: IDesignItem, index: number, newItem: IDesignItem);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    containerItem: IDesignItem;
+    index: number;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/InsertAction.js

@@ -0,0 +1,26 @@
+export class InsertAction {
+    constructor(containerItem, index, newItem) {
+        this.title = "Insert Item";
+        this.containerItem = containerItem;
+        this.index = index;
+        this.newItem = newItem;
+    }
+    title;
+    get affectedItems() {
+        return [this.containerItem, this.newItem];
+    }
+    undo() {
+        this.newItem.parent._removeChildInternal(this.newItem);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.newItem] });
+    }
+    do() {
+        this.containerItem._insertChildInternal(this.newItem, this.index);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: [this.newItem] });
+    }
+    containerItem;
+    index;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/InsertChildAction.d.ts

@@ -0,0 +1,16 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class InsertChildAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newParent: IDesignItem, newIndex: number);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newParent: IDesignItem;
+    newIndex: number;
+    oldParent: IDesignItem;
+    oldIndex: number;
+    newItem: IDesignItem;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/InsertChildAction.js

@@ -0,0 +1,40 @@
+export class InsertChildAction {
+    constructor(designItem, newParent, newIndex) {
+        this.title = "Move or Insert Item";
+        this.designItem = designItem;
+        this.newParent = newParent;
+        this.newIndex = newIndex;
+    }
+    title;
+    get affectedItems() {
+        if (this.oldParent)
+            return [this.designItem, this.newParent, this.oldParent];
+        return [this.designItem, this.newParent];
+    }
+    undo() {
+        if (this.oldParent) {
+            this.oldParent._insertChildInternal(this.designItem, this.oldIndex);
+            this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'moved', designItems: [this.designItem] });
+        }
+        else {
+            this.designItem.parent._removeChildInternal(this.designItem);
+            this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: [this.designItem] });
+        }
+    }
+    do() {
+        this.oldParent = this.designItem.parent;
+        if (this.oldParent)
+            this.oldIndex = this.designItem.parent.indexOf(this.designItem);
+        this.newParent._insertChildInternal(this.designItem, this.newIndex);
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: this.oldParent ? 'moved' : 'added', designItems: [this.designItem] });
+    }
+    designItem;
+    newParent;
+    newIndex;
+    oldParent;
+    oldIndex;
+    newItem;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/SelectionChangedAction.d.ts

@@ -0,0 +1,14 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { ISelectionService } from '../../selectionService/ISelectionService.js';
+export declare class SelectionChangedAction implements ITransactionItem {
+    constructor(oldSelection: IDesignItem[], newSelection: IDesignItem[], selectionService: ISelectionService);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    oldSelection: IDesignItem[];
+    newSelection: IDesignItem[];
+    selectionService: ISelectionService;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/SelectionChangedAction.js

@@ -0,0 +1,28 @@
+export class SelectionChangedAction {
+    constructor(oldSelection, newSelection, selectionService) {
+        this.title = "Change Selection";
+        this.oldSelection = oldSelection;
+        this.newSelection = newSelection;
+        this.selectionService = selectionService;
+    }
+    title;
+    get affectedItems() {
+        if (this.oldSelection && this.newSelection)
+            return [...this.oldSelection, ...this.newSelection];
+        if (this.oldSelection)
+            return [...this.oldSelection];
+        return [...this.newSelection];
+    }
+    undo() {
+        this.selectionService._withoutUndoSetSelectedElements(this.oldSelection);
+    }
+    do() {
+        this.selectionService._withoutUndoSetSelectedElements(this.newSelection);
+    }
+    oldSelection;
+    newSelection;
+    selectionService;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/SetDesignItemsAction.d.ts

@@ -0,0 +1,12 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+export declare class SetDesignItemsAction implements ITransactionItem {
+    constructor(newDesignItems: IDesignItem[], oldDesignItems: IDesignItem[]);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    newDesignItems: IDesignItem[];
+    oldDesignItems: IDesignItem[];
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/SetDesignItemsAction.js

@@ -0,0 +1,22 @@
+export class SetDesignItemsAction {
+    constructor(newDesignItems, oldDesignItems) {
+        this.title = "Set all DesignItems";
+        this.newDesignItems = newDesignItems;
+        this.oldDesignItems = oldDesignItems;
+    }
+    title;
+    get affectedItems() {
+        return this.newDesignItems;
+    }
+    undo() {
+        this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.oldDesignItems);
+    }
+    do() {
+        this.newDesignItems[0].instanceServiceContainer.designerCanvas._internalSetDesignItems(this.newDesignItems);
+    }
+    newDesignItems;
+    oldDesignItems;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/services/undoService/transactionItems/StylesheetChangedAction.d.ts

@@ -0,0 +1,14 @@
+import { IStylesheetService } from '../../stylesheetService/IStylesheetService.js';
+import { ITransactionItem } from '../ITransactionItem.js';
+export declare class StylesheetChangedAction implements ITransactionItem {
+    private stylesheetService;
+    constructor(stylesheetService: IStylesheetService, name: string, newValue: string, oldValue: string);
+    title?: string;
+    get affectedItems(): any[];
+    undo(): void;
+    do(): void;
+    name: string;
+    newValue: string;
+    oldValue: string;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/StylesheetChangedAction.js

@@ -0,0 +1,24 @@
+export class StylesheetChangedAction {
+    stylesheetService;
+    constructor(stylesheetService, name, newValue, oldValue) {
+        this.title = "Changed Css Stylesheet: " + name;
+        this.stylesheetService = stylesheetService;
+        this.name = name;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [];
+    }
+    undo() {
+        this.stylesheetService.updateCompleteStylesheetWithoutUndo(this.name, this.oldValue);
+    }
+    do() {
+        this.stylesheetService.updateCompleteStylesheetWithoutUndo(this.name, this.newValue);
+    }
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) { return false; }
+}

package/dist/elements/services/undoService/transactionItems/TextContentChangeAction.d.ts

@@ -0,0 +1,14 @@
+import { ITransactionItem } from '../ITransactionItem.js';
+import { IDesignItem } from '../../../item/IDesignItem.js';
+import { IBinding } from '../../../item/IBinding.js';
+export declare class TextContentChangeAction implements ITransactionItem {
+    constructor(designItem: IDesignItem, newValue: string | IBinding | null, oldValue: string | IBinding | null);
+    title?: string;
+    get affectedItems(): IDesignItem[];
+    undo(): void;
+    do(): void;
+    designItem: IDesignItem;
+    newValue: any;
+    oldValue: any;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/transactionItems/TextContentChangeAction.js

@@ -0,0 +1,24 @@
+export class TextContentChangeAction {
+    constructor(designItem, newValue, oldValue) {
+        this.title = "Change TextContent from '" + oldValue + "' to '" + newValue + "'";
+        this.designItem = designItem;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        this.designItem.element.textContent = this.oldValue;
+    }
+    do() {
+        this.designItem.element.textContent = this.newValue;
+    }
+    designItem;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        return false;
+    }
+}

package/dist/elements/widgets/bindableObjectsBrowser/IBindableObjectsBrowser.d.ts

@@ -0,0 +1,3 @@
+export interface IBindableObjectsBrowser {
+    showObject(name: string): any;
+}

package/dist/elements/widgets/bindableObjectsBrowser/IBindableObjectsBrowser.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/bindings/BindingsEditor.d.ts

@@ -0,0 +1,17 @@
+import { BaseCustomWebComponentConstructorAppend } from '@node-projects/base-custom-webcomponent';
+export declare enum targetType {
+    'property' = "property",
+    'style' = "style",
+    'attribute' = "attribute",
+    'event' = "event"
+}
+export declare enum valueType {
+    'string' = "string",
+    'number' = "number",
+    'boolean' = "boolean"
+}
+export declare class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    constructor(targetType: targetType);
+}

package/dist/elements/widgets/bindings/BindingsEditor.js

@@ -0,0 +1,53 @@
+import { css, BaseCustomWebComponentConstructorAppend, html } from '@node-projects/base-custom-webcomponent';
+export var targetType;
+(function (targetType) {
+    targetType["property"] = "property";
+    targetType["style"] = "style";
+    targetType["attribute"] = "attribute";
+    targetType["event"] = "event";
+})(targetType || (targetType = {}));
+export var valueType;
+(function (valueType) {
+    valueType["string"] = "string";
+    valueType["number"] = "number";
+    valueType["boolean"] = "boolean";
+})(valueType || (valueType = {}));
+export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
+    static style = css `
+    * { font-size: 16px; }
+    .list { 
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    `;
+    static template = html `
+   <div class="list" style="">
+    <span>Expression</span>
+    <div>
+      <input style="width:100%;">
+      <button>...</button>
+    </div>
+    <!--<span>Target</span>
+    <select id="target">
+        <option>Property</option>
+        <option>Attribute</option>
+        <option>Style</option>
+        <option>Event</option>
+    </select>-->
+    <div>
+      <input id="mode" type="checkbox"><label for="mode">Two Way</label>    
+    </div>
+    <div>
+      <input id="inverted" type="checkbox"><label for="inverted">Inverted</label>   
+    </div>
+    <div>
+      <input id="nullSafe" type="checkbox"><label for="nullSafe">Null Safe</label>   
+    </div>
+</div>
+  `;
+    constructor(targetType) {
+        super();
+    }
+}
+customElements.define('node-projects-bindings-editor', BindingsEditor);

package/dist/elements/widgets/codeView/ICodeView.d.ts

@@ -0,0 +1,11 @@
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IDisposable } from '../../../interfaces/IDisposable.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { TypedEvent } from '@node-projects/base-custom-webcomponent';
+export interface ICodeView extends IUiCommandHandler, IDisposable {
+    update(code: string): any;
+    getText(): any;
+    setSelection(position: IStringPosition): any;
+    focusEditor(): any;
+    onTextChanged: TypedEvent<string>;
+}

package/dist/elements/widgets/codeView/ICodeView.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/widgets/codeView/code-view-simple.d.ts

@@ -0,0 +1,23 @@
+import { BaseCustomWebComponentConstructorAppend, TypedEvent } from '@node-projects/base-custom-webcomponent';
+import { ICodeView } from './ICodeView.js';
+import { IActivateable } from '../../../interfaces/IActivateable.js';
+import { IStringPosition } from '../../services/htmlWriterService/IStringPosition.js';
+import { IUiCommandHandler } from '../../../commandHandling/IUiCommandHandler.js';
+import { IUiCommand } from '../../../commandHandling/IUiCommand.js';
+export declare class CodeViewSimple extends BaseCustomWebComponentConstructorAppend implements ICodeView, IActivateable, IUiCommandHandler {
+    dispose(): void;
+    canvasElement: HTMLElement;
+    elementsToPackages: Map<string, string>;
+    onTextChanged: TypedEvent<string>;
+    private _text;
+    static readonly style: CSSStyleSheet;
+    static readonly template: HTMLTemplateElement;
+    executeCommand(command: IUiCommand): void;
+    canExecuteCommand(command: IUiCommand): boolean;
+    ready(): Promise<void>;
+    focusEditor(): void;
+    activated(): void;
+    update(code: any): void;
+    getText(): string;
+    setSelection(position: IStringPosition): void;
+}

package/dist/elements/widgets/codeView/code-view-simple.js

@@ -0,0 +1,55 @@
+import { BaseCustomWebComponentConstructorAppend, css, html, TypedEvent } from '@node-projects/base-custom-webcomponent';
+export class CodeViewSimple extends BaseCustomWebComponentConstructorAppend {
+    dispose() {
+    }
+    canvasElement;
+    elementsToPackages;
+    onTextChanged = new TypedEvent();
+    _text;
+    static style = css `
+    :host {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+
+    textarea {
+      height: 100%;
+      width: 100%;
+      resize: none;
+      white-space: nowrap;
+      box-sizing: border-box;
+    }
+    `;
+    static template = html `
+      <div id="container" style="width: 100%; height: 100%; position: absolute;">
+        <textarea id="text"></textarea>
+      </div>
+  `;
+    executeCommand(command) {
+    }
+    canExecuteCommand(command) {
+        return false;
+    }
+    async ready() {
+        this._text = this._getDomElement('text');
+    }
+    focusEditor() {
+        requestAnimationFrame(() => {
+            this.focus();
+            this._text.focus();
+        });
+    }
+    activated() {
+    }
+    update(code) {
+        this._text.value = code;
+    }
+    getText() {
+        return this._text.value;
+    }
+    setSelection(position) {
+        this._text.setSelectionRange(position.start, position.start + position.length);
+    }
+}
+customElements.define('node-projects-code-view-simple', CodeViewSimple);

package/dist/elements/widgets/debugView/debug-view.d.ts

@@ -0,0 +1,18 @@
+import { BaseCustomWebComponentConstructorAppend } from "@node-projects/base-custom-webcomponent";
+import { IDesignItem } from "../../item/IDesignItem.js";
+export declare class DebugView extends BaseCustomWebComponentConstructorAppend {
+    static readonly template: HTMLTemplateElement;
+    static readonly style: CSSStyleSheet;
+    private _ready;
+    computedStyle: CSSStyleDeclaration;
+    createsStackingContext: boolean;
+    createsStackingContextReason: string;
+    parentStackingContext: Element;
+    parentStackingContextText: string;
+    selectedElementOffsetParent: Element;
+    selectedElementOffsetParentText: string;
+    constructor();
+    ready(): void;
+    _clickLink(e: MouseEvent, target: 'offsetParent' | 'stackingContextParent'): void;
+    update(designItem: IDesignItem): void;
+}