@operato/scene-basic 1.2.5

package/src/image-view.ts

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

package/src/index.ts

@@ -0,0 +1,16 @@
+/*
+ * 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'

package/src/outline/ellipse-outline.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component } from '@hatiolab/things-scene'
+
+export default function ellipseOutline(component: Component, progress: number) {
+  var { cx, cy, rx, ry } = component.model
+  var theta = Math.PI * 2 * progress
+
+  var x = cx + rx * Math.cos(theta)
+  var y = cy + ry * Math.sin(theta)
+
+  return component.transcoordS2T(x, y)
+}

package/src/polygon.ts

@@ -0,0 +1,103 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, ComponentNature, DIMENSION, POSITION, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+var controlHandler = {
+  ondragstart: function (point: POSITION, index: number, component: Component) {
+    component.mutatePath(null, function (path: Array<DIMENSION>) {
+      path.splice(index + 1, 0, point)
+    })
+  },
+
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    component.mutatePath(null, function (path: Array<DIMENSION>) {
+      path[index + 1] = point
+    })
+  },
+
+  ondragend: function (point: POSITION, index: number, component: Component) {}
+}
+
+const NATURE: ComponentNature = {
+  mutable: true,
+  resizable: false,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round',
+      property: {
+        min: 0,
+        max: 100,
+        step: 1
+      }
+    }
+  ],
+  help: 'scene/component/polygon'
+}
+
+export default class Polygon extends Shape {
+  is3dish() {
+    return true
+  }
+
+  get mutable() {
+    return true
+  }
+
+  get pathExtendable() {
+    return true
+  }
+
+  get path() {
+    return this.state.path
+  }
+
+  set path(path) {
+    this.set('path', path)
+  }
+
+  contains(x: number, y: number) {
+    var path = this.state.path as Array<DIMENSION>
+    var result = false
+
+    path.forEach((p, idx) => {
+      let j = (idx + path.length + 1) % path.length
+
+      let x1 = p.x
+      let y1 = p.y
+      let x2 = path[j].x
+      let y2 = path[j].y
+
+      if (y1 > y != y2 > y && x < ((x2 - x1) * (y - y1)) / (y2 - y1) + x1) result = !result
+    })
+
+    return result
+  }
+
+  get controls() {
+    // 폴리곤에서의 control은 새로운 path를 추가하는 포인트이다.
+    var path = this.path as Array<DIMENSION>
+
+    return path.map((p1, i) => {
+      let p2 = path[i + 1 >= path.length ? 0 : i + 1]
+
+      return {
+        x: (p1.x + p2.x) / 2,
+        y: (p1.y + p2.y) / 2,
+        handler: controlHandler
+      }
+    })
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.memoize(Polygon.prototype, 'controls', false)
+
+Component.register('polygon', Polygon)

package/src/polyline.ts

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

package/src/rect.ts

@@ -0,0 +1,71 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, ComponentNature, Connectable, POSITION, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round',
+      property: {
+        min: 0
+      }
+    }
+  ],
+  help: 'scene/component/rect'
+}
+
+var controlHandler = {
+  ondragmove: function (point: POSITION, index: number, component: Component) {
+    var { left, top, width, height } = component.model
+
+    var transcoorded = component.transcoordP2S(point.x, point.y)
+    var round = ((transcoorded.x - left) / (width / 2)) * 100
+
+    round = safeRound(round, width, height)
+
+    component.set({
+      round
+    })
+  }
+}
+
+function safeRound(round: number, width: number, height: number) {
+  var max = width > height ? (height / width) * 100 : 100
+
+  if (round >= max) round = max
+  else if (round <= 0) round = 0
+
+  return round
+}
+
+export default class Rect extends Connectable(RectPath(Shape)) {
+  is3dish() {
+    return true
+  }
+
+  get controls() {
+    var { left, top, width, round, height } = this.state
+    round = round == undefined ? 0 : safeRound(round, width, height)
+
+    return [
+      {
+        x: left + (width / 2) * (round / 100),
+        y: top,
+        handler: controlHandler
+      }
+    ]
+  }
+
+  get nature() {
+    return NATURE
+  }
+}
+
+Component.register('rect', Rect)

package/src/star.ts

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

package/src/templates/audio.ts

@@ -0,0 +1,15 @@
+const audio = new URL('../../icons/audio.png', import.meta.url).href
+
+export default {
+  type: 'audio',
+  description: 'audio',
+  icon: audio,
+  group: 'textAndMedia',
+  model: {
+    type: 'audio',
+    left: 100,
+    top: 100,
+    width: 100,
+    height: 100
+  }
+}

package/src/templates/color-image.ts

@@ -0,0 +1,23 @@
+const colorImage = new URL('../../icons/color-image.png', import.meta.url).href
+
+export default {
+  type: 'color image',
+  description: 'color image',
+  icon: colorImage,
+  group: 'textAndMedia',
+  model: {
+    type: 'image-view',
+    left: 100,
+    top: 100,
+    width: 100,
+    height: 100,
+    isGray: false,
+    fillStyle: '#fff',
+    strokeStyle: '#000',
+    alpha: 1,
+    hidden: false,
+    lineWidth: 1,
+    lineDash: 'solid',
+    lineCap: 'butt'
+  }
+}

package/src/templates/donut.ts

@@ -0,0 +1,23 @@
+const donut = new URL('../../icons/donut.png', import.meta.url).href
+
+export default {
+  type: 'donut',
+  description: 'donut shape',
+  icon: donut,
+  group: 'shape',
+  model: {
+    type: 'donut',
+    rx: 50,
+    ry: 50,
+    cx: 150,
+    cy: 150,
+    ratio: 30,
+    fillStyle: '#fff',
+    strokeStyle: '#000',
+    alpha: 1,
+    hidden: false,
+    lineWidth: 1,
+    lineDash: 'solid',
+    lineCap: 'butt'
+  }
+}