@operato/board 0.2.47 → 0.2.51

package/dist/src/component/line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.js","sourceRoot":"","sources":["../../../src/component/line.ts"],"names":[],"mappings":"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","sourcesContent":["import { Group } from '../types'\nimport bothArrow from '../../../assets/images/components/both-arrow.png'\nimport dash from '../../../assets/images/components/dash.png'\nimport lineIcon from '../../../assets/images/components/line.png'\nimport polyline from '../../../assets/images/components/polyline.png'\nimport singleArrow from '../../../assets/images/components/single-arrow.png'\n\nconst icon = `\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n\t  .st3{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}\n\t  .st4{fill:none;stroke:{{strokeColor}};stroke-width:1.5;stroke-miterlimit:10;stroke-dasharray:3,1.5;}\n  </style>\n  <g>\n\t  <line class=\"st3\" x1=\"1.7\" y1=\"18.9\" x2=\"26.3\" y2=\"6.2\"/>\n\t  <line class=\"st4\" x1=\"1.7\" y1=\"23.8\" x2=\"28.3\" y2=\"10.1\"/>\n  </g>\n</svg>\n`\n\nexport const line: Group = {\n  name: 'line',\n  description: 'a group of various lines',\n  icon,\n  templates: [\n    {\n      type: 'line',\n      description: 'simple line',\n      icon: lineIcon,\n      group: 'line',\n      model: {\n        type: 'line',\n        x1: 100,\n        y1: 100,\n        x2: 200,\n        y2: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 3,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'dash',\n      description: 'dash line',\n      icon: dash,\n      group: 'line',\n      model: {\n        type: 'line',\n        x1: 100,\n        y1: 100,\n        x2: 200,\n        y2: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 3,\n        lineDash: 'round-dot',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'single arrow',\n      description: 'single arrow tip line',\n      icon: singleArrow,\n      group: 'line',\n      model: {\n        type: 'line',\n        x1: 100,\n        y1: 100,\n        x2: 200,\n        y2: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 3,\n        hidden: false,\n        lineWidth: 3,\n        lineDash: 'solid',\n        begin: 'arrow',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'both arrow',\n      description: 'both arrow tip line',\n      icon: bothArrow,\n      group: 'line',\n      model: {\n        type: 'line',\n        x1: 100,\n        y1: 100,\n        x2: 200,\n        y2: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 3,\n        lineDash: 'solid',\n        begin: 'arrow',\n        end: 'arrow',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'polyline',\n      description: 'polyline',\n      icon: polyline,\n      group: 'line',\n      model: {\n        type: 'polyline',\n        path: [\n          { x: 100, y: 100 },\n          { x: 200, y: 100 },\n          { x: 200, y: 200 },\n          { x: 100, y: 200 }\n        ],\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    }\n  ]\n}\n"]}

package/dist/src/component/register-default-groups.d.ts

@@ -0,0 +1 @@
+export declare function registerDefaultGroups(): void;

package/dist/src/component/register-default-groups.js

@@ -0,0 +1,28 @@
+import { BoardModeller } from '../ox-board-modeller';
+import { chartAndGauge } from './chart-and-gauge';
+import { container } from './container';
+import { dataSource } from './data-source';
+import { etc } from './etc';
+import { form } from './form';
+import { iot } from './iot';
+import { line } from './line';
+import { shape } from './shape';
+import { table } from './table';
+import { textAndMedia } from './text-and-media';
+import { threed } from './3d';
+import { warehouse } from './warehouse';
+export function registerDefaultGroups() {
+    BoardModeller.registerGroup(line);
+    BoardModeller.registerGroup(shape);
+    BoardModeller.registerGroup(textAndMedia);
+    BoardModeller.registerGroup(chartAndGauge);
+    BoardModeller.registerGroup(table);
+    BoardModeller.registerGroup(container);
+    BoardModeller.registerGroup(dataSource);
+    BoardModeller.registerGroup(iot);
+    BoardModeller.registerGroup(threed);
+    BoardModeller.registerGroup(warehouse);
+    BoardModeller.registerGroup(form);
+    BoardModeller.registerGroup(etc);
+}
+//# sourceMappingURL=register-default-groups.js.map

package/dist/src/component/register-default-groups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register-default-groups.js","sourceRoot":"","sources":["../../../src/component/register-default-groups.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,MAAM,UAAU,qBAAqB;IACnC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IACjC,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAClC,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,CAAA;IACzC,aAAa,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;IAC1C,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAClC,aAAa,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;IACtC,aAAa,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IACvC,aAAa,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IAChC,aAAa,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IACnC,aAAa,CAAC,aAAa,CAAC,SAAS,CAAC,CAAA;IACtC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IACjC,aAAa,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;AAClC,CAAC","sourcesContent":["import { BoardModeller } from '../ox-board-modeller'\nimport { chartAndGauge } from './chart-and-gauge'\nimport { container } from './container'\nimport { dataSource } from './data-source'\nimport { etc } from './etc'\nimport { form } from './form'\nimport { iot } from './iot'\nimport { line } from './line'\nimport { shape } from './shape'\nimport { table } from './table'\nimport { textAndMedia } from './text-and-media'\nimport { threed } from './3d'\nimport { warehouse } from './warehouse'\n\nexport function registerDefaultGroups() {\n  BoardModeller.registerGroup(line)\n  BoardModeller.registerGroup(shape)\n  BoardModeller.registerGroup(textAndMedia)\n  BoardModeller.registerGroup(chartAndGauge)\n  BoardModeller.registerGroup(table)\n  BoardModeller.registerGroup(container)\n  BoardModeller.registerGroup(dataSource)\n  BoardModeller.registerGroup(iot)\n  BoardModeller.registerGroup(threed)\n  BoardModeller.registerGroup(warehouse)\n  BoardModeller.registerGroup(form)\n  BoardModeller.registerGroup(etc)\n}\n"]}

package/dist/src/component/shape.d.ts

@@ -0,0 +1,2 @@
+import { Group } from '../types';
+export declare const shape: Group;

package/dist/src/component/shape.js

@@ -0,0 +1,152 @@
+import donut from '../../../assets/images/components/donut.png';
+import ellipse from '../../../assets/images/components/ellipse.png';
+import polygon from '../../../assets/images/components/polygon.png';
+import rect from '../../../assets/images/components/rect.png';
+import star from '../../../assets/images/components/star.png';
+import triangle from '../../../assets/images/components/triangle.png';
+const icon = `
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+  <style type="text/css">
+    .st0{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
+  </style>
+  <g>
+    <polyline class="st0" points="21.6,9.4 21.6,4.6 1.6,4.6 1.6,17.7 12.5,17.7 	"/>
+    <circle class="st0" cx="21.3" cy="18.3" r="7"/>
+  </g>
+</svg>
+`;
+export const shape = {
+    name: 'shape',
+    description: 'a group of simple basic shapes',
+    icon,
+    templates: [
+        {
+            type: 'rect',
+            description: 'rectangle shape',
+            icon: rect,
+            group: 'shape',
+            model: {
+                type: 'rect',
+                left: 100,
+                top: 100,
+                width: 100,
+                height: 100,
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 1,
+                lineDash: 'solid',
+                lineCap: 'butt'
+            }
+        },
+        {
+            type: 'ellipse',
+            description: 'ellipse shape',
+            icon: ellipse,
+            group: 'shape',
+            model: {
+                type: 'ellipse',
+                rx: 50,
+                ry: 50,
+                cx: 150,
+                cy: 150,
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 1,
+                lineDash: 'solid',
+                lineCap: 'butt'
+            }
+        },
+        {
+            type: 'donut',
+            description: 'donut shape',
+            icon: donut,
+            group: 'shape',
+            model: {
+                type: 'donut',
+                rx: 50,
+                ry: 50,
+                cx: 150,
+                cy: 150,
+                ratio: 30,
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 1,
+                lineDash: 'solid',
+                lineCap: 'butt'
+            }
+        },
+        {
+            type: 'triangle',
+            description: 'triangle shape',
+            icon: triangle,
+            group: 'shape',
+            model: {
+                type: 'triangle',
+                x1: 150,
+                y1: 100,
+                x2: 100,
+                y2: 200,
+                x3: 200,
+                y3: 200,
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 1,
+                lineDash: 'solid',
+                lineCap: 'butt'
+            }
+        },
+        {
+            type: 'polygon',
+            description: 'polygon shape',
+            icon: polygon,
+            group: 'shape',
+            model: {
+                type: 'polygon',
+                path: [
+                    { x: 100, y: 100 },
+                    { x: 200, y: 100 },
+                    { x: 200, y: 200 },
+                    { x: 100, y: 200 }
+                ],
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 1,
+                lineDash: 'solid',
+                lineCap: 'butt'
+            }
+        },
+        {
+            type: 'star',
+            description: 'star shape',
+            icon: star,
+            group: 'shape',
+            model: {
+                type: 'star',
+                rx: 50,
+                ry: 50,
+                cx: 150,
+                cy: 150,
+                ratio: 30,
+                wing: 5,
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 1,
+                lineDash: 'solid',
+                lineCap: 'butt'
+            }
+        }
+    ]
+};
+//# sourceMappingURL=shape.js.map

package/dist/src/component/shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.js","sourceRoot":"","sources":["../../../src/component/shape.ts"],"names":[],"mappings":"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","sourcesContent":["import { Group } from '../types'\nimport donut from '../../../assets/images/components/donut.png'\nimport ellipse from '../../../assets/images/components/ellipse.png'\nimport polygon from '../../../assets/images/components/polygon.png'\nimport rect from '../../../assets/images/components/rect.png'\nimport star from '../../../assets/images/components/star.png'\nimport triangle from '../../../assets/images/components/triangle.png'\n\nconst icon = `\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}\n  </style>\n  <g>\n    <polyline class=\"st0\" points=\"21.6,9.4 21.6,4.6 1.6,4.6 1.6,17.7 12.5,17.7 \t\"/>\n    <circle class=\"st0\" cx=\"21.3\" cy=\"18.3\" r=\"7\"/>\n  </g>\n</svg>\n`\n\nexport const shape: Group = {\n  name: 'shape',\n  description: 'a group of simple basic shapes',\n  icon,\n  templates: [\n    {\n      type: 'rect',\n      description: 'rectangle shape',\n      icon: rect,\n      group: 'shape',\n      model: {\n        type: 'rect',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'ellipse',\n      description: 'ellipse shape',\n      icon: ellipse,\n      group: 'shape',\n      model: {\n        type: 'ellipse',\n        rx: 50,\n        ry: 50,\n        cx: 150,\n        cy: 150,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'donut',\n      description: 'donut shape',\n      icon: donut,\n      group: 'shape',\n      model: {\n        type: 'donut',\n        rx: 50,\n        ry: 50,\n        cx: 150,\n        cy: 150,\n        ratio: 30,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'triangle',\n      description: 'triangle shape',\n      icon: triangle,\n      group: 'shape',\n      model: {\n        type: 'triangle',\n        x1: 150,\n        y1: 100,\n        x2: 100,\n        y2: 200,\n        x3: 200,\n        y3: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'polygon',\n      description: 'polygon shape',\n      icon: polygon,\n      group: 'shape',\n      model: {\n        type: 'polygon',\n        path: [\n          { x: 100, y: 100 },\n          { x: 200, y: 100 },\n          { x: 200, y: 200 },\n          { x: 100, y: 200 }\n        ],\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'star',\n      description: 'star shape',\n      icon: star,\n      group: 'shape',\n      model: {\n        type: 'star',\n        rx: 50,\n        ry: 50,\n        cx: 150,\n        cy: 150,\n        ratio: 30,\n        wing: 5,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    }\n  ]\n}\n"]}

package/dist/src/component/table.d.ts

@@ -0,0 +1,2 @@
+import { Group } from '../types';
+export declare const table: Group;

package/dist/src/component/table.js

@@ -0,0 +1,26 @@
+const icon = `
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+  <style type="text/css">
+    .st5{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
+    .st9{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}
+    .st10{fill:none;stroke:{{strokeColor}};stroke-width:0.5;stroke-miterlimit:10;}
+  </style>
+  <g>
+    <rect x="2.4" y="6" class="st9" width="25.2" height="18"/>
+    <rect x="11" y="12.5" transform="matrix(-1.742238e-05 1 -1 -1.742238e-05 35.0187 -4.9804)" class="st10" width="17.9" height="5.1"/>
+    <rect x="5.9" y="12.5" transform="matrix(-1.742238e-05 1 -1 -1.742238e-05 29.8973 0.1408)" class="st10" width="17.9" height="5.1"/>
+    <line class="st5" x1="2" y1="7.5" x2="28" y2="7.5"/>
+    <line class="st10" x1="2" y1="11.6" x2="28" y2="11.6"/>
+    <line class="st10" x1="2" y1="14.8" x2="28" y2="14.8"/>
+    <line class="st10" x1="2" y1="18.1" x2="28" y2="18.1"/>
+    <line class="st10" x1="2" y1="21.3" x2="28" y2="21.3"/>
+  </g>
+</svg>
+`;
+export const table = {
+    name: 'table',
+    description: 'a group of various tables',
+    icon,
+    templates: []
+};
+//# sourceMappingURL=table.js.map

package/dist/src/component/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/component/table.ts"],"names":[],"mappings":"AAEA,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;;CAkBZ,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,2BAA2B;IACxC,IAAI;IACJ,SAAS,EAAE,EAAE;CACd,CAAA","sourcesContent":["import { Group } from '../types'\n\nconst icon = `\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st5{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}\n    .st9{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n    .st10{fill:none;stroke:{{strokeColor}};stroke-width:0.5;stroke-miterlimit:10;}\n  </style>\n  <g>\n    <rect x=\"2.4\" y=\"6\" class=\"st9\" width=\"25.2\" height=\"18\"/>\n    <rect x=\"11\" y=\"12.5\" transform=\"matrix(-1.742238e-05 1 -1 -1.742238e-05 35.0187 -4.9804)\" class=\"st10\" width=\"17.9\" height=\"5.1\"/>\n    <rect x=\"5.9\" y=\"12.5\" transform=\"matrix(-1.742238e-05 1 -1 -1.742238e-05 29.8973 0.1408)\" class=\"st10\" width=\"17.9\" height=\"5.1\"/>\n    <line class=\"st5\" x1=\"2\" y1=\"7.5\" x2=\"28\" y2=\"7.5\"/>\n    <line class=\"st10\" x1=\"2\" y1=\"11.6\" x2=\"28\" y2=\"11.6\"/>\n    <line class=\"st10\" x1=\"2\" y1=\"14.8\" x2=\"28\" y2=\"14.8\"/>\n    <line class=\"st10\" x1=\"2\" y1=\"18.1\" x2=\"28\" y2=\"18.1\"/>\n    <line class=\"st10\" x1=\"2\" y1=\"21.3\" x2=\"28\" y2=\"21.3\"/>\n  </g>\n</svg>\n`\n\nexport const table: Group = {\n  name: 'table',\n  description: 'a group of various tables',\n  icon,\n  templates: []\n}\n"]}

package/dist/src/component/text-and-media.d.ts

@@ -0,0 +1,2 @@
+import { Group } from '../types';
+export declare const textAndMedia: Group;

package/dist/src/component/text-and-media.js

@@ -0,0 +1,122 @@
+import audio from '../../../assets/images/components/audio.png';
+import colorImage from '../../../assets/images/components/color-image.png';
+import gifImage from '../../../assets/images/components/gif-image.png';
+import grayImage from '../../../assets/images/components/gray-image.png';
+import text from '../../../assets/images/components/text.png';
+const icon = `
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+  <style type="text/css">
+	  .st0{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}
+	  .st1{fill:{{strokeColor}};}
+  </style>
+  <g>
+	  <polyline class="st0" points="20.6,12.8 20.6,5.1 1.6,5.1 1.6,18 15,18"/>
+	  <path class="st1" d="M5.7,7.9c-0.9,0-1.6,0.7-1.6,1.6s0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6S6.6,7.9,5.7,7.9z"/>
+	  <polygon class="st1" points="12.8,8.6 8.5,14.7 5.9,12.7 3.2,16.1 15.1,16.1 15.2,13.7"/>
+	  <path class="st1" d="M24.1,15.1h2.1l0.6,2.8h1.7l-0.1-3.8H16.5l-0.1,3.8h1.7l0.4-2.8h2.1c0.1,2,0.1,3.1,0.1,5.2V21
+		  c0,1.6,0,1.9,0,2.7l-1.8,0.2V25h6.9v-1.1L24,23.7c0-0.9,0-1.1,0-2.7v-0.7C24,18.1,24,17,24.1,15.1z"/>
+  </g>
+</svg>
+`;
+export const textAndMedia = {
+    name: 'textAndMedia',
+    description: 'a group of text and various media components',
+    icon,
+    templates: [
+        {
+            type: 'text',
+            description: 'text',
+            icon: text,
+            group: 'textAndMedia',
+            model: {
+                type: 'text',
+                left: 100,
+                top: 100,
+                width: 200,
+                height: 50,
+                text: 'Text',
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 5,
+                lineDash: 'solid',
+                lineCap: 'butt',
+                textAlign: 'left',
+                textBaseline: 'top',
+                textWrap: false,
+                fontFamily: 'serif',
+                fontSize: 30
+            }
+        },
+        {
+            type: 'color image',
+            description: 'color image',
+            icon: colorImage,
+            group: 'textAndMedia',
+            model: {
+                type: 'image-view',
+                left: 100,
+                top: 100,
+                width: 100,
+                height: 100,
+                isGray: false,
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 1,
+                lineDash: 'solid',
+                lineCap: 'butt'
+            }
+        },
+        {
+            type: 'gray image',
+            description: 'gray image',
+            icon: grayImage,
+            group: 'textAndMedia',
+            model: {
+                type: 'image-view',
+                left: 100,
+                top: 100,
+                width: 100,
+                height: 100,
+                isGray: true,
+                fillStyle: '#fff',
+                strokeStyle: '#000',
+                alpha: 1,
+                hidden: false,
+                lineWidth: 1,
+                lineDash: 'solid',
+                lineCap: 'butt'
+            }
+        },
+        {
+            type: 'gif image',
+            description: 'gif image',
+            icon: gifImage,
+            group: 'textAndMedia',
+            model: {
+                type: 'gif-view',
+                left: 100,
+                top: 100,
+                width: 100,
+                height: 100
+            }
+        },
+        {
+            type: 'audio',
+            description: 'audio',
+            icon: audio,
+            group: 'textAndMedia',
+            model: {
+                type: 'audio',
+                left: 100,
+                top: 100,
+                width: 100,
+                height: 100
+            }
+        }
+    ]
+};
+//# sourceMappingURL=text-and-media.js.map

package/dist/src/component/text-and-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-and-media.js","sourceRoot":"","sources":["../../../src/component/text-and-media.ts"],"names":[],"mappings":"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","sourcesContent":["import { Group } from '../types'\nimport audio from '../../../assets/images/components/audio.png'\nimport colorImage from '../../../assets/images/components/color-image.png'\nimport gifImage from '../../../assets/images/components/gif-image.png'\nimport grayImage from '../../../assets/images/components/gray-image.png'\nimport text from '../../../assets/images/components/text.png'\n\nconst icon = `\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n\t  .st0{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-miterlimit:10;}\n\t  .st1{fill:{{strokeColor}};}\n  </style>\n  <g>\n\t  <polyline class=\"st0\" points=\"20.6,12.8 20.6,5.1 1.6,5.1 1.6,18 15,18\"/>\n\t  <path class=\"st1\" d=\"M5.7,7.9c-0.9,0-1.6,0.7-1.6,1.6s0.7,1.6,1.6,1.6s1.6-0.7,1.6-1.6S6.6,7.9,5.7,7.9z\"/>\n\t  <polygon class=\"st1\" points=\"12.8,8.6 8.5,14.7 5.9,12.7 3.2,16.1 15.1,16.1 15.2,13.7\"/>\n\t  <path class=\"st1\" d=\"M24.1,15.1h2.1l0.6,2.8h1.7l-0.1-3.8H16.5l-0.1,3.8h1.7l0.4-2.8h2.1c0.1,2,0.1,3.1,0.1,5.2V21\n\t\t  c0,1.6,0,1.9,0,2.7l-1.8,0.2V25h6.9v-1.1L24,23.7c0-0.9,0-1.1,0-2.7v-0.7C24,18.1,24,17,24.1,15.1z\"/>\n  </g>\n</svg>\n`\n\nexport const textAndMedia: Group = {\n  name: 'textAndMedia',\n  description: 'a group of text and various media components',\n  icon,\n  templates: [\n    {\n      type: 'text',\n      description: 'text',\n      icon: text,\n      group: 'textAndMedia',\n      model: {\n        type: 'text',\n        left: 100,\n        top: 100,\n        width: 200,\n        height: 50,\n        text: 'Text',\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 5,\n        lineDash: 'solid',\n        lineCap: 'butt',\n        textAlign: 'left',\n        textBaseline: 'top',\n        textWrap: false,\n        fontFamily: 'serif',\n        fontSize: 30\n      }\n    },\n    {\n      type: 'color image',\n      description: 'color image',\n      icon: colorImage,\n      group: 'textAndMedia',\n      model: {\n        type: 'image-view',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        isGray: false,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'gray image',\n      description: 'gray image',\n      icon: grayImage,\n      group: 'textAndMedia',\n      model: {\n        type: 'image-view',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        isGray: true,\n        fillStyle: '#fff',\n        strokeStyle: '#000',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1,\n        lineDash: 'solid',\n        lineCap: 'butt'\n      }\n    },\n    {\n      type: 'gif image',\n      description: 'gif image',\n      icon: gifImage,\n      group: 'textAndMedia',\n      model: {\n        type: 'gif-view',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100\n      }\n    },\n    {\n      type: 'audio',\n      description: 'audio',\n      icon: audio,\n      group: 'textAndMedia',\n      model: {\n        type: 'audio',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100\n      }\n    }\n  ]\n}\n"]}

package/dist/src/component/warehouse.d.ts

@@ -0,0 +1,2 @@
+import { Group } from '../types';
+export declare const warehouse: Group;

package/dist/src/component/warehouse.js

@@ -0,0 +1,24 @@
+const icon = `
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+  <style type="text/css">
+    .st0{fill:{{strokeColor}};}
+    .st14{fill:none;stroke:{{strokeColor}};stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10;}
+    .st15{fill:none;stroke:{{strokeColor}};stroke-linecap:round;stroke-miterlimit:10;}
+  </style>
+  <g>
+    <polyline class="st14" points="1.5,11.2 15,5.2 28.5,11 	"/>
+    <line class="st15" x1="3.2" y1="11.6" x2="3.2" y2="23.8"/>
+    <line class="st15" x1="26.9" y1="11.6" x2="26.9" y2="23.8"/>
+    <line class="st5" x1="1.7" y1="24.8" x2="28.3" y2="24.8"/>
+    <rect x="21.1" y="18.3" class="st0" width="3.4" height="5.5"/>
+    <path class="st0" d="M5.9,13.6v10.2h13.8V13.6H5.9z M18.7,17.3H6.8v-2.4h11.9V17.3z"/>
+  </g>
+</svg>
+`;
+export const warehouse = {
+    name: 'warehouse',
+    description: 'a group of various components used in a warehouse depiction',
+    icon,
+    templates: []
+};
+//# sourceMappingURL=warehouse.js.map

package/dist/src/component/warehouse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"warehouse.js","sourceRoot":"","sources":["../../../src/component/warehouse.ts"],"names":[],"mappings":"AAEA,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;CAgBZ,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,6DAA6D;IAC1E,IAAI;IACJ,SAAS,EAAE,EAAE;CACd,CAAA","sourcesContent":["import { Group } from '../types'\n\nconst icon = `\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    .st14{fill:none;stroke:{{strokeColor}};stroke-width:2.5;stroke-linecap:round;stroke-miterlimit:10;}\n    .st15{fill:none;stroke:{{strokeColor}};stroke-linecap:round;stroke-miterlimit:10;}\n  </style>\n  <g>\n    <polyline class=\"st14\" points=\"1.5,11.2 15,5.2 28.5,11 \t\"/>\n    <line class=\"st15\" x1=\"3.2\" y1=\"11.6\" x2=\"3.2\" y2=\"23.8\"/>\n    <line class=\"st15\" x1=\"26.9\" y1=\"11.6\" x2=\"26.9\" y2=\"23.8\"/>\n    <line class=\"st5\" x1=\"1.7\" y1=\"24.8\" x2=\"28.3\" y2=\"24.8\"/>\n    <rect x=\"21.1\" y=\"18.3\" class=\"st0\" width=\"3.4\" height=\"5.5\"/>\n    <path class=\"st0\" d=\"M5.9,13.6v10.2h13.8V13.6H5.9z M18.7,17.3H6.8v-2.4h11.9V17.3z\"/>\n  </g>\n</svg>\n`\n\nexport const warehouse: Group = {\n  name: 'warehouse',\n  description: 'a group of various components used in a warehouse depiction',\n  icon,\n  templates: []\n}\n"]}

package/dist/src/modeller/component-toolbar/component-detail.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/markdown';

package/dist/src/modeller/component-toolbar/component-detail.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/markdown';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+let ComponentDetail = class ComponentDetail extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.template = null;
+    }
+    render() {
+        const { about } = this.template || {};
+        return html ` <ox-markdown .src=${about}></ox-markdown> `;
+    }
+};
+ComponentDetail.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        align-content: stretch;
+
+        background-color: var(--component-detail-background-color, white);
+        margin: 0px;
+        padding: 10px;
+
+        width: 360px;
+        height: 100%;
+
+        overflow: hidden;
+
+        border: 2px solid var(--component-detail-border-color);
+        box-sizing: border-box;
+
+        position: absolute;
+        top: 0px;
+
+        z-index: 1;
+      }
+
+      ox-markdown {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], ComponentDetail.prototype, "template", void 0);
+ComponentDetail = __decorate([
+    customElement('component-detail')
+], ComponentDetail);
+//# sourceMappingURL=component-detail.js.map

package/dist/src/modeller/component-toolbar/component-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-detail.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-detail.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,mBAAmB,CAAA;AAE1B,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAiC8B,aAAQ,GAA6B,IAAI,CAAA;IAOvE,CAAC;IALC,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAErC,OAAO,IAAI,CAAA,sBAAsB,KAAK,kBAAkB,CAAA;IAC1D,CAAC;CACF,CAAA;AAvCQ,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0C;AAjCjE,eAAe;IADpB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,eAAe,CAwCpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/markdown'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('component-detail')\nclass ComponentDetail extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        align-content: stretch;\n\n        background-color: var(--component-detail-background-color, white);\n        margin: 0px;\n        padding: 10px;\n\n        width: 360px;\n        height: 100%;\n\n        overflow: hidden;\n\n        border: 2px solid var(--component-detail-border-color);\n        box-sizing: border-box;\n\n        position: absolute;\n        top: 0px;\n\n        z-index: 1;\n      }\n\n      ox-markdown {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: Object }) template: { about: string } | null = null\n\n  render() {\n    const { about } = this.template || {}\n\n    return html` <ox-markdown .src=${about}></ox-markdown> `\n  }\n}\n"]}

package/dist/src/modeller/component-toolbar/component-menu.d.ts

@@ -1,4 +1,4 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-export {};
+import './component-detail';

package/dist/src/modeller/component-toolbar/component-menu.js

@@ -2,8 +2,9 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
+import './component-detail';
 import { LitElement, css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
 import noImage from '../../../../assets/images/components/no-image.png';
 let ComponentMenu = class ComponentMenu extends LitElement {
@@ -19,13 +20,27 @@ let ComponentMenu = class ComponentMenu extends LitElement {
             ? html `
           <h2 onclick=${(e) => e.stopPropagation()}>${this.group} list</h2>
 
-          <div templates>
+          <div
+            templates
+            @mouseover=${(e) => this.onHoverComponent(e)}
+            @mouseout=${(e) => (this.template = null)}
+          >
             ${(this.templates || []).map(template => html `
                 <div @click=${this.onClickTemplate} data-type=${template.type} template>
                   <img src=${this.templateIcon(template)} />${template.type}
                 </div>
               `)}
           </div>
+
+          <component-detail
+            tabindex="-1"
+            @focusout=${() => {
+                this.template = null;
+            }}
+            .template=${this.template}
+            hidden
+          >
+          </component-detail>
         `
             : html ``;
     }
@@ -33,14 +48,27 @@ let ComponentMenu = class ComponentMenu extends LitElement {
         var _a;
         if (changes.has('group')) {
             if (!this.group) {
-                this.style.display = 'none';
                 this.templates = [];
+                this.setAttribute('hidden', '');
             }
             else {
-                this.style.display = 'flex';
                 this.templates = ((_a = this.groups.find((g) => g.name === this.group)) === null || _a === void 0 ? void 0 : _a.templates) || [];
+                this.removeAttribute('active');
             }
         }
+        if (changes.has('template')) {
+            this.template && this.template.about
+                ? this.detail.removeAttribute('hidden')
+                : this.detail.setAttribute('hidden', '');
+        }
+    }
+    findTemplate(type) {
+        this.template = type && this.templates.find(template => template.type == type);
+    }
+    onHoverComponent(e) {
+        var _a;
+        const button = e.target;
+        this.findTemplate((_a = button.closest('[data-type]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-type'));
     }
     onClickTemplate(e) {
         var _a;
@@ -49,10 +77,9 @@ let ComponentMenu = class ComponentMenu extends LitElement {
         if (!type) {
             return;
         }
-        var group = this.groups.find(g => g.name == this.group);
-        if (this.scene && group) {
-            var template = group.templates.find(template => template.type == type);
-            template && this.scene.add(JSON.parse(JSON.stringify(template.model)), { cx: 200, cy: 200 });
+        if (this.scene) {
+            this.template = this.templates.find(template => template.type == type);
+            this.template && this.scene.add(JSON.parse(JSON.stringify(this.template.model)), { cx: 200, cy: 200 });
         }
         this.group = null;
     }
@@ -75,7 +102,7 @@ ComponentMenu.styles = [
         width: 180px;
         height: 100%;
 
-        overflow: hidden;
+        overflow: visible;
 
         border: 2px solid var(--component-menu-border-color);
         box-sizing: border-box;
@@ -128,6 +155,18 @@ ComponentMenu.styles = [
         width: var(--component-menu-item-icon-size);
         height: var(--component-menu-item-icon-size);
       }
+
+      component-detail {
+        position: absolute;
+        top: 0;
+        left: 180px;
+        height: 100%;
+        outline: none;
+      }
+
+      component-detail[hidden] {
+        display: none;
+      }
     `
 ];
 __decorate([
@@ -140,8 +179,14 @@ __decorate([
     property({ type: String })
 ], ComponentMenu.prototype, "group", void 0);
 __decorate([
-    property({ type: Array })
+    state()
 ], ComponentMenu.prototype, "templates", void 0);
+__decorate([
+    state()
+], ComponentMenu.prototype, "template", void 0);
+__decorate([
+    query('component-detail')
+], ComponentMenu.prototype, "detail", void 0);
 ComponentMenu = __decorate([
     customElement('component-menu')
 ], ComponentMenu);