@operato/scene-basic 9.0.0-beta.0 → 9.0.0-beta.15

package/dist/audio.js

@@ -1,7 +1,9 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, RectPath, Shape } from '@hatiolab/things-scene';
+var AudioPlayer_1;
+import { __decorate } from "tslib";
+import { RectPath, Shape, sceneComponent } from '@hatiolab/things-scene';
 const NATURE = {
     mutable: false,
     resizable: true,
@@ -27,13 +29,13 @@ const NATURE = {
     help: 'scene/component/audio'
 };
 const AUDIO_IMAGE = 'data:image/png;base64,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';
-export default class AudioPlayer extends RectPath(Shape) {
+let AudioPlayer = AudioPlayer_1 = class AudioPlayer extends RectPath(Shape) {
     static get image() {
-        if (!AudioPlayer.IMAGE) {
-            AudioPlayer.IMAGE = new Image();
-            AudioPlayer.IMAGE.src = AUDIO_IMAGE;
+        if (!AudioPlayer_1.IMAGE) {
+            AudioPlayer_1.IMAGE = new Image();
+            AudioPlayer_1.IMAGE.src = AUDIO_IMAGE;
         }
-        return AudioPlayer.IMAGE;
+        return AudioPlayer_1.IMAGE;
     }
     dispose() {
         super.dispose();
@@ -54,7 +56,7 @@ export default class AudioPlayer extends RectPath(Shape) {
     render(ctx) {
         var { left, top, width, height, src } = this.state;
         ctx.beginPath();
-        this.drawImage(ctx, AudioPlayer.image, left, top, width, height);
+        this.drawImage(ctx, AudioPlayer_1.image, left, top, width, height);
     }
     get nature() {
         return NATURE;
@@ -136,6 +138,9 @@ export default class AudioPlayer extends RectPath(Shape) {
             }
         }
     }
-}
-Component.register('audio', AudioPlayer);
+};
+AudioPlayer = AudioPlayer_1 = __decorate([
+    sceneComponent('audio')
+], AudioPlayer);
+export default AudioPlayer;
 //# sourceMappingURL=audio.js.map

package/dist/audio.js.map

@@ -1 +1 @@
-{"version":3,"file":"audio.js","sourceRoot":"","sources":["../src/audio.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'src',\n      name: 'src'\n    },\n    {\n      type: 'checkbox',\n      label: 'started',\n      name: 'started'\n    },\n    {\n      type: 'checkbox',\n      label: 'loop',\n      name: 'loop'\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/audio'\n}\n\nconst AUDIO_IMAGE =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAP1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACzJYIvAAAAFHRSTlMA8BAwgNBgQKB/wCBwUJDg37CvXyUlBK8AABFYSURBVHja7NsBkqIwFIThTiAQgyBq3/+sm6p1tnamZkaTMhJJf1f4S/JeEIiIiIiIiIiIiIiIiEhD7Hg4BH84TpAKjJ4f3NFCtjVd+InXz2RTs+FXlxGylYHfcVfIJmb+YFWSLUyGVJKKBJJKUo+Rd6w63l/qzLuCkryO5fe0l2xk5mMWbe+v0fNBRqf7S3je6CipQ2ACr+dWcYEpzBFS1plpguatsnomMgdIQSOTuQ5SjmE6/UgK8szgdJIUM/FG41YlFmYJ2kkKsY5ZzAwBurHDk3WGeRY0bvYrGa1+rqNI22f7dS32ZnUK1GMr0eSK3mEc9dhKMxp+ZTo8kT2emOXS5LQ1kCxbJBocSd2k5PaIjMVzjWcdJPk9ooBnmzx1t5XbIxqBKpJ4NGTgzwKiGpK4do72gb+ZUMIYtCPm9WCPMsYTE5k2hq2ZvzujlCE1iRmwf3dvmRyKsT0T7b9I7HEPCpqCiqT2IIqaT1pI0noQZdlFC8l/PbYPAnRORT56VBEE6FXkb49agmByKhJ71BME6FsvEntUFQTdqekisUdlQWCXhovEHtUFAWbTapHYo8YgmFybO3vsUWcQYGmxSOxRbRAMprkisUfFQVKmrX18sxt7VB0ENjT1xir2qDxIwkFi3v89e+xRfxAMzfzzIfZ4hyAYDR9zwVuLPd4jCDrTwoLYGb5LEFi3/+E3rweR6urX20c/Fvls2Pvwm9mDSGIPhv8YPyGf3/eo9Ye7O8B2FIShAAooakEttex/rbODad5/yTHIAjqn505IQPv+Xz06dz+4VXORHEZcgAcB8updM8F6e25jBzwIkE07l+x8amMnPDp6nsNJ+BoZ7Q6F8egqAda9VEuRNlZjBzwYkMskdXR73okd8GBAJiKYjBcZKKqG9OiKDbgdfxJ5VhsBPDiQZhaouD3p4hfw4EAmwxisz3MSHwAPEmQ1TB1N+SmXWoAHC7JbZsWl/IxLLcCDBplNo3lrfMLsmwAPGmShAxX5/1vOEzjEz3iyfQ/hI36W4TctsUesOAifPdrQg8M++KYl95iCBkjI1r8634betBAPHZDTPFAmD3zLiHgogVTziMsahz0eIh5aIGHGRSJ2mFtHPR4iHhQIP2UvWGMf8wk74qEIEib7rLjPiBfxiAcCwp8V+Nae3uMdRhAPDIR/J5f/Q2DTcC+hIB7qIGEq3Ti9bx+sryMeAAgS70OK8G2kBD8L8QBAoLWU3g3vUVIc6D0txAMAsY+4jBWowXHO64gHBGKfYJ2T5qY1BxcL98BB+PQ+XiS9xxh9EQ8ChA6C5UXWIUoE9MBB8LVHQoS7ib8/dRn3sAcJ6bQRSdH96RDxIEH4QEX+AHF4LxHEAwUh12xyr1V8lwjiQYDYF8kuf1jluUQQDwrEvkhW8Wc6LhHUgwfhi4QPlHm7LRHawx4kpE191Dq8lgjhAYDQa1cftYrPEiE8OJDb40uqyzdQCA8WhAzL4G/PT4c3WrgHD2IfllGl53V37zsgHg5ApPNvVvq4Fn4spx4oiH1W3CwtEV+PDhEPJyBSkVX4aa7emkM83ICEKWpGM7wdvYCCeDgCEYpcwhLxczhEPFyBCEUWnRL5T6X59SBASBF+9l28TL5F7uEORCZyCUvEx+S7yT0cgoRVb9JaXLR1qUdfgksQ0fTbgmhFB20d8HAKEha14+F8f1sHPNyCiL6EqK+n20/rgIdjkFC0Ho1s6Gndvcc9ICkr/ey8/rHO6vp9KawL8DAFOV6l9Fyub7IbflsCag1qRfVsXWvxHjxIejU+BHZV6uvHD1XiEb++Bw8i+dNd+Wv0eCQmhcPhRPwUUt2DB5G1sfa1aeyzAuyJj9x2HjyIdKzIKw5SI14ieFtvo3kIQERj3lVhkUOnRD7AnjV5369QkAOJZeCH+Jh41xOLs73dQwAifY6dpxCCbjTDzLf1Bm1Y93tAIDOWXcLPvrHyr2hVoEAceEAgDQzB4jetk0/c2OXRHB48EJCpa4dgpYh2ETxtrshz7zx4ICCzfuTSDn8p/EOS9OTjwgMB+cABP3yWYuOPIofs33LigYCULlpZNXJppVU30Vf14kGAUCLijf1D71lN9FW9eFiA9KgZ8FPpPUsSnufGA+8hvAg2Kpz0nrX//qp+PIgpC3i6xJRITOye9fn1VT15ICCrVlQG5rywo0H8x965bVkNwmCYQ2kR6Gmb939WXV65dFnI/tPdjPBfO7XMN4EkTUJtqZp4sCJ1+8jwkhMu0KpMxFXFA8hlVfQSMxGH5mDK1VKV8QCyvTVtUiYyo7V358VStfGoAEFMhGYhEwloxZy9WKo2Hjwg5iSOvFDXeUYd33+PuVfHgwnEBWLocDJp+IIa2fyvperjwQRiXCKGosyXqoA+YfsIELuYu4HAt+msMknfDK4jfQJIzOZ2IPAQWJtFOhQKivR2IDZ6Awis7V0iLxqBI7uEZo19dakTogLSwKvf8yk8Jq6CGK0GKvWlatG7b7kkUU/Lo1gdXWn7/4E0j0qeJDpqN/ABqQcgJgdqURb4chjQktIugDS6wFFiz3JgaJj7AGJmholAe9YKhoZLJ0Ca6smjwJ4VwVN96gVIE5GM71kHaGKxGyAtRDaB2NBhLVmpHyANRKzDO28W7FS3HQFpaIWa8TrfCXQwegJSL5k+8M9UJ+pm9QTEnCIZrR0MDQeQ9ua0iCcYQaBTV0CqNXQW/yiyYG7W1heQanPaCkciBXuH1BkQJzHcDQxmpgGkPatl4WkbCXO/bW9AqlNg4H0PPMi6A1IxkQmOZ8D0ousNSMVEEuyreTAQ6Q7IRJeCX2YZQHhv6SrBOmpkM+YUzN0BqSRQCupmTeCP9wdkhiOREwtEzgGEsWcF9BhK9R8fQDiN7A8DiR0CKXQlj/q9IM8OgXjIzcKBlAHkD6FulgNzJwPIHwpo8mQAkX3LiPq9dKUMAQk9AqmcqmjuBAJCPQIpA4guIAsKJA0gnwNy3A4kDyBIHCEPxAwgf8gPILqA5AFEF5CxZX0lIHYc6rqADLf380BmFMgxgIzUyf8MJKLTRelKHgKy9wgkjfS7LiA0gKgC8vQn3HUA4RQ5LKPIAQciWbqIEg0YkLNDIHYUyqkCsmKN5vg3+W0AYTRATaPY+uu1IwS6UMGAlO6AFPjSCQMStaNh53cdcPG7Hx1Uupo+rx+Bltn1BuTAj5BptEV/bHAAwbnJMICwRmtUDOSEA8s4Rmtw3nITGD6TwUNoG0Ca7xi2YKSPj2eKXQFxQWKA2QbGMWEMMGseOb7C7T47uJS1JyAzVbTjqZdU3zbHzMXWS+qp4Fgn8Ahy/QCRGqQcwU1vGnN7fylboWn8Bzg//hyjxltvdcl45bwFfYKzFyBy11UU9BnjuoqfWizVlQXulpzBTNbaB5Aid+VRrkBFB630AMS9BC8FK2ggE7u/FGy1kvfcB9TKQufX5uUXNWl3EjvWCi4k/u9A3Ddq1CpTIQGe6VN1qd8ArcvDQNw3S41Kn6qQmOq5e7pRr+8fAYLiIJtFrrvYRMYL0q06vj8EZLXUriJzRY8H1xEagOCK7gkghRg6RQYO0I6aWPwIEAru80AiMWSdzAeuDXUKyr+WqpAID8hMHC1Ct8F4mUsQ6W8pJMICki0JHCBczAFdBl38G3VE6ErQhhWlih4LWrCSLpaqjggHiGe9mVjRY0YPoelyqcqIcIDEe97rqJFFH7FcLlUZEQ6Qg5plvZiBFNhtri1VFREGEC/Eg4nZoU5vqi1VFREGkIXDQ8xAIhzoT/WlKiLCAFIYPOQMxOPdjfWlKiLCADJRm3YGj+pDE2xktmmpaogwgMz8d8GrumZ4xzpbvinqISJ+hiTWm7wEqoJdI9JEV9JChAEkS3xCZzKecLcgN6YwlRBhAGmweTsblg6qKMM7Vmh321UQ4QAp1VfwhqVJIh+Wm03W0qV0EOEAybXtivkCmWrKeH2EZ/xBaSBCV2L9Re+LYSqJJIxDu1ew07U0EGEBcTtmHty4JuPtQhvLh1BAhK7Uvvq0GK484QZST0GvvFDqeSJ1IA0r2mfDljvqBoJ//rVsq7yZCA6kXgVkJ2f4ijIGMjOfMVsCBBORB2Jy+sM6ijNvaBUqmw/cStZ8EiKciHwp6Rp++88qmxXQeTUxDiJWJ9wSISvBicgXW+dypn1PqWTznlwgwdZdfiLHr5OELEAEASKvJFRE5JCPKbh8OxHdQKJU0crEzRXrJ/IEkFms6tGyrUw9kQeALFRXvK2iSzsRAAi6BLxM+60xdsqJAEBuXMAMxDLVp+gmAgC57/UT4qvVj3TVRCAgSAYL91aXtyNLzUQAIFhAiP8m0/NHOp+ILiBtPFKrs6bgSOcT0QTEB8nO3QR1yKslggKRf+m11UB0HOl8IlqAeCvauXuo8HnfIqIDyCw6G8XMcGiplMingMzCnbuHFp/3LSLPA4nUpqm5YkWNzwsQeQxIDsKjH5wVSU5qJPIJIIt4jjpqNBAekQeBfJOeHWS81FQoo4/I7UDcS3wUh0liTzLqiEgDqddx4ZHDrNZAACIAEMw88HPYWb0GAhABgEDmgf9Vb5oNBCByOxD3uqWYbCHVBgIQuRlIsbfwMEG5gQBE7gSyHMDsOayrxJvHBRC5B0hOxJH1nK4SlUE6QOR+IG6ju3iYQEqDdIDIzUDyZu/jMRHpS/OiRG4FkiPRfTw8kbrvIAJEACAIDpyHC1/GQHhEbgKSXwTyqIeEur6kixEBgABHOTr7YSX1MSFAhA0E307wUU76Y0KACAsI/tvCRzkF+iIuL0AEAYLbR2QOfvhKJ/obRESBxNt5rPSFXN4f7dyNdqMgEIbhAXWwJErT/e7/Wreb5HTT07QVgWSAeW5g7b4n8qOSUCRPEId4HP93SXp5dDNGRJFcQTxihSH+NW1Bb1cXKpIryJAwnG/zhl8ZcSP6jiKZghwRaaWLnP/AkcSKKJIniEcUs8QfjFLdEmRvkSxB4lfn0QN6DY+lshQpHiT96Dlr6r5hxRUpHST9ZEY71X7DOmOZQVZLsd5Q8wzrPxYYJDiKNqOBG1ZCkZKzrNXu6lHvkjChSFqQsdTPg45ApXtYaUXKr9TNuPcvqO2pVMkitFXAL2a79/qr3HQvVSTXUtofCl79RDXh5CDpw3pwu6+9kRlvtiI5VtPhmHLltT4EKVQkfb8pcOHrXqk6nBAksUjgpKtuYsskaxGKYT0+84uYgziE4YQgMdx0m8PRfis2MbL33PMXoVjD6PEunI4HSjDjStiJP08vQk9hZzQ7oH/geoLYCUBDW4rf4FqCDFt7THUO6B+4jiDn2XNTW7zf4hqCMND4BOsGyw+yAmh0x+QeFh7EeqD5Ce8nLDrI8NpbDyIWHIQNruo4GyAPlhrEzuixBxHLDDJMnfYgYolBricHNfjIdgMWF+Qyu+pkgX4HCwuymL57ELGkIHZG7z2IWE6Q5VV7vGMhQewbtMcZiwhyHj26ne9+xs8PcvDQHnFFqCD7Au0RW4TK+fOKqw4eoOcqYqgU53HR3/5uShFPCfKey9hFDyJO/vAi7RDZnp7X5igyUH72xSDW1E2Pn4tMRCQgR8vLwbgii4gcmLvqQcSPGtIPX3M08wn6I4qYQ94cM/Yw9Xxhmw+X/59wHrtMlX1AmIkzdyaaAnLg1Nnw8WGYSk40X/BOh4+El6LMSBnN2Cd0tPq4w/LJXGrMbCX06PZ2dcM65yzlNertShSHf3SzRAyPM332IcSAHUKPi8EHmXU0l8Uglmni0yipDoi16s+jJKejhywLooz68yiMEcHr2qM4h81CJ++VPJfTu5UwBpv4Pp9DJSi6MJx0bvUwiw4ewgT8zNR0LHUL+OccOpY/3ElzyGKD5pBlMJpDlsOkMythRoNbXh95PJsdA67MrMtAEYbjeDqNo+7oKqWUUkoppZRSSimllFJKFfMXp4vmSjB8n6sAAAAASUVORK5CYII='\n\nexport default class AudioPlayer extends RectPath(Shape) {\n  static IMAGE: HTMLImageElement\n\n  static get image() {\n    if (!AudioPlayer.IMAGE) {\n      AudioPlayer.IMAGE = new Image()\n      AudioPlayer.IMAGE.src = AUDIO_IMAGE\n    }\n\n    return AudioPlayer.IMAGE\n  }\n\n  _audio: any\n\n  dispose() {\n    super.dispose()\n\n    this.started = false\n    delete this._audio\n  }\n\n  ready() {\n    super.ready()\n\n    this._audio = new Audio()\n\n    this._audio.addEventListener('canplay', () => {\n      this.started && this._audio.play()\n    })\n\n    var { src = '', loop = false, started = false } = this.state\n\n    this.onchangeSrc(src)\n    this.onchangeLoop(loop)\n    this.onchangeStarted(started)\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height, src } = this.state\n\n    ctx.beginPath()\n\n    this.drawImage(ctx, AudioPlayer.image, left, top, width, height)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get src() {\n    return this.getState('src')\n  }\n\n  set src(src) {\n    this.setState('src', src)\n  }\n\n  get started() {\n    return !!this.getState('started')\n  }\n\n  set started(started) {\n    this.setState('started', started)\n  }\n\n  start() {\n    if (!this._audio) return\n\n    this._audio.classList.add('active')\n    this._audio.play()\n  }\n\n  pause() {\n    if (!this._audio) return\n\n    this._audio.classList.remove('active')\n    this._audio.pause()\n  }\n\n  onchangeSrc(src: string) {\n    try {\n      // this._audio.crossOrigin = \"anonymous\";\n      if (String(src).substring(0, 4) !== 'data') this._audio.crossOrigin = 'use-credentials'\n      else this._audio.crossOrigin = null\n\n      this._audio.src = typeof src === 'string' ? this.app.url(src) : src\n    } catch (e) {\n      console.error(e)\n      return\n    }\n  }\n\n  onchangeStarted(started: boolean) {\n    const audio = this._audio\n\n    if (started) {\n      /* \n        [ audio/video.readyState ]\n        0 = HAVE_NOTHING - no information whether or not the audio/video is ready\n        1 = HAVE_METADATA - metadata for the audio/video is ready\n        2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond\n        3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available\n        4 = HAVE_ENOUGH_DATA - enough data available to start playing\n      */\n      audio.readyState == 4 && audio.play()\n    } else {\n      audio.pause()\n    }\n  }\n\n  onchangeLoop(loop: boolean) {\n    this._audio.loop = loop\n  }\n\n  onchange(after: Properties, before: Properties) {\n    'src' in after && this.onchangeSrc(after.src)\n    'started' in after && this.onchangeStarted(after.started)\n    'loop' in after && this.onchangeLoop(after.loop)\n  }\n\n  ondblclick(e: MouseEvent) {\n    this.started = !this.started\n  }\n\n  ondropfile(transfered: DataTransferItemList, files: FileList) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (transfered[i].type.startsWith('audio/')) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n}\n\nComponent.register('audio', AudioPlayer)\n"]}
+{"version":3,"file":"audio.js","sourceRoot":"","sources":["../src/audio.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Properties, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'src',\n      name: 'src'\n    },\n    {\n      type: 'checkbox',\n      label: 'started',\n      name: 'started'\n    },\n    {\n      type: 'checkbox',\n      label: 'loop',\n      name: 'loop'\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/audio'\n}\n\nconst AUDIO_IMAGE =\n  'data:image/png;base64,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'\n\n@sceneComponent('audio')\nexport default class AudioPlayer extends RectPath(Shape) {\n  static IMAGE: HTMLImageElement\n\n  static get image() {\n    if (!AudioPlayer.IMAGE) {\n      AudioPlayer.IMAGE = new Image()\n      AudioPlayer.IMAGE.src = AUDIO_IMAGE\n    }\n\n    return AudioPlayer.IMAGE\n  }\n\n  _audio: any\n\n  dispose() {\n    super.dispose()\n\n    this.started = false\n    delete this._audio\n  }\n\n  ready() {\n    super.ready()\n\n    this._audio = new Audio()\n\n    this._audio.addEventListener('canplay', () => {\n      this.started && this._audio.play()\n    })\n\n    var { src = '', loop = false, started = false } = this.state\n\n    this.onchangeSrc(src)\n    this.onchangeLoop(loop)\n    this.onchangeStarted(started)\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height, src } = this.state\n\n    ctx.beginPath()\n\n    this.drawImage(ctx, AudioPlayer.image, left, top, width, height)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  get src() {\n    return this.getState('src')\n  }\n\n  set src(src) {\n    this.setState('src', src)\n  }\n\n  get started() {\n    return !!this.getState('started')\n  }\n\n  set started(started) {\n    this.setState('started', started)\n  }\n\n  start() {\n    if (!this._audio) return\n\n    this._audio.classList.add('active')\n    this._audio.play()\n  }\n\n  pause() {\n    if (!this._audio) return\n\n    this._audio.classList.remove('active')\n    this._audio.pause()\n  }\n\n  onchangeSrc(src: string) {\n    try {\n      // this._audio.crossOrigin = \"anonymous\";\n      if (String(src).substring(0, 4) !== 'data') this._audio.crossOrigin = 'use-credentials'\n      else this._audio.crossOrigin = null\n\n      this._audio.src = typeof src === 'string' ? this.app.url(src) : src\n    } catch (e) {\n      console.error(e)\n      return\n    }\n  }\n\n  onchangeStarted(started: boolean) {\n    const audio = this._audio\n\n    if (started) {\n      /* \n        [ audio/video.readyState ]\n        0 = HAVE_NOTHING - no information whether or not the audio/video is ready\n        1 = HAVE_METADATA - metadata for the audio/video is ready\n        2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond\n        3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available\n        4 = HAVE_ENOUGH_DATA - enough data available to start playing\n      */\n      audio.readyState == 4 && audio.play()\n    } else {\n      audio.pause()\n    }\n  }\n\n  onchangeLoop(loop: boolean) {\n    this._audio.loop = loop\n  }\n\n  onchange(after: Properties, before: Properties) {\n    'src' in after && this.onchangeSrc(after.src)\n    'started' in after && this.onchangeStarted(after.started)\n    'loop' in after && this.onchangeLoop(after.loop)\n  }\n\n  ondblclick(e: MouseEvent) {\n    this.started = !this.started\n  }\n\n  ondropfile(transfered: DataTransferItemList, files: FileList) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (transfered[i].type.startsWith('audio/')) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n}\n"]}

package/dist/cloud.js

@@ -1,8 +1,9 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component } from '@hatiolab/things-scene';
-export default class Cloud extends Component {
+import { __decorate } from "tslib";
+import { Component, sceneComponent } from '@hatiolab/things-scene';
+let Cloud = class Cloud extends Component {
     prerender(ctx) {
         //TODO center()를 구현할 때까지, 아무 구현없이 오버라이드한다.
     }
@@ -25,6 +26,9 @@ export default class Cloud extends Component {
     set path(path) {
         /* do nothing */
     }
-}
-Component.register('cloud', Cloud);
+};
+Cloud = __decorate([
+    sceneComponent('cloud')
+], Cloud);
+export default Cloud;
 //# sourceMappingURL=cloud.js.map

package/dist/cloud.js.map

@@ -1 +1 @@
-{"version":3,"file":"cloud.js","sourceRoot":"","sources":["../src/cloud.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAElD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,SAAS;IAC1C,SAAS,CAAC,GAA6B;QACrC,0CAA0C;IAC5C,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEzB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAEhB,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACjE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACrE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACpE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACpE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QAClE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAEvD,GAAG,CAAC,SAAS,EAAE,CAAA;IACjB,CAAC;IAED,IAAI,IAAI;QACN,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEzB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACnB,CAAC;IAED,IAAI,IAAI,CAAC,IAAI;QACX,gBAAgB;IAClB,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component } from '@hatiolab/things-scene'\n\nexport default class Cloud extends Component {\n  prerender(ctx: CanvasRenderingContext2D) {\n    //TODO center()를 구현할 때까지, 아무 구현없이 오버라이드한다.\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { x, y } = this.state\n\n    ctx.beginPath()\n\n    ctx.moveTo(x, y)\n\n    ctx.bezierCurveTo(x - 40, y + 20, x - 40, y + 70, x + 50, y + 70)\n    ctx.bezierCurveTo(x + 80, y + 100, x + 150, y + 100, x + 170, y + 70)\n    ctx.bezierCurveTo(x + 250, y + 70, x + 250, y + 40, x + 220, y + 30)\n    ctx.bezierCurveTo(x + 260, y - 40, x + 200, y - 50, x + 170, y - 30)\n    ctx.bezierCurveTo(x + 150, y - 75, x + 80, y - 60, x + 80, y - 30)\n    ctx.bezierCurveTo(x + 30, y - 75, x - 20, y - 60, x, y)\n\n    ctx.closePath()\n  }\n\n  get path() {\n    var { x, y } = this.state\n\n    return [{ x, y }]\n  }\n\n  set path(path) {\n    /* do nothing */\n  }\n}\n\nComponent.register('cloud', Cloud)\n"]}
+{"version":3,"file":"cloud.js","sourceRoot":"","sources":["../src/cloud.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAGnD,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,SAAS;IAC1C,SAAS,CAAC,GAA6B;QACrC,0CAA0C;IAC5C,CAAC;IAED,MAAM,CAAC,GAA6B;QAClC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEzB,GAAG,CAAC,SAAS,EAAE,CAAA;QAEf,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QAEhB,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACjE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACrE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACpE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QACpE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAA;QAClE,GAAG,CAAC,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;QAEvD,GAAG,CAAC,SAAS,EAAE,CAAA;IACjB,CAAC;IAED,IAAI,IAAI;QACN,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAEzB,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;IACnB,CAAC;IAED,IAAI,IAAI,CAAC,IAAI;QACX,gBAAgB;IAClB,CAAC;CACF,CAAA;AA/BoB,KAAK;IADzB,cAAc,CAAC,OAAO,CAAC;GACH,KAAK,CA+BzB;eA/BoB,KAAK","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, sceneComponent } from '@hatiolab/things-scene'\n\n@sceneComponent('cloud')\nexport default class Cloud extends Component {\n  prerender(ctx: CanvasRenderingContext2D) {\n    //TODO center()를 구현할 때까지, 아무 구현없이 오버라이드한다.\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { x, y } = this.state\n\n    ctx.beginPath()\n\n    ctx.moveTo(x, y)\n\n    ctx.bezierCurveTo(x - 40, y + 20, x - 40, y + 70, x + 50, y + 70)\n    ctx.bezierCurveTo(x + 80, y + 100, x + 150, y + 100, x + 170, y + 70)\n    ctx.bezierCurveTo(x + 250, y + 70, x + 250, y + 40, x + 220, y + 30)\n    ctx.bezierCurveTo(x + 260, y - 40, x + 200, y - 50, x + 170, y - 30)\n    ctx.bezierCurveTo(x + 150, y - 75, x + 80, y - 60, x + 80, y - 30)\n    ctx.bezierCurveTo(x + 30, y - 75, x - 20, y - 60, x, y)\n\n    ctx.closePath()\n  }\n\n  get path() {\n    var { x, y } = this.state\n\n    return [{ x, y }]\n  }\n\n  set path(path) {\n    /* do nothing */\n  }\n}\n"]}

package/dist/donut.d.ts

@@ -1,5 +1,5 @@
 import { Component, ComponentNature, POSITION } from '@hatiolab/things-scene';
-import Ellipse from './ellipse';
+import Ellipse from './ellipse.js';
 export default class Donut extends Ellipse {
     is3dish(): boolean;
     render(ctx: CanvasRenderingContext2D): void;

package/dist/donut.js

@@ -1,8 +1,9 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component } from '@hatiolab/things-scene';
-import Ellipse from './ellipse';
+import { __decorate } from "tslib";
+import { Component, sceneComponent } from '@hatiolab/things-scene';
+import Ellipse from './ellipse.js';
 const NATURE = {
     mutable: false,
     resizable: true,
@@ -27,7 +28,7 @@ var controlHandler = {
         component.set({ ratio });
     }
 };
-export default class Donut extends Ellipse {
+let Donut = class Donut extends Ellipse {
     is3dish() {
         return false;
     }
@@ -68,7 +69,10 @@ export default class Donut extends Ellipse {
     get nature() {
         return NATURE;
     }
-}
+};
+Donut = __decorate([
+    sceneComponent('donut')
+], Donut);
+export default Donut;
 Component.memoize(Donut.prototype, 'controls', false);
-Component.register('donut', Donut);
 //# sourceMappingURL=donut.js.map

package/dist/donut.js.map

@@ -1 +1 @@
-{"version":3,"file":"donut.js","sourceRoot":"","sources":["../src/donut.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, POSITION } from '@hatiolab/things-scene'\nimport Ellipse from './ellipse'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'ratio',\n      name: 'ratio',\n      property: 'ratio'\n    }\n  ],\n  help: 'scene/component/donut'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { cx, rx } = component.model\n    rx = Math.abs(rx)\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n\n    var ratio = ((transcoorded.x - cx) / rx) * 100\n\n    ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio)\n\n    component.set({ ratio })\n  }\n}\n\nexport default class Donut extends Ellipse {\n  is3dish() {\n    return false\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { ratio = 50, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n    rx = Math.abs(rx)\n    ry = Math.abs(ry)\n\n    ctx.beginPath()\n    ctx.ellipse(cx, cy, rx, ry, 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise)\n\n    ctx.moveTo(cx + (rx / 100) * ratio, cy)\n    // 맨 마지막 속성이 true면 원의 범위만큼 공백이 됨\n    ctx.ellipse(cx, cy, (rx / 100) * ratio, (ry / 100) * ratio, 0, startAngle || 0, endAngle || 2 * Math.PI, true)\n  }\n\n  contains(x: number, y: number) {\n    var { cx, cy, rx, ry, ratio } = this.state\n    rx = Math.abs(rx)\n    ry = Math.abs(ry)\n\n    var normx = (x - cx) / (rx * 2 - 0.5)\n    var normy = (y - cy) / (ry * 2 - 0.5)\n    var ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5)\n    var ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5)\n    var result = false\n\n    if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25) result = !result\n\n    return result\n  }\n\n  get controls() {\n    var { cx, cy, rx, ratio } = this.state\n    rx = Math.abs(rx)\n\n    return [\n      {\n        x: cx + (rx / 100) * ratio,\n        y: cy,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Donut.prototype, 'controls', false)\n\nComponent.register('donut', Donut)\n"]}
+{"version":3,"file":"donut.js","sourceRoot":"","sources":["../src/donut.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, POSITION, sceneComponent } from '@hatiolab/things-scene'\nimport Ellipse from './ellipse.js'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'ratio',\n      name: 'ratio',\n      property: 'ratio'\n    }\n  ],\n  help: 'scene/component/donut'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { cx, rx } = component.model\n    rx = Math.abs(rx)\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n\n    var ratio = ((transcoorded.x - cx) / rx) * 100\n\n    ratio = ratio >= 100 || ratio <= -100 ? 100 : Math.abs(ratio)\n\n    component.set({ ratio })\n  }\n}\n\n@sceneComponent('donut')\nexport default class Donut extends Ellipse {\n  is3dish() {\n    return false\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { ratio = 50, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n    rx = Math.abs(rx)\n    ry = Math.abs(ry)\n\n    ctx.beginPath()\n    ctx.ellipse(cx, cy, rx, ry, 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise)\n\n    ctx.moveTo(cx + (rx / 100) * ratio, cy)\n    // 맨 마지막 속성이 true면 원의 범위만큼 공백이 됨\n    ctx.ellipse(cx, cy, (rx / 100) * ratio, (ry / 100) * ratio, 0, startAngle || 0, endAngle || 2 * Math.PI, true)\n  }\n\n  contains(x: number, y: number) {\n    var { cx, cy, rx, ry, ratio } = this.state\n    rx = Math.abs(rx)\n    ry = Math.abs(ry)\n\n    var normx = (x - cx) / (rx * 2 - 0.5)\n    var normy = (y - cy) / (ry * 2 - 0.5)\n    var ratiox = (x - cx) / ((rx / 100) * ratio * 2 - 0.5)\n    var ratioy = (y - cy) / ((ry / 100) * ratio * 2 - 0.5)\n    var result = false\n\n    if (normx * normx + normy * normy < 0.25 && ratiox * ratiox + ratioy * ratioy > 0.25) result = !result\n\n    return result\n  }\n\n  get controls() {\n    var { cx, cy, rx, ratio } = this.state\n    rx = Math.abs(rx)\n\n    return [\n      {\n        x: cx + (rx / 100) * ratio,\n        y: cy,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Donut.prototype, 'controls', false)\n"]}

package/dist/ellipse.js

@@ -1,9 +1,10 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, Connectable, Shape } from '@hatiolab/things-scene';
-import ellipseAnchors from './anchors/ellipse-anchors';
-import ellipseOutline from './outline/ellipse-outline';
+import { __decorate } from "tslib";
+import { Component, Connectable, Shape, sceneComponent } from '@hatiolab/things-scene';
+import ellipseAnchors from './anchors/ellipse-anchors.js';
+import ellipseOutline from './outline/ellipse-outline.js';
 const NATURE = {
     mutable: false,
     resizable: true,
@@ -11,7 +12,7 @@ const NATURE = {
     properties: [],
     'value-property': 'text'
 };
-export default class Ellipse extends Connectable(Shape) {
+let Ellipse = class Ellipse extends Connectable(Shape) {
     is3dish() {
         return true;
     }
@@ -66,7 +67,10 @@ export default class Ellipse extends Connectable(Shape) {
     get nature() {
         return NATURE;
     }
-}
+};
+Ellipse = __decorate([
+    sceneComponent('ellipse')
+], Ellipse);
+export default Ellipse;
 Component.memoize(Ellipse.prototype, 'path', false);
-Component.register('ellipse', Ellipse);
 //# sourceMappingURL=ellipse.js.map

package/dist/ellipse.js.map

@@ -1 +1 @@
-{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../src/ellipse.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Anchor, Component, ComponentNature, Connectable, Shape } from '@hatiolab/things-scene'\n\nimport ellipseAnchors from './anchors/ellipse-anchors'\nimport ellipseOutline from './outline/ellipse-outline'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  'value-property': 'text'\n}\n\nexport default class Ellipse extends Connectable(Shape) {\n  is3dish() {\n    return true\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n\n    context.beginPath()\n\n    context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise)\n  }\n\n  get path() {\n    var { cx, cy, rx, ry } = this.state\n\n    return [\n      {\n        x: cx - rx,\n        y: cy - ry\n      },\n      {\n        x: cx + rx,\n        y: cy - ry\n      },\n      {\n        x: cx + rx,\n        y: cy + ry\n      },\n      {\n        x: cx - rx,\n        y: cy + ry\n      }\n    ]\n  }\n\n  set path(path) {\n    var left_top = path[0]\n    var right_bottom = path[2]\n\n    this.set({\n      cx: left_top.x + (right_bottom.x - left_top.x) / 2,\n      cy: left_top.y + (right_bottom.y - left_top.y) / 2,\n      rx: (right_bottom.x - left_top.x) / 2,\n      ry: (right_bottom.y - left_top.y) / 2\n    })\n  }\n\n  contains(x: number, y: number) {\n    var { cx, cy, rx, ry } = this.state\n\n    var normx = (x - cx) / (rx * 2 - 0.5)\n    var normy = (y - cy) / (ry * 2 - 0.5)\n\n    return normx * normx + normy * normy < 0.25\n  }\n\n  outline(progress: number) {\n    return ellipseOutline(this, progress)\n  }\n\n  get anchors(): Array<Anchor> {\n    return ellipseAnchors(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Ellipse.prototype, 'path', false)\n\nComponent.register('ellipse', Ellipse)\n"]}
+{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../src/ellipse.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Anchor, Component, ComponentNature, Connectable, Shape, sceneComponent } from '@hatiolab/things-scene'\n\nimport ellipseAnchors from './anchors/ellipse-anchors.js'\nimport ellipseOutline from './outline/ellipse-outline.js'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [],\n  'value-property': 'text'\n}\n\n@sceneComponent('ellipse')\nexport default class Ellipse extends Connectable(Shape) {\n  is3dish() {\n    return true\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n\n    context.beginPath()\n\n    context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise)\n  }\n\n  get path() {\n    var { cx, cy, rx, ry } = this.state\n\n    return [\n      {\n        x: cx - rx,\n        y: cy - ry\n      },\n      {\n        x: cx + rx,\n        y: cy - ry\n      },\n      {\n        x: cx + rx,\n        y: cy + ry\n      },\n      {\n        x: cx - rx,\n        y: cy + ry\n      }\n    ]\n  }\n\n  set path(path) {\n    var left_top = path[0]\n    var right_bottom = path[2]\n\n    this.set({\n      cx: left_top.x + (right_bottom.x - left_top.x) / 2,\n      cy: left_top.y + (right_bottom.y - left_top.y) / 2,\n      rx: (right_bottom.x - left_top.x) / 2,\n      ry: (right_bottom.y - left_top.y) / 2\n    })\n  }\n\n  contains(x: number, y: number) {\n    var { cx, cy, rx, ry } = this.state\n\n    var normx = (x - cx) / (rx * 2 - 0.5)\n    var normy = (y - cy) / (ry * 2 - 0.5)\n\n    return normx * normx + normy * normy < 0.25\n  }\n\n  outline(progress: number) {\n    return ellipseOutline(this, progress)\n  }\n\n  get anchors(): Array<Anchor> {\n    return ellipseAnchors(this)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Ellipse.prototype, 'path', false)\n"]}

package/dist/gif-view.js

@@ -1,7 +1,8 @@
+import { __decorate } from "tslib";
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, HTMLOverlayElement } from '@hatiolab/things-scene';
+import { HTMLOverlayElement, sceneComponent } from '@hatiolab/things-scene';
 import { SuperGif } from '@wizpanda/super-gif';
 const NATURE = {
     mutable: false,
@@ -23,7 +24,7 @@ const NATURE = {
     help: 'scene/component/gif-view'
 };
 const NOIMAGE_DATA_URI = 'data:image/gif;base64,R0lGODlhYABIAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKio+Pj5iYmKCgoKampqurq66urrCwsLGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrOzs7S0tLa2tre3t7m5ubu7u7+/v8DAwMHBwcPDw8XFxcfHx8vLy8/Pz9LS0tXV1dfX193d3eTk5Onp6fj4+Pz8/P7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v///////////////////////////////////////////////////////////////////////////////yH5BAkAAPUAIf47R2VuZXJhdGVkIGJ5IGpzZ2lmIChodHRwczovL2dpdGh1Yi5jb20vYW50aW1hdHRlcjE1L2pzZ2lmLykALAAAAABgAEgAAAj+AGcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmR9VKqXMmypcuXMGPKnJkSIs2bOHPqZGlzp8+fQOv1DEq0KMyhRpMmRaq0KVCmTqPmhCq1qkyqLrFRSyYwGTVsVo1iZXmNa8Fk18ISHasSm1mDycCq/ck2JTWF1ObSfTjz7cFken3WFbow8M7BDA3rHOwXruKpfGXeTZg3qDVrUge7RRg3KLZjx+Q2HVyvLNy0QaMJjBaVdD2tZr2K/mmNIObRkR+n9AsYt0Pddg1WXppb8bWDx1CLLW74GcJnSl3TtDY8Zu2Et4tKl7n52eyWnxXvhl7+26jqrspbnlfIWjtz2gWPZV95neH8veU9NxZYfbfD3kFt99J6Bnmn0mQO9XfYezrVxxlmx0GUXIAM4hSeffsxBN1TFd5E4Ef3QZbfTg6CNJ5gHXJ3TEntLThiTh+KFCJNAqZU4kgAitjQTheepOBMNcZI0oQ6JpbTjSZtiNN2PZ400IxHpdiSc07G911M0iFZZYtAStnWilUeBGVLrlEZpmM0elmPlmfO8iOZXl4DZpsGEYmll2bSWWCXLwJXVY1+urhjoGEBSuiSah6K36CKtpZoo4s9CimielZq6aWYZqrpppx26umnoIZ6UkAAOw==';
-export default class GifView extends HTMLOverlayElement {
+let GifView = class GifView extends HTMLOverlayElement {
     async oncreate_element(div) {
         var { src, play } = this.state;
         this.onchangesrc(src);
@@ -111,6 +112,9 @@ export default class GifView extends HTMLOverlayElement {
     get tagName() {
         return 'div';
     }
-}
-Component.register('gif-view', GifView);
+};
+GifView = __decorate([
+    sceneComponent('gif-view')
+], GifView);
+export default GifView;
 //# sourceMappingURL=gif-view.js.map

package/dist/gif-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"gif-view.js","sourceRoot":"","sources":["../src/gif-view.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, ComponentNature, HTMLOverlayElement, Properties, RectPath, Shape } from '@hatiolab/things-scene'\nimport { SuperGif } from '@wizpanda/super-gif'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'src',\n      name: 'src'\n    },\n    {\n      type: 'checkbox',\n      label: 'play',\n      name: 'play'\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/gif-view'\n}\n\nconst NOIMAGE_DATA_URI =\n  'data:image/gif;base64,R0lGODlhYABIAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKio+Pj5iYmKCgoKampqurq66urrCwsLGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrOzs7S0tLa2tre3t7m5ubu7u7+/v8DAwMHBwcPDw8XFxcfHx8vLy8/Pz9LS0tXV1dfX193d3eTk5Onp6fj4+Pz8/P7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v///////////////////////////////////////////////////////////////////////////////yH5BAkAAPUAIf47R2VuZXJhdGVkIGJ5IGpzZ2lmIChodHRwczovL2dpdGh1Yi5jb20vYW50aW1hdHRlcjE1L2pzZ2lmLykALAAAAABgAEgAAAj+AGcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmR9VKqXMmypcuXMGPKnJkSIs2bOHPqZGlzp8+fQOv1DEq0KMyhRpMmRaq0KVCmTqPmhCq1qkyqLrFRSyYwGTVsVo1iZXmNa8Fk18ISHasSm1mDycCq/ck2JTWF1ObSfTjz7cFken3WFbow8M7BDA3rHOwXruKpfGXeTZg3qDVrUge7RRg3KLZjx+Q2HVyvLNy0QaMJjBaVdD2tZr2K/mmNIObRkR+n9AsYt0Pddg1WXppb8bWDx1CLLW74GcJnSl3TtDY8Zu2Et4tKl7n52eyWnxXvhl7+26jqrspbnlfIWjtz2gWPZV95neH8veU9NxZYfbfD3kFt99J6Bnmn0mQO9XfYezrVxxlmx0GUXIAM4hSeffsxBN1TFd5E4Ef3QZbfTg6CNJ5gHXJ3TEntLThiTh+KFCJNAqZU4kgAitjQTheepOBMNcZI0oQ6JpbTjSZtiNN2PZ400IxHpdiSc07G911M0iFZZYtAStnWilUeBGVLrlEZpmM0elmPlmfO8iOZXl4DZpsGEYmll2bSWWCXLwJXVY1+urhjoGEBSuiSah6K36CKtpZoo4s9CimielZq6aWYZqrpppx26umnoIZ6UkAAOw=='\n\nexport default class GifView extends HTMLOverlayElement {\n  _superGif?: SuperGif\n\n  async oncreate_element(div: HTMLDivElement) {\n    var { src, play } = this.state\n\n    this.onchangesrc(src)\n    this.onchangeplay(play)\n  }\n\n  buildImg() {\n    /* clear first */\n    var div = this.element\n    div.innerHTML = ''\n\n    var gif = document.createElement('img')\n    gif.style.width = '100%'\n    gif.style.height = '100%'\n\n    div.appendChild(gif)\n\n    return gif\n  }\n\n  onchange(after: Properties, before: Properties) {\n    super.onchange(after, before)\n\n    'src' in after && this.onchangesrc(after.src)\n    'play' in after && this.onchangeplay(after.play)\n  }\n\n  setElementProperties(div: HTMLDivElement) {}\n\n  onchangeplay(play: boolean) {\n    var superGif = this._superGif\n\n    if (!superGif || !superGif.isReady()) {\n      return\n    }\n\n    if (play) {\n      superGif.play()\n    } else {\n      superGif.pause()\n    }\n  }\n\n  onchangesrc(src: string) {\n    var gif = this.buildImg()\n\n    if (!src) src = NOIMAGE_DATA_URI\n\n    gif.src = src\n    gif.setAttribute('rel:animated_src', src)\n    gif.setAttribute('rel:auto_play', '0')\n\n    this._superGif = new SuperGif(gif, {\n      autoPlay: false /* Without this setting, the first play's framerate is too fast. */\n    })\n    //@ts-ignore\n    this._superGif!.init()\n\n    for (const child of this.element.children as any) {\n      child.style.width = '100%'\n      child.style.height = '100%'\n    }\n\n    var canvas = this._superGif!.getCanvas()\n    canvas.style.width = '100%'\n    canvas.style.height = '100%'\n\n    this._superGif.load(() => {\n      this._superGif!.moveTo(0)\n\n      /*\n       * FIXME. this.play 는 컴포넌트의 getState()를 통해서 가져오게 되는데, 체크박스의 경우 문제가 있는 것 같다.\n       * 문제 해결 후 this.get(\"play\") => this.play로 수정할 것.\n       */\n      this.play && this._superGif!.play()\n    })\n  }\n\n  ondropfile(transfered: DataTransferItemList, files: FileList) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (/\\.gif$/.test((transfered[i] as any).name)) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n\n  get src() {\n    return this.getState('src')\n  }\n\n  set src(src) {\n    this.setState('src', src)\n  }\n\n  get play() {\n    return this.getState('play')\n  }\n\n  set play(play) {\n    this.setState('play', play)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get tagName() {\n    return 'div'\n  }\n}\n\nComponent.register('gif-view', GifView)\n"]}
+{"version":3,"file":"gif-view.js","sourceRoot":"","sources":["../src/gif-view.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport {\n  Component,\n  ComponentNature,\n  HTMLOverlayElement,\n  Properties,\n  RectPath,\n  Shape,\n  sceneComponent\n} from '@hatiolab/things-scene'\nimport { SuperGif } from '@wizpanda/super-gif'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'string',\n      label: 'src',\n      name: 'src'\n    },\n    {\n      type: 'checkbox',\n      label: 'play',\n      name: 'play'\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/gif-view'\n}\n\nconst NOIMAGE_DATA_URI =\n  'data:image/gif;base64,R0lGODlhYABIAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKio+Pj5iYmKCgoKampqurq66urrCwsLGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrOzs7S0tLa2tre3t7m5ubu7u7+/v8DAwMHBwcPDw8XFxcfHx8vLy8/Pz9LS0tXV1dfX193d3eTk5Onp6fj4+Pz8/P7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v///////////////////////////////////////////////////////////////////////////////yH5BAkAAPUAIf47R2VuZXJhdGVkIGJ5IGpzZ2lmIChodHRwczovL2dpdGh1Yi5jb20vYW50aW1hdHRlcjE1L2pzZ2lmLykALAAAAABgAEgAAAj+AGcJHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDNq3Mixo8ePIEOKHEmypMmR9VKqXMmypcuXMGPKnJkSIs2bOHPqZGlzp8+fQOv1DEq0KMyhRpMmRaq0KVCmTqPmhCq1qkyqLrFRSyYwGTVsVo1iZXmNa8Fk18ISHasSm1mDycCq/ck2JTWF1ObSfTjz7cFken3WFbow8M7BDA3rHOwXruKpfGXeTZg3qDVrUge7RRg3KLZjx+Q2HVyvLNy0QaMJjBaVdD2tZr2K/mmNIObRkR+n9AsYt0Pddg1WXppb8bWDx1CLLW74GcJnSl3TtDY8Zu2Et4tKl7n52eyWnxXvhl7+26jqrspbnlfIWjtz2gWPZV95neH8veU9NxZYfbfD3kFt99J6Bnmn0mQO9XfYezrVxxlmx0GUXIAM4hSeffsxBN1TFd5E4Ef3QZbfTg6CNJ5gHXJ3TEntLThiTh+KFCJNAqZU4kgAitjQTheepOBMNcZI0oQ6JpbTjSZtiNN2PZ400IxHpdiSc07G911M0iFZZYtAStnWilUeBGVLrlEZpmM0elmPlmfO8iOZXl4DZpsGEYmll2bSWWCXLwJXVY1+urhjoGEBSuiSah6K36CKtpZoo4s9CimielZq6aWYZqrpppx26umnoIZ6UkAAOw=='\n\n@sceneComponent('gif-view')\nexport default class GifView extends HTMLOverlayElement {\n  _superGif?: SuperGif\n\n  async oncreate_element(div: HTMLDivElement) {\n    var { src, play } = this.state\n\n    this.onchangesrc(src)\n    this.onchangeplay(play)\n  }\n\n  buildImg() {\n    /* clear first */\n    var div = this.element\n    div.innerHTML = ''\n\n    var gif = document.createElement('img')\n    gif.style.width = '100%'\n    gif.style.height = '100%'\n\n    div.appendChild(gif)\n\n    return gif\n  }\n\n  onchange(after: Properties, before: Properties) {\n    super.onchange(after, before)\n\n    'src' in after && this.onchangesrc(after.src)\n    'play' in after && this.onchangeplay(after.play)\n  }\n\n  setElementProperties(div: HTMLDivElement) {}\n\n  onchangeplay(play: boolean) {\n    var superGif = this._superGif\n\n    if (!superGif || !superGif.isReady()) {\n      return\n    }\n\n    if (play) {\n      superGif.play()\n    } else {\n      superGif.pause()\n    }\n  }\n\n  onchangesrc(src: string) {\n    var gif = this.buildImg()\n\n    if (!src) src = NOIMAGE_DATA_URI\n\n    gif.src = src\n    gif.setAttribute('rel:animated_src', src)\n    gif.setAttribute('rel:auto_play', '0')\n\n    this._superGif = new SuperGif(gif, {\n      autoPlay: false /* Without this setting, the first play's framerate is too fast. */\n    })\n    //@ts-ignore\n    this._superGif!.init()\n\n    for (const child of this.element.children as any) {\n      child.style.width = '100%'\n      child.style.height = '100%'\n    }\n\n    var canvas = this._superGif!.getCanvas()\n    canvas.style.width = '100%'\n    canvas.style.height = '100%'\n\n    this._superGif.load(() => {\n      this._superGif!.moveTo(0)\n\n      /*\n       * FIXME. this.play 는 컴포넌트의 getState()를 통해서 가져오게 되는데, 체크박스의 경우 문제가 있는 것 같다.\n       * 문제 해결 후 this.get(\"play\") => this.play로 수정할 것.\n       */\n      this.play && this._superGif!.play()\n    })\n  }\n\n  ondropfile(transfered: DataTransferItemList, files: FileList) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (/\\.gif$/.test((transfered[i] as any).name)) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n\n  get src() {\n    return this.getState('src')\n  }\n\n  set src(src) {\n    this.setState('src', src)\n  }\n\n  get play() {\n    return this.getState('play')\n  }\n\n  set play(play) {\n    this.setState('play', play)\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get tagName() {\n    return 'div'\n  }\n}\n"]}

package/dist/image-view.js

@@ -1,7 +1,9 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { error, Component, RectPath, Shape } from '@hatiolab/things-scene';
+var ImageView_1;
+import { __decorate } from "tslib";
+import { error, Component, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene';
 const NATURE = {
     mutable: false,
     resizable: true,
@@ -41,13 +43,13 @@ const NATURE = {
     help: 'scene/component/image-view'
 };
 const NOIMAGE_DATA_URI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABIBAMAAAD7Se1QAAAAIVBMVEUAAABHcEwBAQEREREBAQEEBAQGBgYLCwsDAwMDAwMICAi6HF9tAAAAC3RSTlNNAEAERiMYCS41Eac10lYAAAEgSURBVHhe7dY9asQwEAXgh7DNertNiJy48pIitY3SB7bYdk0ukL1BDDmA9gZecoH4pmFQ3MQayUMguPBrNPD4wD9TCMvJmt3M/AtYwXOlXiWgqADVCUBD46MAnGhMBaCiUQmAm8VA/Eh/eWl9Fn5WcxD+OLuRrUYJDKLluwH2InACUgkoACSdADxQc50Bytadb9RkM0CT13TcvlCT1HFg8UTHvasuUVACCa3El6u2UdD8LFTlKhUFFgA+d3dj10aABkUN72N3jAADCrJq7PIIsPidcxBoTHIIAjMFmyCwmGYIAA1P9gFgfCANAOsDSccCDW+uLDB+kLGg94OkZoAGkwsDDAe2DOg5oPxAg03rBR88OHpBz4N8UVeHFSwma74BTW6Ge4rIRa4AAAAASUVORK5CYII=';
-export default class ImageView extends RectPath(Shape) {
+let ImageView = ImageView_1 = class ImageView extends RectPath(Shape) {
     static get noimage() {
-        if (!ImageView.NOIMAGE) {
-            ImageView.NOIMAGE = new Image();
-            ImageView.NOIMAGE.src = NOIMAGE_DATA_URI;
+        if (!ImageView_1.NOIMAGE) {
+            ImageView_1.NOIMAGE = new Image();
+            ImageView_1.NOIMAGE.src = NOIMAGE_DATA_URI;
         }
-        return ImageView.NOIMAGE;
+        return ImageView_1.NOIMAGE;
     }
     dispose() {
         super.dispose();
@@ -69,12 +71,12 @@ export default class ImageView extends RectPath(Shape) {
                     ctx.drawImage(this._image, left, top, width, height);
                 }
                 catch (e) {
-                    ctx.drawImage(ImageView.noimage, left, top, width, height);
+                    ctx.drawImage(ImageView_1.noimage, left, top, width, height);
                 }
             }
         }
         else {
-            !this.app.isViewMode && ctx.drawImage(ImageView.noimage, left, top, width, height);
+            !this.app.isViewMode && ctx.drawImage(ImageView_1.noimage, left, top, width, height);
         }
     }
     get nature() {
@@ -143,7 +145,11 @@ export default class ImageView extends RectPath(Shape) {
             }
         }
     }
-}
+};
+ImageView = ImageView_1 = __decorate([
+    sceneComponent('image-view')
+], ImageView);
+export default ImageView;
 function makeGrayImage(ctx, width, height) {
     try {
         var img = ctx.getImageData(0, 0, width, height);
@@ -176,5 +182,4 @@ function makeGrayImage(ctx, width, height) {
     }
     return img;
 }
-Component.register('image-view', ImageView);
 //# sourceMappingURL=image-view.js.map

package/dist/image-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-view.js","sourceRoot":"","sources":["../src/image-view.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { error, Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'image-selector',\n      label: 'image-src',\n      name: 'src',\n      property: {\n        displayField: 'id',\n        displayFullUrl: true,\n        baseUrlAlias: '$base_url',\n        defaultStorage: 'scene-image',\n        storageFilters: {\n          type: Array,\n          value: [\n            {\n              name: 'category',\n              value: 'image'\n            }\n          ]\n        },\n        useUpload: true\n      }\n    },\n    {\n      type: 'select',\n      label: 'cross-origin',\n      name: 'crossOrigin',\n      property: {\n        options: ['', 'anonymous', 'use-credentials']\n      }\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/image-view'\n}\n\nconst NOIMAGE_DATA_URI =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABIBAMAAAD7Se1QAAAAIVBMVEUAAABHcEwBAQEREREBAQEEBAQGBgYLCwsDAwMDAwMICAi6HF9tAAAAC3RSTlNNAEAERiMYCS41Eac10lYAAAEgSURBVHhe7dY9asQwEAXgh7DNertNiJy48pIitY3SB7bYdk0ukL1BDDmA9gZecoH4pmFQ3MQayUMguPBrNPD4wD9TCMvJmt3M/AtYwXOlXiWgqADVCUBD46MAnGhMBaCiUQmAm8VA/Eh/eWl9Fn5WcxD+OLuRrUYJDKLluwH2InACUgkoACSdADxQc50Bytadb9RkM0CT13TcvlCT1HFg8UTHvasuUVACCa3El6u2UdD8LFTlKhUFFgA+d3dj10aABkUN72N3jAADCrJq7PIIsPidcxBoTHIIAjMFmyCwmGYIAA1P9gFgfCANAOsDSccCDW+uLDB+kLGg94OkZoAGkwsDDAe2DOg5oPxAg03rBR88OHpBz4N8UVeHFSwma74BTW6Ge4rIRa4AAAAASUVORK5CYII='\n\nexport default class ImageView extends RectPath(Shape) {\n  static NOIMAGE?: any\n\n  static get noimage() {\n    if (!ImageView.NOIMAGE) {\n      ImageView.NOIMAGE = new Image()\n      ImageView.NOIMAGE.src = NOIMAGE_DATA_URI\n    }\n\n    return ImageView.NOIMAGE\n  }\n\n  _offcanvas?: HTMLCanvasElement\n  _image?: any\n\n  dispose() {\n    super.dispose()\n    delete this._offcanvas\n    delete this._image\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height, isGray = false, alpha = 1, src } = this.state\n\n    this.prepareIf(!this._image && src)\n\n    // 박스 그리기\n    ctx.beginPath()\n    ctx.globalAlpha *= alpha\n\n    if (this._image && this._image.complete) {\n      if (isGray && this._offcanvas) {\n        ctx.drawImage(this._offcanvas, left, top, width, height)\n      } else {\n        try {\n          ctx.drawImage(this._image, left, top, width, height)\n        } catch (e) {\n          ctx.drawImage(ImageView.noimage, left, top, width, height)\n        }\n      }\n    } else {\n      !this.app.isViewMode && ctx.drawImage(ImageView.noimage, left, top, width, height)\n    }\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  ready() {\n    super.ready()\n    this.prepareIf(!this._image && this.state.src)\n  }\n\n  prepare(resolve: (ret?: any) => void, reject: (e?: any) => void) {\n    var { src, crossOrigin } = this.state\n\n    if (!src) {\n      resolve(this)\n      return\n    }\n\n    this._image = new Image()\n\n    try {\n      if (crossOrigin) {\n        this._image.crossOrigin = crossOrigin\n      }\n\n      this._image.src = this.app.url(src) || ''\n    } catch (e) {\n      reject(e)\n      return\n    }\n\n    this._image.onload = () => {\n      if (this.getState('isGray')) {\n        let width = this._image.width\n        let height = this._image.height\n\n        this._offcanvas = Component.createCanvas(width, height)\n\n        let offcontext = this._offcanvas!.getContext('2d') as CanvasRenderingContext2D\n        offcontext!.drawImage(this._image, 0, 0)\n\n        let imageData = makeGrayImage(offcontext, width, height)\n        offcontext!.putImageData(imageData!, 0, 0)\n      }\n\n      resolve(this)\n    }\n\n    this._image.onerror = (e: any) => {\n      if (this._image && !this._image.currentSrc) this._image = null\n      reject(e)\n    }\n  }\n\n  get src() {\n    return this.getState('src')\n  }\n\n  set src(src) {\n    this.setState('src', src)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if (after.hasOwnProperty('src') || after.hasOwnProperty('isGray')) {\n      delete this._offcanvas\n      delete this._image\n      this.prepareIf(after.src)\n    }\n  }\n\n  ondropfile(transfered: DataTransferItemList, files: FileList) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (transfered[i].type.startsWith('image/')) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n}\n\nfunction makeGrayImage(ctx: CanvasRenderingContext2D, width: number, height: number) {\n  try {\n    var img = ctx.getImageData(0, 0, width, height)\n  } catch (e: any) {\n    error('Get Image Data Error: ' + e.message)\n    return null\n  }\n\n  var data = img.data\n  // Loop through data.\n  for (let i = 0; i < width * height * 4; i += 4) {\n    // First bytes are red bytes.\n    // Get red value.\n    let red = data[i]\n\n    // Second bytes are green bytes.\n    // Get green value.\n    let green = data[i + 1]\n\n    // Third bytes are blue bytes.\n    // Get blue value.\n    let blue = data[i + 2]\n\n    // Fourth bytes are alpha bytes\n    // We don't care about alpha here.\n    // Add the three values and divide by three.\n    // Make it an integer.\n    let gray = parseInt(String((red + green + blue) / 3))\n\n    // Assign average to red, green, and blue.\n    img.data[i] = gray\n    img.data[i + 1] = gray\n    img.data[i + 2] = gray\n  }\n\n  return img\n}\n\nComponent.register('image-view', ImageView)\n"]}
+{"version":3,"file":"image-view.js","sourceRoot":"","sources":["../src/image-view.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { error, Component, ComponentNature, Properties, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'image-selector',\n      label: 'image-src',\n      name: 'src',\n      property: {\n        displayField: 'id',\n        displayFullUrl: true,\n        baseUrlAlias: '$base_url',\n        defaultStorage: 'scene-image',\n        storageFilters: {\n          type: Array,\n          value: [\n            {\n              name: 'category',\n              value: 'image'\n            }\n          ]\n        },\n        useUpload: true\n      }\n    },\n    {\n      type: 'select',\n      label: 'cross-origin',\n      name: 'crossOrigin',\n      property: {\n        options: ['', 'anonymous', 'use-credentials']\n      }\n    }\n  ],\n  'value-property': 'src',\n  help: 'scene/component/image-view'\n}\n\nconst NOIMAGE_DATA_URI =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABIBAMAAAD7Se1QAAAAIVBMVEUAAABHcEwBAQEREREBAQEEBAQGBgYLCwsDAwMDAwMICAi6HF9tAAAAC3RSTlNNAEAERiMYCS41Eac10lYAAAEgSURBVHhe7dY9asQwEAXgh7DNertNiJy48pIitY3SB7bYdk0ukL1BDDmA9gZecoH4pmFQ3MQayUMguPBrNPD4wD9TCMvJmt3M/AtYwXOlXiWgqADVCUBD46MAnGhMBaCiUQmAm8VA/Eh/eWl9Fn5WcxD+OLuRrUYJDKLluwH2InACUgkoACSdADxQc50Bytadb9RkM0CT13TcvlCT1HFg8UTHvasuUVACCa3El6u2UdD8LFTlKhUFFgA+d3dj10aABkUN72N3jAADCrJq7PIIsPidcxBoTHIIAjMFmyCwmGYIAA1P9gFgfCANAOsDSccCDW+uLDB+kLGg94OkZoAGkwsDDAe2DOg5oPxAg03rBR88OHpBz4N8UVeHFSwma74BTW6Ge4rIRa4AAAAASUVORK5CYII='\n\n@sceneComponent('image-view')\nexport default class ImageView extends RectPath(Shape) {\n  static NOIMAGE?: any\n\n  static get noimage() {\n    if (!ImageView.NOIMAGE) {\n      ImageView.NOIMAGE = new Image()\n      ImageView.NOIMAGE.src = NOIMAGE_DATA_URI\n    }\n\n    return ImageView.NOIMAGE\n  }\n\n  _offcanvas?: HTMLCanvasElement\n  _image?: any\n\n  dispose() {\n    super.dispose()\n    delete this._offcanvas\n    delete this._image\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { left, top, width, height, isGray = false, alpha = 1, src } = this.state\n\n    this.prepareIf(!this._image && src)\n\n    // 박스 그리기\n    ctx.beginPath()\n    ctx.globalAlpha *= alpha\n\n    if (this._image && this._image.complete) {\n      if (isGray && this._offcanvas) {\n        ctx.drawImage(this._offcanvas, left, top, width, height)\n      } else {\n        try {\n          ctx.drawImage(this._image, left, top, width, height)\n        } catch (e) {\n          ctx.drawImage(ImageView.noimage, left, top, width, height)\n        }\n      }\n    } else {\n      !this.app.isViewMode && ctx.drawImage(ImageView.noimage, left, top, width, height)\n    }\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  get hasTextProperty() {\n    return false\n  }\n\n  ready() {\n    super.ready()\n    this.prepareIf(!this._image && this.state.src)\n  }\n\n  prepare(resolve: (ret?: any) => void, reject: (e?: any) => void) {\n    var { src, crossOrigin } = this.state\n\n    if (!src) {\n      resolve(this)\n      return\n    }\n\n    this._image = new Image()\n\n    try {\n      if (crossOrigin) {\n        this._image.crossOrigin = crossOrigin\n      }\n\n      this._image.src = this.app.url(src) || ''\n    } catch (e) {\n      reject(e)\n      return\n    }\n\n    this._image.onload = () => {\n      if (this.getState('isGray')) {\n        let width = this._image.width\n        let height = this._image.height\n\n        this._offcanvas = Component.createCanvas(width, height)\n\n        let offcontext = this._offcanvas!.getContext('2d') as CanvasRenderingContext2D\n        offcontext!.drawImage(this._image, 0, 0)\n\n        let imageData = makeGrayImage(offcontext, width, height)\n        offcontext!.putImageData(imageData!, 0, 0)\n      }\n\n      resolve(this)\n    }\n\n    this._image.onerror = (e: any) => {\n      if (this._image && !this._image.currentSrc) this._image = null\n      reject(e)\n    }\n  }\n\n  get src() {\n    return this.getState('src')\n  }\n\n  set src(src) {\n    this.setState('src', src)\n  }\n\n  onchange(after: Properties, before: Properties) {\n    if (after.hasOwnProperty('src') || after.hasOwnProperty('isGray')) {\n      delete this._offcanvas\n      delete this._image\n      this.prepareIf(after.src)\n    }\n  }\n\n  ondropfile(transfered: DataTransferItemList, files: FileList) {\n    for (let i = 0; i < transfered.length; i++) {\n      if (transfered[i].type.startsWith('image/')) {\n        this.src = files[i]\n        return\n      }\n    }\n  }\n}\n\nfunction makeGrayImage(ctx: CanvasRenderingContext2D, width: number, height: number) {\n  try {\n    var img = ctx.getImageData(0, 0, width, height)\n  } catch (e: any) {\n    error('Get Image Data Error: ' + e.message)\n    return null\n  }\n\n  var data = img.data\n  // Loop through data.\n  for (let i = 0; i < width * height * 4; i += 4) {\n    // First bytes are red bytes.\n    // Get red value.\n    let red = data[i]\n\n    // Second bytes are green bytes.\n    // Get green value.\n    let green = data[i + 1]\n\n    // Third bytes are blue bytes.\n    // Get blue value.\n    let blue = data[i + 2]\n\n    // Fourth bytes are alpha bytes\n    // We don't care about alpha here.\n    // Add the three values and divide by three.\n    // Make it an integer.\n    let gray = parseInt(String((red + green + blue) / 3))\n\n    // Assign average to red, green, and blue.\n    img.data[i] = gray\n    img.data[i + 1] = gray\n    img.data[i + 2] = gray\n  }\n\n  return img\n}\n"]}

package/dist/index.d.ts

@@ -1,11 +1,11 @@
-export { default as Ellipse } from './ellipse';
-export { default as Rect } from './rect';
-export { default as Polygon } from './polygon';
-export { default as Polyline } from './polyline';
-export { default as ImageView } from './image-view';
-export { default as GifView } from './gif-view';
-export { default as AudioPlayer } from './audio';
-export { default as Text } from './text';
-export { default as Triangle } from './triangle';
-export { default as Donut } from './donut';
-export { default as Star } from './star';
+export { default as Ellipse } from './ellipse.js';
+export { default as Rect } from './rect.js';
+export { default as Polygon } from './polygon.js';
+export { default as Polyline } from './polyline.js';
+export { default as ImageView } from './image-view.js';
+export { default as GifView } from './gif-view.js';
+export { default as AudioPlayer } from './audio.js';
+export { default as Text } from './text.js';
+export { default as Triangle } from './triangle.js';
+export { default as Donut } from './donut.js';
+export { default as Star } from './star.js';

package/dist/index.js

@@ -1,15 +1,15 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-export { default as Ellipse } from './ellipse';
-export { default as Rect } from './rect';
-export { default as Polygon } from './polygon';
-export { default as Polyline } from './polyline';
-export { default as ImageView } from './image-view';
-export { default as GifView } from './gif-view';
-export { default as AudioPlayer } from './audio';
-export { default as Text } from './text';
-export { default as Triangle } from './triangle';
-export { default as Donut } from './donut';
-export { default as Star } from './star';
+export { default as Ellipse } from './ellipse.js';
+export { default as Rect } from './rect.js';
+export { default as Polygon } from './polygon.js';
+export { default as Polyline } from './polyline.js';
+export { default as ImageView } from './image-view.js';
+export { default as GifView } from './gif-view.js';
+export { default as AudioPlayer } from './audio.js';
+export { default as Text } from './text.js';
+export { default as Triangle } from './triangle.js';
+export { default as Donut } from './donut.js';
+export { default as Star } from './star.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAA;AAC9C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AAExC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as Ellipse } from './ellipse'\nexport { default as Rect } from './rect'\nexport { default as Polygon } from './polygon'\nexport { default as Polyline } from './polyline'\nexport { default as ImageView } from './image-view'\nexport { default as GifView } from './gif-view'\nexport { default as AudioPlayer } from './audio'\nexport { default as Text } from './text'\n\nexport { default as Triangle } from './triangle'\nexport { default as Donut } from './donut'\nexport { default as Star } from './star'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAA;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAA;AAE3C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport { default as Ellipse } from './ellipse.js'\nexport { default as Rect } from './rect.js'\nexport { default as Polygon } from './polygon.js'\nexport { default as Polyline } from './polyline.js'\nexport { default as ImageView } from './image-view.js'\nexport { default as GifView } from './gif-view.js'\nexport { default as AudioPlayer } from './audio.js'\nexport { default as Text } from './text.js'\n\nexport { default as Triangle } from './triangle.js'\nexport { default as Donut } from './donut.js'\nexport { default as Star } from './star.js'\n"]}

package/dist/polygon.js

@@ -1,7 +1,8 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, Shape } from '@hatiolab/things-scene';
+import { __decorate } from "tslib";
+import { Component, Shape, sceneComponent } from '@hatiolab/things-scene';
 var controlHandler = {
     ondragstart: function (point, index, component) {
         component.mutatePath(null, function (path) {
@@ -33,7 +34,7 @@ const NATURE = {
     ],
     help: 'scene/component/polygon'
 };
-export default class Polygon extends Shape {
+let Polygon = class Polygon extends Shape {
     is3dish() {
         return true;
     }
@@ -78,7 +79,10 @@ export default class Polygon extends Shape {
     get nature() {
         return NATURE;
     }
-}
+};
+Polygon = __decorate([
+    sceneComponent('polygon')
+], Polygon);
+export default Polygon;
 Component.memoize(Polygon.prototype, 'controls', false);
-Component.register('polygon', Polygon);
 //# sourceMappingURL=polygon.js.map

package/dist/polygon.js.map

@@ -1 +1 @@
-{"version":3,"file":"polygon.js","sourceRoot":"","sources":["../src/polygon.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, POINT, POSITION, Shape } from '@hatiolab/things-scene'\n\nvar controlHandler = {\n  ondragstart: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path: Array<POINT>) {\n      path.splice(index + 1, 0, point)\n    })\n  },\n\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path: Array<POINT>) {\n      path[index + 1] = point\n    })\n  },\n\n  ondragend: function (point: POSITION, index: number, component: Component) {}\n}\n\nconst NATURE: ComponentNature = {\n  mutable: true,\n  resizable: false,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    }\n  ],\n  help: 'scene/component/polygon'\n}\n\nexport default class Polygon extends Shape {\n  is3dish() {\n    return true\n  }\n\n  get mutable() {\n    return true\n  }\n\n  get pathExtendable() {\n    return true\n  }\n\n  get path() {\n    return this.state.path\n  }\n\n  set path(path) {\n    this.setState('path', path)\n  }\n\n  contains(x: number, y: number) {\n    var path = this.state.path as Array<POINT>\n    var result = false\n\n    path.forEach((p, idx) => {\n      let j = (idx + path.length + 1) % path.length\n\n      let x1 = p.x\n      let y1 = p.y\n      let x2 = path[j].x\n      let y2 = path[j].y\n\n      if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) result = !result\n    })\n\n    return result\n  }\n\n  get controls() {\n    // 폴리곤에서의 control은 새로운 path를 추가하는 포인트이다.\n    var path = this.path as Array<POINT>\n\n    return path.map((p1, i) => {\n      let p2 = path[i + 1 >= path.length ? 0 : i + 1]\n\n      return {\n        x: (p1.x + p2.x) / 2,\n        y: (p1.y + p2.y) / 2,\n        handler: controlHandler\n      }\n    })\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Polygon.prototype, 'controls', false)\n\nComponent.register('polygon', Polygon)\n"]}
+{"version":3,"file":"polygon.js","sourceRoot":"","sources":["../src/polygon.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, POINT, POSITION, Shape, sceneComponent } from '@hatiolab/things-scene'\n\nvar controlHandler = {\n  ondragstart: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path: Array<POINT>) {\n      path.splice(index + 1, 0, point)\n    })\n  },\n\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path: Array<POINT>) {\n      path[index + 1] = point\n    })\n  },\n\n  ondragend: function (point: POSITION, index: number, component: Component) {}\n}\n\nconst NATURE: ComponentNature = {\n  mutable: true,\n  resizable: false,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    }\n  ],\n  help: 'scene/component/polygon'\n}\n\n@sceneComponent('polygon')\nexport default class Polygon extends Shape {\n  is3dish() {\n    return true\n  }\n\n  get mutable() {\n    return true\n  }\n\n  get pathExtendable() {\n    return true\n  }\n\n  get path() {\n    return this.state.path\n  }\n\n  set path(path) {\n    this.setState('path', path)\n  }\n\n  contains(x: number, y: number) {\n    var path = this.state.path as Array<POINT>\n    var result = false\n\n    path.forEach((p, idx) => {\n      let j = (idx + path.length + 1) % path.length\n\n      let x1 = p.x\n      let y1 = p.y\n      let x2 = path[j].x\n      let y2 = path[j].y\n\n      if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) result = !result\n    })\n\n    return result\n  }\n\n  get controls() {\n    // 폴리곤에서의 control은 새로운 path를 추가하는 포인트이다.\n    var path = this.path as Array<POINT>\n\n    return path.map((p1, i) => {\n      let p2 = path[i + 1 >= path.length ? 0 : i + 1]\n\n      return {\n        x: (p1.x + p2.x) / 2,\n        y: (p1.y + p2.y) / 2,\n        handler: controlHandler\n      }\n    })\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Polygon.prototype, 'controls', false)\n"]}

package/dist/polyline.js

@@ -1,7 +1,8 @@
+import { __decorate } from "tslib";
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, Line } from '@hatiolab/things-scene';
+import { Line, sceneComponent } from '@hatiolab/things-scene';
 var controlHandler = {
     ondragstart: function (point, index, component) {
         component.mutatePath(null, function (path) {
@@ -33,7 +34,7 @@ const NATURE = {
     ],
     help: 'scene/component/polyline'
 };
-export default class Polyline extends Line {
+let Polyline = class Polyline extends Line {
     get pathExtendable() {
         return true;
     }
@@ -95,8 +96,11 @@ export default class Polyline extends Line {
     get nature() {
         return NATURE;
     }
-}
+};
+Polyline = __decorate([
+    sceneComponent('polyline')
+], Polyline);
+export default Polyline;
 /* target anchor의 움직임이 반영되지 못하므로, 일단 controls memoize를 제거함. */
 // Component.memoize(Polyline.prototype, 'controls', false)
-Component.register('polyline', Polyline);
 //# sourceMappingURL=polyline.js.map

package/dist/polyline.js.map

@@ -1 +1 @@
-{"version":3,"file":"polyline.js","sourceRoot":"","sources":["../src/polyline.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, ComponentNature, Properties, Line, POSITION } from '@hatiolab/things-scene'\n\nvar controlHandler = {\n  ondragstart: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path) {\n      path.splice(index, 0, point) // array.insert(index, point) 의 의미임.\n    })\n  },\n\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path) {\n      path[index] = point\n    })\n  },\n\n  ondragend: function (point: POSITION, index: number, component: Component) {}\n}\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: false,\n  rotatable: false,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    }\n  ],\n  help: 'scene/component/polyline'\n}\n\nexport default class Polyline extends Line {\n  _fromEnd: any\n  _toEnd: any\n\n  get pathExtendable() {\n    return true\n  }\n\n  get path() {\n    const { from, to } = this.state\n    const { path } = this.state\n\n    return [\n      this.fromEnd?.position || from?.position || path[0],\n      ...path.slice(1, -1),\n      this.toEnd?.position || to?.position || path[path.length - 1]\n    ]\n  }\n\n  set path(path) {\n    const { from, to } = this.state\n\n    delete this._fromEnd\n    delete this._toEnd\n\n    this.set({\n      from: {\n        ...from,\n        position: path[0]\n      },\n      to: {\n        ...to,\n        position: path[path.length - 1]\n      },\n      path\n    })\n  }\n\n  get controls() {\n    // 폴리라인에서의 control은 새로운 path를 추가하는 포인트이다.\n    var path = this.path\n    var controls = []\n\n    for (let i = 0; i < path.length - 1; i++) {\n      let p1 = path[i]\n      let p2 = path[i + 1]\n\n      if (i == 0) {\n        controls.push({\n          x: p1.x,\n          y: p1.y,\n          handler: controlHandler\n        })\n      }\n\n      controls.push({\n        x: (p1.x + p2.x) / 2,\n        y: (p1.y + p2.y) / 2,\n        handler: controlHandler\n      })\n\n      if (i == path.length - 2) {\n        controls.push({\n          x: p2.x,\n          y: p2.y,\n          handler: controlHandler\n        })\n      }\n    }\n\n    return controls\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\n/* target anchor의 움직임이 반영되지 못하므로, 일단 controls memoize를 제거함. */\n// Component.memoize(Polyline.prototype, 'controls', false)\n\nComponent.register('polyline', Polyline)\n"]}
+{"version":3,"file":"polyline.js","sourceRoot":"","sources":["../src/polyline.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, ComponentNature, Properties, Line, POSITION, sceneComponent } from '@hatiolab/things-scene'\n\nvar controlHandler = {\n  ondragstart: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path) {\n      path.splice(index, 0, point) // array.insert(index, point) 의 의미임.\n    })\n  },\n\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    component.mutatePath(null, function (path) {\n      path[index] = point\n    })\n  },\n\n  ondragend: function (point: POSITION, index: number, component: Component) {}\n}\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: false,\n  rotatable: false,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    }\n  ],\n  help: 'scene/component/polyline'\n}\n\n@sceneComponent('polyline')\nexport default class Polyline extends Line {\n  _fromEnd: any\n  _toEnd: any\n\n  get pathExtendable() {\n    return true\n  }\n\n  get path() {\n    const { from, to } = this.state\n    const { path } = this.state\n\n    return [\n      this.fromEnd?.position || from?.position || path[0],\n      ...path.slice(1, -1),\n      this.toEnd?.position || to?.position || path[path.length - 1]\n    ]\n  }\n\n  set path(path) {\n    const { from, to } = this.state\n\n    delete this._fromEnd\n    delete this._toEnd\n\n    this.set({\n      from: {\n        ...from,\n        position: path[0]\n      },\n      to: {\n        ...to,\n        position: path[path.length - 1]\n      },\n      path\n    })\n  }\n\n  get controls() {\n    // 폴리라인에서의 control은 새로운 path를 추가하는 포인트이다.\n    var path = this.path\n    var controls = []\n\n    for (let i = 0; i < path.length - 1; i++) {\n      let p1 = path[i]\n      let p2 = path[i + 1]\n\n      if (i == 0) {\n        controls.push({\n          x: p1.x,\n          y: p1.y,\n          handler: controlHandler\n        })\n      }\n\n      controls.push({\n        x: (p1.x + p2.x) / 2,\n        y: (p1.y + p2.y) / 2,\n        handler: controlHandler\n      })\n\n      if (i == path.length - 2) {\n        controls.push({\n          x: p2.x,\n          y: p2.y,\n          handler: controlHandler\n        })\n      }\n    }\n\n    return controls\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\n/* target anchor의 움직임이 반영되지 못하므로, 일단 controls memoize를 제거함. */\n// Component.memoize(Polyline.prototype, 'controls', false)\n"]}

package/dist/rect.js

@@ -1,7 +1,8 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, Connectable, RectPath, Shape } from '@hatiolab/things-scene';
+import { __decorate } from "tslib";
+import { Connectable, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene';
 const NATURE = {
     mutable: false,
     resizable: true,
@@ -37,7 +38,7 @@ function safeRound(round, width, height) {
         round = 0;
     return round;
 }
-export default class Rect extends Connectable(RectPath(Shape)) {
+let Rect = class Rect extends Connectable(RectPath(Shape)) {
     is3dish() {
         return true;
     }
@@ -55,6 +56,9 @@ export default class Rect extends Connectable(RectPath(Shape)) {
     get nature() {
         return NATURE;
     }
-}
-Component.register('rect', Rect);
+};
+Rect = __decorate([
+    sceneComponent('rect')
+], Rect);
+export default Rect;
 //# sourceMappingURL=rect.js.map

package/dist/rect.js.map

@@ -1 +1 @@
-{"version":3,"file":"rect.js","sourceRoot":"","sources":["../src/rect.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAmB,WAAW,EAAwB,QAAQ,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAEvH,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE;gBACR,GAAG,EAAE,CAAC;aACP;SACF;KACF;IACD,IAAI,EAAE,sBAAsB;CAC7B,CAAA;AAED,IAAI,cAAc,GAAG;IACnB,UAAU,EAAE,UAAU,KAAe,EAAE,KAAa,EAAE,SAAoB;QACxE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,KAAK,CAAA;QAElD,IAAI,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;QAC5D,IAAI,KAAK,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;QAEzD,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEvC,SAAS,CAAC,GAAG,CAAC;YACZ,KAAK;SACN,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAED,SAAS,SAAS,CAAC,KAAa,EAAE,KAAa,EAAE,MAAc;IAC7D,IAAI,GAAG,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAA;IAEvD,IAAI,KAAK,IAAI,GAAG;QAAE,KAAK,GAAG,GAAG,CAAA;SACxB,IAAI,KAAK,IAAI,CAAC;QAAE,KAAK,GAAG,CAAC,CAAA;IAE9B,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACpD,KAAK,GAAG,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEhE,OAAO;YACL;gBACE,CAAC,EAAE,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC;gBACrC,CAAC,EAAE,GAAG;gBACN,OAAO,EAAE,cAAc;aACxB;SACF,CAAA;IACH,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Connectable, POSITION, Properties, RectPath, Shape } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0\n      }\n    }\n  ],\n  help: 'scene/component/rect'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = safeRound(round, width, height)\n\n    component.set({\n      round\n    })\n  }\n}\n\nfunction safeRound(round: number, width: number, height: number) {\n  var max = width > height ? (height / width) * 100 : 100\n\n  if (round >= max) round = max\n  else if (round <= 0) round = 0\n\n  return round\n}\n\nexport default class Rect extends Connectable(RectPath(Shape)) {\n  is3dish() {\n    return true\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.state\n    round = round == undefined ? 0 : safeRound(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('rect', Rect)\n"]}
+{"version":3,"file":"rect.js","sourceRoot":"","sources":["../src/rect.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAGL,WAAW,EAGX,QAAQ,EACR,KAAK,EACL,cAAc,EACf,MAAM,wBAAwB,CAAA;AAE/B,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE;gBACR,GAAG,EAAE,CAAC;aACP;SACF;KACF;IACD,IAAI,EAAE,sBAAsB;CAC7B,CAAA;AAED,IAAI,cAAc,GAAG;IACnB,UAAU,EAAE,UAAU,KAAe,EAAE,KAAa,EAAE,SAAoB;QACxE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,KAAK,CAAA;QAElD,IAAI,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAA;QAC5D,IAAI,KAAK,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAA;QAEzD,KAAK,GAAG,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEvC,SAAS,CAAC,GAAG,CAAC;YACZ,KAAK;SACN,CAAC,CAAA;IACJ,CAAC;CACF,CAAA;AAED,SAAS,SAAS,CAAC,KAAa,EAAE,KAAa,EAAE,MAAc;IAC7D,IAAI,GAAG,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAA;IAEvD,IAAI,KAAK,IAAI,GAAG;QAAE,KAAK,GAAG,GAAG,CAAA;SACxB,IAAI,KAAK,IAAI,CAAC;QAAE,KAAK,GAAG,CAAC,CAAA;IAE9B,OAAO,KAAK,CAAA;AACd,CAAC;AAGc,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QACpD,KAAK,GAAG,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEhE,OAAO;YACL;gBACE,CAAC,EAAE,IAAI,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC;gBACrC,CAAC,EAAE,GAAG;gBACN,OAAO,EAAE,cAAc;aACxB;SACF,CAAA;IACH,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF,CAAA;AArBoB,IAAI;IADxB,cAAc,CAAC,MAAM,CAAC;GACF,IAAI,CAqBxB;eArBoB,IAAI","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport {\n  Component,\n  ComponentNature,\n  Connectable,\n  POSITION,\n  Properties,\n  RectPath,\n  Shape,\n  sceneComponent\n} from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0\n      }\n    }\n  ],\n  help: 'scene/component/rect'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = safeRound(round, width, height)\n\n    component.set({\n      round\n    })\n  }\n}\n\nfunction safeRound(round: number, width: number, height: number) {\n  var max = width > height ? (height / width) * 100 : 100\n\n  if (round >= max) round = max\n  else if (round <= 0) round = 0\n\n  return round\n}\n\n@sceneComponent('rect')\nexport default class Rect extends Connectable(RectPath(Shape)) {\n  is3dish() {\n    return true\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.state\n    round = round == undefined ? 0 : safeRound(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n"]}

package/dist/star.js

@@ -1,7 +1,8 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, Ellipse } from '@hatiolab/things-scene';
+import { __decorate } from "tslib";
+import { Component, Ellipse, sceneComponent } from '@hatiolab/things-scene';
 const NATURE = {
     mutable: false,
     resizable: true,
@@ -35,7 +36,7 @@ var controlHandler = {
         component.set({ ratio }); // ratio: ratio  => ratio
     }
 };
-export default class Star extends Ellipse {
+let Star = class Star extends Ellipse {
     is3dish() {
         return false;
     }
@@ -74,7 +75,10 @@ export default class Star extends Ellipse {
     get nature() {
         return NATURE;
     }
-}
+};
+Star = __decorate([
+    sceneComponent('star')
+], Star);
+export default Star;
 Component.memoize(Star.prototype, 'controls', false);
-Component.register('star', Star);
 //# sourceMappingURL=star.js.map

package/dist/star.js.map

@@ -1 +1 @@
-{"version":3,"file":"star.js","sourceRoot":"","sources":["../src/star.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Ellipse, POSITION } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'ratio',\n      name: 'ratio',\n      property: 'ratio'\n    },\n    {\n      type: 'number',\n      label: 'wing',\n      name: 'wing',\n      property: 'wing'\n    }\n  ],\n  help: 'scene/component/star'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var controls = component.controls\n    var { cy, ry } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n\n    var ratio = ((transcoorded.y - cy) / ry) * 100 + 100\n\n    if (ratio >= 100) ratio = 100\n    else if (ratio <= 0) ratio = 0\n\n    component.set({ ratio }) // ratio: ratio  => ratio\n  }\n}\n\nexport default class Star extends Ellipse {\n  is3dish() {\n    return false\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { ratio = 30, wing = 5, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n\n    // 박스 그리기\n\n    if (wing < 3) return\n\n    const RADIAN = 1.5707963267948966 // 90도 뒤틀기\n    var a = (Math.PI * 2) / wing\n    var xRatio = rx - (ratio / 100) * rx\n    var yRatio = ry - (ratio / 100) * ry\n\n    ctx.save()\n    ctx.beginPath()\n\n    ctx.translate(cx, cy)\n\n    ctx.moveTo(rx * Math.cos(-RADIAN), ry * Math.sin(-RADIAN))\n    ctx.lineTo(\n      ((rx - xRatio) * (Math.cos(a - RADIAN) + Math.cos(0 - RADIAN))) / 2,\n      ((ry - yRatio) * (Math.sin(a - RADIAN) + Math.sin(0 - RADIAN))) / 2\n    )\n\n    for (var i = 1; i < wing; i++) {\n      ctx.lineTo(rx * Math.cos(a * i - RADIAN), ry * Math.sin(a * i - RADIAN))\n\n      ctx.lineTo(\n        ((rx - xRatio) * (Math.cos(a * (i + 1) - RADIAN) + Math.cos(a * i - RADIAN))) / 2,\n        ((ry - yRatio) * (Math.sin(a * (i + 1) - RADIAN) + Math.sin(a * i - RADIAN))) / 2\n      )\n    }\n    // ratio /= 1.5;\n    ctx.closePath()\n    ctx.restore()\n  }\n\n  get controls() {\n    var { cx, cy, ry, ratio } = this.state\n\n    return [\n      {\n        x: cx,\n        y: cy - ry + ry * (ratio / 100),\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Star.prototype, 'controls', false)\n\nComponent.register('star', Star)\n"]}
+{"version":3,"file":"star.js","sourceRoot":"","sources":["../src/star.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Ellipse, POSITION, sceneComponent } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'ratio',\n      name: 'ratio',\n      property: 'ratio'\n    },\n    {\n      type: 'number',\n      label: 'wing',\n      name: 'wing',\n      property: 'wing'\n    }\n  ],\n  help: 'scene/component/star'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var controls = component.controls\n    var { cy, ry } = component.model\n\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n\n    var ratio = ((transcoorded.y - cy) / ry) * 100 + 100\n\n    if (ratio >= 100) ratio = 100\n    else if (ratio <= 0) ratio = 0\n\n    component.set({ ratio }) // ratio: ratio  => ratio\n  }\n}\n\n@sceneComponent('star')\nexport default class Star extends Ellipse {\n  is3dish() {\n    return false\n  }\n\n  render(ctx: CanvasRenderingContext2D) {\n    var { ratio = 30, wing = 5, cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state\n\n    // 박스 그리기\n\n    if (wing < 3) return\n\n    const RADIAN = 1.5707963267948966 // 90도 뒤틀기\n    var a = (Math.PI * 2) / wing\n    var xRatio = rx - (ratio / 100) * rx\n    var yRatio = ry - (ratio / 100) * ry\n\n    ctx.save()\n    ctx.beginPath()\n\n    ctx.translate(cx, cy)\n\n    ctx.moveTo(rx * Math.cos(-RADIAN), ry * Math.sin(-RADIAN))\n    ctx.lineTo(\n      ((rx - xRatio) * (Math.cos(a - RADIAN) + Math.cos(0 - RADIAN))) / 2,\n      ((ry - yRatio) * (Math.sin(a - RADIAN) + Math.sin(0 - RADIAN))) / 2\n    )\n\n    for (var i = 1; i < wing; i++) {\n      ctx.lineTo(rx * Math.cos(a * i - RADIAN), ry * Math.sin(a * i - RADIAN))\n\n      ctx.lineTo(\n        ((rx - xRatio) * (Math.cos(a * (i + 1) - RADIAN) + Math.cos(a * i - RADIAN))) / 2,\n        ((ry - yRatio) * (Math.sin(a * (i + 1) - RADIAN) + Math.sin(a * i - RADIAN))) / 2\n      )\n    }\n    // ratio /= 1.5;\n    ctx.closePath()\n    ctx.restore()\n  }\n\n  get controls() {\n    var { cx, cy, ry, ratio } = this.state\n\n    return [\n      {\n        x: cx,\n        y: cy - ry + ry * (ratio / 100),\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.memoize(Star.prototype, 'controls', false)\n"]}

package/dist/templates/index.js

@@ -1,15 +1,15 @@
 // IMPORT
-import audio from './audio';
-import text from './text';
-import colorImage from './color-image';
-import grayImage from './gray-image';
-import donut from './donut';
-import gifImage from './gif-image';
-import ellipse from './ellipse';
-import polyline from './polyline';
-import polygon from './polygon';
-import rect from './rect';
-import star from './star';
-import triangle from './triangle';
+import audio from './audio.js';
+import text from './text.js';
+import colorImage from './color-image.js';
+import grayImage from './gray-image.js';
+import donut from './donut.js';
+import gifImage from './gif-image.js';
+import ellipse from './ellipse.js';
+import polyline from './polyline.js';
+import polygon from './polygon.js';
+import rect from './rect.js';
+import star from './star.js';
+import triangle from './triangle.js';
 export default [audio, colorImage, grayImage, gifImage, ellipse, donut, polyline, polygon, rect, star, text, triangle];
 //# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,SAAS;AAET,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,IAAI,MAAM,QAAQ,CAAA;AACzB,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,IAAI,MAAM,QAAQ,CAAA;AACzB,OAAO,IAAI,MAAM,QAAQ,CAAA;AACzB,OAAO,QAAQ,MAAM,YAAY,CAAA;AAEjC,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["// IMPORT\n\nimport audio from './audio'\nimport text from './text'\nimport colorImage from './color-image'\nimport grayImage from './gray-image'\nimport donut from './donut'\nimport gifImage from './gif-image'\nimport ellipse from './ellipse'\nimport polyline from './polyline'\nimport polygon from './polygon'\nimport rect from './rect'\nimport star from './star'\nimport triangle from './triangle'\n\nexport default [audio, colorImage, grayImage, gifImage, ellipse, donut, polyline, polygon, rect, star, text, triangle]\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,SAAS;AAET,OAAO,KAAK,MAAM,YAAY,CAAA;AAC9B,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,UAAU,MAAM,kBAAkB,CAAA;AACzC,OAAO,SAAS,MAAM,iBAAiB,CAAA;AACvC,OAAO,KAAK,MAAM,YAAY,CAAA;AAC9B,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AACrC,OAAO,OAAO,MAAM,cAAc,CAAA;AAClC,OAAO,QAAQ,MAAM,eAAe,CAAA;AACpC,OAAO,OAAO,MAAM,cAAc,CAAA;AAClC,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,IAAI,MAAM,WAAW,CAAA;AAC5B,OAAO,QAAQ,MAAM,eAAe,CAAA;AAEpC,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAA","sourcesContent":["// IMPORT\n\nimport audio from './audio.js'\nimport text from './text.js'\nimport colorImage from './color-image.js'\nimport grayImage from './gray-image.js'\nimport donut from './donut.js'\nimport gifImage from './gif-image.js'\nimport ellipse from './ellipse.js'\nimport polyline from './polyline.js'\nimport polygon from './polygon.js'\nimport rect from './rect.js'\nimport star from './star.js'\nimport triangle from './triangle.js'\n\nexport default [audio, colorImage, grayImage, gifImage, ellipse, donut, polyline, polygon, rect, star, text, triangle]\n"]}

package/dist/text.js

@@ -1,11 +1,15 @@
+import { __decorate } from "tslib";
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, RectPath } from '@hatiolab/things-scene';
-export default class Text extends RectPath(Component) {
+import { Component, RectPath, sceneComponent } from '@hatiolab/things-scene';
+let Text = class Text extends RectPath(Component) {
     is3dish() {
         return true;
     }
-}
-Component.register('text', Text);
+};
+Text = __decorate([
+    sceneComponent('text')
+], Text);
+export default Text;
 //# sourceMappingURL=text.js.map

package/dist/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAE5D,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,QAAQ,CAAC,SAAS,CAAC;IACnD,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, RectPath } from '@hatiolab/things-scene'\n\nexport default class Text extends RectPath(Component) {\n  is3dish() {\n    return true\n  }\n}\n\nComponent.register('text', Text)\n"]}
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAG7D,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,QAAQ,CAAC,SAAS,CAAC;IACnD,OAAO;QACL,OAAO,IAAI,CAAA;IACb,CAAC;CACF,CAAA;AAJoB,IAAI;IADxB,cAAc,CAAC,MAAM,CAAC;GACF,IAAI,CAIxB;eAJoB,IAAI","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, RectPath, sceneComponent } from '@hatiolab/things-scene'\n\n@sceneComponent('text')\nexport default class Text extends RectPath(Component) {\n  is3dish() {\n    return true\n  }\n}\n"]}

package/dist/triangle.js

@@ -1,7 +1,8 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, Shape } from '@hatiolab/things-scene';
+import { __decorate } from "tslib";
+import { Component, Shape, sceneComponent } from '@hatiolab/things-scene';
 const NATURE = {
     mutable: true,
     resizable: false,
@@ -20,7 +21,7 @@ const NATURE = {
     ],
     help: 'scene/component/triangle'
 };
-export default class Triangle extends Shape {
+let Triangle = class Triangle extends Shape {
     contains(x, y) {
         var { x1, y1, x2, y2, x3, y3 } = this.state;
         var path = [x1, y1, x2, y2, x3, y3];
@@ -69,7 +70,10 @@ export default class Triangle extends Shape {
     get nature() {
         return NATURE;
     }
-}
+};
+Triangle = __decorate([
+    sceneComponent('triangle')
+], Triangle);
+export default Triangle;
 Component.memoize(Triangle.prototype, 'path', false);
-Component.register('triangle', Triangle);
 //# sourceMappingURL=triangle.js.map

package/dist/triangle.js.map

@@ -1 +1 @@
-{"version":3,"file":"triangle.js","sourceRoot":"","sources":["../src/triangle.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Shape } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: true,\n  resizable: false,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    }\n  ],\n  help: 'scene/component/triangle'\n}\n\nexport default class Triangle extends Shape {\n  contains(x: number, y: number) {\n    var { x1, y1, x2, y2, x3, y3 } = this.state\n    var path = [x1, y1, x2, y2, x3, y3]\n\n    var result = false\n\n    for (let i = 0; i < path.length; i += 2) {\n      let j = (i + 2) % path.length\n      let x1 = path[i]\n      let y1 = path[i + 1]\n      let x2 = path[j]\n      let y2 = path[j + 1]\n\n      if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) result = !result\n    }\n\n    return result\n  }\n\n  get mutable() {\n    return true\n  }\n\n  get path() {\n    var { x1, y1, x2, y2, x3, y3 } = this.state\n\n    return [\n      {\n        x: x1,\n        y: y1\n      },\n      {\n        x: x2,\n        y: y2\n      },\n      {\n        x: x3,\n        y: y3\n      }\n    ]\n  }\n\n  set path(path) {\n    this.set({\n      x1: path[0].x,\n      y1: path[0].y,\n      x2: path[1].x,\n      y2: path[1].y,\n      x3: path[2].x,\n      y3: path[2].y\n    })\n  }\n\n  get nature(): ComponentNature {\n    return NATURE\n  }\n}\n\nComponent.memoize(Triangle.prototype, 'path', false)\n\nComponent.register('triangle', Triangle)\n"]}
+{"version":3,"file":"triangle.js","sourceRoot":"","sources":["../src/triangle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,SAAS,EAAmB,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAE1F,MAAM,MAAM,GAAoB;IAC9B,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE;gBACR,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;aACR;SACF;KACF;IACD,IAAI,EAAE,0BAA0B;CACjC,CAAA;AAGc,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,KAAK;IACzC,QAAQ,CAAC,CAAS,EAAE,CAAS;QAC3B,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC3C,IAAI,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;QAEnC,IAAI,MAAM,GAAG,KAAK,CAAA;QAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YAC7B,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;YAChB,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;YACpB,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;YAChB,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;YAEpB,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE;gBAAE,MAAM,GAAG,CAAC,MAAM,CAAA;QACvF,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,IAAI;QACN,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAE3C,OAAO;YACL;gBACE,CAAC,EAAE,EAAE;gBACL,CAAC,EAAE,EAAE;aACN;YACD;gBACE,CAAC,EAAE,EAAE;gBACL,CAAC,EAAE,EAAE;aACN;YACD;gBACE,CAAC,EAAE,EAAE;gBACL,CAAC,EAAE,EAAE;aACN;SACF,CAAA;IACH,CAAC;IAED,IAAI,IAAI,CAAC,IAAI;QACX,IAAI,CAAC,GAAG,CAAC;YACP,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACb,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACb,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACb,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACb,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YACb,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;SACd,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF,CAAA;AAzDoB,QAAQ;IAD5B,cAAc,CAAC,UAAU,CAAC;GACN,QAAQ,CAyD5B;eAzDoB,QAAQ;AA2D7B,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { Component, ComponentNature, Shape, sceneComponent } from '@hatiolab/things-scene'\n\nconst NATURE: ComponentNature = {\n  mutable: true,\n  resizable: false,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round',\n      property: {\n        min: 0,\n        max: 100,\n        step: 1\n      }\n    }\n  ],\n  help: 'scene/component/triangle'\n}\n\n@sceneComponent('triangle')\nexport default class Triangle extends Shape {\n  contains(x: number, y: number) {\n    var { x1, y1, x2, y2, x3, y3 } = this.state\n    var path = [x1, y1, x2, y2, x3, y3]\n\n    var result = false\n\n    for (let i = 0; i < path.length; i += 2) {\n      let j = (i + 2) % path.length\n      let x1 = path[i]\n      let y1 = path[i + 1]\n      let x2 = path[j]\n      let y2 = path[j + 1]\n\n      if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) result = !result\n    }\n\n    return result\n  }\n\n  get mutable() {\n    return true\n  }\n\n  get path() {\n    var { x1, y1, x2, y2, x3, y3 } = this.state\n\n    return [\n      {\n        x: x1,\n        y: y1\n      },\n      {\n        x: x2,\n        y: y2\n      },\n      {\n        x: x3,\n        y: y3\n      }\n    ]\n  }\n\n  set path(path) {\n    this.set({\n      x1: path[0].x,\n      y1: path[0].y,\n      x2: path[1].x,\n      y2: path[1].y,\n      x3: path[2].x,\n      y3: path[2].y\n    })\n  }\n\n  get nature(): ComponentNature {\n    return NATURE\n  }\n}\n\nComponent.memoize(Triangle.prototype, 'path', false)\n"]}

package/package.json

@@ -2,7 +2,8 @@
   "name": "@operato/scene-basic",
   "description": "basic component for things-scene",
   "author": "heartyoh",
-  "version": "9.0.0-beta.0",
+  "version": "9.0.0-beta.15",
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
@@ -32,14 +33,14 @@
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
-    "@things-factory/builder": "^8.0.0-beta",
-    "@things-factory/operato-board": "^8.0.0-beta",
+    "@things-factory/builder": "^9.0.0-beta",
+    "@things-factory/operato-board": "^9.0.0-beta",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "@web/dev-server": "^0.1.28",
     "concurrently": "^8.0.1",
-    "eslint": "^8.39.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "prettier": "^2.4.1",
@@ -58,5 +59,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "87f7a74e8b66f6cc6f19b9c75a7c9a03637ab7ac"
+  "gitHead": "3a94a8a9ee8cb8de82ad331cb08b9e48d6625d31"
 }

package/things-scene.config.js

@@ -1,4 +1,4 @@
-import templates from './dist/templates'
+import templates from './dist/templates/index.js'
 
 export default {
   templates