@hatiolab/things-scene 2.7.15 → 2.7.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hatiolab/things-scene",
-  "version": "2.7.15",
+  "version": "2.7.19",
   "description": "2D graphic library",
   "main": "src/index.js",
   "module": "things-scene.mjs",

package/things-scene.d.ts

@@ -1,11 +1,11 @@
 declare module '@hatiolab/things-scene' {
   type Constructor<T = {}> = new (...args: any[]) => T
 
-  enum SCENE_MODE {
-    MODE_VIEW = 0,
-    MODE_EDIT = 1,
-    MODE_SHIFT = 2
-  }
+  type MODE_VIEW = 0
+  type MODE_EDIT = 1
+  type MODE_SHIFT = 2
+
+  type SCENE_MODE = MODE_VIEW | MODE_EDIT
 
   type FITMODE = 'both' | 'ratio' | 'width' | 'height' | 'center' | 'none'
   type DIMENSION = { x: number; y: number }
@@ -13,6 +13,8 @@ declare module '@hatiolab/things-scene' {
   type TRANSLATE = DIMENSION
   type POSITION = DIMENSION
 
+  type Properties = { [key: string]: any }
+
   type ControlHandler = {
     ondragstart?(point: POSITION, index: number, component: Component): void
     ondragmove?(point: POSITION, index: number, component: Component): void
@@ -76,7 +78,10 @@ declare module '@hatiolab/things-scene' {
     dispose(): void
   }
 
+  /* mixins */
+
   function RectPath<TBase extends Constructor>(Base: TBase): TBase
+
   function ValueHolder<TBase extends Constructor>(
     Base: TBase
   ): {
@@ -87,12 +92,50 @@ declare module '@hatiolab/things-scene' {
     }
   } & TBase
 
-  class Component {
+  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): void
+    }
+  } & TBase
+
+  /* components */
+
+  class Component extends MixinEvent(Object) {
     static register(type: string, Clazz: typeof Component): void
 
-    state: { [key: string]: any }
+    state: Properties
     bounds: { top: number; left: number; width: number; height: number }
     root: RootContainer
+    rootModel: ModelLayer
     parent: Container
     app: ApplicationContext /* application context */
     model: Model
@@ -100,14 +143,22 @@ declare module '@hatiolab/things-scene' {
     path: Array<DIMENSION>
     anchors: Array<Anchor>
     data: any
+
     get controls(): Array<Control> | undefined
     get hasTextProperty(): boolean
 
     ready(): void
     dispose(): void
-    setState(state: any): void
-    get(state: string): any
+    getState(prop: string): any
+    setState(props: Properties | any, value?: any): void
+    get(prop: string): any
+    set(props: Properties | string, value?: any): void
     reposition(): void
+    transcoordP2S(x: number, y: number): POSITION
+    render(context: CanvasRenderingContext2D): void
+    executeMappings(force?: boolean): void
+
+    onchange(after: Properties, before: Properties): void
 
     drawImage(
       context: CanvasRenderingContext2D,
@@ -124,23 +175,37 @@ declare module '@hatiolab/things-scene' {
     ondblclick(e: MouseEvent): void
   }
 
-  class Container extends Component {
+  class ContainerAbstract extends MoveHandle(RectPath(Component)) {}
+  class Container extends MixinHTMLElement(ContainerAbstract) {
     indexOf(component: Component): number
     insertComponentAt(target: Component, idx: number): void
     findById(id: string): Component
   }
   class RootContainer extends Container {}
 
+  class Layer extends ContainerAbstract {
+    target: HTMLElement
+    canvas: HTMLCanvasElement
+
+    getContext(): CanvasRenderingContext2D
+    invalidate(): void
+  }
+
+  class ModelLayer extends Layer {
+    overlay: HTMLDivElement
+  }
+
   class Shape extends Component {}
   class Ellipse extends Shape {}
-  class HTMLOverlayElement extends Component {
-    element: HTMLElement
-  }
+  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>
 
@@ -275,9 +340,9 @@ declare module '@hatiolab/things-scene' {
      */
     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
+    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