@hatiolab/things-scene 3.0.0-beta.2 → 3.0.0-beta.3

package/things-scene.d.ts

@@ -1,7 +1,13 @@
+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
@@ -9,7 +15,8 @@ declare module '@hatiolab/things-scene' {
 
   enum SCENE_MODE {
     VIEW = 0,
-    EDIT = 1
+    EDIT = 1,
+    SHIFT = 2
   }
 
   type FITMODE = 'both' | 'ratio' | 'width' | 'height' | 'center' | 'none'
@@ -18,16 +25,48 @@ declare module '@hatiolab/things-scene' {
   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
+  }
 
-  type LAYOUT = {
+  interface LAYOUT {
     reflow: (container: Container) => void
-    capturables?: (container: Container) => boolean
-    drawables?: (container: Container) => boolean
+    capturables?: (container: Container) => Component[]
+    drawables?: (container: Container) => Component[]
     isStuck?: (component: Container) => boolean
-    keyNavigate?: (container: Container, component: Component, e: KeyboardEvent) => Component
+    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
@@ -94,7 +133,7 @@ declare module '@hatiolab/things-scene' {
   class Model {
     static compile(model: Model, context?: any): Component
 
-    type: string;
+    type?: string;
     [key: string]: any
   }
 
@@ -153,7 +192,7 @@ declare module '@hatiolab/things-scene' {
       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): void
+      trigger(name: string, ...others: any[]): void
     }
   } & TBase
 
@@ -162,9 +201,11 @@ declare module '@hatiolab/things-scene' {
   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: { top: number; left: number; width: number; height: number }
+    bounds: BOUNDS
+    textBounds: BOUNDS
     root: RootContainer
     rootModel: ModelLayer
     parent: Container
@@ -173,6 +214,9 @@ declare module '@hatiolab/things-scene' {
     hierarchy: Model
     path: Array<DIMENSION>
     anchors: Array<Anchor>
+    hidden: boolean
+
+    get nature(): ComponentNature
 
     get data(): any
     set data(data: any)
@@ -183,6 +227,12 @@ declare module '@hatiolab/things-scene' {
     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
@@ -191,6 +241,7 @@ declare module '@hatiolab/things-scene' {
     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
@@ -229,7 +280,8 @@ declare module '@hatiolab/things-scene' {
     addComponent(target: Component): void
     removeComponent(target: Component): void
     insertComponentAt(target: Component, idx: number): void
-    findById(id: string): Component
+    findById(id: string): Component | undefined
+    getAt(at: number): Component | undefined
 
     add(components: Component[] | Component): Container
     remove(components: Component[] | Component): Container
@@ -237,11 +289,14 @@ declare module '@hatiolab/things-scene' {
     components: Component[]
   }
   class Container extends MixinHTMLElement(ContainerAbstract) {}
-  class RootContainer extends Container {}
+  class RootContainer extends Container {
+    get selected(): Component[]
+    set selected(selected: Component[])
+  }
 
   class Layer extends ContainerAbstract {
-    target: HTMLElement
-    canvas: HTMLCanvasElement
+    target: HTMLElement | null
+    canvas: HTMLCanvasElement | null
 
     getContext(): CanvasRenderingContext2D
   }
@@ -273,7 +328,20 @@ declare module '@hatiolab/things-scene' {
      * @param boundsOrOffset {object} - x, y, cx, cy, ...
      * @param onto {string} - onto
      */
-    add({ models, boundsOrOffset, onto }: { models: object; boundsOrOffset: object; onto: string }): Component
+    add(
+      models: Model,
+      boundsOrOffset?: {
+        left?: number
+        top?: number
+        width?: number
+        height?: number
+        x?: number
+        y?: number
+        cx?: number
+        cy?: number
+      },
+      onto?: string
+    ): Component
 
     /**
      * scene의 컴포넌트를 복제한다.
@@ -306,7 +374,7 @@ declare module '@hatiolab/things-scene' {
      */
     variable(id: string, value: any): any
 
-    target: HTMLElement
+    target: HTMLElement | null
     scale: SCALE
     translate: TRANSLATE
 
@@ -315,6 +383,8 @@ declare module '@hatiolab/things-scene' {
     readonly PPI: number
     readonly DPPX: number
 
+    mode: SCENE_MODE
+
     /**
      * Scene 모델의 단위(unit)을 감안한 기본 Scale 값을 제공한다.
      * 통산 'mm', 'cm' 단위의 Scene은 각 값에 10배를 곱한 수치로 모델링된다.(값을 10으로 나눈값이 실제 단위와 일치한다.)
@@ -338,6 +408,7 @@ declare module '@hatiolab/things-scene' {
      */
     resize(): void
 
+    release(): void
     dispose(): void
 
     /* Selection Based API - Modeling APIs */
@@ -363,13 +434,13 @@ declare module '@hatiolab/things-scene' {
      * selector에 해당하는 모든 컴포넌트들을 찾는다.
      * @params selector {string}
      */
-    findAll(selector: string): Array<Component>
+    findAll(selector: string, component?: Component): Array<Component>
 
     /*
      * selector에 해당하는 첫번째 컴포넌트를 찾는다.
      * @params selector {string}
      */
-    findFirst(selector: string): Component
+    findFirst(selector: string, ...others: any[]): Component
 
     /*
      * id를 갖는 컴포넌트를 찾는다.
@@ -384,14 +455,34 @@ declare module '@hatiolab/things-scene' {
 
     on(event: string, listener: Function, context?: any): void
     once(event: string, listener: Function, context?: any): void
-    off(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: string[]
+    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