@hatiolab/things-scene 2.7.13 → 2.7.14

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@hatiolab/things-scene",
-  "version": "2.7.13",
+  "version": "2.7.14",
   "description": "2D graphic library",
   "main": "src/index.js",
   "module": "things-scene.mjs",
   "jsnext:main": "things-scene.mjs",
   "browser": "things-scene.mjs",
-  "types": "types/index.d.ts",
+  "types": "things-scene.d.ts",
   "directories": {
     "doc": "docs",
     "test": "test"
@@ -26,10 +26,10 @@
     "serve": "things-factory",
     "serve:dev": "things-factory-dev",
     "serve:simple-http-server": "webpack-dev-server --config webpack.config.dev.js --hot --inline --host 0.0.0.0",
-    "build": "tsc && webpack && rollup -c",
+    "build": "webpack && rollup -c",
     "build:client": "npm run clean:client && webpack --config node_modules/@things-factory/shell/webpack.config.js",
     "clean:client": "rm -rf dist-client",
-    "prepublish": "tsc && webpack && rollup -c",
+    "prepublish": "webpack && rollup -c",
     "migration": "things-factory-migration",
     "prettify": "prettier --write \"{src,samples,test}/**/*.{js,css,html}\""
   },

package/things-scene.d.ts

@@ -0,0 +1,187 @@
+declare module '@hatiolab/things-scene' {
+  export const MODE_VIEW = 0
+  export const MODE_EDIT = 1
+  export const MODE_SHIFT = 2
+
+  type FITMODE = 'both' | 'ratio' | 'width' | 'height' | 'center' | 'none'
+  type SCALE = { x: number; y: number }
+  type TRANSLATE = { x: number; y: number }
+
+  export function create({
+    target,
+    model,
+    style,
+    layers,
+    handlers,
+    mode,
+    refProvider,
+    baseUrl,
+    fitMode
+  }: {
+    target?: HTMLElement
+    model: Object
+    style?: any
+    layers?: Array<any>
+    handlers?: Array<any>
+    mode?: 0 | 1
+    refProvider?: any
+    baseUrl?: string | undefined
+    fitMode?: FITMODE
+  }): Scene
+
+  export class Component {}
+  export class Container {}
+
+  export class Scene {
+    static get residents(): WeakSet<Scene>
+
+    /**
+     * scene에 컴포넌트를 추가한다.
+     * @param models {object} - Component Model Object
+     * @param boundsOrOffset {object} - x, y, cx, cy, ...
+     * @param onto {string} - onto
+     */
+    add({ models, boundsOrOffset, onto }: { models: object; boundsOrOffset: object; onto: string }): Component
+
+    /**
+     * scene의 컴포넌트를 복제한다.
+     * 현재 선택되어있는 컴포넌트가 복제되므로, 컴포넌트를 복제하기 위해서는
+     * 먼저 복제하고자하는 컴포넌트를 선택된 상태로 만든 후에(참조. {@link select} 메쏘드) 이 메쏘드를 호출한다.
+     */
+    duplicate(): void
+
+    /**
+     * scene의 컴포넌트를 삭제한다.
+     * 현재 선택되어있는 컴포넌트가 삭제되므로, 컴포넌트를 삭제하기 위해서는
+     * 먼저 삭제하고자하는 컴포넌트를 선택된 상태로 만든 후에(참조. {@link select} 메쏘드) 이 메쏘드를 호출한다.
+     */
+    remove(): void
+
+    animate({
+      duration /* unit: milli-second, 1000 milli-seconds by default */,
+      delay /* default 30 */,
+      step /* step function */,
+      delta /* delta function */,
+      ease /* ease function */,
+      options,
+      repeat /* default false */
+    }: {
+      duration: number
+      delay: number
+      step: Function
+      delta: 'linear' | 'quad' | 'circ' | 'back' | 'bounce' | 'elastic' | Function
+      ease: 'out' | 'inout'
+      options?: object
+      repeat: boolean
+    }): {
+      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
+    scale: SCALE
+    translate: TRANSLATE
+
+    readonly unit: string /* 'px' */
+    readonly PPM: number
+    readonly PPI: number
+    readonly DPPX: number
+
+    /**
+     * 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
+
+    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): Array<Component>
+
+    /*
+     * selector에 해당하는 첫번째 컴포넌트를 찾는다.
+     * @params selector {string}
+     */
+    findFirst(selector: string): 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: string[]
+
+    data: object
+
+    // @deprecated
+    variables: object
+
+    baseUrl: string
+  }
+}