ngx-axis-appforge 0.0.2 → 0.0.3

package/axis-components/design/preview/drop-handler.ts

@@ -1,56 +0,0 @@
-import { ElementNode } from "ngx-axis-appforge/core";
-
-export class DropHandler {
-
-    private placeholder: HTMLElement;
-
-    beforeElement?: HTMLElement | null;
-
-    constructor(public dragNode: ElementNode, public dropNode: ElementNode, private elementOptionIds: Map<HTMLElement, string>, private isHorizontal: boolean) {
-        this.placeholder = dragNode.element!.cloneNode(true) as HTMLElement;
-        this.placeholder.style.display = "inline";
-        this.placeholder.style.opacity = "0.5";
-    }
-
-    onDragEnd(): void {
-        this.placeholder.remove();
-    }
-
-    onDragOver(e: DragEvent): void {
-        const element = this.getBeforeElement(e)
-        if (element === this.beforeElement) {
-            return;
-        }
-        this.beforeElement = element;
-        if (element) {
-            this.dropNode.dropElement!.insertBefore(this.placeholder, element);
-        } else {
-            this.dropNode.dropElement!.appendChild(this.placeholder);
-        }
-    }
-
-    close(): void {
-        this.placeholder.remove();
-        this.beforeElement = undefined;
-    }
-
-    protected getBeforeElement(e: DragEvent): HTMLElement | null {
-        for (const child of this.dropNode.dropElement!.children) {
-            if (this.elementOptionIds.has(child as HTMLElement)) {
-                const rect = child.getBoundingClientRect();
-                if (this.isHorizontal) {
-                    const middle = rect.left + (rect.width / 2);
-                    if (e.clientX <= middle) {
-                        return child as HTMLElement;
-                    }
-                } else {
-                    const middle = rect.top + (rect.height / 2);
-                    if (e.clientY <= middle) {
-                        return child as HTMLElement;
-                    }
-                }
-            }
-        }
-        return null;
-    }
-}

package/axis-components/design/preview/preview.css

@@ -1,3 +0,0 @@
-:host {
-    padding: 4px;
-}

package/axis-components/design/preview/preview.html

@@ -1 +0,0 @@
-<ng-container #child [axisDynamic]="loadAndOptions()?.[1]" [standalone]="true" [isDesign]="true"></ng-container>

package/axis-components/design/preview/preview.ts

@@ -1,250 +0,0 @@
-import { ChangeDetectionStrategy, Component, ComponentRef, effect, inject, input, OnDestroy, output, ViewChild } from '@angular/core';
-import { DragService } from './drag.service';
-import { SelectService } from './select.service';
-import { Base, DynamicDirective, BaseOptions, OptionsNode, ElementNode, DesignConfig, DesignBuilder, AXIS_COMPONENTS_LOADER_TOKEN, AXIS_INJECT_DATA_TOKEN, ScopeDirective } from 'ngx-axis-appforge/core';
-import { CommonModule } from '@angular/common';
-import { BehaviorSubject, Observable } from 'rxjs';
-
-@Component({
-  selector: 'axis-design-preview',
-  imports: [DynamicDirective, CommonModule],
-  templateUrl: './preview.html',
-  styleUrl: './preview.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: DesignBuilder,
-      useFactory: (preview: Preview) => {
-        return new DesignBuilder((ref, options) => preview.initElement(ref, options), (scope) => preview.initScope(scope))
-      },
-      deps: [Preview]
-    }, {
-      provide: AXIS_INJECT_DATA_TOKEN,
-      useFactory: (preview: Preview) => {
-        return preview.injectData();
-      },
-      deps: [Preview]
-    }
-  ]
-})
-export class Preview implements OnDestroy {
-
-  constructor() {
-    effect(async () => {
-      if (this.loadAndOptions()) {
-        await this.loadAndOptions()![0];
-        this.refresh();
-      }
-    });
-  }
-
-  readonly loadAndOptions = input.required<[Promise<any>, any] | undefined>()
-  readonly optionsNodes = input.required<Map<string, OptionsNode>>();
-  readonly injectData = input.required<Observable<any>>();
-  readonly loader = inject(AXIS_COMPONENTS_LOADER_TOKEN);
-
-  readonly onChange = output<void>();
-  readonly onSelect = output<string[]>();
-  readonly onContextMenu = output<{ nodeId: string, event: MouseEvent }>();
-
-  readonly elementOptionIds = new Map<HTMLElement, string>();
-  readonly elementComponentRefs = new Map<HTMLElement, ComponentRef<Base<BaseOptions>>>();
-  readonly optionIdElements = new Map<string, HTMLElement[]>();
-  readonly scopeSubjects = new Map<string, BehaviorSubject<ScopeDirective | undefined>>();
-
-  private readonly dragService = new DragService(this);
-  private readonly selectService = new SelectService(this);
-
-  readonly selected = new Map<string, number>();
-
-  @ViewChild("child", { read: DynamicDirective })
-  dynamicDirective?: DynamicDirective;
-
-  initScope(scope: ScopeDirective) {
-    this.getAndUpdateScopeSubject(scope.axisScope(), scope);
-  }
-
-  async initElement(ref: ComponentRef<Base<BaseOptions>>, options: any) {
-    await this.loadAndOptions()![0];
-    if (!options?.id || !this.optionsNodes().has(options.id)) {
-      return;
-    }
-
-    try {
-      const element: HTMLElement = ref.location.nativeElement;
-      ref.onDestroy(() => {
-        this.elementComponentRefs.delete(element);
-        this.elementOptionIds.delete(element);
-        if (this.optionIdElements.has(options.id)) {
-          this.optionIdElements.set(options.id, this.optionIdElements.get(options.id)!.filter(e => e !== element));
-        }
-      });
-      this.elementComponentRefs.set(element, ref);
-      const { component } = options;
-      const config: DesignConfig = await this.loader.loadComponent(`${component}/design`)!;
-      if (config) {
-        const binds = config.bindElementsOptionsNode?.(element, options);
-        if (binds) {
-          for (const en of Object.entries(binds)) {
-            const nodeId = en[0];
-            const element = en[1].element;
-            const node = this.optionsNodes().get(nodeId);
-            if (node && element && !this.elementOptionIds.has(element)) {
-              if (!this.optionIdElements.has(nodeId)) {
-                this.optionIdElements.set(nodeId, []);
-              }
-              this.optionIdElements.get(nodeId)?.push(element);
-              this.elementOptionIds.set(element, nodeId);
-              this.selectService.initElement(element);
-              if (node.canDrag || node.canDrop) {
-                this.dragService.initElement(node, node.toElementNode(en[1]));
-              }
-              if (node.contextMenu) {
-                element.oncontextmenu = (e: MouseEvent) => {
-                  this.onContextMenu.emit({ event: e, nodeId: en[0] })
-                }
-              }
-              if (this.selected.has(nodeId) && this.selected.get(nodeId) == this.optionIdElements.get(nodeId)!.length - 1) {
-                this.selectService.select(element);
-              }
-            }
-          }
-        }
-      }
-    } catch (_) {
-    }
-  }
-
-  getNodeByElement(element: HTMLElement): OptionsNode | undefined {
-    const id = this.elementOptionIds.get(element);
-    if (id) {
-      return this.optionsNodes().get(id);
-    }
-    return undefined;
-  }
-
-  onSelectChange(elements: HTMLElement[]) {
-    this.selected.clear();
-    for (const element of elements) {
-      const id = this.elementOptionIds.get(element);
-      if (id) {
-        const elementList = this.optionIdElements.get(id);
-        this.selected.set(id, elementList?.indexOf(element) ?? 0);
-      }
-    }
-    this.onSelect.emit(Array.from(this.selected.keys()));
-  }
-
-  onDragStart() {
-    this.selectService.disableHover();
-  }
-
-  onDragEnd(changed: boolean) {
-    if (changed) {
-      this.onChange.emit();
-    }
-    this.selectService.enableHover();
-  }
-
-  forceRender() {
-    this.elementOptionIds.clear();
-    this.optionIdElements.clear();
-    this.dragService.reset();
-    this.selectService.reset();
-    this.dynamicDirective?.forceRender();
-  }
-
-  refresh() {
-    Array.from(this.optionIdElements.keys()).forEach(id => {
-      if (!this.optionsNodes().has(id)) {
-        this.optionIdElements.get(id)?.forEach(element => {
-          this.elementOptionIds.delete(element);
-        });
-        this.optionIdElements.delete(id);
-      }
-    });
-    setTimeout(() => {
-      this.selectService.getSelectElements().filter(e => !document.contains(e)).forEach(e => {
-        const nodeId = this.elementOptionIds.get(e);
-        this.elementComponentRefs.delete(e);
-        if (nodeId) {
-          const elements = this.optionIdElements.get(nodeId);
-          elements?.splice(elements.indexOf(e), 1);
-          const res = this.getParentComponentRef(nodeId);
-          if (res) {
-            this.initElement(res.ref, res.options);
-          }
-        }
-      });
-    }, 50);
-  }
-
-  private getParentComponentRef(nodeId: string): { ref: ComponentRef<Base<BaseOptions>>, options: any } | undefined {
-    const node = this.optionsNodes().get(nodeId);
-    if (node?.parentId) {
-      const parent = this.optionsNodes().get(node.parentId);
-      if (parent) {
-        const parentElement = this.optionIdElements.get(parent.id);
-        if (parentElement?.length) {
-          const ref = this.elementComponentRefs.get(parentElement[0]);
-          if (ref) {
-            return { ref, options: parent.options };
-          }
-        }
-        return this.getParentComponentRef(parent.id);
-      }
-    }
-    return undefined;
-  }
-
-  selectByNodeIds(nodeIds?: string[]) {
-    if (nodeIds?.some(id => !this.selected.has(id))) {
-      this.selectService.unSelectAll();
-      this.selected.clear();
-      for (const nodeId of nodeIds) {
-        this.selected.set(nodeId, 0);
-        const elements = this.optionIdElements.get(nodeId)
-        if (elements?.[0]) {
-          this.selectService.select(elements[0]);
-        }
-      }
-    }
-  }
-
-  getAndUpdateScopeSubject(scopeId: string, initScope?: ScopeDirective): BehaviorSubject<ScopeDirective | undefined> {
-    if (!this.scopeSubjects.has(scopeId)) {
-      this.scopeSubjects.set(scopeId, new BehaviorSubject<ScopeDirective | undefined>(initScope));
-    }
-    const subject = this.scopeSubjects.get(scopeId)!;
-    if (initScope && initScope != subject.value) {
-      subject.next(initScope);
-    }
-    return subject;
-  }
-
-  updateScopeWithSelectedElement(scopeId: string) {
-    const elements = this.selectService.getSelectElements();
-    if (elements.length > 0) {
-      const ref = this.elementComponentRefs.get(elements[0]);
-      const scope = ref?.injector.get(ScopeDirective, null)?.findScope(scopeId);
-      if (scope) {
-        this.getAndUpdateScopeSubject(scope.axisScope(), scope);
-      }
-    }
-  }
-
-  dragForOuter(node: ElementNode) {
-    this.dragService.dragStart(node);
-  }
-
-  dragEndForOuter(): string | undefined {
-    return this.dragService.dragEnd();
-  }
-
-  ngOnDestroy(): void {
-    for (const s of this.scopeSubjects.values()) {
-      s.unsubscribe();
-    }
-  }
-
-}

package/axis-components/design/preview/select.service.ts

@@ -1,140 +0,0 @@
-import { Preview } from "./preview";
-
-export class SelectService {
-    private hoverElements: HTMLElement[] = [];
-    private enable = true;
-    private selectElements = new Set<HTMLElement>();
-
-    constructor(private preview: Preview) { }
-
-    initElement(element: HTMLElement) {
-        element.style.outlineOffset = "1px";
-        element.onclick = (e) => {
-            e.stopPropagation();
-            if (e.altKey) {
-                this.toggleSelect(element, { sendEvent: true });
-            } else {
-                this.selectOne(element, { sendEvent: true });
-            }
-        };
-        element.onmouseenter = () => {
-            if (this.enable) {
-                this.addHoverElement(element);
-            }
-        };
-        element.onmouseleave = () => {
-            if (this.enable) {
-                this.popHoverElement(element);
-            }
-        };
-    }
-
-    enableHover() {
-        this.enable = true;
-    }
-
-    disableHover() {
-        this.enable = false;
-    }
-
-    private addHoverElement(element: HTMLElement) {
-        this.hoverElements.unshift(element);
-        this.refreshHoverElements();
-    }
-
-    private popHoverElement(element: HTMLElement) {
-        const i = this.hoverElements.lastIndexOf(element);
-        if (i != -1) {
-            for (const e of this.hoverElements.splice(0, i + 1)) {
-                if (!this.selectElements.has(element)) {
-                    element.style.outline = "none";
-                }
-            }
-        }
-        this.refreshHoverElements();
-    }
-
-    select(element: HTMLElement, opt?: { sendEvent: boolean }) {
-        this.selectElements.add(element);
-        element.style.outline = "2px dashed green";
-        if (opt?.sendEvent) {
-            this.sendSelectEvent();
-        }
-    }
-
-    selectOne(element: HTMLElement, opt?: { sendEvent: boolean }) {
-        this.unSelectAll();
-        this.selectElements.add(element);
-        element.style.outline = "2px dashed green";
-        if (opt?.sendEvent) {
-            this.sendSelectEvent();
-        }
-    }
-
-    toggleSelect(element: HTMLElement, opt?: { sendEvent: boolean }) {
-        if (this.selectElements.has(element)) {
-            this.unSelect(element);
-        } else {
-            this.select(element);
-        }
-        if (opt?.sendEvent) {
-            this.sendSelectEvent();
-        }
-    }
-
-    unSelect(element: HTMLElement, opt?: { sendEvent: boolean }) {
-        if (this.selectElements.has(element)) {
-            this.selectElements.delete(element);
-            element.style.outline = "none";
-            if (opt?.sendEvent) {
-                this.sendSelectEvent();
-            }
-        }
-    }
-
-    unSelectAll(opt?: { sendEvent: boolean }) {
-        for (let element of this.selectElements) {
-            this.unSelect(element);
-        }
-        if (opt?.sendEvent) {
-            this.sendSelectEvent();
-        }
-    }
-
-    private sendSelectEvent() {
-        this.preview.onSelectChange?.(Array.from(this.selectElements));
-    }
-
-    private refreshHoverElements() {
-        this.hoverElements = this.hoverElements.filter(e => this.preview.elementOptionIds.has(e));
-        if (this.hoverElements.length && !this.selectElements.has(this.hoverElements[0])) {
-            this.hoverElements[0].style.outline = "1.5px dashed rgb(255,0,0)";
-        }
-        if (this.hoverElements.length > 1 && !this.selectElements.has(this.hoverElements[1])) {
-            this.hoverElements[1].style.outline = "1.5px dashed rgba(255,0,0,0.4)";
-        }
-        if (this.hoverElements.length > 2) {
-            this.hoverElements.slice(2).filter(r => !this.selectElements.has(r)).forEach((e) => {
-                e.style.outline = "none";
-            });
-        }
-    }
-
-    reset(opt?: { sendEvent: boolean }): void {
-        for (const element of this.hoverElements) {
-            element.style.outline = "none";
-        }
-        for (const element of this.selectElements) {
-            element.style.outline = "none";
-        }
-        this.hoverElements = [];
-        this.selectElements.clear();
-        if (opt?.sendEvent) {
-            this.sendSelectEvent();
-        }
-    }
-
-    getSelectElements(): HTMLElement[] {
-        return [...this.selectElements.values()];
-    }
-}

package/axis-components/design/shortcut-key.ts

@@ -1,160 +0,0 @@
-import { Example, ExampleBuilder, isEquals } from "ngx-axis-appforge/core";
-import { Design } from "./design";
-
-export class ShortcutKey {
-
-    constructor(private design: Design) { }
-
-    private cutNodeIds?: string[];
-
-    onKeyPress(e: KeyboardEvent) {
-        const isInput = (e.target as HTMLElement).matches(
-            'input:not([disabled]), textarea:not([disabled])'
-        );
-        if (isInput) {
-            return;
-        }
-        let event;
-        if (e.key == "Backspace") {
-            event = "delete";
-        } else if (e.key == "z" && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
-            event = "undo";
-        } else if (e.key.toLowerCase() == "z" && (e.metaKey || e.ctrlKey) && e.shiftKey) {
-            event = "redo";
-        } else if (e.key == "c" && e.metaKey && e.ctrlKey) {
-            event = "onlyPreview";
-        } else if (e.key == "r" && e.metaKey && e.ctrlKey) {
-            event = "forceRender";
-        } else if (e.key == "h" && e.metaKey && e.ctrlKey) {
-            event = "shortcutKeysInfo";
-        } else if (e.key == "c" && (e.metaKey || e.ctrlKey) && !getSelection()?.toString()) {
-            event = "copy";
-        } else if (e.key == "x" && (e.metaKey || e.ctrlKey)) {
-            event = "cut";
-        } else if (e.key == "v" && (e.metaKey || e.ctrlKey)) {
-            event = "paste";
-        }
-        // console.log(event, e.key, "meta", e.metaKey, "ctrl", e.ctrlKey, "shift", e.shiftKey)
-        if (event) {
-            e.preventDefault();
-            e.stopPropagation();
-            this.doEvent(event);
-        }
-    }
-
-    private doEvent(event: string) {
-        switch (event) {
-            case "delete":
-                this.design.tree.removeSelected();
-                break;
-            case "undo":
-                this.design.tools.undo();
-                break;
-            case "redo":
-                this.design.tools.redo();
-                break;
-            case "onlyPreview":
-                this.onlyPreview();
-                break;
-            case "forceRender":
-                this.forceRender();
-                break;
-            case "shortcutKeysInfo":
-                this.shortcutKeysInfo();
-                break;
-            case "copy":
-                this.copy();
-                break;
-            case "cut":
-                this.cut();
-                break;
-            case "paste":
-                this.paste();
-                break;
-        }
-    }
-
-    onlyPreview() {
-        this.design.tools.onlyPreview.set(!this.design.tools.onlyPreview());
-    }
-    forceRender() {
-        this.design.preview.forceRender();
-    }
-    shortcutKeysInfo() {
-        this.design.tools.shortcutKeysModal.set(true);
-    }
-
-    copy() {
-        const { selected } = this.design.tree.selectListSelection;
-        const options = selected.map(nodeId => this.design.optionsNodes.get(nodeId)).map(node => node?.options);
-        this.design.clipboard.copy(JSON.stringify(options, null, 2));
-    }
-
-    cut() {
-        const { selected } = this.design.tree.selectListSelection;
-        this.cutNodeIds = selected;
-        const options = selected.map(nodeId => this.design.optionsNodes.get(nodeId)).map(node => node?.options);
-        this.design.clipboard.copy(JSON.stringify(options, null, 2));
-    }
-
-    async paste() {
-        try {
-            const text = await navigator.clipboard.readText();
-            if (text) {
-                const j = JSON.parse(text);
-                let objs: any[] | undefined;
-                if (Array.isArray(j)) {
-                    objs = j.filter(r => this.isComponentObj(r));
-                } else if (this.isComponentObj(j)) {
-                    objs = [j];
-                }
-                if (objs?.length && this.design.tree.selectListSelection.selected.length > 0) {
-                    if (this.cutNodeIds?.length && isEquals(objs.map(r => r.id), this.cutNodeIds)) {
-                        this.design.onNodesMove(this.cutNodeIds);
-                        this.cutNodeIds = undefined;
-                    } else {
-                        const examples = objs.map(r => this.parseToExample(r));
-                        this.design.onExamplePaste(examples);
-                    }
-                }
-            }
-        } catch (e) {
-            console.error(e);
-        }
-    }
-
-    private isComponentObj(obj: any): boolean {
-        return obj && obj.hasOwnProperty("id") && obj.hasOwnProperty("component");
-    }
-
-    private parseToExample(obj: any): Example {
-        return {
-            builder: componentIdBuilder => {
-                if (componentIdBuilder) {
-                    return this.recursionParse(obj, componentIdBuilder)
-                }
-                return obj;
-            }
-        };
-    }
-
-    private recursionParse(obj: any, idBuilder: (component: string, offset?: number) => string, components = new Map<string, number>()): any {
-        if (this.isComponentObj(obj)) {
-            const offset = (components.get(obj.component) ?? 0) + 1;
-            components.set(obj.component, offset)
-            obj.id = idBuilder(obj.component, offset);
-        }
-        if (obj) {
-            if (Array.isArray(obj)) {
-                for (let i = 0; i < obj.length; i++) {
-                    obj[i] = this.recursionParse(obj[i], idBuilder, components);
-                }
-            } else if (typeof obj == "object") {
-                for (const en of Object.entries(obj)) {
-                    obj[en[0]] = this.recursionParse(en[1], idBuilder, components);
-                }
-            }
-        }
-        return obj;
-    }
-}

package/axis-components/design/toolbar/toolbar.css

@@ -1,24 +0,0 @@
-.tools {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-}
-
-::ng-deep .history-popover .ant-popover-inner-content {
-    width: 100%;
-    padding: 12px 0;
-}
-
-.history-item {
-    padding: 0 12px;
-    cursor: pointer;
-}
-
-.history-item:hover {
-    background-color: var(--ant-primary-1);
-}
-
-.active {
-    color: var(--ant-primary-color);
-    pointer-events: none;
-}