ngx-axis-appforge 0.0.3 → 0.0.4

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

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

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

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

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

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

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

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

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

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