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

package/dist/elements/services/stylesheetService/AbstractStylesheetService.js

@@ -0,0 +1,138 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { DesignerCanvas } from '../../widgets/designerView/designerCanvas.js';
+export class AbstractStylesheetService {
+    _stylesheets = new Map();
+    _documentStylesheets = new Map();
+    _allStylesheets = new Map();
+    _instanceServiceContainer;
+    constructor(designerCanvas) {
+        this._instanceServiceContainer = designerCanvas.instanceServiceContainer;
+    }
+    async setStylesheets(stylesheets) {
+        await this.internalSetStylesheets(stylesheets, this._stylesheets);
+    }
+    async setDocumentStylesheets(stylesheets) {
+        await this.internalSetStylesheets(stylesheets, this._documentStylesheets);
+    }
+    async internalSetStylesheets(stylesheets, targetMap) {
+        if (targetMap != null && stylesheets != null && targetMap.size == stylesheets.length && stylesheets.every(x => targetMap.has(x.name))) {
+            for (let stylesheet of stylesheets) {
+                const old = targetMap.get(stylesheet.name);
+                if (old.stylesheet.content != stylesheet.content) {
+                    try {
+                        targetMap.set(stylesheet.name, {
+                            stylesheet: stylesheet,
+                            ast: await this.internalParse(stylesheet.content)
+                        });
+                    }
+                    catch (err) {
+                        console.warn("error parsing stylesheet", stylesheet, err);
+                    }
+                    if (targetMap == this._stylesheets)
+                        this.stylesheetChanged.emit({ name: stylesheet.name, newStyle: stylesheet.content, oldStyle: old.stylesheet.content, changeSource: 'extern' });
+                }
+            }
+        }
+        else if (stylesheets != null) {
+            targetMap.clear();
+            for (let stylesheet of stylesheets) {
+                try {
+                    targetMap.set(stylesheet.name, {
+                        stylesheet: stylesheet,
+                        ast: await this.internalParse(stylesheet.content)
+                    });
+                }
+                catch (err) {
+                    console.warn("error parsing stylesheet", stylesheet, err);
+                }
+            }
+            if (targetMap == this._stylesheets)
+                this.stylesheetsChanged.emit();
+        }
+        else {
+            targetMap.clear();
+        }
+        this._allStylesheets.clear();
+        for (let s of this._documentStylesheets) {
+            this._allStylesheets.set(s[0], s[1]);
+        }
+        for (let s of this._stylesheets) {
+            this._allStylesheets.set(s[0], s[1]);
+        }
+    }
+    //todo: rename to externalStylesheets
+    getStylesheets() {
+        let stylesheets = [];
+        for (let item of this._stylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        }
+        ;
+        /*for (let item of this._documentStylesheets) {
+            stylesheets.push(item[1].stylesheet);
+        };*/
+        return stylesheets;
+    }
+    updateDeclarationValue(declaration, value, important) {
+        this.updateDeclarationValueWithoutUndo(declaration, value, important);
+    }
+    stylesheetChanged = new TypedEvent();
+    stylesheetsChanged = new TypedEvent();
+    elementMatchesASelector(designItem, selectors) {
+        for (let selector of selectors) {
+            if (selector == ':host') {
+                selector = DesignerCanvas.cssprefixConstant;
+            }
+            if (designItem.element.matches(selector))
+                return true;
+        }
+        return false;
+    }
+    static buildPatchedStyleSheet(value) {
+        let style = '';
+        for (let s of value) {
+            style += this.traverseAndCollectRules(s);
+        }
+        return style;
+    }
+    static traverseAndCollectRules(ruleContainer) {
+        let t = '';
+        for (let rule of ruleContainer.cssRules) {
+            if ((rule instanceof CSSContainerRule
+                || rule instanceof CSSSupportsRule
+                || rule instanceof CSSMediaRule)
+                && rule.cssRules) {
+                t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
+            }
+            if (rule instanceof CSSStyleRule) {
+                let parts = rule.selectorText.split(',');
+                let sel = "";
+                for (let p of parts) {
+                    if (p == ':host')
+                        sel += DesignerCanvas.cssprefixConstant;
+                    else if (p.includes(DesignerCanvas.cssprefixConstant)) {
+                        sel += p;
+                        continue;
+                    }
+                    if (sel)
+                        sel += ',';
+                    sel += DesignerCanvas.cssprefixConstant + p.trimStart();
+                }
+                t += sel;
+                let cssText = rule.style.cssText;
+                //bugfix for chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1394353 
+                if (rule.styleMap && rule.styleMap.get('grid-template') && rule.styleMap.get('grid-template').toString().includes('repeat(')) {
+                    let entr = rule.styleMap.entries();
+                    cssText = '';
+                    for (let e of entr) {
+                        cssText += e[0] + ':' + e[1].toString() + ';';
+                    }
+                }
+                t += '{' + cssText + '}';
+                /*if (rule.cssRules) {
+                    t += rule.cssText.split(rule.conditionText)[0] + rule.conditionText + " { " + this.traverseAndCollectRules(rule) + " }";
+                }*/
+            }
+        }
+        return t;
+    }
+}

package/dist/elements/services/stylesheetService/IStylesheetService.d.ts

@@ -0,0 +1,42 @@
+import { TypedEvent } from "@node-projects/base-custom-webcomponent";
+import { IDesignItem } from "../../item/IDesignItem.js";
+export interface IStyleRule {
+    selector: string;
+    declarations: IStyleDeclaration[];
+    specificity: number;
+    stylesheetName?: string;
+}
+export interface IStyleDeclaration {
+    name: string;
+    value: string;
+    important: boolean;
+    parent: IStyleRule;
+    stylesheet?: IStylesheet;
+}
+export interface IStylesheet {
+    content: string;
+    name: string;
+}
+export interface IDocumentStylesheet extends IStylesheet {
+    designItem: IDesignItem;
+}
+export interface IStylesheetService {
+    setStylesheets(stylesheets: IStylesheet[]): Promise<void>;
+    getStylesheets(): IStylesheet[];
+    setDocumentStylesheets(stylesheets: IDocumentStylesheet[]): Promise<void>;
+    getAppliedRules(designItem: IDesignItem): IStyleRule[];
+    getDeclarations(designItem: IDesignItem, styleName: string): IStyleDeclaration[];
+    updateDeclarationValue(declaration: IStyleDeclaration, value: string, important: boolean): any;
+    updateDeclarationValueWithoutUndo(declaration: IStyleDeclaration, value: string, important: boolean): any;
+    insertDeclarationIntoRule(rule: IStyleRule, property: string, value: string, important: boolean): boolean;
+    removeDeclarationFromRule(rule: IStyleRule, property: string): boolean;
+    updateCompleteStylesheet(name: string, newStyle: string): void;
+    updateCompleteStylesheetWithoutUndo(name: string, newStyle: string): void;
+    stylesheetChanged: TypedEvent<{
+        name: string;
+        newStyle: string;
+        oldStyle: string;
+        changeSource: 'extern' | 'styleupdate' | 'undo';
+    }>;
+    stylesheetsChanged: TypedEvent<void>;
+}

package/dist/elements/services/stylesheetService/IStylesheetService.js

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

package/dist/elements/services/treeStructureService/ITreeStructureChangedEvent.d.ts

@@ -0,0 +1,8 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+export interface ITreeStructureChangedEvent {
+    action: 'add' | 'move' | 'remove' | 'replace' | 'reset';
+    newItems?: IDesignItem[];
+    newStartingIndex?: number;
+    oldItems?: IDesignItem[];
+    oldStartingIndex?: number;
+}

package/dist/elements/services/treeStructureService/ITreeStructureChangedEvent.js

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

package/dist/elements/services/treeStructureService/ITreeStructureService.d.ts

@@ -0,0 +1,2 @@
+export interface ITreeStructureService {
+}

package/dist/elements/services/treeStructureService/ITreeStructureService.js

@@ -0,0 +1,2 @@
+export {};
+//maybe this service caches a dictionary designitem -> treeelement?, filled by treeView control?

package/dist/elements/services/undoService/ChangeGroup.d.ts

@@ -0,0 +1,18 @@
+import { ITransactionItem } from './ITransactionItem.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+export declare class ChangeGroup implements ITransactionItem {
+    title: string;
+    get affectedItems(): IDesignItem[];
+    private commitHandler;
+    private abortHandler;
+    constructor(title: string, commitHandler: (transactionItem: ITransactionItem) => void, abortHandler: (transactionItem: ITransactionItem) => void);
+    do(): void;
+    undo(): void;
+    commit(): void;
+    abort(): void;
+    mergeWith(other: ITransactionItem): boolean;
+    addCommitedSubchangeGroup(changeGroup: ChangeGroup): void;
+    undoStack: ITransactionItem[];
+    redoStack: ITransactionItem[];
+    execute(item: ITransactionItem): void;
+}

package/dist/elements/services/undoService/ChangeGroup.js

@@ -0,0 +1,67 @@
+export class ChangeGroup {
+    title;
+    get affectedItems() {
+        let s = new Set();
+        for (let u of this.undoStack)
+            for (let i of u.affectedItems)
+                s.add(i);
+        for (let u of this.redoStack)
+            for (let i of u.affectedItems)
+                s.add(i);
+        return [...s.values()];
+    }
+    commitHandler;
+    abortHandler;
+    constructor(title, commitHandler, abortHandler) {
+        this.title = title;
+        this.commitHandler = commitHandler;
+        this.abortHandler = abortHandler;
+    }
+    do() {
+        let item = null;
+        while (item = this.redoStack.pop()) {
+            try {
+                item.do();
+                this.undoStack.push(item);
+            }
+            catch (err) {
+                throw err;
+            }
+        }
+    }
+    undo() {
+        let item = null;
+        while (item = this.undoStack.pop()) {
+            try {
+                item.undo();
+                this.redoStack.push(item);
+            }
+            catch (err) {
+                throw err;
+            }
+        }
+    }
+    ;
+    commit() {
+        this.commitHandler(this);
+    }
+    abort() {
+        this.abortHandler(this);
+    }
+    mergeWith(other) {
+        return false;
+    }
+    addCommitedSubchangeGroup(changeGroup) {
+        this.undoStack.push(changeGroup);
+    }
+    undoStack = [];
+    redoStack = [];
+    execute(item) {
+        item.do();
+        for (let existingItem of this.undoStack) {
+            if (existingItem.mergeWith(item))
+                return;
+        }
+        this.undoStack.push(item);
+    }
+}

package/dist/elements/services/undoService/ITransactionItem.d.ts

@@ -0,0 +1,8 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+export interface ITransactionItem {
+    title?: string;
+    readonly affectedItems?: IDesignItem[];
+    do: () => void;
+    undo: () => void;
+    mergeWith(other: ITransactionItem): boolean;
+}

package/dist/elements/services/undoService/ITransactionItem.js

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

package/dist/elements/services/undoService/IUndoService.d.ts

@@ -0,0 +1,14 @@
+import { IService } from '../IService.js';
+import { ChangeGroup } from './ChangeGroup.js';
+import { ITransactionItem } from './ITransactionItem.js';
+export interface IUndoService extends IService {
+    openGroup(title: string): ChangeGroup;
+    execute(item: ITransactionItem): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    clear(): any;
+    undo(): any;
+    redo(): any;
+    getUndoEntries(count?: number): Generator<string, void, unknown>;
+    getRedoEntries(count?: number): Generator<string, void, unknown>;
+}

package/dist/elements/services/undoService/IUndoService.js

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

package/dist/elements/services/undoService/UndoService.d.ts

@@ -0,0 +1,22 @@
+import { ITransactionItem } from './ITransactionItem.js';
+import { ChangeGroup } from "./ChangeGroup.js";
+import { IUndoService } from './IUndoService.js';
+import { IDesignerCanvas } from '../../widgets/designerView/IDesignerCanvas.js';
+export declare class UndoService implements IUndoService {
+    private _undoStack;
+    private _redoStack;
+    private _transactionStack;
+    private _designerCanvas;
+    constructor(designerCanvas: IDesignerCanvas);
+    openGroup(title: string): ChangeGroup;
+    private commitTransactionItem;
+    private abortTransactionItem;
+    execute(item: ITransactionItem): void;
+    clear(): void;
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    getUndoEntries(count?: number): Generator<string, void, unknown>;
+    getRedoEntries(count?: number): Generator<string, void, unknown>;
+}

package/dist/elements/services/undoService/UndoService.js

@@ -0,0 +1,113 @@
+import { ChangeGroup } from "./ChangeGroup.js";
+/*
+ * Manages a stack of available undo/redo actions
+ */
+export class UndoService {
+    _undoStack = [];
+    _redoStack = [];
+    _transactionStack = [];
+    _designerCanvas;
+    constructor(designerCanvas) {
+        this._designerCanvas = designerCanvas;
+    }
+    openGroup(title) {
+        let t = new ChangeGroup(title, (t) => this.commitTransactionItem(t), (t) => this.abortTransactionItem(t));
+        this._transactionStack.push(t);
+        return t;
+    }
+    commitTransactionItem(transactionItem) {
+        let itm = this._transactionStack.pop();
+        if (itm !== transactionItem) {
+            this.clear();
+            throw "UndoService - Commited Transaction was not the last";
+        }
+        if (itm.undoStack.length) {
+            if (this._transactionStack.length > 0) {
+                this._transactionStack[this._transactionStack.length - 1].addCommitedSubchangeGroup(itm);
+            }
+            else {
+                this._undoStack.push(itm);
+                this._redoStack = [];
+            }
+        }
+        if (this._transactionStack.length == 0) {
+            this._designerCanvas.extensionManager.refreshAllExtensions(transactionItem.affectedItems);
+            this._designerCanvas.onContentChanged.emit();
+        }
+    }
+    abortTransactionItem(transactionItem) {
+        let itm = this._transactionStack.pop();
+        if (itm !== transactionItem) {
+            this.clear();
+            throw "UndoService - Aborted Transaction was not the last";
+        }
+        itm.undo();
+    }
+    execute(item) {
+        if (this._transactionStack.length == 0) {
+            item.do();
+            this._undoStack.push(item);
+            this._redoStack = [];
+        }
+        else {
+            this._transactionStack[this._transactionStack.length - 1].execute(item);
+        }
+        if (this._transactionStack.length == 0) {
+            this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+            this._designerCanvas.onContentChanged.emit();
+        }
+    }
+    clear() {
+        this._undoStack = [];
+        this._redoStack = [];
+        this._transactionStack = [];
+    }
+    undo() {
+        if (!this.canUndo())
+            return;
+        if (this._transactionStack.length != 0)
+            throw "Cannot Undo while transaction is running";
+        let item = this._undoStack.pop();
+        try {
+            item.undo();
+            this._redoStack.push(item);
+        }
+        catch (err) {
+            this.clear();
+            throw err;
+        }
+        this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
+    }
+    redo() {
+        if (!this.canRedo())
+            return;
+        if (this._transactionStack.length != 0)
+            throw "Cannot Redo while transaction is running";
+        let item = this._redoStack.pop();
+        try {
+            item.do();
+            this._undoStack.push(item);
+        }
+        catch (err) {
+            this.clear();
+            throw err;
+        }
+        this._designerCanvas.extensionManager.refreshAllExtensions(item.affectedItems);
+        this._designerCanvas.onContentChanged.emit();
+    }
+    canUndo() {
+        return this._undoStack.length > 0;
+    }
+    canRedo() {
+        return this._redoStack.length > 0;
+    }
+    *getUndoEntries(count = 999) {
+        for (let i = Math.min(this._undoStack.length, count) - 1; i >= 0; i--)
+            yield this._undoStack[i].title;
+    }
+    *getRedoEntries(count = 999) {
+        for (let i = Math.min(this._redoStack.length, count) - 1; i >= 0; i--)
+            yield this._redoStack[i].title;
+    }
+}

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

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

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

@@ -0,0 +1,70 @@
+export class AttributeChangeAction {
+    constructor(designItem, name, newValue, oldValue) {
+        this.title = "Change Attribute " + name + " of <" + designItem.name + ">";
+        this.designItem = designItem;
+        this.name = name;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        if (this.oldValue == null) {
+            this.designItem._withoutUndoRemoveAttribute(this.name);
+            try {
+                this.designItem.element.removeAttribute(this.name);
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        }
+        else {
+            this.designItem._withoutUndoSetAttribute(this.name, this.oldValue);
+            if (this.name != "draggable") {
+                try {
+                    if (typeof this.oldValue === 'string')
+                        this.designItem.element.setAttribute(this.name, this.oldValue);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            }
+        }
+    }
+    do() {
+        if (this.newValue == null) {
+            this.designItem._withoutUndoRemoveAttribute(this.name);
+            try {
+                this.designItem.element.removeAttribute(this.name);
+            }
+            catch (e) {
+                console.warn(e);
+            }
+        }
+        else {
+            this.designItem._withoutUndoSetAttribute(this.name, this.newValue);
+            if (this.name != "draggable") {
+                try {
+                    if (typeof this.newValue === 'string')
+                        this.designItem.element.setAttribute(this.name, this.newValue);
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            }
+        }
+    }
+    designItem;
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        if (other instanceof AttributeChangeAction && this.designItem === other.designItem && this.name === other.name) {
+            this.newValue = other.newValue;
+            return true;
+        }
+        return false;
+    }
+}

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

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

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

@@ -0,0 +1,62 @@
+export class CssStyleChangeAction {
+    constructor(designItem, name, newValue, oldValue) {
+        this.title = "Change Css Style " + name + " of <" + designItem.name + ">";
+        this.designItem = designItem;
+        this.name = name;
+        this.newValue = newValue;
+        this.oldValue = oldValue;
+    }
+    title;
+    get affectedItems() {
+        return [this.designItem];
+    }
+    undo() {
+        if (this.oldValue === '' || this.oldValue == null) {
+            this.designItem._withoutUndoRemoveStyle(this.name);
+            if (this.name.startsWith('--')) {
+                this.designItem.element.style.removeProperty(this.name);
+            }
+            else {
+                this.designItem.element.style[this.name] = '';
+            }
+            ;
+        }
+        else {
+            this.designItem._withoutUndoSetStyle(this.name, this.oldValue);
+            if (this.name.startsWith('--')) {
+                this.designItem.element.style.setProperty(this.name, this.oldValue);
+            }
+            else {
+                this.designItem.element.style[this.name] = this.oldValue;
+            }
+        }
+    }
+    do() {
+        if (this.newValue === '' || this.newValue == null) {
+            this.designItem._withoutUndoRemoveStyle(this.name);
+            if (this.name.startsWith('--')) {
+                this.designItem.element.style.removeProperty(this.name);
+            }
+            else {
+                this.designItem.element.style[this.name] = '';
+            }
+            ;
+        }
+        else {
+            this.designItem._withoutUndoSetStyle(this.name, this.newValue);
+            if (this.name.startsWith('--')) {
+                this.designItem.element.style.setProperty(this.name, this.newValue);
+            }
+            else {
+                this.designItem.element.style[this.name] = this.newValue;
+            }
+        }
+    }
+    designItem;
+    name;
+    newValue;
+    oldValue;
+    mergeWith(other) {
+        return false;
+    }
+}

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

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

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

@@ -0,0 +1,35 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
+export class DeleteAction {
+    constructor(deletedItems) {
+        this.title = "Delete Items";
+        this.deletedItems = deletedItems;
+    }
+    title;
+    get affectedItems() {
+        return this.deletedItems;
+    }
+    undo() {
+        for (let n = 0; n < this.deletedItems.length; n++) {
+            this._parentItems[n]._insertChildInternal(this.deletedItems[n], this._parentIndexes[n]);
+        }
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'added', designItems: this.deletedItems });
+    }
+    do() {
+        this._parentItems = [];
+        this._parentIndexes = [];
+        for (let n = 0; n < this.deletedItems.length; n++) {
+            this._parentItems.push(this.deletedItems[n].parent);
+            this._parentIndexes.push(DomHelper.nodeIndex(this.deletedItems[n].element));
+        }
+        for (let n = 0; n < this.deletedItems.length; n++) {
+            this.deletedItems[n].parent._removeChildInternal(this.deletedItems[n]);
+        }
+        this.affectedItems[0].instanceServiceContainer.contentService.onContentChanged.emit({ changeType: 'removed', designItems: this.deletedItems });
+    }
+    deletedItems;
+    _parentItems;
+    _parentIndexes;
+    mergeWith(other) {
+        return false;
+    }
+}