@operato/scene-basic 1.2.5

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@operato/scene-basic",
+  "description": "basic component for things-scene",
+  "author": "heartyoh",
+  "version": "1.2.5",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/basic"
+  },
+  "scripts": {
+    "serve": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"things-factory-dev\"",
+    "serve:dev": "npm run serve",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^3.2.0",
+    "@wizpanda/super-gif": "^0.0.6"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@things-factory/builder": "^6.0.0",
+    "@things-factory/operato-board": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.9.4"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "31ccfb354b68b2516f48ca0d033b07974326a6eb"
+}

package/src/anchors/ellipse-anchors.ts

@@ -0,0 +1,46 @@
+import { Anchor, Component } from '@hatiolab/things-scene'
+
+/**
+ * @function ellipseAnchors
+ * @param {Component} component
+ * @return {Anchor[]}
+ */
+export default function ellipseAnchors(component: Component): Anchor[] {
+  var { left, top, width, height } = component.bounds
+
+  var centerx = left + width / 2
+  var centery = top + height / 2
+  var right = left + width
+  var bottom = top + height
+
+  return [
+    {
+      name: 'TOP',
+      position: {
+        x: centerx,
+        y: top
+      }
+    },
+    {
+      name: 'RIGHT',
+      position: {
+        x: right,
+        y: centery
+      }
+    },
+    {
+      name: 'BOTTOM',
+      position: {
+        x: centerx,
+        y: bottom
+      }
+    },
+    {
+      name: 'LEFT',
+      position: {
+        x: left,
+        y: centery
+      }
+    }
+  ]
+}

package/src/audio.ts

@@ -0,0 +1,173 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'src',
+      name: 'src'
+    },
+    {
+      type: 'checkbox',
+      label: 'started',
+      name: 'started'
+    },
+    {
+      type: 'checkbox',
+      label: 'loop',
+      name: 'loop'
+    }
+  ],
+  'value-property': 'src',
+  help: 'scene/component/audio'
+}
+
+const AUDIO_IMAGE =
+  'data:image/png;base64,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'
+
+export default class AudioPlayer extends RectPath(Shape) {
+  static IMAGE: HTMLImageElement
+
+  static get image() {
+    if (!AudioPlayer.IMAGE) {
+      AudioPlayer.IMAGE = new Image()
+      AudioPlayer.IMAGE.src = AUDIO_IMAGE
+    }
+
+    return AudioPlayer.IMAGE
+  }
+
+  _audio: any
+
+  dispose() {
+    super.dispose()
+
+    this.started = false
+    delete this._audio
+  }
+
+  ready() {
+    super.ready()
+
+    this._audio = new Audio()
+
+    this._audio.addEventListener('canplay', () => {
+      this.started && this._audio.play()
+    })
+
+    var { src = '', loop = false, started = false } = this.state
+
+    this.onchangeSrc(src)
+    this.onchangeLoop(loop)
+    this.onchangeStarted(started)
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { left, top, width, height, src } = this.state
+
+    ctx.beginPath()
+
+    this.drawImage(ctx, AudioPlayer.image, left, top, width, height)
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  get hasTextProperty() {
+    return false
+  }
+
+  get src() {
+    return this.get('src')
+  }
+
+  set src(src) {
+    this.set('src', src)
+  }
+
+  get started() {
+    return !!this.get('started')
+  }
+
+  set started(started) {
+    this.set('started', started)
+  }
+
+  start() {
+    if (!this._audio) return
+
+    this._audio.classList.add('active')
+    this._audio.play()
+  }
+
+  pause() {
+    if (!this._audio) return
+
+    this._audio.classList.remove('active')
+    this._audio.pause()
+  }
+
+  onchangeSrc(src: string) {
+    try {
+      // this._audio.crossOrigin = "anonymous";
+      if (String(src).substring(0, 4) !== 'data') this._audio.crossOrigin = 'use-credentials'
+      else this._audio.crossOrigin = null
+
+      this._audio.src = typeof src === 'string' ? this.app.url(src) : src
+    } catch (e) {
+      console.error(e)
+      return
+    }
+  }
+
+  onchangeStarted(started: boolean) {
+    const audio = this._audio
+
+    if (started) {
+      /* 
+        [ audio/video.readyState ]
+        0 = HAVE_NOTHING - no information whether or not the audio/video is ready
+        1 = HAVE_METADATA - metadata for the audio/video is ready
+        2 = HAVE_CURRENT_DATA - data for the current playback position is available, but not enough data to play next frame/millisecond
+        3 = HAVE_FUTURE_DATA - data for the current and at least the next frame is available
+        4 = HAVE_ENOUGH_DATA - enough data available to start playing
+      */
+      audio.readyState == 4 && audio.play()
+    } else {
+      audio.pause()
+    }
+  }
+
+  onchangeLoop(loop: boolean) {
+    this._audio.loop = loop
+  }
+
+  onchange(after: Properties, before: Properties) {
+    'src' in after && this.onchangeSrc(after.src)
+    'started' in after && this.onchangeStarted(after.started)
+    'loop' in after && this.onchangeLoop(after.loop)
+  }
+
+  ondblclick(e: MouseEvent) {
+    this.started = !this.started
+  }
+
+  ondropfile(transfered: DataTransferItemList, files: FileList) {
+    for (let i = 0; i < transfered.length; i++) {
+      if (transfered[i].type.startsWith('audio/')) {
+        this.src = files[i]
+        return
+      }
+    }
+  }
+}
+
+Component.register('audio', AudioPlayer)

package/src/cloud.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component } from '@hatiolab/things-scene'
+
+export default class Cloud extends Component {
+  prerender(ctx: CanvasRenderingContext2D) {
+    //TODO center()를 구현할 때까지, 아무 구현없이 오버라이드한다.
+  }
+
+  render(ctx: CanvasRenderingContext2D) {
+    var { x, y } = this.state
+
+    ctx.beginPath()
+
+    ctx.moveTo(x, y)
+
+    ctx.bezierCurveTo(x - 40, y + 20, x - 40, y + 70, x + 50, y + 70)
+    ctx.bezierCurveTo(x + 80, y + 100, x + 150, y + 100, x + 170, y + 70)
+    ctx.bezierCurveTo(x + 250, y + 70, x + 250, y + 40, x + 220, y + 30)
+    ctx.bezierCurveTo(x + 260, y - 40, x + 200, y - 50, x + 170, y - 30)
+    ctx.bezierCurveTo(x + 150, y - 75, x + 80, y - 60, x + 80, y - 30)
+    ctx.bezierCurveTo(x + 30, y - 75, x - 20, y - 60, x, y)
+
+    ctx.closePath()
+  }
+
+  get path() {
+    var { x, y } = this.state
+
+    return [{ x, y }]
+  }
+
+  set path(path) {
+    /* do nothing */
+  }
+}
+
+Component.register('cloud', Cloud)

package/src/donut.ts

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

package/src/ellipse.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Anchor, Component, ComponentNature, Connectable, Shape } from '@hatiolab/things-scene'
+
+import ellipseAnchors from './anchors/ellipse-anchors'
+import ellipseOutline from './outline/ellipse-outline'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [],
+  'value-property': 'text'
+}
+
+export default class Ellipse extends Connectable(Shape) {
+  is3dish() {
+    return true
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var { cx, cy, rx, ry, startAngle, endAngle, anticlockwise } = this.state
+
+    context.beginPath()
+
+    context.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, startAngle || 0, endAngle || 2 * Math.PI, anticlockwise)
+  }
+
+  get path() {
+    var { cx, cy, rx, ry } = this.state
+
+    return [
+      {
+        x: cx - rx,
+        y: cy - ry
+      },
+      {
+        x: cx + rx,
+        y: cy - ry
+      },
+      {
+        x: cx + rx,
+        y: cy + ry
+      },
+      {
+        x: cx - rx,
+        y: cy + ry
+      }
+    ]
+  }
+
+  set path(path) {
+    var left_top = path[0]
+    var right_bottom = path[2]
+
+    this.set({
+      cx: left_top.x + (right_bottom.x - left_top.x) / 2,
+      cy: left_top.y + (right_bottom.y - left_top.y) / 2,
+      rx: (right_bottom.x - left_top.x) / 2,
+      ry: (right_bottom.y - left_top.y) / 2
+    })
+  }
+
+  contains(x: number, y: number) {
+    var { cx, cy, rx, ry } = this.state
+
+    var normx = (x - cx) / (rx * 2 - 0.5)
+    var normy = (y - cy) / (ry * 2 - 0.5)
+
+    return normx * normx + normy * normy < 0.25
+  }
+
+  outline(progress: number) {
+    return ellipseOutline(this, progress)
+  }
+
+  get anchors(): Array<Anchor> {
+    return ellipseAnchors(this)
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.memoize(Ellipse.prototype, 'path', false)
+
+Component.register('ellipse', Ellipse)

package/src/gif-view.ts

@@ -0,0 +1,146 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ComponentNature, HTMLOverlayElement, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+import { SuperGif } from '@wizpanda/super-gif'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'src',
+      name: 'src'
+    },
+    {
+      type: 'checkbox',
+      label: 'play',
+      name: 'play'
+    }
+  ],
+  'value-property': 'src',
+  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 {
+  _superGif?: SuperGif
+
+  async oncreate_element(div: HTMLDivElement) {
+    var { src, play } = this.state
+
+    this.onchangesrc(src)
+    this.onchangeplay(play)
+  }
+
+  buildImg() {
+    /* clear first */
+    var div = this.element
+    div.innerHTML = ''
+
+    var gif = document.createElement('img')
+    gif.style.width = '100%'
+    gif.style.height = '100%'
+
+    div.appendChild(gif)
+
+    return gif
+  }
+
+  onchange(after: Properties, before: Properties) {
+    super.onchange(after, before)
+
+    'src' in after && this.onchangesrc(after.src)
+    'play' in after && this.onchangeplay(after.play)
+  }
+
+  setElementProperties(div: HTMLDivElement) {}
+
+  onchangeplay(play: boolean) {
+    var superGif = this._superGif
+
+    if (!superGif || !superGif.isReady()) {
+      return
+    }
+
+    if (play) {
+      superGif.play()
+    } else {
+      superGif.pause()
+    }
+  }
+
+  onchangesrc(src: string) {
+    var gif = this.buildImg()
+
+    if (!src) src = NOIMAGE_DATA_URI
+
+    gif.src = src
+    gif.setAttribute('rel:animated_src', src)
+    gif.setAttribute('rel:auto_play', '0')
+
+    this._superGif = new SuperGif(gif, {
+      autoPlay: false /* Without this setting, the first play's framerate is too fast. */
+    })
+    //@ts-ignore
+    this._superGif!.init()
+
+    for (const child of this.element.children as any) {
+      child.style.width = '100%'
+      child.style.height = '100%'
+    }
+
+    var canvas = this._superGif!.getCanvas()
+    canvas.style.width = '100%'
+    canvas.style.height = '100%'
+
+    this._superGif.load(() => {
+      this._superGif!.moveTo(0)
+
+      /*
+       * FIXME. this.play 는 컴포넌트의 getState()를 통해서 가져오게 되는데, 체크박스의 경우 문제가 있는 것 같다.
+       * 문제 해결 후 this.get("play") => this.play로 수정할 것.
+       */
+      this.play && this._superGif!.play()
+    })
+  }
+
+  ondropfile(transfered: DataTransferItemList, files: FileList) {
+    for (let i = 0; i < transfered.length; i++) {
+      if (/\.gif$/.test((transfered[i] as any).name)) {
+        this.src = files[i]
+        return
+      }
+    }
+  }
+
+  get src() {
+    return this.getState('src')
+  }
+
+  set src(src) {
+    this.set('src', src)
+  }
+
+  get play() {
+    return this.getState('play')
+  }
+
+  set play(play) {
+    this.setState('play', play)
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  get tagName() {
+    return 'div'
+  }
+}
+
+Component.register('gif-view', GifView)