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

package/src/duetimer.ts

@@ -1,168 +0,0 @@
-import { Component, ComponentNature, Properties, RectPath, Shape } from '@hatiolab/things-scene'
-
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import format from './libs/format'
-
-const NATURE: ComponentNature = {
-  mutable: false,
-  resizable: true,
-  rotatable: true,
-  properties: [
-    {
-      type: 'number',
-      label: 'due',
-      name: 'due',
-      placeholder: 'timestamp'
-    },
-    {
-      type: 'string',
-      label: 'format-run',
-      name: 'format-run',
-      placeholder: 'hh:mm:ss'
-    },
-    {
-      type: 'string',
-      label: 'format-stop',
-      name: 'format-stop',
-      placeholder: '--:--:--'
-    },
-    {
-      type: 'select',
-      label: 'data-reflection',
-      name: 'dataReflection',
-      property: {
-        options: ['', 'countdown', 'round']
-      }
-    },
-    {
-      type: 'color',
-      label: 'progress-color',
-      name: 'progressColor',
-      property: 'progressColor'
-    }
-  ],
-  'value-property': 'due',
-  help: 'scene/component/duetimer'
-}
-
-export default class DueTimer extends RectPath(Shape) {
-  private _round: number = 0
-
-  get nature() {
-    return NATURE
-  }
-
-  ready() {
-    if (!this.app.isViewMode) {
-      return
-    }
-
-    var { due = 0 } = this.state
-
-    this.timeout = Math.max(Math.round((due - Date.now()) / 1000), 0)
-  }
-
-  onchange(after: Properties) {
-    if ('timeout' in after) {
-      this.timeout = Math.max(Math.round((this.due - Date.now()) / 1000), 0)
-      this.counting()
-    }
-  }
-
-  counting() {
-    // @ts-ignore
-    if (this.disposed) {
-      return
-    }
-
-    requestAnimationFrame(() => {
-      const countdown = this.countdown
-      const { dataReflection = 'countdown' } = this.state
-
-      if (countdown > 0) {
-        const text = format(countdown, this.getState('format-run'))
-
-        this.text = text
-
-        if (dataReflection != 'round') {
-          this.setState('data', text)
-        }
-
-        setTimeout(() => {
-          this.counting()
-        }, 1000)
-      } else {
-        const text = format(countdown, this.getState('format-stop'))
-
-        this.text = text
-
-        this.setState('data', dataReflection != 'round' ? text : ++this._round)
-      }
-    })
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { top, left, height, width, progressColor = 'transparent' } = this.state
-
-    // progress의 색상
-    context.beginPath()
-    context.rect(left, top, width, height)
-
-    this.drawFill(context)
-
-    // value의 색상
-    context.beginPath()
-
-    var progress = (this.countdown / this.timeout) * 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 = progressColor
-      context.fill()
-
-      context.beginPath()
-    }
-
-    // stroke
-    context.rect(left, top, width, height)
-  }
-
-  postrender(context: CanvasRenderingContext2D) {
-    this.drawStroke(context)
-    this.drawText(context)
-  }
-
-  get timeout() {
-    return Number(this.getState('timeout') || 0)
-  }
-
-  set timeout(timeout) {
-    this.setState('timeout', Number(timeout) || 0)
-  }
-
-  get due() {
-    return Number(this.getState('due') || 0)
-  }
-
-  set due(due) {
-    this.setState('due', due)
-  }
-
-  get countdown() {
-    const due = this.due
-    const now = Date.now()
-
-    return Math.max(Math.round((due - now) / 1000), 0)
-  }
-
-  get round() {
-    return this._round
-  }
-}
-
-Component.register('duetimer', DueTimer)

package/src/index.ts

@@ -1,4 +0,0 @@
-import Timer from './timer'
-import DueTimer from './duetimer'
-
-export default [Timer, DueTimer]

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/templates/duetimer.ts

@@ -1,23 +0,0 @@
-const icon = new URL('../../icons/timer.png', import.meta.url).href
-
-export default {
-  type: 'timer',
-  description: 'timer',
-  group: 'etc',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'timer',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    strokeStyle: 'darkgray',
-    days: 0,
-    hours: 0,
-    minutes: 0,
-    seconds: 0,
-    'format-run': 'mm:ss',
-    'format-stop': '--:--'
-  }
-}

package/src/templates/index.ts

@@ -1,4 +0,0 @@
-import timer from './timer'
-import duetimer from './duetimer'
-
-export default [timer, duetimer]

package/src/templates/timer.ts

@@ -1,19 +0,0 @@
-const icon = new URL('../../icons/duetimer.png', import.meta.url).href
-
-export default {
-  type: 'duetimer',
-  description: 'duetimer',
-  group: 'etc',
-  /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
-  icon,
-  model: {
-    type: 'duetimer',
-    left: 10,
-    top: 10,
-    width: 100,
-    height: 100,
-    strokeStyle: 'darkgray',
-    'format-run': 'mm:ss',
-    'format-stop': '--:--'
-  }
-}

package/src/timer.ts

@@ -1,193 +0,0 @@
-/*
- * 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: 'days',
-      name: 'days',
-      placeholder: 'days'
-    },
-    {
-      type: 'number',
-      label: 'hours',
-      name: 'hours',
-      placeholder: 'hours'
-    },
-    {
-      type: 'number',
-      label: 'minutes',
-      name: 'minutes',
-      placeholder: 'minutes'
-    },
-    {
-      type: 'number',
-      label: 'seconds',
-      name: 'seconds',
-      placeholder: 'seconds'
-    },
-    {
-      type: 'string',
-      label: 'format-run',
-      name: 'format-run',
-      placeholder: 'hh:mm:ss'
-    },
-    {
-      type: 'string',
-      label: 'format-stop',
-      name: 'format-stop',
-      placeholder: '--:--:--'
-    },
-    {
-      type: 'color',
-      label: 'progress-color',
-      name: 'progressColor',
-      property: 'progressColor'
-    },
-    {
-      type: 'select',
-      label: 'data-reflection',
-      name: 'dataReflection',
-      property: {
-        options: ['countdown', 'round']
-      }
-    },
-    {
-      type: 'boolean',
-      label: 'repeat',
-      name: 'repeat'
-    }
-  ],
-  'value-property': 'timeout',
-  help: 'scene/component/timer'
-}
-
-export default class Timer extends RectPath(Shape) {
-  private _due?: number
-  private _round: number = 0
-
-  get nature() {
-    return NATURE
-  }
-
-  ready() {
-    if (!this.app.isViewMode) {
-      return
-    }
-
-    var { days = 0, hours = 0, minutes = 0, seconds = 0 } = this.state
-
-    this.timeout = days * 86400 + hours * 3600 + minutes * 60 + seconds
-  }
-
-  onchange(after: Properties) {
-    if ('timeout' in after) {
-      this._due = Date.now() + this.timeout * 1000
-      this.counting()
-    }
-  }
-
-  counting() {
-    // @ts-ignore
-    if (this.disposed) {
-      return
-    }
-
-    const { dataReflection = 'countdown' } = this.state
-
-    requestAnimationFrame(() => {
-      const countdown = this.countdown
-
-      if (countdown > 0) {
-        const text = format(countdown, this.getState('format-run'))
-        this.text = text
-
-        if (dataReflection != 'round') {
-          this.setState('data', text)
-        }
-
-        setTimeout(() => {
-          this.counting()
-        }, 1000)
-      } else {
-        const text = format(countdown, this.getState('format-stop'))
-        this.text = text
-
-        this.setState('data', dataReflection != 'round' ? text : ++this._round)
-
-        if (this.state.repeat) {
-          this._due = Date.now() + this.timeout * 1000
-          this.counting()
-        }
-      }
-    })
-  }
-
-  render(context: CanvasRenderingContext2D) {
-    var { top, left, height, width, progressColor = 'transparent' } = this.state
-
-    // progress의 색상
-    context.beginPath()
-    context.rect(left, top, width, height)
-    this.drawFill(context)
-
-    // value의 색상
-    context.beginPath()
-
-    var progress = (this.countdown / this.timeout) * 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 = progressColor
-      context.fill()
-
-      context.beginPath()
-    }
-
-    // stroke
-    context.rect(left, top, width, height)
-  }
-
-  postrender(context: CanvasRenderingContext2D) {
-    this.drawStroke(context)
-    this.drawText(context)
-  }
-
-  get timeout() {
-    return Number(this.getState('timeout') || 0)
-  }
-
-  set timeout(timeout) {
-    this.setState('timeout', Number(timeout) || 0)
-  }
-
-  get countdown() {
-    const timeout = this.timeout
-    if (!timeout || timeout < 0) {
-      return 0
-    }
-
-    const due = this._due || 0
-    const now = Date.now()
-
-    return Math.max(Math.round((due - now) / 1000), 0)
-  }
-
-  get round() {
-    return this._round
-  }
-}
-
-Component.register('timer', Timer)

package/tsconfig.json

@@ -1,23 +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,
-    "skipLibCheck": true
-  },
-  "include": ["**/*.ts", "*.d.ts"]
-}