@operato/scene-clone 0.0.4

package/src/things-scene.x._ts

@@ -0,0 +1,251 @@
+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 FITMODE = 'both' | 'ratio' | 'width' | 'height' | 'center' | 'none'
+  type DIMENSION = { x: number; y: number }
+  type SCALE = DIMENSION
+  type TRANSLATE = DIMENSION
+  type POSITION = DIMENSION
+
+  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
+
+  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
+  }
+
+  // type RectPath<T = {}> = new (...args: any[]) => T
+  function RectPath<TBase extends Constructor>(Base: TBase): TBase
+
+  class Component {
+    static register(type: string, Clazz: typeof Component): void
+
+    state: { [key: string]: any }
+    bounds: { top: number; left: number; width: number; height: number }
+    root: RootContainer
+    parent: Container
+    app: ApplicationContext /* application context */
+    model: Model
+    hierarchy: Model
+    path: Array<DIMENSION>
+    anchors: Array<Anchor>
+
+    dispose(): void
+    setState(state: any): void
+    get(state: string): any
+    reposition(): void
+  }
+
+  class Container extends Component {
+    indexOf(component: Component): number
+    insertComponentAt(target: Component, idx: number): void
+    findById(id: string): Component
+  }
+  class RootContainer extends Container {}
+
+  class Shape extends Component {}
+  class HTMLOverlayElement extends Component {
+    element: HTMLElement
+  }
+
+  class HTMLOverlayContainer extends Container {
+    readonly layout: any
+  }
+
+  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, 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
+  }
+}

package/templates/index.js

@@ -0,0 +1,18 @@
+import icon from '../assets/clone.png';
+
+export default [{
+  type: 'clone',
+  description: 'component cloner',
+  group: 'etc',
+  icon,
+  model: {
+    type: 'clone',
+    top: 350,
+    left: 100,
+    width: 30,
+    height: 30,
+    strokeStyle: '#999',
+    lineWidth: 1,
+    lineStyle: '#999'
+  }
+}]

package/test/basic-test.html

@@ -0,0 +1,67 @@
+<!doctype html>
+<!--
+@license
+Copyright © 2017 HatioLab Inc. All rights reserved.  
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <!-- Step 1: import the element to test -->
+    <link rel="import" href="../things-scene-clone.html">
+  </head>
+  <body>
+
+    <!-- You can use the document as a place to set up your fixtures. -->
+    <test-fixture id="things-scene-clone-fixture">
+      <template>
+        <things-scene-clone>
+          <h2>things-scene-clone</h2>
+        </things-scene-clone>
+      </template>
+    </test-fixture>
+
+    <script>
+      suite('<things-scene-clone>', function() {
+
+        var myEl;
+
+        setup(function() {
+          myEl = fixture('things-scene-clone-fixture');
+        });
+
+        test('defines the "author" property', function() {
+          assert.equal(myEl.author.name, 'Dimitri Glazkov');
+          assert.equal(myEl.author.image, 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg');
+        });
+
+        test('says hello', function() {
+          assert.equal(myEl.sayHello(), 'things-scene-clone says, Hello World!');
+
+          var greetings = myEl.sayHello('greetings Earthlings');
+          assert.equal(greetings, 'things-scene-clone says, greetings Earthlings');
+        });
+
+        test('fires lasers', function(done) {
+          myEl.addEventListener('things-scene-clone-lasers', function(event) {
+            assert.equal(event.detail.sound, 'Pew pew!');
+            done();
+          });
+          myEl.fireLasers();
+        });
+
+        test('distributed children', function() {
+          var els = myEl.getContentChildren();
+          assert.equal(els.length, 1, 'one distributed node');
+          assert.equal(els[0], myEl.querySelector('h2'), 'content distributed correctly');
+        });
+
+      });
+    </script>
+
+  </body>
+</html>

package/test/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright © 2017 HatioLab Inc. All rights reserved.  
+-->
+<html><head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'basic-test.html',
+        'basic-test.html?dom=shadow'
+      ]);
+    </script>
+
+</body></html>

package/test/unit/test-clone.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import './util'
+
+import { expect } from 'chai'
+
+import '../../bower_components/things-scene-core/things-scene-min'
+import { Clone } from '../../src/index'
+
+describe('Clone', function () {
+
+  var board;
+
+  beforeEach(function () {
+    board = scene.create({
+      model: {
+        components: [{
+          id: 'clone',
+          type: 'clone'
+        }]
+      }
+    })
+  });
+
+  it('component should be found by its id.', function () {
+
+    var component = board.findById('clone')
+
+    expect(!!component).not.to.equal(false);
+  });
+});

package/test/unit/util.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+var noop = () => {}
+
+global.Canvas = require('canvas');
+
+Canvas.prototype.setAttribute = noop;
+Canvas.prototype.style = {};
+
+global.Image = Canvas.Image;
+global.screen = {
+  width: 1280,
+  height: 800
+};
+
+global.window = global;
+
+global.addEventListener = noop;
+global.location = {};
+global.getComputedStyle = noop;

package/things-scene.config.js

@@ -0,0 +1,5 @@
+import templates from './templates'
+
+export default {
+  templates
+};

package/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "label.duration": "duration",
+  "label.target": "target",
+  "label.repeat": "repeat",
+  "label.autostart": "auto start",
+  "label.targetRetention": "target retention"
+}

package/translations/ko.json

@@ -0,0 +1,7 @@
+{
+  "label.duration": "반복주기",
+  "label.target": "대상",
+  "label.repeat": "반복",
+  "label.autostart": "자동 시작",
+  "label.targetRetention": "대상 유지기간"
+}

package/translations/zh.json

@@ -0,0 +1,7 @@
+{
+  "label.duration": "持续期间",
+  "label.target": "目标",
+  "label.repeat": "重复",
+  "label.autostart": "自动开始",
+  "label.targetRetention": "保留时间"
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node"]
+  },
+  "include": ["**/*.ts", "*.d.ts"]
+}