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

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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-type Specificity = {
-    a: 0;
-    b: 0;
-    c: 0;
-};
-declare const calculate: (selectorAST: any) => Specificity[];
-export { calculate };

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

@@ -1,178 +0,0 @@
-const calculateSpecificityOfSelectorObject = (selectorObj) => {
-    // https://www.w3.org/TR/selectors-4/#specificity-rules
-    const specificity = { a: 0, b: 0, c: 0 };
-    selectorObj.children.forEach((child) => {
-        switch (child.type) {
-            case 'IdSelector':
-                specificity.a += 1;
-                break;
-            case 'AttributeSelector':
-            case 'ClassSelector':
-                specificity.b += 1;
-                break;
-            case 'PseudoClassSelector':
-                switch (child.name.toLowerCase()) {
-                    // “The specificity of a :where() pseudo-class is replaced by zero.”
-                    case 'where':
-                        // Noop :)
-                        break;
-                    // “The specificity of an :is(), :not(), or :has() pseudo-class is replaced by the specificity of the most specific complex selector in its selector list argument.“
-                    case 'is':
-                    case 'matches':
-                    case '-webkit-any':
-                    case '-moz-any':
-                    case 'any':
-                    case 'not':
-                    case 'has':
-                        if (child.children) {
-                            // Calculate Specificity from nested SelectorList
-                            const max1 = max(...calculate(child.children.first));
-                            // Adjust orig specificity
-                            specificity.a += max1.a;
-                            specificity.b += max1.b;
-                            specificity.c += max1.c;
-                        }
-                        break;
-                    // “The specificity of an :nth-child() or :nth-last-child() selector is the specificity of the pseudo class itself (counting as one pseudo-class selector) plus the specificity of the most specific complex selector in its selector list argument”
-                    case 'nth-child':
-                    case 'nth-last-child':
-                        specificity.b += 1;
-                        if (child.children.first.selector) {
-                            // Calculate Specificity from SelectorList
-                            const max2 = max(...calculate(child.children.first.selector));
-                            // Adjust orig specificity
-                            specificity.a += max2.a;
-                            specificity.b += max2.b;
-                            specificity.c += max2.c;
-                        }
-                        break;
-                    // “The specificity of :host is that of a pseudo-class. The specificity of :host() is that of a pseudo-class, plus the specificity of its argument.”
-                    // “The specificity of :host-context() is that of a pseudo-class, plus the specificity of its argument.”
-                    case 'host-context':
-                    case 'host':
-                        specificity.b += 1;
-                        if (child.children) {
-                            // Workaround to a css-tree bug in which it allows complex selectors instead of only compound selectors
-                            // We work around it by filtering out any Combinator and successive Selectors
-                            const childAST = { type: 'Selector', children: [] };
-                            let foundCombinator = false;
-                            // @ts-ignore
-                            child.children.first.children.forEach((entry) => {
-                                if (foundCombinator)
-                                    return false;
-                                if (entry.type === 'Combinator') {
-                                    foundCombinator = true;
-                                    return false;
-                                }
-                                childAST.children.push(entry);
-                            });
-                            // Calculate Specificity from Selector
-                            const childSpecificity = calculate(childAST)[0];
-                            // Adjust orig specificity
-                            specificity.a += childSpecificity.a;
-                            specificity.b += childSpecificity.b;
-                            specificity.c += childSpecificity.c;
-                        }
-                        break;
-                    // Improper use of Pseudo-Class Selectors instead of a Pseudo-Element
-                    // @ref https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements#index
-                    case 'after':
-                    case 'before':
-                    case 'first-letter':
-                    case 'first-line':
-                        specificity.c += 1;
-                        break;
-                    default:
-                        specificity.b += 1;
-                        break;
-                }
-                break;
-            case 'PseudoElementSelector':
-                switch (child.name) {
-                    // “The specificity of ::slotted() is that of a pseudo-element, plus the specificity of its argument.”
-                    case 'slotted':
-                        specificity.c += 1;
-                        if (child.children) {
-                            // Workaround to a css-tree bug in which it allows complex selectors instead of only compound selectors
-                            // We work around it by filtering out any Combinator and successive Selectors
-                            const childAST = { type: 'Selector', children: [] };
-                            let foundCombinator = false;
-                            // @ts-ignore
-                            child.children.first.children.forEach((entry) => {
-                                if (foundCombinator)
-                                    return false;
-                                if (entry.type === 'Combinator') {
-                                    foundCombinator = true;
-                                    return false;
-                                }
-                                childAST.children.push(entry);
-                            });
-                            // Calculate Specificity from Selector
-                            const childSpecificity = calculate(childAST)[0];
-                            // Adjust orig specificity
-                            specificity.a += childSpecificity.a;
-                            specificity.b += childSpecificity.b;
-                            specificity.c += childSpecificity.c;
-                        }
-                        break;
-                    default:
-                        specificity.c += 1;
-                        break;
-                }
-                break;
-            case 'TypeSelector':
-                // Omit namespace
-                let typeSelector = child.name;
-                if (typeSelector.includes('|')) {
-                    typeSelector = typeSelector.split('|')[1];
-                }
-                // “Ignore the universal selector”
-                if (typeSelector !== '*') {
-                    specificity.c += 1;
-                }
-                break;
-            default:
-                // NOOP
-                break;
-        }
-    });
-    return specificity;
-};
-const calculate = (selectorAST) => {
-    // Quit while you're ahead
-    if (!selectorAST) {
-        return [];
-    }
-    // Selector?
-    if (selectorAST.type === 'Selector')
-        return [calculateSpecificityOfSelectorObject(selectorAST)];
-    // SelectorList?
-    // ~> Calculate Specificity for each contained Selector
-    if (selectorAST.type === 'SelectorList') {
-        const specificities = [];
-        selectorAST.children.forEach((selector) => {
-            const specificity = calculateSpecificityOfSelectorObject(selector);
-            specificities.push(specificity);
-        });
-        return specificities;
-    }
-    return null;
-};
-const max = (...specificities) => {
-    const sorted = sort(specificities);
-    return sorted[0];
-};
-const sort = (specificities) => {
-    const sorted = specificities.sort(compare);
-    return sorted.reverse();
-};
-const compare = (s1, s2) => {
-    if (s1.a === s2.a) {
-        if (s1.b === s2.b) {
-            return s1.c - s2.c;
-        }
-        return s1.b - s2.b;
-    }
-    return s1.a - s2.a;
-};
-export { calculate };

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

@@ -1,8 +0,0 @@
-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

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

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

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

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

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

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

@@ -1,18 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,22 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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;
-    }
-}