@operato/scene-legend 0.0.11

package/dist/legend.js

@@ -0,0 +1,177 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, Container, Model, TableLayout } from '@hatiolab/things-scene';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    properties: [
+        {
+            type: 'number',
+            label: 'rows',
+            name: 'rows'
+        },
+        {
+            type: 'number',
+            label: 'columns',
+            name: 'columns'
+        },
+        {
+            type: 'select',
+            label: 'direction',
+            name: 'direction',
+            property: {
+                options: [
+                    {
+                        display: 'Horizontal',
+                        value: 'horizontal'
+                    },
+                    {
+                        display: 'Vertical',
+                        value: 'vertical'
+                    }
+                ]
+            }
+        },
+        {
+            type: 'number',
+            label: 'round',
+            name: 'round'
+        },
+        {
+            type: 'legend-status',
+            label: '',
+            name: 'status'
+        }
+    ],
+    help: 'scene/component/legend'
+};
+var controlHandler = {
+    ondragmove: function (point, index, component) {
+        var { left, top, width, height } = component.model;
+        /*
+         * point의 좌표는 부모 레이어 기준의 x, y 값이다.
+         * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.
+         * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,
+         * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).
+         */
+        var transcoorded = component.transcoordP2S(point.x, point.y);
+        var round = ((transcoorded.x - left) / (width / 2)) * 100;
+        round = roundSet(round, width, height);
+        component.set({ round });
+    }
+};
+function roundSet(round, width, height) {
+    var max = width > height ? (height / width) * 100 : 100;
+    if (round >= max)
+        round = max;
+    else if (round <= 0)
+        round = 0;
+    return round;
+}
+export default class Legend extends Container {
+    ready() {
+        this.rebuildLegendItems();
+    }
+    get showMoveHandle() {
+        return false;
+    }
+    render(context) {
+        var { round = 0 } = this.model;
+        var { left, top, width, height } = this.bounds;
+        // 박스 그리기
+        context.beginPath();
+        round = roundSet(round, width, height);
+        if (round > 0) {
+            var radius = (round / 100) * (width / 2);
+            context.moveTo(left + radius, top);
+            context.lineTo(left + width - radius, top);
+            context.quadraticCurveTo(left + width, top, left + width, top + radius);
+            context.lineTo(left + width, top + height - radius);
+            context.quadraticCurveTo(left + width, top + height, left + width - radius, top + height);
+            context.lineTo(left + radius, top + height);
+            context.quadraticCurveTo(left, top + height, left, top + height - radius);
+            context.lineTo(left, top + radius);
+            context.quadraticCurveTo(left, top, left + radius, top);
+            this.model.padding = {
+                top: round / 2,
+                left: round / 2,
+                right: round / 2,
+                bottom: round / 2
+            };
+        }
+        else {
+            context.rect(left, top, width, height);
+        }
+        this.drawFill(context);
+        this.drawStroke(context);
+    }
+    get controls() {
+        var { left, top, width, round, height } = this.model;
+        round = round == undefined ? 0 : roundSet(round, width, height);
+        return [
+            {
+                x: left + (width / 2) * (round / 100),
+                y: top,
+                handler: controlHandler
+            }
+        ];
+    }
+    get layout() {
+        return TableLayout;
+    }
+    get nature() {
+        return NATURE;
+    }
+    rebuildLegendItems() {
+        if (this.components.length) {
+            this.components.slice().forEach(m => m.dispose());
+        }
+        var { left, top, width, height, fillStyle, strokeStyle, fontColor, fontFamily, fontSize, lineHeight, textAlign = 'left', round = 0, italic, bold, lineWidth = 0, rows, columns, status = {} } = this.model;
+        let statusRanges = status.ranges || [];
+        var count = statusRanges.length;
+        this.add(statusRanges.map(range => Model.compile({
+            type: 'legend-item',
+            text: range.description || `${range.min || ''} ~ ${range.max || ''}`,
+            width: 1,
+            height: 1,
+            color: range.color,
+            fontColor,
+            fontFamily,
+            fontSize,
+            lineHeight,
+            italic,
+            bold,
+            textAlign
+        })));
+        var rows, columns;
+        if (!columns && !rows) {
+            rows = count;
+            columns = 1;
+        }
+        else if (columns && !rows) {
+            rows = Math.ceil(count / Number(columns));
+        }
+        else if (rows && !columns) {
+            columns = Math.ceil(count / Number(rows));
+        }
+        this.set({
+            layoutConfig: {
+                rows,
+                columns
+            }
+        });
+    }
+    get hasTextProperty() {
+        return true;
+    }
+    get textHidden() {
+        return true;
+    }
+    onchange(after, before) {
+        this.rebuildLegendItems();
+    }
+}
+Component.register('legend', Legend);
+//# sourceMappingURL=legend.js.map

package/dist/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../src/legend.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\nimport { Component, Container, Model, POSITION, Properties, TableLayout } from '@hatiolab/things-scene'\n\nconst NATURE = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  properties: [\n    {\n      type: 'number',\n      label: 'rows',\n      name: 'rows'\n    },\n    {\n      type: 'number',\n      label: 'columns',\n      name: 'columns'\n    },\n    {\n      type: 'select',\n      label: 'direction',\n      name: 'direction',\n      property: {\n        options: [\n          {\n            display: 'Horizontal',\n            value: 'horizontal'\n          },\n          {\n            display: 'Vertical',\n            value: 'vertical'\n          }\n        ]\n      }\n    },\n    {\n      type: 'number',\n      label: 'round',\n      name: 'round'\n    },\n    {\n      type: 'legend-status',\n      label: '',\n      name: 'status'\n    }\n  ],\n  help: 'scene/component/legend'\n}\n\nvar controlHandler = {\n  ondragmove: function (point: POSITION, index: number, component: Component) {\n    var { left, top, width, height } = component.model\n    /*\n     * point의 좌표는 부모 레이어 기준의 x, y 값이다.\n     * 따라서, 도형의 회전을 감안한 좌표로의 변환이 필요하다.\n     * Transcoord시에는 point좌표가 부모까지 transcoord되어있는 상태이므로,\n     * 컴포넌트자신에 대한 transcoord만 필요하다.(마지막 파라미터를 false로).\n     */\n    var transcoorded = component.transcoordP2S(point.x, point.y)\n    var round = ((transcoorded.x - left) / (width / 2)) * 100\n\n    round = roundSet(round, width, height)\n\n    component.set({ round })\n  }\n}\n\nfunction roundSet(round: number, width: number, height: number) {\n  var max = width > height ? (height / width) * 100 : 100\n\n  if (round >= max) round = max\n  else if (round <= 0) round = 0\n\n  return round\n}\n\nexport default class Legend extends Container {\n  ready() {\n    this.rebuildLegendItems()\n  }\n\n  get showMoveHandle() {\n    return false\n  }\n\n  render(context: CanvasRenderingContext2D) {\n    var { round = 0 } = this.model\n\n    var { left, top, width, height } = this.bounds\n\n    // 박스 그리기\n    context.beginPath()\n\n    round = roundSet(round, width, height)\n\n    if (round > 0) {\n      var radius = (round / 100) * (width / 2)\n\n      context.moveTo(left + radius, top)\n      context.lineTo(left + width - radius, top)\n      context.quadraticCurveTo(left + width, top, left + width, top + radius)\n      context.lineTo(left + width, top + height - radius)\n      context.quadraticCurveTo(left + width, top + height, left + width - radius, top + height)\n      context.lineTo(left + radius, top + height)\n      context.quadraticCurveTo(left, top + height, left, top + height - radius)\n      context.lineTo(left, top + radius)\n      context.quadraticCurveTo(left, top, left + radius, top)\n\n      this.model.padding = {\n        top: round / 2,\n        left: round / 2,\n        right: round / 2,\n        bottom: round / 2\n      }\n    } else {\n      context.rect(left, top, width, height)\n    }\n\n    this.drawFill(context)\n    this.drawStroke(context)\n  }\n\n  get controls() {\n    var { left, top, width, round, height } = this.model\n    round = round == undefined ? 0 : roundSet(round, width, height)\n\n    return [\n      {\n        x: left + (width / 2) * (round / 100),\n        y: top,\n        handler: controlHandler\n      }\n    ]\n  }\n\n  get layout() {\n    return TableLayout\n  }\n\n  get nature() {\n    return NATURE\n  }\n\n  rebuildLegendItems() {\n    if (this.components.length) {\n      this.components.slice().forEach(m => m.dispose())\n    }\n\n    var {\n      left,\n      top,\n      width,\n      height,\n      fillStyle,\n      strokeStyle,\n      fontColor,\n      fontFamily,\n      fontSize,\n      lineHeight,\n      textAlign = 'left',\n      round = 0,\n      italic,\n      bold,\n      lineWidth = 0,\n      rows,\n      columns,\n      status = {}\n    } = this.model\n\n    let statusRanges: {\n      min: string\n      max: string\n      description: string\n      color: string\n    }[] = status.ranges || []\n\n    var count = statusRanges.length\n\n    this.add(\n      statusRanges.map(range =>\n        Model.compile({\n          type: 'legend-item',\n          text: range.description || `${range.min || ''} ~ ${range.max || ''}`,\n          width: 1,\n          height: 1,\n          color: range.color,\n          fontColor,\n          fontFamily,\n          fontSize,\n          lineHeight,\n          italic,\n          bold,\n          textAlign\n        })\n      )\n    )\n\n    var rows, columns\n\n    if (!columns && !rows) {\n      rows = count\n      columns = 1\n    } else if (columns && !rows) {\n      rows = Math.ceil(count / Number(columns))\n    } else if (rows && !columns) {\n      columns = Math.ceil(count / Number(rows))\n    }\n\n    this.set({\n      layoutConfig: {\n        rows,\n        columns\n      }\n    })\n  }\n\n  get hasTextProperty() {\n    return true\n  }\n\n  get textHidden() {\n    return true\n  }\n\n  onchange(after: Properties, before: Properties) {\n    this.rebuildLegendItems()\n  }\n}\n\nComponent.register('legend', Legend)\n"]}

package/dist/templates/index.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fillStyle: string;
+        direction: string;
+        strokeStyle: string;
+        lineWidth: number;
+    };
+}[];
+export default _default;

package/dist/templates/index.js

@@ -0,0 +1,3 @@
+import legend from './legend';
+export default [legend];
+//# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,eAAe,CAAC,MAAM,CAAC,CAAA","sourcesContent":["import legend from './legend'\n\nexport default [legend]\n"]}

package/dist/templates/legend.d.ts

@@ -0,0 +1,18 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: any;
+    model: {
+        type: string;
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        fillStyle: string;
+        direction: string;
+        strokeStyle: string;
+        lineWidth: number;
+    };
+};
+export default _default;

package/dist/templates/legend.js

@@ -0,0 +1,19 @@
+import icon from '../../assets/legend.png';
+export default {
+    type: 'legend',
+    description: 'legend for visualizer',
+    group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,
+    icon,
+    model: {
+        type: 'legend',
+        left: 100,
+        top: 100,
+        width: 200,
+        height: 150,
+        fillStyle: '#efefef',
+        direction: 'vertical',
+        strokeStyle: 'rgba(0, 0, 0, 0.3)',
+        lineWidth: 1
+    }
+};
+//# sourceMappingURL=legend.js.map

package/dist/templates/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../src/templates/legend.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,yBAAyB,CAAA;AAE1C,eAAe;IACb,IAAI,EAAE,QAAQ;IACd,WAAW,EAAE,uBAAuB;IACpC,KAAK,EAAE,WAAW,CAAC,gGAAgG;IACnH,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,GAAG;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,UAAU;QACrB,WAAW,EAAE,oBAAoB;QACjC,SAAS,EAAE,CAAC;KACb;CACF,CAAA","sourcesContent":["import icon from '../../assets/legend.png'\n\nexport default {\n  type: 'legend',\n  description: 'legend for visualizer',\n  group: 'warehouse' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */,\n  icon,\n  model: {\n    type: 'legend',\n    left: 100,\n    top: 100,\n    width: 200,\n    height: 150,\n    fillStyle: '#efefef',\n    direction: 'vertical',\n    strokeStyle: 'rgba(0, 0, 0, 0.3)',\n    lineWidth: 1\n  }\n}\n"]}

package/helps/scene/component/legend.ko.md

@@ -0,0 +1,18 @@
+# legend[ko]
+![컴포넌트-Legend][legend-01]
+
+상태값에 대하여 설정하고, 설정된 상태에 근거하여 범주를 생성해주는 컴포넌트.
+
+## properties
+
+1. 행 : 범주를 몇 행으로 맞추어 표현할지 결정  
+2. 열 : 범주를 몇 열으로 맞추어 표현할지 결정  
+3. Direction : 범주가 표현될 방향  
+4. 둥글게 : 모서리의 둥근 정도를 결정  
+5. field : 데이터의 어떠한 필드값이 상태값을 결정하는 필드인지 지정  
+6. 기본 색상 : 상태 범위에 해당되지 않을 경우 기본으로 나타낼 색상  
+7. 상태설정 : 값의 상태 범위 및 색상을 지정  ![상태설정][legend-02]
+
+
+[legend-01]: ../images/legend-01.png
+[legend-02]: ../images/legend-02.png

package/helps/scene/component/legend.md

@@ -0,0 +1,18 @@
+# legend[en]
+![component-Legend][legend-01]
+
+A component that sets the status value and creates a category based on the set status.
+
+## properties
+
+1. Row : Determine how many rows the category should be represented.  
+2. Column : Determine how many columns the category should be represented.  
+3. Direction : The direction in which the category will be represented.  
+4. Round : Determine the roundness of the edges.  
+5. field : Specify which field values ​​in the data are fields that determine the status value.  
+6. Default color : The color to be displayed by default if it is not in the status range.  
+7. Status setting : Specify the status range and color of the values.  ![Status setting][legend-02]
+
+
+[legend-01]: ../images/legend-01.png
+[legend-02]: ../images/legend-02.png

package/helps/scene/component/legend.zh.md

@@ -0,0 +1,20 @@
+# legend[zh]
+![组件-Legend][legend-01]
+
+设置状态值并根据所设置的状态创建类别的组件。
+
+
+## properties
+
+1. 行：决定用几个行来显示该类别。  
+2. 列：决定用几个列来显示该类别。  
+3. 方向：将会显示类别的方向。  
+4. 圆化：确定边缘的圆度。  
+5. 字段：指定数据的哪些字段值是决定状态值的字段。  
+6. 默认颜色：如果不在状态范围内，就会默认显示的颜色。  
+7. 状态设置：指定值的状态范围和颜色。  ![状态设置][legend-02]
+
+
+[legend-01]: ../images/legend-01.png
+
+[legend-02]: ../images/legend-02.png

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@operato/scene-legend",
+  "description": "Legend component for things-scene.",
+  "license": "MIT",
+  "author": "heartyoh",
+  "version": "0.0.11",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@oprato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/legend"
+  },
+  "scripts": {
+    "serve": "tsc && things-factory-dev",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc",
+    "prepublish": "tsc",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "migration": "things-factory-migration"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^2.7.23",
+    "lit": "^2.0.2"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@hatiolab/things-scene": "^2.7.23",
+    "@operato/board": "^0.2.35",
+    "@things-factory/builder": "^4.0.10",
+    "@things-factory/operato-board": "^4.0.10",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "@web/dev-server": "^0.1.28",
+    "concurrently": "^5.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "1421380ee3530169c280b01a21c81af8d1b9f9c4"
+}