@operato/scene-basic 8.0.0-beta.1 → 8.0.0-beta.2

package/src/cloud.ts

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

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

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

@@ -1,146 +0,0 @@
-/*
- * 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.setState('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)

package/src/image-view.ts

@@ -1,215 +0,0 @@
-/*
- * 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.getState('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.getState('src')
-  }
-
-  set src(src) {
-    this.setState('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

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

@@ -1,15 +0,0 @@
-/*
- * 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)
-}