@hatiolab/things-scene 3.0.0-beta.0 → 3.0.0-beta.4

package/things-scene.d.ts

@@ -0,0 +1,494 @@
+import { property } from 'lodash'
+
+declare module '@hatiolab/things-scene' {
+  type Constructor<T = {}> = new (...args: any[]) => T
+  type Class = { new (...args: any[]): any }
+  type Properties = { [key: string]: any }
+  type State = Properties
+  type Style = Properties
+
+  type ChangeFunction = (selector: string, value: any, self: any) => Component[]
+
+  const MODE_VIEW = 0
+  const MODE_EDIT = 1
+  const MODE_SHIFT = 2
+
+  enum SCENE_MODE {
+    VIEW = 0,
+    EDIT = 1,
+    SHIFT = 2
+  }
+
+  type FITMODE = 'both' | 'ratio' | 'width' | 'height' | 'center' | 'none'
+  type DIMENSION = { x: number; y: number }
+  type SCALE = DIMENSION
+  type TRANSLATE = DIMENSION
+  type POSITION = DIMENSION
+  type POINT = DIMENSION
+  type BOUNDS = { left: number; top: number; width: number; height: number }
+
+  type ComponentNature = {
+    mutable?: boolean
+    resizable?: boolean
+    rotatable?: boolean
+    properties?: {
+      type: string
+      label: string
+      name: string
+      placeholder?: string
+      observe?: (this: HTMLElement, value: any) => void
+      property?:
+        | {
+            options?: any
+            [key: string]: any
+          }
+        | string
+    }[]
+    'value-property'?: string
+    valueProperty?: string
+    help?: string
+  }
+
+  interface LAYOUT {
+    reflow: (container: Container) => void
+    capturables?: (container: Container) => Component[]
+    drawables?: (container: Container) => Component[]
+    isStuck?: (component: Container) => boolean
+    keyNavigate?: (container: Container, component: Component, e: KeyboardEvent) => Component | undefined
+    joinType?: boolean
+  }
+
+  interface LayoutRegistry {
+    register(name: string, layout: LAYOUT): void
+    unregister(name: string): void
+    get(name: string): LAYOUT
+    list(): { [name: string]: LAYOUT }
+  }
+
+  const Layout: LayoutRegistry
+
+  const AbsoluteLayout: LAYOUT & { ABSOLUTE: boolean }
+  const TableLayout: LAYOUT
+  const CardLayout: LAYOUT
+  const HTMLAbsoluteLayout: LAYOUT
+  const LinearHorizontal: LAYOUT
+  const LinearVertical: LAYOUT
+
+  type AnimationConfig = {
+    duration?: number
+    delay?: number
+    step: Function
+    delta: 'linear' | 'quad' | 'circ' | 'back' | 'bounce' | 'elastic' | Function
+    ease: 'out' | 'inout'
+    options?: object
+    repeat?: boolean
+  }
+
+  type ControlHandler = {
+    ondragstart?(point: POSITION, index: number, component: Component): void
+    ondragmove?(point: POSITION, index: number, component: Component): void
+    ondragend?(point: POSITION, index: number, component: Component): void
+  }
+
+  interface Control extends DIMENSION {
+    handler: ControlHandler
+  }
+
+  function create({
+    target,
+    model,
+    style,
+    layers,
+    handlers,
+    mode,
+    refProvider,
+    baseUrl,
+    fitMode
+  }: {
+    target?: HTMLElement
+    model: Object
+    style?: any
+    layers?: Array<any>
+    handlers?: Array<any>
+    mode?: SCENE_MODE
+    refProvider?: any
+    baseUrl?: string | undefined
+    fitMode?: FITMODE
+  }): Scene
+
+  function error(...args: any[]): void
+  function warn(...args: any[]): void
+  function debug(...args: any[]): void
+
+  class ScriptLoader {
+    static load(scripts: string | Array<string>, styles?: string | Array<string>): Promise<void>
+  }
+
+  class Anchor {
+    constructor({ component, anchor, position }: { component: Component; anchor: string; position: POSITION })
+
+    position: POSITION
+  }
+
+  class Model {
+    static compile(model: Model, context?: any): Component
+
+    type?: string;
+    [key: string]: any
+  }
+
+  class ApplicationContext {
+    readonly refProvider: any
+    readonly isViewMode: boolean
+
+    mode: SCENE_MODE
+    baseUrl: string
+
+    dispose(): void
+  }
+
+  /* mixins */
+
+  function RectPath<TBase extends Constructor>(Base: TBase): TBase
+
+  function ValueHolder<TBase extends Constructor>(
+    Base: TBase
+  ): {
+    new (...args: any[]): {
+      value: number
+      animValue: number
+      animOnValueChange(value: number, animFromBase: boolean, base: number): void
+    }
+  } & TBase
+
+  function DataSource<TBase extends Constructor>(
+    Base: TBase
+  ): {
+    new (...args: any[]): {
+      isDataSource(): boolean
+    }
+  } & TBase
+
+  function MoveHandle<TBase extends Constructor>(Base: TBase): TBase
+
+  function MixinHTMLElement<TBase extends Constructor>(
+    Base: TBase
+  ): {
+    new (...args: any[]): {
+      get tagName(): string
+      element: HTMLElement
+
+      createElement(): void
+      userInputEventHandler(e: Event): void
+      reposition(): void
+      disposeElement(): void
+    }
+  } & TBase
+
+  function MixinEvent<TBase extends Constructor>(
+    Base: TBase
+  ): {
+    new (...args: any[]): {
+      on(name: string, callback: Function, context?: any): void
+      off(name: string, callback: Function, context?: any): void
+      once(name: string, callback: Function, context?: any): void
+      trigger(name: string, ...others: any[]): void
+    }
+  } & TBase
+
+  /* components */
+
+  class Component extends MixinEvent(Object) {
+    static register(type: string, Clazz: typeof Component): void
+    static memoize(base: any, property: string, needClone: boolean): void
+    static drawStroke(context: CanvasRenderingContext2D, style: Style): void
+
+    state: Properties
+    bounds: BOUNDS
+    textBounds: BOUNDS
+    root: RootContainer
+    rootModel: ModelLayer
+    parent: Container
+    app: ApplicationContext /* application context */
+    model: Model
+    hierarchy: Model
+    path: Array<DIMENSION>
+    anchors: Array<Anchor>
+    hidden: boolean
+
+    get nature(): ComponentNature
+
+    get data(): any
+    set data(data: any)
+
+    get center(): POINT
+    set center(point: POINT)
+
+    get controls(): Array<Control> | undefined
+    get hasTextProperty(): boolean
+
+    isRootModel(): boolean
+    isContainer(): boolean
+    isLine(): boolean
+    isLayer(): boolean
+    is3dish(): boolean
+
+    ready(): void
+    dispose(): void
+    getState(prop: string): any
+    setState(props: Properties | any, value?: any): void
+    get(prop: string): any
+    contains(x: number, y: number): boolean
+    set(props: Properties | string, value?: any): void
+    reposition(): void
+    clearCache(): void
+
+    transcoordP2S(x: number, y: number): POSITION
+    transcoordC2S(x: number, y: number, top?: RootContainer): POSITION
+
+    prerender(context: CanvasRenderingContext2D): void
+    render(context: CanvasRenderingContext2D): void
+    postrender(context: CanvasRenderingContext2D): void
+
+    executeMappings(force?: boolean): void
+    invalidate(): void
+    animate(config: AnimationConfig): {
+      start: Function /* start function */
+      stop: Function /* stop function */
+    }
+
+    onchange(after: Properties, before: Properties): void
+
+    drawImage(
+      context: CanvasRenderingContext2D,
+      image: HTMLImageElement,
+      left: number,
+      top: number,
+      width: number,
+      height: number
+    ): void
+    drawStroke(context: CanvasRenderingContext2D): void
+    drawFill(context: CanvasRenderingContext2D): void
+    drawText(context: CanvasRenderingContext2D): void
+
+    ondblclick(e: MouseEvent): void
+  }
+
+  class ContainerAbstract extends MoveHandle(RectPath(Component)) {
+    indexOf(component: Component): number
+    size(): number
+    addComponent(target: Component): void
+    removeComponent(target: Component): void
+    insertComponentAt(target: Component, idx: number): void
+    findById(id: string): Component | undefined
+    getAt(at: number): Component | undefined
+
+    add(components: Component[] | Component): Container
+    remove(components: Component[] | Component): Container
+
+    components: Component[]
+  }
+  class Container extends MixinHTMLElement(ContainerAbstract) {}
+  class RootContainer extends Container {
+    get selected(): Component[]
+    set selected(selected: Component[])
+  }
+
+  class Layer extends ContainerAbstract {
+    target: HTMLElement | null
+    canvas: HTMLCanvasElement | null
+
+    getContext(): CanvasRenderingContext2D
+  }
+
+  class ModelLayer extends Layer {
+    overlay: HTMLDivElement
+  }
+
+  class Text extends RectPath(Component) {}
+  class Shape extends Component {}
+  class Ellipse extends Shape {}
+  class Polygon extends Shape {}
+  class Donut extends Ellipse {}
+  class Rect extends RectPath(Shape) {}
+  class HTMLOverlayElement extends MixinHTMLElement(RectPath(Component)) {}
+
+  class HTMLOverlayContainer extends Container {
+    readonly layout: any
+  }
+
+  /* Scene API */
+
+  class Scene {
+    static readonly residents: WeakSet<Scene>
+
+    /**
+     * scene에 컴포넌트를 추가한다.
+     * @param models {object} - Component Model Object
+     * @param boundsOrOffset {object} - x, y, cx, cy, ...
+     * @param onto {string} - onto
+     */
+    add(
+      models: Model,
+      boundsOrOffset?: {
+        left?: number
+        top?: number
+        width?: number
+        height?: number
+        x?: number
+        y?: number
+        cx?: number
+        cy?: number
+      },
+      onto?: string
+    ): Component
+
+    /**
+     * scene의 컴포넌트를 복제한다.
+     * 현재 선택되어있는 컴포넌트가 복제되므로, 컴포넌트를 복제하기 위해서는
+     * 먼저 복제하고자하는 컴포넌트를 선택된 상태로 만든 후에(참조. {@link select} 메쏘드) 이 메쏘드를 호출한다.
+     */
+    duplicate(): void
+
+    /**
+     * scene의 컴포넌트를 삭제한다.
+     * 현재 선택되어있는 컴포넌트가 삭제되므로, 컴포넌트를 삭제하기 위해서는
+     * 먼저 삭제하고자하는 컴포넌트를 선택된 상태로 만든 후에(참조. {@link select} 메쏘드) 이 메쏘드를 호출한다.
+     */
+    remove(): void
+
+    animate(config: AnimationConfig): {
+      start: Function /* start function */
+      stop: Function /* stop function */
+    }
+
+    /**
+     * scene이 그려지고 있는 컨테이너를 전체화면 모드에서 표시되도록 한다.
+     */
+    fullscreen(): void
+
+    /**
+     * 파라미터로 주어지는 id를 가진 컴포넌트의 data 값을 변경한다.
+     * @param id {string} - component id
+     * @param value {any} - data value
+     */
+    variable(id: string, value: any): any
+
+    target: HTMLElement | null
+    scale: SCALE
+    translate: TRANSLATE
+
+    readonly unit: string /* 'px' */
+    readonly PPM: number
+    readonly PPI: number
+    readonly DPPX: number
+
+    mode: SCENE_MODE
+
+    /**
+     * Scene 모델의 단위(unit)을 감안한 기본 Scale 값을 제공한다.
+     * 통산 'mm', 'cm' 단위의 Scene은 각 값에 10배를 곱한 수치로 모델링된다.(값을 10으로 나눈값이 실제 단위와 일치한다.)
+     * unitScale의 의미는 scene에 unitScale값으로 scale하면, 각 단위값이 화면과 일치한다는 의미이다.
+     *
+     * 모델링의 수치단위가 픽셀이 아니고, mm, cm, inch 등의 단위인 경우에,
+     * 화면에서의 크기가 실물과 유사하게 보이는 수준의 기본 스케일을 제공하는 기능이다.
+     * 이 값은 내부적으로는, Ruler에서 눈금을 실제 자의 눈금과 일치시키기 위해서 사용한다.
+     */
+    readonly unitScale: string
+
+    /**
+     * scene이 그려질 모니터 화면의 크기정보 (inch)
+     * 예시) 17, 20, 24, 27, 30, ...
+     * @type {number}
+     */
+    screen: number
+
+    /**
+     * 컨테이너의 크기에 맞게 크기를 조정한다.
+     */
+    resize(): void
+
+    release(): void
+    dispose(): void
+
+    /* Selection Based API - Modeling APIs */
+
+    /**
+     * scene 내에서 선택된 컴포넌트의 리스트
+     * @type {object-array}
+     */
+    selected: Array<Component>
+
+    /**
+     * scene이 그리고 있는 컴포넌트 모델정보
+     * @type {object}
+     */
+    model: Component
+
+    /*
+     * root는 모델의 최상위 컨테이너인 모델레이어를 의미한다.
+     */
+    readonly root: Container
+
+    /*
+     * selector에 해당하는 모든 컴포넌트들을 찾는다.
+     * @params selector {string}
+     */
+    findAll(selector: string, component?: Component): Array<Component>
+
+    /*
+     * selector에 해당하는 첫번째 컴포넌트를 찾는다.
+     * @params selector {string}
+     */
+    findFirst(selector: string, ...others: any[]): Component
+
+    /*
+     * id를 갖는 컴포넌트를 찾는다.
+     * @params id {string}
+     */
+    findById(id: string): Component
+
+    /*
+     * scene이 그리는 모델 오브젝트를 JSON 텍스트로 리턴한다.
+     */
+    serialize(): string
+
+    on(event: string, listener: Function, context?: any): void
+    once(event: string, listener: Function, context?: any): void
+    off(event: string, listener?: Function, context?: any): void
+
+    toDataURL(): string
+
+    fit(type: FITMODE): void
+
+    readonly fitMode: FITMODE
+    readonly ids: { [id: string]: any }[]
+
+    copy(): string
+    cut(): string
+    redo(): void
+    undo(): void
+    move(component: Component, to_container: Container, to_index: number): void
+
+    select(selector: string | Function, ...others: (string | Function)[]): Component[]
+    paste(clipboard: string): void
+    align(type: 'left' | 'right' | 'center' | 'top' | 'bottom' | 'middle' | string): void
+    distribute(type: string): void
+    symmetryX(): void
+    symmetryY(): void
+
+    group(): void
+    ungroup(): void
+
+    change(f: ChangeFunction): void
+    undoableChange(f: () => void): void
+    zorder(type: 'forward' | 'backward' | 'front' | string): void
+
+    data: object
+
+    // @deprecated
+    variables: object
+
+    baseUrl: string
+  }
+}