@operato/scene-gauge 0.0.16

package/dist/gauge-properties.js

@@ -0,0 +1,114 @@
+/*
+ * 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 (startValue) {
+            const colorStops = this.parentNode.querySelector('[name=colorStops]');
+            colorStops.property.min = startValue;
+        },
+        property: 'startValue'
+    },
+    {
+        type: 'number',
+        label: 'end-value',
+        name: 'endValue',
+        observe: function (endValue) {
+            const colorStops = 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'
+    }
+];
+//# sourceMappingURL=gauge-properties.js.map

package/dist/gauge-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge-properties.js","sourceRoot":"","sources":["../src/gauge-properties.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,OAAO;QACb,QAAQ,EAAE,OAAO;KAClB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,UAA6B,UAAkB;YACtD,MAAM,UAAU,GAAQ,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;YAC3E,UAAU,CAAC,QAAQ,CAAC,GAAG,GAAG,UAAU,CAAA;QACtC,CAAC;QACD,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU;QAChB,OAAO,EAAE,UAA6B,QAAgB;YACpD,MAAM,UAAU,GAAQ,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;YAC3E,UAAU,CAAC,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAA;QACpC,CAAC;QACD,QAAQ,EAAE,UAAU;KACrB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,MAAM;QACZ,QAAQ,EAAE,MAAM;KACjB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,cAAc;KACzB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,UAAU;QACjB,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,SAAS;KACpB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,gBAAgB;QACtB,QAAQ,EAAE,gBAAgB;KAC3B;IACD;QACE,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,iBAAiB;QACxB,IAAI,EAAE,eAAe;QACrB,QAAQ,EAAE,eAAe;KAC1B;IACD;QACE,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,YAAY;QAClB,QAAQ,EAAE;YACR,GAAG,EAAE,CAAC;YACN,GAAG,EAAE,GAAG;SACT;KACF;IACD;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE;YACR,KAAK,EAAE,eAAe;SACvB;KACF;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,gBAAgB;QACtB,QAAQ,EAAE,gBAAgB;KAC3B;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,cAAc;KACzB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,cAAc;KACzB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,cAAc;KACzB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,aAAa;QACnB,QAAQ,EAAE,aAAa;KACxB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,cAAc;KACrB;CACF,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport const PROPERTIES = [\n  {\n    type: 'string',\n    label: 'value',\n    name: 'value',\n    property: 'value'\n  },\n  {\n    type: 'number',\n    label: 'start-value',\n    name: 'startValue',\n    observe: function (this: HTMLElement, startValue: number) {\n      const colorStops: any = this.parentNode!.querySelector('[name=colorStops]')\n      colorStops.property.min = startValue\n    },\n    property: 'startValue'\n  },\n  {\n    type: 'number',\n    label: 'end-value',\n    name: 'endValue',\n    observe: function (this: HTMLElement, endValue: number) {\n      const colorStops: any = this.parentNode!.querySelector('[name=colorStops]')\n      colorStops.property.max = endValue\n    },\n    property: 'endValue'\n  },\n  {\n    type: 'number',\n    label: 'step',\n    name: 'step',\n    property: 'step'\n  },\n  {\n    type: 'number',\n    label: 'step-text-size',\n    name: 'stepTextSize',\n    property: 'stepTextSize'\n  },\n  {\n    type: 'number',\n    label: 'sub-step',\n    name: 'subStep',\n    property: 'subStep'\n  },\n  {\n    type: 'number',\n    label: 'step-needle-size',\n    name: 'stepNeedleSize',\n    property: 'stepNeedleSize'\n  },\n  {\n    type: 'color',\n    label: 'step-fill-style',\n    name: 'stepFillStyle',\n    property: 'stepFillStyle'\n  },\n  {\n    type: 'solid-color-stops',\n    label: 'color-stops',\n    name: 'colorStops',\n    property: {\n      min: 0,\n      max: 100\n    }\n  },\n  {\n    type: 'legend',\n    label: '',\n    name: 'toggleOption',\n    property: {\n      label: 'Toggle Option'\n    }\n  },\n  {\n    type: 'checkbox',\n    label: 'show-start-value',\n    name: 'showStartValue',\n    property: 'showStartValue'\n  },\n  {\n    type: 'checkbox',\n    label: 'show-end-value',\n    name: 'showEndValue',\n    property: 'showEndValue'\n  },\n  {\n    type: 'checkbox',\n    label: 'show-step-line',\n    name: 'showStepLine',\n    property: 'showStepLine'\n  },\n  {\n    type: 'checkbox',\n    label: 'show-step-text',\n    name: 'showStepText',\n    property: 'showStepText'\n  },\n  {\n    type: 'checkbox',\n    label: 'show-sub-step',\n    name: 'showSubStep',\n    property: 'showSubStep'\n  },\n  {\n    type: 'checkbox',\n    label: 'anim-from-base',\n    name: 'animFromBase'\n  }\n]\n"]}

package/dist/gauge-vertical.d.ts

@@ -0,0 +1,56 @@
+import { Shape } from '@hatiolab/things-scene';
+declare const GaugeVertical_base: (new (...args: any[]) => {
+    value: number;
+    animValue: number;
+    animOnValueChange(value: number, animFromBase: boolean, base: number): void;
+}) & typeof Shape;
+export default class GaugeVertical extends GaugeVertical_base {
+    _draw(context: CanvasRenderingContext2D): void;
+    _post_draw(context: CanvasRenderingContext2D): void;
+    get nature(): {
+        mutable: boolean;
+        resizable: boolean;
+        rotatable: boolean;
+        properties: ({
+            type: string;
+            label: string;
+            name: string;
+            property: string;
+            observe?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            observe: (this: HTMLElement, startValue: number) => void;
+            property: string;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                min: number;
+                max: number;
+                label?: undefined;
+            };
+            observe?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property: {
+                label: string;
+                min?: undefined;
+                max?: undefined;
+            };
+            observe?: undefined;
+        } | {
+            type: string;
+            label: string;
+            name: string;
+            property?: undefined;
+            observe?: undefined;
+        })[];
+        help: string;
+    };
+}
+export {};

package/dist/gauge-vertical.js

@@ -0,0 +1,143 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, RectPath, Shape, ValueHolder, } from '@hatiolab/things-scene';
+import { PROPERTIES } from './gauge-properties';
+const NATURE = {
+    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-vertical'
+};
+export default class GaugeVertical extends ValueHolder(RectPath(Shape)) {
+    _draw(context) {
+        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.model;
+        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, idx, arr) {
+                context.beginPath();
+                let value = Math.max(Math.min(v.position - startValue, totalValue), 0); // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.
+                let startStepPosition = (height * beforeValue) / totalValue;
+                let endStepPosition;
+                // console.log(startStepPosition + (height * value / totalValue));
+                if (idx === arr.length - 1 || startStepPosition + (height * value) / totalValue)
+                    // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 height 를 넘을 경우는 무조건 끝까지 채워주도록 한다
+                    endStepPosition = height - startStepPosition;
+                else
+                    endStepPosition = height - (height * value) / totalValue;
+                if (beforeValue > totalValue || beforeValue > value)
+                    // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음
+                    return false;
+                context.rect(0, height - startStepPosition, width, -endStepPosition);
+                context.fillStyle = v.color;
+                context.fill();
+                beforeValue = value;
+            });
+        }
+        ////  바늘 그리기  ////
+        context.beginPath();
+        let drawingValue = this.animValue;
+        drawingValue = Math.max(Math.min(drawingValue, endValue), startValue); // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.
+        let position = height - ((drawingValue - startValue) / totalValue) * height;
+        needleSize *= 4;
+        context.moveTo(width * 1.05, position);
+        context.lineTo(width * 1.05 + needleSize, position + needleSize / 2);
+        context.lineTo(width * 1.05 + needleSize, position - needleSize / 2);
+        context.fillStyle = needleFillStyle;
+        context.fill();
+        context.closePath();
+        ////  스텝 선 그리기  ////
+        context.fillStyle = stepFillStyle;
+        if (showStepLine) {
+            let count = totalValue / step;
+            // Draw StartValue
+            context.fillRect(0, height, height * 0.06, stepNeedleSize);
+            // Draw StepValue
+            for (let num = 1; num < count; num++) {
+                let locate = (height / count) * num;
+                context.fillRect(0, locate, height * 0.06, stepNeedleSize);
+            }
+            // Draw EndValue
+            context.fillRect(0, 0, height * 0.06, stepNeedleSize);
+        }
+        ////  서브 스탭 그리기  ////
+        if (showSubStep) {
+            let count = totalValue;
+            // Draw StartValue
+            context.fillRect(0, 0, height * 0.027, stepNeedleSize);
+            // Draw StepValue
+            for (let num = 1; num <= count; num++) {
+                if (num % step == 0 || num % subStep != 0) {
+                    // 메인 스탭과 서브 스탭은 그리지 않음
+                    continue;
+                }
+                let locate = (height / count) * num;
+                context.fillRect(0, locate, height * 0.027, stepNeedleSize);
+            }
+        }
+        ////  스텝 텍스트 그리기  ////
+        let fontSize = (height * stepTextSize) / 150;
+        context.fillStyle = textFillStyle;
+        context.font = fontSize + 'px arial';
+        context.textBaseline = 'middle';
+        context.textAlign = 'center';
+        if (showStartValue) {
+            // Draw StartText
+            context.fillText(startValue, -fontSize, height);
+        }
+        if (showEndValue) {
+            // Draw EndText
+            context.fillText(endValue, -fontSize, 0);
+        }
+        if (showStepText) {
+            // Draw StepText
+            let count = totalValue / step;
+            for (let num = 1; num < count; num++) {
+                let value = startValue + Number(step) * num;
+                let locate = height - (height / count) * num;
+                context.fillText(value, -fontSize, locate);
+            }
+        }
+        context.translate(-left, -top);
+    }
+    _post_draw(context) {
+        this.drawText(context);
+    }
+    get nature() {
+        return NATURE;
+    }
+}
+Component.register('gauge-vertical', GaugeVertical);
+//# sourceMappingURL=gauge-vertical.js.map

package/dist/gauge-vertical.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge-vertical.js","sourceRoot":"","sources":["../src/gauge-vertical.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,GACZ,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,MAAM,MAAM,GAAG;IACb,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,GAAG,UAAU;QACb;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,iBAAiB;YACxB,IAAI,EAAE,eAAe;YACrB,QAAQ,EAAE,eAAe;SAC1B;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,mBAAmB;YAC1B,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,iBAAiB;SAC5B;QACD;YACE,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,aAAa;YACpB,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE,YAAY;SACvB;KACF;IACD,IAAI,EAAE,gCAAgC;CACvC,CAAA;AAED,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACrE,KAAK,CAAC,OAAiC;QACrC,IAAI,EACF,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,UAAU,EACV,eAAe,EACf,aAAa,EACb,aAAa,EACb,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,GAAG,IAAI,EACnB,cAAc,GAAG,IAAI,EACrB,YAAY,GAAG,IAAI,EACnB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,IAAI,EAClB,KAAK,EACL,MAAM,EACN,GAAG,EACH,IAAI,EACJ,YAAY,GAAG,KAAK,EACrB,GAAG,IAAI,CAAC,KAAK,CAAA;QAEd,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;QAE/B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,UAAU,CAAC,CAAA;QAE5D,MAAM,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA,CAAC,mBAAmB;QAE5D,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA,CAAC,mEAAmE;QAEhG,qBAAqB;QACrB,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAA;QAEjC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;QACxB,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,qBAAqB;QACrB,IAAI,UAAU,EAAE;YACd,IAAI,WAAW,GAAG,CAAC,CAAA;YACnB,UAAU,CAAC,OAAO,CAAC,UAAU,CAAqC,EAAE,GAAW,EAAE,GAAyC;gBACxH,OAAO,CAAC,SAAS,EAAE,CAAA;gBAEnB,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,UAAU,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC,CAAA,CAAC,+CAA+C;gBACtH,IAAI,iBAAiB,GAAG,CAAC,MAAM,GAAG,WAAW,CAAC,GAAG,UAAU,CAAA;gBAC3D,IAAI,eAAe,CAAA;gBAEnB,kEAAkE;gBAClE,IAAI,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,IAAI,iBAAiB,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,UAAU;oBAC7E,iEAAiE;oBACjE,eAAe,GAAG,MAAM,GAAG,iBAAiB,CAAA;;oBACzC,eAAe,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,UAAU,CAAA;gBAE7D,IAAI,WAAW,GAAG,UAAU,IAAI,WAAW,GAAG,KAAK;oBACjD,mDAAmD;oBACnD,OAAO,KAAK,CAAA;gBAEd,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,GAAG,iBAAiB,EAAE,KAAK,EAAE,CAAC,eAAe,CAAC,CAAA;gBAEpE,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,CAAA;gBAC3B,OAAO,CAAC,IAAI,EAAE,CAAA;gBACd,WAAW,GAAG,KAAK,CAAA;YACrB,CAAC,CAAC,CAAA;SACH;QAED,kBAAkB;QAClB,OAAO,CAAC,SAAS,EAAE,CAAA;QACnB,IAAI,YAAY,GAAG,IAAI,CAAC,SAAS,CAAA;QACjC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAA,CAAC,mDAAmD;QACzH,IAAI,QAAQ,GAAG,MAAM,GAAG,CAAC,CAAC,YAAY,GAAG,UAAU,CAAC,GAAG,UAAU,CAAC,GAAG,MAAM,CAAA;QAE3E,UAAU,IAAI,CAAC,CAAA;QACf,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,EAAE,QAAQ,CAAC,CAAA;QACtC,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,GAAG,UAAU,EAAE,QAAQ,GAAG,UAAU,GAAG,CAAC,CAAC,CAAA;QACpE,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,GAAG,UAAU,EAAE,QAAQ,GAAG,UAAU,GAAG,CAAC,CAAC,CAAA;QAEpE,OAAO,CAAC,SAAS,GAAG,eAAe,CAAA;QACnC,OAAO,CAAC,IAAI,EAAE,CAAA;QACd,OAAO,CAAC,SAAS,EAAE,CAAA;QAEnB,oBAAoB;QACpB,OAAO,CAAC,SAAS,GAAG,aAAa,CAAA;QACjC,IAAI,YAAY,EAAE;YAChB,IAAI,KAAK,GAAG,UAAU,GAAG,IAAI,CAAA;YAE7B,kBAAkB;YAClB,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,CAAA;YAC1D,iBAAiB;YACjB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE;gBACpC,IAAI,MAAM,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAA;gBAEnC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,CAAA;aAC3D;YACD,gBAAgB;YAChB,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,CAAA;SACtD;QAED,qBAAqB;QACrB,IAAI,WAAW,EAAE;YACf,IAAI,KAAK,GAAG,UAAU,CAAA;YAEtB,kBAAkB;YAClB,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,cAAc,CAAC,CAAA;YAEtD,iBAAiB;YACjB,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,IAAI,KAAK,EAAE,GAAG,EAAE,EAAE;gBACrC,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,OAAO,IAAI,CAAC,EAAE;oBACzC,uBAAuB;oBACvB,SAAQ;iBACT;gBACD,IAAI,MAAM,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAA;gBACnC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK,EAAE,cAAc,CAAC,CAAA;aAC5D;SACF;QAED,sBAAsB;QACtB,IAAI,QAAQ,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC,GAAG,GAAG,CAAA;QAC5C,OAAO,CAAC,SAAS,GAAG,aAAa,CAAA;QACjC,OAAO,CAAC,IAAI,GAAG,QAAQ,GAAG,UAAU,CAAA;QACpC,OAAO,CAAC,YAAY,GAAG,QAAQ,CAAA;QAC/B,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAA;QAC5B,IAAI,cAAc,EAAE;YAClB,iBAAiB;YACjB,OAAO,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;SAChD;QAED,IAAI,YAAY,EAAE;YAChB,eAAe;YACf,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;SACzC;QAED,IAAI,YAAY,EAAE;YAChB,gBAAgB;YAChB,IAAI,KAAK,GAAG,UAAU,GAAG,IAAI,CAAA;YAE7B,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE;gBACpC,IAAI,KAAK,GAAG,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,GAAG,CAAA;gBAC3C,IAAI,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,GAAG,CAAA;gBAE5C,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAA;aAC3C;SACF;QAED,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAA;IAChC,CAAC;IAED,UAAU,CAAC,OAAiC;QAC1C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IACxB,CAAC;IAED,IAAI,MAAM;QACR,OAAO,MAAM,CAAA;IACf,CAAC;CACF;AAED,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport {\n  Component,\n  RectPath,\n  Shape,\n  ValueHolder,\n} from '@hatiolab/things-scene';\n\nimport { PROPERTIES } from './gauge-properties';\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    ...PROPERTIES,\n    {\n      type: 'color',\n      label: 'text-fill-style',\n      name: 'textFillStyle',\n      property: 'textFillStyle'\n    },\n    {\n      type: 'color',\n      label: 'needle-fill-style',\n      name: 'needleFillStyle',\n      property: 'needleFillStyle'\n    },\n    {\n      type: 'number',\n      label: 'needle-size',\n      name: 'needleSize',\n      property: 'needleSize'\n    }\n  ],\n  help: 'scene/component/gauge-vertical'\n}\n\nexport default class GaugeVertical extends ValueHolder(RectPath(Shape)) {\n  _draw(context: CanvasRenderingContext2D) {\n    var {\n      startValue,\n      endValue,\n      step,\n      subStep,\n      colorStops,\n      needleFillStyle,\n      stepFillStyle,\n      textFillStyle,\n      needleSize,\n      stepNeedleSize,\n      stepTextSize,\n      showStepText = true,\n      showStartValue = true,\n      showEndValue = true,\n      showStepLine = true,\n      showSubStep = true,\n      width,\n      height,\n      top,\n      left,\n      animFromBase = false\n    } = this.model\n\n    startValue = Number(startValue)\n\n    this.animOnValueChange(this.value, animFromBase, startValue)\n\n    const totalValue = endValue - startValue // 게이지의 시작과 끝 값의 크기\n\n    context.translate(left, top) // top과 left의 좌표에 영향을 받지 않기 위해 transalate를 한다음 모든 탑과 레프트의 좌표를 0으로 줌\n\n    ////  메인 막대 그리기  ////\n    context.beginPath()\n\n    context.rect(0, 0, width, height)\n\n    this.drawFill(context)\n    this.drawStroke(context)\n    context.closePath()\n\n    ////  스텝별 색 칠하기  ////\n    if (colorStops) {\n      let beforeValue = 0\n      colorStops.forEach(function (v: {position: number; color: string;}, idx: number, arr: {position: number; color: string;}[]) {\n        context.beginPath()\n\n        let value = Math.max(Math.min(v.position - startValue, totalValue), 0) // v.position 범위의 최소값은 0, 최대값은 totalValue가 되야함.\n        let startStepPosition = (height * beforeValue) / totalValue\n        let endStepPosition\n\n        // console.log(startStepPosition + (height * value / totalValue));\n        if (idx === arr.length - 1 || startStepPosition + (height * value) / totalValue)\n          // 배열의 마지막 값이거나 중간 시작값 + 그려지는 값이 height 를 넘을 경우는 무조건 끝까지 채워주도록 한다\n          endStepPosition = height - startStepPosition\n        else endStepPosition = height - (height * value) / totalValue\n\n        if (beforeValue > totalValue || beforeValue > value)\n          // 값이 게이지의 최대 값을 넘어가거나 이전 값 보다 현재값이 작으면 다시 그릴 필요 없음\n          return false\n\n        context.rect(0, height - startStepPosition, width, -endStepPosition)\n\n        context.fillStyle = v.color\n        context.fill()\n        beforeValue = value\n      })\n    }\n\n    ////  바늘 그리기  ////\n    context.beginPath()\n    let drawingValue = this.animValue\n    drawingValue = Math.max(Math.min(drawingValue, endValue), startValue) // 그려지는 값은 startValue보다 작을 수 없고, endValue보다 클 수 없음.\n    let position = height - ((drawingValue - startValue) / totalValue) * height\n\n    needleSize *= 4\n    context.moveTo(width * 1.05, position)\n    context.lineTo(width * 1.05 + needleSize, position + needleSize / 2)\n    context.lineTo(width * 1.05 + needleSize, position - needleSize / 2)\n\n    context.fillStyle = needleFillStyle\n    context.fill()\n    context.closePath()\n\n    ////  스텝 선 그리기  ////\n    context.fillStyle = stepFillStyle\n    if (showStepLine) {\n      let count = totalValue / step\n\n      // Draw StartValue\n      context.fillRect(0, height, height * 0.06, stepNeedleSize)\n      // Draw StepValue\n      for (let num = 1; num < count; num++) {\n        let locate = (height / count) * num\n\n        context.fillRect(0, locate, height * 0.06, stepNeedleSize)\n      }\n      // Draw EndValue\n      context.fillRect(0, 0, height * 0.06, stepNeedleSize)\n    }\n\n    ////  서브 스탭 그리기  ////\n    if (showSubStep) {\n      let count = totalValue\n\n      // Draw StartValue\n      context.fillRect(0, 0, height * 0.027, stepNeedleSize)\n\n      // Draw StepValue\n      for (let num = 1; num <= count; num++) {\n        if (num % step == 0 || num % subStep != 0) {\n          // 메인 스탭과 서브 스탭은 그리지 않음\n          continue\n        }\n        let locate = (height / count) * num\n        context.fillRect(0, locate, height * 0.027, stepNeedleSize)\n      }\n    }\n\n    ////  스텝 텍스트 그리기  ////\n    let fontSize = (height * stepTextSize) / 150\n    context.fillStyle = textFillStyle\n    context.font = fontSize + 'px arial'\n    context.textBaseline = 'middle'\n    context.textAlign = 'center'\n    if (showStartValue) {\n      // Draw StartText\n      context.fillText(startValue, -fontSize, height)\n    }\n\n    if (showEndValue) {\n      // Draw EndText\n      context.fillText(endValue, -fontSize, 0)\n    }\n\n    if (showStepText) {\n      // Draw StepText\n      let count = totalValue / step\n\n      for (let num = 1; num < count; num++) {\n        let value = startValue + Number(step) * num\n        let locate = height - (height / count) * num\n\n        context.fillText(value, -fontSize, locate)\n      }\n    }\n\n    context.translate(-left, -top)\n  }\n\n  _post_draw(context: CanvasRenderingContext2D) {\n    this.drawText(context)\n  }\n\n  get nature() {\n    return NATURE\n  }\n}\n\nComponent.register('gauge-vertical', GaugeVertical)\n"]}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as GaugeCircle } from './gauge-circle';
+export { default as GaugeVertical } from './gauge-vertical';
+export { default as GaugeHorizon } from './gauge-horizon';

package/dist/index.js

@@ -0,0 +1,7 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+export { default as GaugeCircle } from './gauge-circle';
+export { default as GaugeVertical } from './gauge-vertical';
+export { default as GaugeHorizon } from './gauge-horizon';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAA","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nexport { default as GaugeCircle } from './gauge-circle'\nexport { default as GaugeVertical } from './gauge-vertical'\nexport { default as GaugeHorizon } from './gauge-horizon'\n"]}

package/helps/scene/component/gauge-circle.ko.md

@@ -0,0 +1,168 @@
+# gauge[ko]
+![컴포넌트-게이지(원형)][gauge-circle-01]  
+## properties
+
+1. Value(Number) - 게이지의 값.  
+<figure style="text-align: center;">
+
+![게이지-Value적용결과][gauge-circle-02]  
+
+<figurecaption>(value: 85)</figurecaption>
+</figure>
+
+2. startValue - 게이지의 시작 값.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-03]  
+
+<figurecaption>(startValue: 10)</figurecaption>
+</figure>
+
+3. endValue - 게이지의 끝 값.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-04]  
+<figurecaption>(endValue: 120)</figurecaption>
+</figure>
+
+4. step - 게이지 눈금 간격.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-05]  
+<figurecaption>(step: 30)</figurecaption>
+</figure>
+
+5. stepTextSize - 게이지 눈금 글씨 크기.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-06]  
+<figurecaption>(stepTextSize: 10)</figurecaption>
+</figure>
+
+6. subStep - 게이지 눈금 사이 간격.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-07]  
+<figurecaption>(subStep: 10)</figurecaption>
+</figure>
+
+7. stepNeedleSize - 게이지 눈금 크기.
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-08]  
+<figurecaption>(stepNeedleSize: 3)</figurecaption>
+</figure>
+
+8. startAngle - 게이지의 시작 각도. 12시 방향을 기준으로 시계방향으로 증가한다. 음수일 경우 역방향.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-09]  
+<figurecaption>(startAngle: -90)</figurecaption>
+</figure>
+
+9. endAngle - 게이지의 끝 각도. 12시 방향을 기준으로 시계방향으로 증가한다. 음수일 경우 역방향.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-10]  
+<figurecaption>(endAngle: 90)</figurecaption>
+</figure>
+
+10. textFillStyle - 게이지 눈금 글씨 색상.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-11]  
+<figurecaption>(textFillStyle: #ec5324)</figurecaption>
+</figure>
+
+11. needleFillStyle - 게이지 바늘 색상.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-12]  
+<figurecaption>(needleFillStyle: #ec5324)</figurecaption>
+</figure>
+
+12. innerCircleFillStyle - 게이지 바늘의 원의 색상.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-13]  
+<figurecaption>(innerCircleFillStyle: #ec5324)</figurecaption>
+</figure>
+
+13. stepFillStyle - 게이지 눈금 색상.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-14]  
+<figurecaption>(stepFillStyle: #ec5324)</figurecaption>
+</figure>
+
+14. colorStops - 게이지 구간별 색상. 더블클릭으로 구간을 추가할 수 있으며 마커를 드래그하여 아래로 내리면 구간을 삭제할 수 있다.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-15]  
+<figurecaption>(colorStops: <img src="{{site.baseurl}}/assets/components/color-stops-value.png" height="30" alt="color stops">)</figurecaption>
+      </figure>
+
+15. showStartValue - 게이지 시작값의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-16]  
+<figurecaption>(showStartValue: unchecked)</figurecaption>
+</figure>
+
+16. showEndValue - 게이지 끝값의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-17]  
+<figurecaption>(showEndValue: unchecked)</figurecaption>
+</figure>
+
+17. showStepLine - 게이지 눈금의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-18]  
+<figurecaption>(showStepLine: unchecked)</figurecaption>
+</figure>
+
+18. showStepText - 게이지 눈금 값의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-19]  
+<figurecaption>(showStepText: unchecked)</figurecaption>
+</figure>
+
+19. showSubStep - 게이지 보조 눈금의 표시여부를 결정.  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-20]  
+<figurecaption>(showSubStep: unchecked)</figurecaption>
+</figure>
+
+20. inText - 게이지 눈금 값의 위치를 결정. (checked: 내부, unchecked: 외부)  
+<figure style="text-align: center;">
+
+![게이지-BackgroundColor적용결과][gauge-circle-21]  
+<figurecaption>(inText: unchecked)</figurecaption>
+</figure>
+
+
+[gauge-circle-01]:../images/gauge-circle-01.png
+[gauge-circle-02]:../images/gauge-circle-02.png
+[gauge-circle-03]:../images/gauge-circle-03.png
+[gauge-circle-04]:../images/gauge-circle-04.png
+[gauge-circle-05]:../images/gauge-circle-05.png
+[gauge-circle-06]:../images/gauge-circle-06.png
+[gauge-circle-07]:../images/gauge-circle-07.png
+[gauge-circle-08]:../images/gauge-circle-08.png
+[gauge-circle-09]:../images/gauge-circle-09.png
+[gauge-circle-10]:../images/gauge-circle-10.png
+[gauge-circle-11]:../images/gauge-circle-11.png
+[gauge-circle-12]:../images/gauge-circle-12.png
+[gauge-circle-13]:../images/gauge-circle-13.png
+[gauge-circle-14]:../images/gauge-circle-14.png
+[gauge-circle-15]:../images/gauge-circle-15.png
+[gauge-circle-16]:../images/gauge-circle-16.png
+[gauge-circle-17]:../images/gauge-circle-17.png
+[gauge-circle-18]:../images/gauge-circle-18.png
+[gauge-circle-19]:../images/gauge-circle-19.png
+[gauge-circle-20]:../images/gauge-circle-20.png
+[gauge-circle-21]:../images/gauge-circle-21.png