@operato/scene-gauge 8.0.0-beta.1 → 9.0.0-beta.0

package/src/gauge-circle.ts

@@ -1,321 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, Donut, ValueHolder } from '@hatiolab/things-scene'
-
-import { PROPERTIES } from './gauge-properties'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    ...PROPERTIES,
-    {
-      type: 'number',
-      label: 'start-angle',
-      name: 'startAngle',
-      property: 'startAngle'
-    },
-    {
-      type: 'number',
-      label: 'end-angle',
-      name: 'endAngle',
-      property: 'endAngle'
-    },
-    {
-      type: 'color',
-      label: 'text-fill-style',
-      name: 'textFillStyle',
-      property: 'textFillStyle'
-    },
-    {
-      type: 'color',
-      label: 'needle-fill-style',
-      name: 'needleFillStyle',
-      property: 'needleFillStyle'
-    },
-    {
-      type: 'color',
-      label: 'inner-circle-fill-style',
-      name: 'innerCircleFillStyle',
-      property: 'innerCircleFillStyle'
-    },
-    {
-      type: 'checkbox',
-      label: 'in-text',
-      name: 'inText',
-      property: 'inText'
-    }
-  ],
-  help: 'scene/component/gauge-circle'
-}
-
-function countSignificantFigures(number: number) {
-  const numStr = number.toString()
-  const parts = numStr.split('.')
-
-  // 소수점 이하 부분을 분석
-  if (parts.length === 2) {
-    const decimalPart = parts[1]
-    let significantFigures = 0
-
-    for (let i = 0; i < decimalPart.length; i++) {
-      if (decimalPart[i] !== '0') {
-        significantFigures = decimalPart.length - i
-        break
-      }
-    }
-
-    return significantFigures
-  }
-
-  // 정수인 경우 유효 자릿수 없음
-  return 0
-}
-
-function drawStepLine(context: CanvasRenderingContext2D, ang: number, rx: number, stepNeedleSize: number) {
-  context.rotate(ang)
-  context.translate(0, -rx)
-
-  context.fillRect(0, -rx * 0.14, stepNeedleSize, rx * 0.175)
-  context.translate(0, rx)
-  context.rotate(-ang)
-}
-
-function drawSubStepLine(context: CanvasRenderingContext2D, ang: number, rx: number, stepNeedleSize: number) {
-  context.rotate(ang)
-  context.translate(0, -rx)
-
-  context.fillRect(0, -rx * 0.04, stepNeedleSize, rx * 0.075)
-  context.translate(0, rx)
-  context.rotate(-ang)
-}
-
-function drawStepText(context: CanvasRenderingContext2D, text: string, ang: number, rx: number) {
-  context.rotate(ang)
-  context.translate(0, -rx * 0.83)
-  context.rotate(-ang)
-
-  context.fillText(text, 0, 0)
-  context.rotate(ang)
-  context.translate(0, rx * 0.83)
-  context.rotate(-ang)
-}
-
-function drawNeedle(context: CanvasRenderingContext2D, rx: number, ang: number) {
-  context.rotate(ang)
-
-  context.beginPath()
-
-  context.moveTo(rx * 0.035, 0) // 중앙 두께
-
-  context.lineTo(0, rx * 0.8) // 끝 점
-
-  context.lineTo(-rx * 0.035, 0) // 중앙 두께
-
-  context.lineTo(-rx * 0.015, -rx * 0.2) // 뒷쪽 두께
-  context.lineTo(rx * 0.015, -rx * 0.2) // 뒷쪽 두께
-
-  context.rotate(-ang)
-}
-
-export default class GaugeCircle extends ValueHolder(Donut) {
-  render(context: CanvasRenderingContext2D) {
-    var {
-      lineWidth = 20,
-      startValue,
-      endValue,
-      step,
-      subStep,
-      startAngle = 0,
-      endAngle = 180,
-      fontColor = 'black',
-      showStepText = true,
-      showStartValue = true,
-      showEndValue = true,
-      showStepLine = true,
-      showSubStep = true,
-      inText = true,
-      colorStops, // 스텝별 각각 다른 색
-      fillStyle,
-      textFillStyle = 'black',
-      needleFillStyle = 'black',
-      innerCircleFillStyle = 'gray',
-      stepNeedleSize = 2,
-      stepFillStyle,
-      stepTextSize,
-      cx,
-      cy,
-      rx,
-      ry,
-      ratio,
-      animFromBase = false
-    } = this.state
-
-    startValue = Number(startValue)
-
-    this.animOnValueChange(this.value, animFromBase, startValue)
-
-    const RADIAN = 0.0174533 / Math.PI
-    const rxRatio = (rx / 100) * ratio // 원 안에 지워지는 비율을 계산한 rx - ratio의 비율에 따라 크기가 변함
-    const ryRatio = (ry / 100) * ratio // 원 안에 지워지는 비율을 계산한 ry - ratio의 비율에 따라 크기가 변함
-    const circleSize = (endAngle - startAngle) / 180 // 원의 총 길이. - PI * 2가 원이므로 (360도 = 2, 180도 = 1)
-    const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기
-
-    startAngle = startAngle * RADIAN - 0.5 //  맨 위쪽을 중심으로 앵글의 범위에 따라 왼쪽으로 넓어짐
-    endAngle = endAngle * RADIAN - 0.5 //  맨 위쪽을 중심으로 앵글의 범위에 따라 오른쪽으로 넓어짐
-
-    context.translate(cx, cy)
-
-    ////  메인 게이지 원 그리기  ////
-    context.beginPath()
-
-    context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, startAngle * Math.PI, endAngle * Math.PI)
-    this.drawStroke(context)
-    context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, endAngle * Math.PI, startAngle * Math.PI, true) // 반대로 그리며 원을 지움.
-    // this.drawFill(context)
-
-    context.closePath()
-
-    ////  스텝별 색 칠하기  ////
-    if (colorStops) {
-      let beforeValue = 0
-      let endStepAngle = 0
-      context.moveTo(0, 0)
-
-      colorStops.forEach(function (
-        v: { position: number; color: string },
-        idx: number,
-        arr: { position: number; color: string }[]
-      ) {
-        context.beginPath()
-
-        let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.
-        let startStepAngle = endStepAngle || Math.PI * (startAngle + (circleSize * beforeValue) / totalValue)
-
-        if (idx === arr.length - 1)
-          // 마지막값은 무조건 끝까지 채워주도록 한다
-          endStepAngle = Math.PI * (startAngle + circleSize)
-        else endStepAngle = Math.PI * (startAngle + (circleSize * value) / totalValue)
-
-        if (beforeValue > totalValue || beforeValue > value)
-          // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음
-          return false
-
-        context.ellipse(0, 0, Math.abs(rx), Math.abs(ry), 0, startStepAngle, endStepAngle)
-        context.ellipse(0, 0, Math.abs(rxRatio), Math.abs(ryRatio), 0, endStepAngle, startStepAngle, true)
-        context.fillStyle = v.color
-        context.fill()
-
-        beforeValue = value
-      })
-    }
-    context.scale(1, ry / rx)
-
-    ////  바늘 그리기  ////
-    context.beginPath()
-    let drawingValue = this.animValue
-    drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.
-
-    let ang = Math.PI * ((circleSize * (drawingValue - startValue)) / totalValue + startAngle - 0.5)
-
-    drawNeedle(context, rx, ang)
-
-    context.fillStyle = needleFillStyle
-    context.fill()
-
-    ////  중앙 원 그리기  ////
-    context.beginPath()
-    context.ellipse(0, 0, Math.abs(rx) / 15, Math.abs(rx) / 15, 0, 0, 2 * Math.PI)
-    context.fillStyle = innerCircleFillStyle
-    context.fill()
-
-    ////  스텝 선 그리기  ////
-    context.fillStyle = stepFillStyle
-    if (showStepLine) {
-      let count = totalValue / step
-
-      // Draw StartValue
-      drawStepLine(context, Math.PI * (startAngle + 0.5), rx * 0.8, stepNeedleSize) // 원을 그릴때 PI는 45도 부터 그리지만 angle은 0도부터 틀어서 + 0.5도를 곱해줘야함
-      // Draw StepValue
-      for (let num = 1; num < count; num++) {
-        let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)
-
-        drawStepLine(context, ang, rx * 0.8, stepNeedleSize)
-      }
-      // Draw EndValue
-      drawStepLine(context, Math.PI * (endAngle + 0.5), rx * 0.8, stepNeedleSize)
-    }
-
-    ////  서브 스탭 그리기  ////
-    if (showSubStep && subStep > 0) {
-      let count = Math.round(totalValue / subStep)
-
-      // Draw StepValue
-      for (let num = 1; num <= count; num++) {
-        if ((num * subStep) % step == 0) {
-          // 메인 스탭과 서브 스탭은 그리지 않음
-          continue
-        }
-        let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)
-
-        drawSubStepLine(context, ang, rx * 0.8, stepNeedleSize)
-      }
-    }
-
-    ////  스텝 텍스트 그리기  ////
-    context.fillStyle = textFillStyle
-    context.font = (rx * stepTextSize) / 50 + 'px arial'
-    context.textBaseline = 'middle'
-    context.textAlign = 'center'
-    let textLocation = inText ? 0.8 : 1.35
-
-    if (showStartValue) {
-      // Draw StartText
-      drawStepText(context, startValue, Math.PI * (startAngle + 0.5), rx * textLocation)
-    }
-
-    if (showEndValue) {
-      // Draw EndText
-      drawStepText(context, endValue, Math.PI * (endAngle + 0.5), rx * textLocation)
-    }
-
-    if (showStepText) {
-      // Draw StepText
-      let count = totalValue / step
-      let significantFigures = countSignificantFigures(step)
-
-      for (let num = 1; num < count; num++) {
-        let value = startValue + step * num
-        let ang = Math.PI * ((circleSize / count) * num + startAngle + 0.5)
-
-        drawStepText(context, value.toFixed(significantFigures), ang, rx * textLocation)
-      }
-    }
-
-    context.scale(1, rx / ry)
-    context.translate(-cx, -cy)
-  }
-
-  contains(x: number, y: number): boolean {
-    // 컨테인즈는 Ellipse로 정의함
-    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
-  }
-
-  postrender(context: CanvasRenderingContext2D) {
-    this.drawText(context)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('gauge-circle', GaugeCircle)

package/src/gauge-horizon.ts

@@ -1,203 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { Component, ComponentNature, RectPath, Shape, ValueHolder } from '@hatiolab/things-scene'
-
-import { PROPERTIES } from './gauge-properties'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    ...PROPERTIES,
-    {
-      type: 'color',
-      label: 'text-fill-style',
-      name: 'textFillStyle',
-      property: 'textFillStyle'
-    },
-    {
-      type: 'color',
-      label: 'needle-fill-style',
-      name: 'needleFillStyle',
-      property: 'needleFillStyle'
-    },
-    {
-      type: 'number',
-      label: 'needle-size',
-      name: 'needleSize',
-      property: 'needleSize'
-    }
-  ],
-  help: 'scene/component/gauge-horizon'
-}
-
-export default class GaugeHorizon extends ValueHolder(RectPath(Shape)) {
-  render(context: CanvasRenderingContext2D) {
-    var {
-      startValue,
-      endValue,
-      step,
-      subStep,
-      colorStops,
-      needleFillStyle,
-      stepFillStyle,
-      textFillStyle,
-      needleSize,
-      stepNeedleSize,
-      stepTextSize,
-      showStepText = true,
-      showStartValue = true,
-      showEndValue = true,
-      showStepLine = true,
-      showSubStep = true,
-      width,
-      height,
-      top,
-      left,
-      animFromBase = false
-    } = this.state
-
-    startValue = Number(startValue)
-
-    this.animOnValueChange(this.value, animFromBase, startValue)
-
-    const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기
-
-    context.translate(left, top) // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌
-
-    ////  메인 막대 그리기  ////
-    context.beginPath()
-
-    context.rect(0, 0, width, height)
-
-    this.drawFill(context)
-    this.drawStroke(context)
-    context.closePath()
-
-    ////  스텝별 색 칠하기  ////
-    if (colorStops) {
-      let beforeValue = 0
-      colorStops.forEach(function (
-        v: { position: number; color: string },
-        idx: number,
-        arr: { position: number; color: string }[]
-      ) {
-        context.beginPath()
-
-        let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.
-        let startStepPosition = (width * beforeValue) / totalValue
-        let endStepPosition
-        // console.log(startStepPosition + (width * value / totalValue));
-        if (idx == arr.length - 1 || startStepPosition + (width * value) / totalValue)
-          // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 width 를 넘을 경우는 무조건 끝까지 채워주도록 한다
-          endStepPosition = width - startStepPosition
-        else endStepPosition = (width * value) / totalValue
-
-        if (beforeValue > totalValue || beforeValue > value)
-          // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음
-          return false
-
-        context.rect(startStepPosition, 0, endStepPosition, height)
-
-        context.fillStyle = v.color
-        context.fill()
-
-        beforeValue = value
-      })
-    }
-
-    ////  스텝 선 그리기  ////
-    context.fillStyle = stepFillStyle
-    if (showStepLine) {
-      let count = totalValue / step
-      let stepSize = width * 0.06
-
-      // Draw StartValue
-      context.fillRect(0, height - stepSize, stepNeedleSize, stepSize)
-      // Draw StepValue
-      for (let num = 1; num < count; num++) {
-        let locate = (width / count) * num
-
-        context.fillRect(locate, height - stepSize, stepNeedleSize, stepSize)
-      }
-      // Draw EndValue
-      context.fillRect(width, height - stepSize, stepNeedleSize, stepSize)
-    }
-
-    ////  서브 스탭 그리기  ////
-    if (showSubStep) {
-      let count = totalValue
-      let subStepSize = width * 0.027
-      // Draw StartValue
-      context.fillRect(0, height - subStepSize, stepNeedleSize, subStepSize)
-
-      // Draw StepValue
-      for (let num = 1; num <= count; num++) {
-        if (num % step == 0 || num % subStep != 0) {
-          // 메인 스탭과 서브 스탭은 그리지 않음
-          continue
-        }
-        let locate = (width / count) * num
-        context.fillRect(locate, height - subStepSize, stepNeedleSize, subStepSize)
-      }
-    }
-
-    ////  스텝 텍스트 그리기  ////
-    let fontSize = (width * stepTextSize) / 150
-    context.fillStyle = textFillStyle
-    context.font = fontSize + 'px arial'
-    context.textBaseline = 'middle'
-    context.textAlign = 'center'
-    if (showStartValue) {
-      // Draw StartText
-      context.fillText(startValue, 0, height + fontSize * 0.75)
-    }
-
-    if (showEndValue) {
-      // Draw EndText
-      context.fillText(endValue, width, height + fontSize * 0.75)
-    }
-
-    if (showStepText) {
-      // Draw StepText
-      let count = totalValue / step
-
-      for (let num = 1; num < count; num++) {
-        let value = startValue + step * num
-        let locate = (width / count) * num
-
-        context.fillText(value, locate, height + fontSize * 0.75)
-      }
-    }
-
-    ////  바늘 그리기  ////
-    context.beginPath()
-    let drawingValue = this.animValue
-    drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.
-    let position = ((drawingValue - startValue) / totalValue) * width
-
-    needleSize *= 4
-    context.moveTo(position, height + fontSize * 1.4)
-    context.lineTo(position + needleSize / 2, height + needleSize + fontSize * 1.4)
-    context.lineTo(position - needleSize / 2, height + needleSize + fontSize * 1.4)
-
-    context.fillStyle = needleFillStyle
-    context.fill()
-    context.closePath()
-
-    context.translate(-left, -top)
-  }
-
-  postrender(context: CanvasRenderingContext2D) {
-    this.drawText(context)
-  }
-
-  get nature() {
-    return NATURE
-  }
-}
-
-Component.register('gauge-horizon', GaugeHorizon)

package/src/gauge-properties.ts

@@ -1,114 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-
-export const PROPERTIES = [
-  {
-    type: 'string',
-    label: 'value',
-    name: 'value',
-    property: 'value'
-  },
-  {
-    type: 'number',
-    label: 'start-value',
-    name: 'startValue',
-    observe: function (this: HTMLElement, startValue: number) {
-      const colorStops: any = this.parentNode!.querySelector('[name=colorStops]')
-      colorStops.property.min = startValue
-    },
-    property: 'startValue'
-  },
-  {
-    type: 'number',
-    label: 'end-value',
-    name: 'endValue',
-    observe: function (this: HTMLElement, endValue: number) {
-      const colorStops: any = this.parentNode!.querySelector('[name=colorStops]')
-      colorStops.property.max = endValue
-    },
-    property: 'endValue'
-  },
-  {
-    type: 'number',
-    label: 'step',
-    name: 'step',
-    property: 'step'
-  },
-  {
-    type: 'number',
-    label: 'step-text-size',
-    name: 'stepTextSize',
-    property: 'stepTextSize'
-  },
-  {
-    type: 'number',
-    label: 'sub-step',
-    name: 'subStep',
-    property: 'subStep'
-  },
-  {
-    type: 'number',
-    label: 'step-needle-size',
-    name: 'stepNeedleSize',
-    property: 'stepNeedleSize'
-  },
-  {
-    type: 'color',
-    label: 'step-fill-style',
-    name: 'stepFillStyle',
-    property: 'stepFillStyle'
-  },
-  {
-    type: 'solid-color-stops',
-    label: 'color-stops',
-    name: 'colorStops',
-    property: {
-      min: 0,
-      max: 100
-    }
-  },
-  {
-    type: 'legend',
-    label: '',
-    name: 'toggleOption',
-    property: {
-      label: 'Toggle Option'
-    }
-  },
-  {
-    type: 'checkbox',
-    label: 'show-start-value',
-    name: 'showStartValue',
-    property: 'showStartValue'
-  },
-  {
-    type: 'checkbox',
-    label: 'show-end-value',
-    name: 'showEndValue',
-    property: 'showEndValue'
-  },
-  {
-    type: 'checkbox',
-    label: 'show-step-line',
-    name: 'showStepLine',
-    property: 'showStepLine'
-  },
-  {
-    type: 'checkbox',
-    label: 'show-step-text',
-    name: 'showStepText',
-    property: 'showStepText'
-  },
-  {
-    type: 'checkbox',
-    label: 'show-sub-step',
-    name: 'showSubStep',
-    property: 'showSubStep'
-  },
-  {
-    type: 'checkbox',
-    label: 'anim-from-base',
-    name: 'animFromBase'
-  }
-]