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

package/src/polygon.ts

@@ -1,103 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, POINT, POSITION, Shape } from '@hatiolab/things-scene'
-
-var controlHandler = {
-  ondragstart: function (point: POSITION, index: number, component: Component) {
-    component.mutatePath(null, function (path: Array<POINT>) {
-      path.splice(index + 1, 0, point)
-    })
-  },
-
-  ondragmove: function (point: POSITION, index: number, component: Component) {
-    component.mutatePath(null, function (path: Array<POINT>) {
-      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.setState('path', path)
-  }
-
-  contains(x: number, y: number) {
-    var path = this.state.path as Array<POINT>
-    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<POINT>
-
-    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

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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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'
-  }
-}

package/src/templates/ellipse.ts

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

package/src/templates/gif-image.ts

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

package/src/templates/gray-image.ts

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

package/src/templates/index.ts

@@ -1,16 +0,0 @@
-// 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'
-
-export default [audio, colorImage, grayImage, gifImage, ellipse, donut, polyline, polygon, rect, star, text, triangle]

package/src/templates/polygon.ts

@@ -1,25 +0,0 @@
-const polygon = new URL('../../icons/polygon.png', import.meta.url).href
-
-export default {
-  type: 'polygon',
-  description: 'polygon shape',
-  icon: polygon,
-  group: 'shape',
-  model: {
-    type: 'polygon',
-    path: [
-      { x: 100, y: 100 },
-      { x: 200, y: 100 },
-      { x: 200, y: 200 },
-      { x: 100, y: 200 }
-    ],
-    fillStyle: '#fff',
-    strokeStyle: '#000',
-    alpha: 1,
-    hidden: false,
-    lineWidth: 1,
-    lineDash: 'solid',
-    lineCap: 'butt',
-    round: 10
-  }
-}

package/src/templates/polyline.ts

@@ -1,25 +0,0 @@
-const polyline = new URL('../../icons/polyline.png', import.meta.url).href
-
-export default {
-  type: 'polyline',
-  description: 'polyline',
-  icon: polyline,
-  group: 'line',
-  model: {
-    type: 'polyline',
-    path: [
-      { x: 100, y: 100 },
-      { x: 200, y: 100 },
-      { x: 200, y: 200 },
-      { x: 100, y: 200 }
-    ],
-    fillStyle: '#fff',
-    strokeStyle: '#000',
-    alpha: 1,
-    hidden: false,
-    lineWidth: 1,
-    lineDash: 'solid',
-    lineCap: 'butt',
-    round: 10
-  }
-}

package/src/templates/rect.ts

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

package/src/templates/star.ts

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

package/src/templates/text.ts

@@ -1,28 +0,0 @@
-const text = new URL('../../icons/text.png', import.meta.url).href
-
-export default {
-  type: 'text',
-  description: 'text',
-  icon: text,
-  group: 'textAndMedia',
-  model: {
-    type: 'text',
-    left: 100,
-    top: 100,
-    width: 200,
-    height: 50,
-    text: 'Text',
-    fillStyle: '#fff',
-    strokeStyle: '#000',
-    alpha: 1,
-    hidden: false,
-    lineWidth: 5,
-    lineDash: 'solid',
-    lineCap: 'butt',
-    textAlign: 'left',
-    textBaseline: 'top',
-    textWrap: false,
-    fontFamily: 'serif',
-    fontSize: 30
-  }
-}

package/src/templates/triangle.ts

@@ -1,24 +0,0 @@
-const triangle = new URL('../../icons/triangle.png', import.meta.url).href
-
-export default {
-  type: 'triangle',
-  description: 'triangle shape',
-  icon: triangle,
-  group: 'shape',
-  model: {
-    type: 'triangle',
-    x1: 150,
-    y1: 100,
-    x2: 100,
-    y2: 200,
-    x3: 200,
-    y3: 200,
-    fillStyle: '#fff',
-    strokeStyle: '#000',
-    alpha: 1,
-    hidden: false,
-    lineWidth: 1,
-    lineDash: 'solid',
-    lineCap: 'butt'
-  }
-}