ngx-axis-appforge 0.0.0

package/core/directives/scope.ts

@@ -0,0 +1,432 @@
+import { Directive, effect, ElementRef, inject, input, isSignal, OnDestroy, OnInit, signal, WritableSignal } from '@angular/core';
+import { BehaviorSubject, debounceTime, filter, isObservable, map, merge, NEVER, Observable, of, Subject, Subscription, switchMap, take } from 'rxjs';
+import { Base } from '../base/base';
+import { BaseOptions } from '../models/base.options';
+import { DataSourceOptions } from '../models/data-source.options';
+import { EventHandlerOptions } from '../models/event.options';
+import { StaticDataSourceOptions } from '../models/static-data-source.options';
+import { AXIS_INJECT_DATA_TOKEN, AXIS_INJECT_FUNC_TOKEN, AXIS_SCRIPTS_TOKEN } from '../share/tokens';
+import { fn } from '../utils/dynamic.util';
+import { loadScripts, syncLoadScript } from '../utils/scripts-loader';
+import { DesignBuilder } from '../base/design-builder';
+import { sendApi } from '../utils/http.utils';
+import { HttpClient } from '@angular/common/http';
+import { Initobs } from '../models/initobs';
+import { copy, isEquals } from '../utils/object.utils';
+
+@Directive({
+  selector: '[axisScope]'
+})
+export class ScopeDirective implements OnInit, OnDestroy {
+
+  constructor() {
+    effect(() => {
+      if (!this.oriDataSources || !isEquals(this.oriDataSources, this.dataSources())) {
+        this.oriDataSources = copy(this.dataSources(), true);
+        this.initDs();
+      }
+    });
+  }
+  private oriDataSources?: DataSourceOptions[];
+  private readonly http = inject(HttpClient);
+  readonly axisScope = input.required<string>();
+  readonly scopeName = input.required<string>();
+  readonly isRoot = input(false);
+  private readonly _parentScope = inject(ScopeDirective, { optional: true, skipSelf: true });
+  readonly scripts = inject(AXIS_SCRIPTS_TOKEN, { optional: true });
+  readonly injectData = inject(AXIS_INJECT_DATA_TOKEN, { optional: true });
+  readonly injectFuncs = inject(AXIS_INJECT_FUNC_TOKEN, { optional: true });
+  readonly dataSources = input<DataSourceOptions[]>();
+  private readonly designBuilder = inject(DesignBuilder, { optional: true });
+  private readonly ds = new Map<string, BehaviorSubject<any>>();
+  private readonly updateDs = new Map<string, Subject<DataSourceOptions>>();
+  private dynamicOptionsSubs: Subscription[] = [];
+  private rootSubs: Subscription[] = [];
+  private injectDataSub?: Subscription;
+  private readonly instanceMap = new Map<string, Base<BaseOptions>>();
+  private readonly changeSubject = new BehaviorSubject<void>(void (0));
+  private readonly latestUpdateOptions = new Map<string, DataSourceOptions>();
+  private get parentScope(): ScopeDirective | null {
+    return this.isRoot() ? null : this._parentScope;
+  }
+
+  host = inject(ElementRef)
+
+  ngOnInit(): void {
+    this.designBuilder?.buildScope(this);
+  }
+
+  private initDs(): void {
+    for (const s of this.dynamicOptionsSubs.values()) {
+      s.unsubscribe();
+    }
+    this.dynamicOptionsSubs = [];
+    for (const oriopt of this.dataSources() ?? []) {
+      let needConnect = false;
+      if (!this.updateDs.has(oriopt.name)) {
+        needConnect = true;
+        this.updateDs.set(oriopt.name, new Subject());
+      }
+      const updateSubject = this.updateDs.get(oriopt.name)!;
+      if (!this.ds.has(oriopt.name)) {
+        needConnect = true;
+        this.ds.set(oriopt.name, new BehaviorSubject(undefined));
+      }
+      if (needConnect) {
+        this.rootSubs.push(updateSubject.pipe(
+          switchMap(opt => this.updateDataSource(opt)))
+          .subscribe(this.ds.get(oriopt.name)!));
+      }
+      if (oriopt.type != 'local') {
+        delete oriopt.data;
+      }
+      const io = this.dynamicOptions(oriopt, oriopt.type == 'api');
+      if (io.init !== undefined) {
+        updateSubject.next(io.init);
+      }
+      if (io.obs) {
+        this.dynamicOptionsSubs.push(io.obs.pipe(debounceTime(100)).subscribe(updateSubject))
+      }
+    }
+
+    this.changeSubject.next();
+  }
+
+  private updateDataSource(opt: DataSourceOptions): Observable<any> {
+    return new Observable(sub => {
+      this.latestUpdateOptions.set(opt.name, opt);
+      switch (opt.type) {
+        case 'api':
+          if (opt.api?.url) {
+            this.rootSubs.push(sendApi(opt.api, this.http).subscribe({
+              next: (res) => sub.next(res),
+            }));
+          }
+          break;
+        case 'local':
+          if (opt.data !== undefined) {
+            sub.next(opt.data);
+          }
+          break;
+        case 'inject':
+          if (opt.injectField) {
+            this.injectDataSub?.unsubscribe();
+            if (this.injectData) {
+              if (isObservable(this.injectData)) {
+                this.injectDataSub = this.injectData
+                  .subscribe((injectData: any) => {
+                    sub.next(injectData?.[opt.injectField!]);
+                  });
+              } else {
+                sub.next(this.injectData?.[opt.injectField]);
+              }
+            }
+          }
+          break;
+        case 'cache':
+          if (opt.cacheKey) {
+            const cacheData = localStorage.getItem(opt.cacheKey);
+            if (cacheData != null) {
+              sub.next(JSON.parse(cacheData));
+            }
+          }
+          break;
+      }
+    });
+  }
+
+  get(name: string, init = true): Observable<any> | undefined {
+    let res: Observable<any> | undefined;
+    if (this.ds.has(name)) {
+      res = this.ds.get(name)?.asObservable();
+    } else {
+      res = this.parentScope?.get(name, false);
+    }
+    if (!res && init) {
+      this.ds.set(name, new BehaviorSubject(undefined));
+      res = this.ds.get(name)!.asObservable();
+    }
+    return res;
+  }
+
+  snapshot(name: string): any {
+    if (this.ds.has(name)) {
+      return this.ds.get(name)!.value;
+    }
+    return this.parentScope?.snapshot(name);
+  }
+
+  snapshotAll(): any {
+    const data: any = {};
+    this.ds.forEach((d, name) => {
+      data[name] = d.value;
+    });
+    if (this.parentScope) {
+      return Object.assign(this.parentScope.snapshotAll(), data);
+    } else {
+      return data;
+    }
+  }
+
+  getSnapshoptAllWithScopeId(scopeId: string): any {
+    if (this.axisScope() == scopeId) {
+      const data: any = {};
+      this.ds.forEach((d, name) => {
+        data[name] = d.getValue();
+      });
+      return data;
+    } else {
+      return this.parentScope?.getSnapshoptAllWithScopeId(scopeId)
+    }
+  }
+
+  getAllWithScopeId(scopeId: string): Observable<any> {
+    if (this.axisScope() == scopeId) {
+      return this.changeSubject.pipe(switchMap(_ => this.ds.size ? merge(...this.ds.values()) : of(null)),
+        map(() => this.getSnapshoptAllWithScopeId(scopeId)));
+    } else {
+      return this.parentScope?.getAllWithScopeId(scopeId) ?? NEVER;
+    }
+  }
+
+  dynamicField(obj: any, field: string, deep = false, tempDataSource?: any): Initobs {
+    const res: Initobs = {
+      firstDefinedFields: [],
+      definedFields: [],
+    };
+    if (Object.hasOwn(obj, `$${field}`)) {
+      const $obj = obj[`$${field}`];
+      if (typeof $obj == 'object' && $obj) {
+        if ($obj.listen && Object.keys($obj.listen).length) {
+          res.firstDefinedFields = [];
+          res.definedFields = [];
+          res.obs = merge(...Object.entries($obj.listen).map(en => {
+            const obs = this.get(en[0])!;
+            switch (en[1]) {
+              case "firstDefined":
+                res.firstDefinedFields?.push(en[0]);
+                return obs.pipe(filter(v => v !== undefined), take(1));
+              case "defined":
+                res.definedFields?.push(en[0]);
+                return obs.pipe(filter(v => v !== undefined));
+              default:
+                return obs;
+            }
+          })).pipe(map(_ => this.runFnWithImports($obj.fn, Object.assign(this.snapshotAll(), tempDataSource), $obj.imports)));
+        }
+        if (!$obj.listen || Object.entries($obj.listen).every(en => en[1] == "aways" || (!this.ds.get(en[0])?.closed && this.ds.get(en[0])?.value !== undefined))) {
+          res.init = this.runFnWithImports($obj.fn, Object.assign(this.snapshotAll(), tempDataSource), $obj.imports);
+        }
+        return res;
+      } else {
+        throw new Error(`$${field} is not a valid dynamic field`);
+      }
+    }
+    if (deep && obj[field] && typeof obj[field] == "object" && !Array.isArray(obj[field])) {
+      return this.dynamicOptions(obj[field], true, tempDataSource);
+    }
+    res.init = obj[field];
+    return res;
+  }
+
+  snapshotField(obj: any, field: string, tempDataSource?: any) {
+    if (Object.hasOwn(obj, `$${field}`)) {
+      const $obj = obj[`$${field}`];
+      if (typeof $obj == 'object') {
+        const args = this.snapshotAll();
+        if (tempDataSource) {
+          Object.assign(args, tempDataSource)
+        }
+        return this.runFnWithImports($obj.fn, args, $obj.imports);
+      }
+      throw new Error(`$${field} is not a valid dynamic field`);
+    } else {
+      if (obj[field] && typeof obj[field] == "object" && !Array.isArray(obj[field])) {
+        return this.snapshotOptions(obj[field], tempDataSource);
+      }
+    }
+    return obj[field];
+  }
+
+  bindOptions(optionsConfig: any, options: any, tempDataSource?: any): Subscription[] {
+    const subs: Subscription[] = [];
+    for (const en of Object.entries(options)) {
+      if (isSignal(en[1])) {
+        const io = this.dynamicField(optionsConfig, en[0], false, tempDataSource);
+        if (io.init !== undefined) {
+          (en[1] as WritableSignal<any>).set(io.init);
+        }
+        if (io.obs) {
+          subs.push(io.obs.pipe(filter(v => v !== undefined))
+            .subscribe((en[1] as WritableSignal<any>).set));
+        }
+      } else {
+        options[en[0]] = this.snapshotField(optionsConfig, en[0], tempDataSource);
+      }
+    }
+    return subs;
+  }
+
+  dynamicOptions(optionsConfig: any, deep = false, tempDataSource?: any): Initobs {
+    const res: Initobs = {
+      definedFields: [],
+      firstDefinedFields: []
+    };
+    const obs: Observable<any>[] = [];
+    const empptObj: any = {};
+    let setInit = true;
+    for (const en of Object.entries(optionsConfig)) {
+      if (en[1] === undefined) {
+        continue;
+      }
+      const field = en[0].replace(/^\$/, '');
+      const r = this.dynamicField(optionsConfig, field, deep, tempDataSource);
+      if (r.init !== undefined) {
+        empptObj[field] = r.init;
+      } else {
+        setInit = false;
+      }
+      if (r.obs) {
+        if (r.definedFields) {
+          res.definedFields = res.definedFields?.concat(r.definedFields);
+        }
+        if (r.firstDefinedFields) {
+          res.firstDefinedFields = res.firstDefinedFields?.concat(r.firstDefinedFields);
+        }
+        obs.push(r.obs.pipe(map(v => ({ [field]: v }))));
+      }
+    }
+    if (setInit && Object.keys(empptObj).length) {
+      res.init = empptObj;
+    }
+    if (obs.length) {
+      res.obs = merge(...obs).pipe(map(v => Object.assign(empptObj, v)), filter(_ => {
+        for (const f of res.definedFields!) {
+          if (this.ds.get(f)?.value === undefined) {
+            return false;
+          }
+        }
+        for (const f of res.firstDefinedFields!) {
+          if (this.ds.get(f)?.value === undefined) {
+            return false;
+          } else {
+            res.firstDefinedFields = res.firstDefinedFields?.filter(ff => ff != f);
+          }
+        }
+        return true;
+      }));
+    }
+    return res;
+  }
+
+  snapshotOptions(optionsConfig: any, tempDataSource?: any): any {
+    const res: any = {};
+    for (const en of Object.entries(optionsConfig)) {
+      const field = en[0].replace(/^\$/, '')
+      res[field] = this.snapshotField(optionsConfig, field, tempDataSource);
+    }
+    return res;
+  }
+
+  registInstance(id: string, instance: Base<BaseOptions>) {
+    if (id) {
+      this.instanceMap.set(id, instance);
+    }
+  }
+
+  unRegistInstance(id: string) {
+    this.instanceMap.delete(id);
+  }
+
+  findInstance(id: string): Base<BaseOptions> | undefined {
+    return this.instanceMap.get(id) ?? this.parentScope?.findInstance(id);
+  }
+
+  findScope(scopeId: string): ScopeDirective | undefined {
+    if (this.axisScope() == scopeId) {
+      return this;
+    } else {
+      return this.parentScope?.findScope(scopeId);
+    }
+  }
+
+  ngOnDestroy(): void {
+    for (const s of this.dynamicOptionsSubs.values()) {
+      s.unsubscribe();
+    }
+    for (const s of this.rootSubs.values()) {
+      s.unsubscribe();
+    }
+    this.changeSubject.unsubscribe();
+    for (const d of this.ds.values()) {
+      d.unsubscribe();
+    }
+  }
+
+  onEvents(e: EventHandlerOptions<any>): Observable<boolean> | undefined {
+    if (e.id === this.axisScope() || !e.id) {
+      switch (e.name) {
+        case "setDataSource":
+          return this.setDataSourceEventHandler(e.data);
+        case "refreshDataSource":
+          return this.refreshDataSourceEventHandler(e.data);
+        default:
+          return undefined;
+      }
+    } else {
+      return this.parentScope?.onEvents(e) ?? of(true);;
+    }
+  }
+
+  private setDataSourceEventHandler(data: StaticDataSourceOptions): Observable<boolean> {
+    if (this.ds.has(data.name)) {
+      this.ds.get(data.name)!.next(data.data);
+      const opt = this.latestUpdateOptions.get(data.name);
+      if (opt?.type == "cache" && opt.cacheKey) {
+        localStorage.setItem(opt.cacheKey, JSON.stringify(data.data));
+      }
+    } else {
+      this.ds.set(data.name, new BehaviorSubject(data.data));
+      this.changeSubject.next();
+    }
+    return of(true);
+  }
+
+  private refreshDataSourceEventHandler(data: { name: string, setNull: boolean }): Observable<boolean> {
+    if (this.latestUpdateOptions.has(data.name)) {
+      if (data.setNull) {
+        this.ds.get(data.name)!.next(null);
+      }
+      this.updateDs.get(data.name)?.next(this.latestUpdateOptions.get(data.name)!);
+    }
+    return of(true);
+  }
+
+  async preloadImports(obj: any): Promise<void> {
+    if (this.scripts) {
+      const imports = new Set<string>();
+      Object.entries(obj).forEach(([key, value]) => {
+        if (key.startsWith("$")) {
+          ((value as any).imports as any[])?.forEach(i => imports.add(i));
+        }
+      });
+      if (imports.size) {
+        await Promise.all(Array.from(imports.values()).map(i => loadScripts(this.scripts![i] + ".js")));
+      }
+    }
+  }
+
+  runFnWithImports(fnstr: any, args: any, imports: string[]): any {
+    const libs: string[] = [];
+    for (const i of imports ?? []) {
+      if (this.scripts?.hasOwnProperty(i)) {
+        const js = syncLoadScript(`${this.scripts[i]}.js`);
+        if (js) {
+          libs.push(js);
+        }
+      }
+    }
+    return fn(`${libs.join("\n")}\n${fnstr}`, Object.assign({}, args, this.injectFuncs), true);
+  }
+
+}

package/core/models/api.options.ts

@@ -0,0 +1,5 @@
+export interface ApiOptions {
+    url: string;
+    method?: "get" | "post" | "put" | "delete";
+    body?: any;
+}

package/core/models/base.options.ts

@@ -0,0 +1,11 @@
+import { signal } from "@angular/core";
+import { TriggeEventsOptions } from "./trigge-events.options";
+
+export class BaseOptions {
+    component = "";
+    id = "";
+    inuse = signal(true);
+    requiredPermissions: string[] = [];
+    triggeEvents = signal<TriggeEventsOptions | undefined>(undefined);
+    style = signal<any>(undefined);
+}

package/core/models/cmplib.ts

@@ -0,0 +1,7 @@
+import { ExampleGroup } from "./examples";
+
+export interface Cmplib {
+    name: string;
+    cmpMap: { [component: string]: () => Promise<any> };
+    examples: ExampleGroup[];
+}

package/core/models/data-source.options.ts

@@ -0,0 +1,11 @@
+import { ApiOptions } from "./api.options";
+
+export interface DataSourceOptions {
+    name: string;
+    skipOnExists?: boolean;
+    type: "api" | "local" | "inject" | "cache";
+    api?: ApiOptions;
+    data?: any;
+    injectField?: string;
+    cacheKey?: string;
+}

package/core/models/data.options.ts

@@ -0,0 +1,6 @@
+import { signal } from "@angular/core";
+import { BaseOptions } from "./base.options";
+
+export class DataOptions extends BaseOptions {
+    data = signal<any>(undefined);
+}

package/core/models/design-build.ts

@@ -0,0 +1,26 @@
+import { OptionsNode } from "./options-node";
+
+export interface DesignBuildResult {
+    treeNode: OptionsNode;
+    next?: NextInfo[];
+    newScopes?: ScopeInfo[];
+}
+
+export interface DesignBindElementsResult {
+    [id: string]: { element?: HTMLElement, dropElement?: HTMLElement }
+}
+
+export interface NextInfo {
+    currentObject?: any;
+    parentObject?: any;
+    indexOfParent?: string | number;
+    parentId?: string;
+    scopeId?: string;
+}
+
+export interface ScopeInfo {
+    scopeId: string;
+    scopeName: string;
+    parentScopeId?: string;
+    ds?: any;
+}

package/core/models/design-config.ts

@@ -0,0 +1,14 @@
+import { DesignBindElementsResult, DesignBuildResult, NextInfo } from "./design-build";
+import { EventHandlerDesc } from "./event-desc";
+
+export interface DesignConfig {
+
+    componentName: string;
+
+    eventHandlerDescs?: { [name: string]: EventHandlerDesc };
+
+    buildOptionsNodes?(nextInfo: NextInfo): DesignBuildResult;
+
+    bindElementsOptionsNode?(element: HTMLElement, options: any): DesignBindElementsResult;
+
+}

package/core/models/design-tree-node.ts

@@ -0,0 +1,16 @@
+import { OptionsNode } from "./options-node";
+
+export interface FlatNode {
+    expandable: boolean;
+    id: string;
+    title: string;
+    icon?: string;
+    level: number;
+}
+
+export class FilteredTreeResult {
+    constructor(
+        public treeData: OptionsNode[],
+        public needsToExpanded: string[] = []
+    ) { }
+}

package/core/models/event-desc.ts

@@ -0,0 +1,28 @@
+import { Type } from "@angular/core";
+import { FunFieldValueBase } from "../base/funfield-value-base";
+
+export interface EventDesc {
+    name: string;
+    title: string;
+    noListen?: boolean;
+    ds?: any;
+}
+
+export interface EventHandlerDesc {
+    name: string;
+    title: string;
+    icon?: string;
+    target: "service" | "component" | "scope";
+    targetComponent?: string;
+    dataComponent?: Type<FunFieldValueBase>;
+    events?: EventDesc[];
+    formStyle?: {
+        width?: string;
+        labelSpan?: number;
+    }
+}
+
+export interface EventHandlerDescGroup {
+    groupName: string;
+    handlerDescs: EventHandlerDesc[];
+}

package/core/models/event-handler.ts

@@ -0,0 +1,6 @@
+import { Observable } from "rxjs";
+import { EventHandlerOptions } from "./event.options";
+
+export interface EventsHandler {
+    onEvents(e: EventHandlerOptions<any>): Observable<boolean> | undefined;
+}

package/core/models/event.options.ts

@@ -0,0 +1,14 @@
+import { Base } from "../base/base";
+import { BaseOptions } from "./base.options";
+import { TriggeEventsOptions } from "./trigge-events.options";
+
+export interface EventHandlerOptions<T> {
+    name: string;
+    disabled?: boolean;
+    target: "service" | "component" | "scope";
+    data?: T;
+    id?: string;
+    triggeEvents?: TriggeEventsOptions;
+    tempDataSource?: any;
+    ref?: Base<BaseOptions>;
+}

package/core/models/examples.ts

@@ -0,0 +1,21 @@
+export interface ExampleGroup {
+    groupName: string;
+    children: ExampleDesc[];
+}
+
+export interface ExampleDesc {
+    component: string;
+    coverImg: string;
+    span: number;
+    height: number;
+    tags?: string[];
+    example: Example;
+    moreExamples?: Example[];
+}
+
+export interface Example {
+    name?: string,
+    builder: ExampleBuilder
+}
+
+export type ExampleBuilder = (componentIdBuilder?: (component: string, offset?: number) => string) => any; 

package/core/models/form-registe.options.ts

@@ -0,0 +1,12 @@
+import { AbstractControl } from "@angular/forms";
+
+export interface RegisteValueAccessOptions {
+    initValue?: any;
+    validFn?: (control: AbstractControl) => boolean;
+}
+
+export interface RegisteFormControlOptions {
+    name: string;
+    control?: AbstractControl;
+    initValue?: any;
+}

package/core/models/fun-field.options.ts

@@ -0,0 +1,6 @@
+export interface FunFieldOptions {
+    [field: string]: {
+        defaultValue?: any;
+        child?: FunFieldOptions;
+    }
+}

package/core/models/initobs.ts

@@ -0,0 +1,8 @@
+import { Observable } from "rxjs";
+
+export interface Initobs {
+    init?: any;
+    obs?: Observable<any>;
+    firstDefinedFields?: string[];
+    definedFields?: string[];
+}