@operato/scene-manufacturing 1.3.0

package/src/index.ts

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

package/src/libs/format.ts

@@ -0,0 +1,47 @@
+/**
+ * 문자열 길이를 늘려주는 함수
+ *
+ * @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.ts

@@ -0,0 +1,184 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'
+
+import format from './libs/format'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'number',
+      label: 'tact-time',
+      name: 'tactTime',
+      placeholder: 'seconds'
+    },
+    {
+      type: 'string',
+      label: 'format',
+      name: 'format',
+      placeholder: 'hh:mm:ss'
+    },
+    {
+      type: 'select',
+      label: 'progress-direction',
+      name: 'progressDirection',
+      property: {
+        options: ['', 'increase', 'decrease']
+      }
+    },
+    {
+      type: 'color',
+      label: 'increase-progress-color',
+      name: 'increaseProgressColor'
+    },
+    {
+      type: 'color',
+      label: 'decrease-progress-color',
+      name: 'decreaseProgressColor'
+    },
+    {
+      type: 'color',
+      label: 'increase-font-color',
+      name: 'increaseFontColor'
+    },
+    {
+      type: 'color',
+      label: 'decrese-font-color',
+      name: 'decreaseFontColor'
+    },
+    {
+      type: 'boolean',
+      label: 'auto-start',
+      name: 'autoStart'
+    },
+    {
+      type: 'number',
+      label: 'round',
+      name: 'round'
+    }
+  ],
+  'value-property': 'tactTime',
+  help: 'scene/component/manufacturing/tact-timer'
+}
+
+export default class TactTimer extends RectPath(Shape) {
+  private _due?: number
+
+  get nature() {
+    return NATURE
+  }
+
+  ready() {
+    if (!this.app.isViewMode) {
+      return
+    }
+
+    const { autoStart } = this.state
+
+    if (autoStart) {
+      this.start()
+    }
+  }
+
+  start() {
+    this._due = Date.now() + this.tactTime * 1000
+    this.counting()
+  }
+
+  onchange(after: Properties) {
+    if ('tactTime' in after) {
+      this.start()
+    }
+  }
+
+  counting() {
+    // @ts-ignore
+    if (this.disposed || this.countdown < -this.tactTime) {
+      return
+    }
+
+    requestAnimationFrame(() => {
+      const countdown = this.countdown
+
+      const text = format(Math.abs(countdown), this.getState('format'))
+      this.text = text
+
+      this.setState('data', this.countdown)
+
+      setTimeout(() => {
+        this.counting()
+      }, 1000)
+    })
+  }
+
+  render(context: CanvasRenderingContext2D) {
+    var {
+      tactTime,
+      top,
+      left,
+      height,
+      width,
+      round = 0,
+      fontColor,
+      increaseFontColor,
+      decreaseFontColor,
+      increaseProgressColor = 'transparent',
+      decreaseProgressColor = 'transparent'
+    } = this.state
+
+    const increase = this.countdown > 0 && this.countdown / tactTime > 0.2
+
+    // progress의 색상
+    context.beginPath()
+    context.roundRect(left, top, width, height, round)
+    context.clip()
+    this.drawFill(context)
+
+    // value의 색상
+    context.beginPath()
+
+    var progress = Math.abs((this.countdown / tactTime) * 100)
+
+    if (!isNaN(progress)) {
+      progress = width - (width * progress) / 100
+      progress = Math.max(Math.min(progress, width), 0)
+
+      context.rect(left, top, progress, height)
+      context.fillStyle = increase ? increaseProgressColor : decreaseProgressColor
+      context.fill()
+
+      context.beginPath()
+    }
+
+    context.roundRect(left, top, width, height)
+
+    this.setState('fontColor', (increase ? increaseFontColor : decreaseFontColor) || fontColor)
+  }
+
+  postrender(context: CanvasRenderingContext2D) {
+    this.drawStroke(context)
+    this.drawText(context)
+  }
+
+  get tactTime() {
+    return Number(this.getState('tactTime') || 0)
+  }
+
+  set tactTime(tactTime) {
+    this.setState('tactTime', Number(tactTime) || 0)
+  }
+
+  get countdown() {
+    const due = this._due || 0
+    const now = Date.now()
+
+    return Math.round((due - now) / 1000)
+  }
+}
+
+Component.register('tact-timer', TactTimer)

package/src/templates/index.ts

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

package/src/templates/tact-timer.ts

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

package/things-scene.config.js

@@ -0,0 +1,5 @@
+import templates from './dist/templates'
+
+export default {
+  templates
+}

package/translations/en.json

@@ -0,0 +1,10 @@
+{
+  "label.data-reflection": "data reflection",
+  "label.decrease-progress-color": "decrease progress color",
+  "label.decrese-font-color": "decrese font color",
+  "label.format": "format",
+  "label.increase-font-color": "increase font color",
+  "label.increase-progress-color": "increase progress color",
+  "label.progress-direction": "progress direction",
+  "label.tact-time": "tact time"
+}

package/translations/ja.json

@@ -0,0 +1,10 @@
+{
+  "label.data-reflection": "data reflection",
+  "label.decrease-progress-color": "decrease progress color",
+  "label.decrese-font-color": "decrese font color",
+  "label.format": "format",
+  "label.increase-font-color": "increase font color",
+  "label.increase-progress-color": "increase progress color",
+  "label.progress-direction": "progress direction",
+  "label.tact-time": "tact time"
+}

package/translations/ko.json

@@ -0,0 +1,9 @@
+{
+  "label.decrease-progress-color": "감소 진행 색상",
+  "label.decrese-font-color": "감소 폰트 색상",
+  "label.format": "포맷",
+  "label.increase-font-color": "증가시 폰트 색상",
+  "label.increase-progress-color": "증가시 진행 색상",
+  "label.progress-direction": "진행 방향",
+  "label.tact-time": "tact time"
+}

package/translations/ms.json

@@ -0,0 +1,10 @@
+{
+  "label.data-reflection": "data reflection",
+  "label.decrease-progress-color": "decrease progress color",
+  "label.decrese-font-color": "decrese font color",
+  "label.format": "format",
+  "label.increase-font-color": "increase font color",
+  "label.increase-progress-color": "increase progress color",
+  "label.progress-direction": "progress direction",
+  "label.tact-time": "tact time"
+}

package/translations/zh.json

@@ -0,0 +1,10 @@
+{
+  "label.data-reflection": "data reflection",
+  "label.decrease-progress-color": "decrease progress color",
+  "label.decrese-font-color": "decrese font color",
+  "label.format": "format",
+  "label.increase-font-color": "increase font color",
+  "label.increase-progress-color": "increase progress color",
+  "label.progress-direction": "progress direction",
+  "label.tact-time": "tact time"
+}

package/tsconfig.json

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