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

package/src/index.ts

@@ -1 +0,0 @@
-export { default as TactTimer } from './tact-timer'

package/src/libs/format.ts

@@ -1,47 +0,0 @@
-/**
- * 문자열 길이를 늘려주는 함수
- *
- * @param {String} i
- * @param {Number} len
- */
-function ii(i: string, len?: number) {
-  var s = i
-  len = len || 2
-  while (s.length < len) s = '0' + s
-  return s
-}
-
-/**
- * 시간 표시 포맷을 맞추는 함수
- *
- * @param {Number} seconds seconds
- * @param {string} timeFormat hh:mm:ss
- */
-export default function formatTime(seconds = 0, timeFormat = '') {
-  var h = 0,
-    m = 0,
-    s = 0
-  var formatted = ''
-
-  h = Math.floor(seconds / 3600)
-  formatted = timeFormat.replace(/(^|[^\\])hh+/g, '$1' + ii(h.toString()))
-  formatted = formatted.replace(/(^|[^\\])h/g, '$1' + h)
-  if (timeFormat !== formatted) {
-    timeFormat = formatted
-    seconds %= 3600
-  }
-
-  m = Math.floor(seconds / 60)
-  formatted = timeFormat.replace(/(^|[^\\])mm+/g, '$1' + ii(m.toString()))
-  formatted = formatted.replace(/(^|[^\\])m/g, '$1' + m)
-  if (timeFormat !== formatted) {
-    timeFormat = formatted
-    seconds %= 60
-  }
-
-  s = seconds
-  formatted = timeFormat.replace(/(^|[^\\])ss+/g, '$1' + ii(s.toString()))
-  formatted = formatted.replace(/(^|[^\\])s/g, '$1' + s)
-
-  return formatted
-}

package/src/tact-timer-mask.ts

@@ -1,34 +0,0 @@
-export const MASK: string = `
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 95 23">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: url(#linear-gradient);
-      }
-
-      .cls-1, .cls-2 {
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: {{fillColor}};
-      }
-    </style>
-    <linearGradient id="linear-gradient" x1="47.4" y1="85.6" x2="47.4" y2="95" gradientTransform="translate(0 -74)" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#000" stop-opacity="0"/>
-      <stop offset=".9" stop-color="#000" stop-opacity=".2"/>
-    </linearGradient>
-  </defs>
-  <rect class="cls-1" x="1.4" y="11.6" width="92.1" height="9.5" rx="2.6" ry="2.6"/>
-  <path class="cls-2" d="M95,0H0v23h95V0ZM92.5,17.9c0,1.4-1.2,2.6-2.6,2.6H5.1c-1.4,0-2.6-1.2-2.6-2.6V5.1c0-1.4,1.2-2.6,2.6-2.6h84.8c1.4,0,2.6,1.2,2.6,2.6v12.8Z"/>
-  <path class="cls-2" d="M47.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-  <path class="cls-2" d="M38.6,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-  <path class="cls-2" d="M29.3,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-  <path class="cls-2" d="M19.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-  <path class="cls-2" d="M11,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-  <path class="cls-2" d="M84.9,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-  <path class="cls-2" d="M75.6,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-  <path class="cls-2" d="M66.4,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-  <path class="cls-2" d="M57.2,3.1c0-.6.7-.6.7-.6v-.7h-2.5v.7s.7,0,.7.6v16.7s0,.7-.7.8v.6h2.5v-.6c-.7-.1-.7-.8-.7-.8V3.1Z"/>
-</svg>
-`

package/src/tact-timer.ts

@@ -1,322 +0,0 @@
-import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-import format from './libs/format'
-import { MASK } from './tact-timer-mask'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'string',
-      label: 'start-time',
-      name: 'startTime',
-      placeholder: 'YYYYMMDDhhmmss'
-    },
-    {
-      type: 'string',
-      label: 'end-time',
-      name: 'endTime',
-      placeholder: 'YYYYMMDDhhmmss'
-    },
-    {
-      type: 'string',
-      label: 'format',
-      name: 'format',
-      placeholder: 'hh:mm:ss'
-    },
-    {
-      type: 'select',
-      label: 'progress-direction',
-      name: 'progressDirection',
-      property: {
-        options: ['', 'increase', 'decrease']
-      }
-    },
-    {
-      type: 'color',
-      label: 'tact-timer-mask-color',
-      name: 'maskColor'
-    },
-    {
-      type: 'color',
-      label: 'before-due-progress-color',
-      name: 'beforeDueProgressColor'
-    },
-    {
-      type: 'color',
-      label: 'over-due-progress-color',
-      name: 'overDueProgressColor'
-    },
-    {
-      type: 'color',
-      label: 'before-due-font-color',
-      name: 'beforeDueFontColor'
-    },
-    {
-      type: 'color',
-      label: 'over-due-font-color',
-      name: 'overDueFontColor'
-    },
-    {
-      type: 'color',
-      label: 'under-threshold-color',
-      name: 'underThresholdColor'
-    },
-    {
-      type: 'number',
-      label: 'progress-threshold',
-      name: 'progressThreshold',
-      placeholder: '%'
-    },
-    {
-      type: 'number',
-      label: 'round',
-      name: 'round'
-    },
-    {
-      type: 'boolean',
-      label: 'auto-start',
-      name: 'autoStart'
-    },
-    {
-      type: 'boolean',
-      label: 'show-progress',
-      name: 'showProgress'
-    },
-    {
-      type: 'boolean',
-      label: 'show-timer',
-      name: 'showTimer'
-    }
-  ],
-  help: 'scene/component/manufacturing/tact-timer'
-}
-
-export default class TactTimer extends RectPath(Shape) {
-  private _start: number = 0
-  private _due: number = 0
-  private imageElement?: HTMLImageElement
-
-  get nature() {
-    return NATURE
-  }
-
-  ready() {
-    if (!this.app.isViewMode) {
-      return
-    }
-
-    const { autoStart, started } = this.state
-
-    if (autoStart || started) {
-      this.setState('started', true)
-
-      this.start()
-    }
-  }
-
-  start() {
-    const { startTime, endTime, hidden } = this.state
-    const start = this.parseTime(startTime)
-    const end = this.parseTime(endTime)
-
-    if (start && end && !hidden) {
-      this._due = end.getTime()
-      this._start = start.getTime()
-      this.counting()
-    }
-  }
-
-  stop() {
-    this.started = false
-  }
-
-  onchange(after: Properties) {
-    if ('startTime' in after || 'endTime' in after || 'hidden' in after) {
-      this.start()
-    }
-
-    if ('maskColor' in after) {
-      delete this.imageElement
-    }
-  }
-
-  getImageElement(): HTMLImageElement | undefined {
-    if (!this.imageElement) {
-      const { maskColor = 'black' } = this.state
-
-      this.imageElement = new Image()
-      this.imageElement.src =
-        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(MASK.replace(/{{fillColor}}/g, maskColor))
-    }
-
-    return this.imageElement
-  }
-
-  counting() {
-    const { hidden, started } = this.state
-    if (this.disposed || hidden || !started) {
-      return
-    }
-
-    requestAnimationFrame(() => {
-      const { showTimer, beforeDueFontColor, overDueFontColor, fontColor } = this.state
-      const countdown = this.countdown
-
-      this.setState('fontColor', (this.countdown > 0 ? beforeDueFontColor : overDueFontColor) || fontColor)
-
-      if (showTimer) {
-        const text = format(Math.abs(countdown), this.getState('format'))
-        this.text = text
-      } else {
-        this.text = ''
-      }
-
-      this.setState('data', this.countdown)
-
-      setTimeout(() => {
-        this.counting()
-      }, 1000)
-    })
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var {
-      top,
-      left,
-      height,
-      width,
-      round = 0,
-      fontColor,
-      maskColor,
-      beforeDueFontColor,
-      overDueFontColor,
-      beforeDueProgressColor = 'transparent',
-      overDueProgressColor = 'transparent',
-      underThresholdColor = 'transparent',
-      progressDirection = 'increase',
-      progressThreshold = 0,
-      showProgress
-    } = this.state
-
-    const increase = this.countdown > 0
-    const totalDuration = (this._due - this._start) / 1000
-    const underThreshold = this.countdown / totalDuration < progressThreshold / 100
-
-    // progress의 색상
-    context.beginPath()
-    context.roundRect(left, top, width, height, round)
-    context.clip()
-    this.drawFill(context)
-
-    // value의 색상
-    context.beginPath()
-
-    if (!showProgress) {
-      return
-    }
-
-    var progress = Math.abs((this.countdown / totalDuration) * 100)
-
-    if (!isNaN(progress)) {
-      progress = width - (width * progress) / 100
-      progress = Math.max(Math.min(progress, width), 0)
-
-      if (progressDirection == 'increase') {
-        context.rect(left, top, progress, height)
-      } else {
-        context.rect(left + progress, top, width - progress, height)
-      }
-
-      context.fillStyle = increase
-        ? underThreshold
-          ? underThresholdColor
-          : beforeDueProgressColor
-        : overDueProgressColor
-      context.fill()
-
-      context.beginPath()
-    }
-
-    const image = this.getImageElement()
-    this.drawImage(context, image!, left - 2, top - 2, width + 4, height + 4)
-
-    context.roundRect(left, top, width, height, round)
-
-    this.setState('fontColor', (increase ? beforeDueFontColor : overDueFontColor) || fontColor)
-  }
-
-  postrender(context: CanvasRenderingContext2D) {
-    this.drawStroke(context)
-    this.drawText(context)
-  }
-
-  parseTime(timeString: string): Date | undefined {
-    if (!timeString || timeString.length !== 14) {
-      return undefined
-    }
-    const year = parseInt(timeString.slice(0, 4), 10)
-    const month = parseInt(timeString.slice(4, 6), 10) - 1
-    const day = parseInt(timeString.slice(6, 8), 10)
-    const hour = parseInt(timeString.slice(8, 10), 10)
-    const minute = parseInt(timeString.slice(10, 12), 10)
-    const second = parseInt(timeString.slice(12, 14), 10)
-
-    return new Date(year, month, day, hour, minute, second)
-  }
-
-  get countdown(): number {
-    const due = this._due || 0
-    const now = Date.now()
-
-    return Math.round((due - now) / 1000)
-  }
-
-  get value() {
-    const { startTime, endTime } = this.state
-    return [startTime, endTime]
-  }
-
-  set value(v) {
-    if (v instanceof Array) {
-      const [startTime, endTime] = v
-      this.setState({
-        startTime,
-        endTime
-      })
-    } else if (typeof v == 'object') {
-      const { startTime, endTime } = v
-      this.setState({
-        startTime,
-        endTime
-      })
-    } else if (typeof v == 'string') {
-      const [startTime, endTime] = (v as string).split(/[-+/%$#_,]+/)
-      this.setState({
-        startTime,
-        endTime
-      })
-    } else {
-      this.setState({
-        startTime: undefined,
-        endTime: undefined
-      })
-    }
-  }
-
-  get started() {
-    return this.getState('started')
-  }
-
-  set started(started) {
-    if (this.started !== started) {
-      this.setState('started', started)
-      if (started) {
-        this.start()
-      }
-    }
-  }
-}
-
-Component.register('tact-timer', TactTimer)

package/src/templates/index.ts

@@ -1,3 +0,0 @@
-import tactTimer from './tact-timer'
-
-export default [tactTimer]

package/src/templates/tact-timer.ts

@@ -1,27 +0,0 @@
-const icon = new URL('../../icons/tact-timer.png', import.meta.url).href
-
-export default {
-  type: 'tact-timer',
-  description: 'tact timer',
-  group: 'etc' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
-  icon,
-  model: {
-    type: 'tact-timer',
-    left: 100,
-    top: 100,
-    width: 200,
-    height: 40,
-    fontSize: 80,
-    lineWidth: 1,
-    round: 10,
-    showProgress: true,
-    showTimer: true,
-    progressDirection: 'decrease',
-    increaseProgressColor: 'green',
-    decreaseProgressColor: 'red',
-    increaseFontColor: 'navy',
-    decreaseFontColor: 'orange',
-    underThresholdColor: 'yellow',
-    progressThreshold: 30
-  }
-}

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2019", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "src",
-    "declaration": true,
-    "incremental": true
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}