@operato/board 0.2.49 → 0.2.50

package/src/component/etc.ts

@@ -0,0 +1,87 @@
+import { Group } from '../types'
+import globalReference from '../../../assets/images/components/global-reference.png'
+import infoWindow from '../../../assets/images/components/info-window.png'
+import localReference from '../../../assets/images/components/local-reference.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:{{strokeColor}};}
+  </style>
+  <g>
+    <circle class="st0" cx="7.1" cy="15" r="2"/>
+    <circle class="st0" cx="15" cy="15" r="2"/>
+    <circle class="st0" cx="22.9" cy="15" r="2"/>
+  </g>
+</svg>
+`
+
+export const etc: Group = {
+  name: 'etc',
+  description: 'a group of components that have not yet been defined.',
+  icon,
+  templates: [
+    {
+      type: 'info-window',
+      description: 'information window',
+      icon: infoWindow,
+      group: 'etc',
+      model: {
+        type: 'info-window',
+        left: 10,
+        top: 10,
+        width: 50,
+        height: 50,
+        fillStyle: '#fff',
+        strokeStyle: 'DarkGoldenRod',
+        hidden: true,
+        frontSideTemplate:
+          "<h2 id='xxx'>\n\t<%= text %>\n</h2>\n<img src='https://www.tutorialspoint.com/images/html.gif' alt='HTML Tutorial' height='150' width='140' />",
+        backSideTemplate:
+          "<h2 id='yyy'>\n\t<%= text %>\n</h2>\n<img src='https://www.tutorialspoint.com/images/html.gif' alt='HTML Tutorial' height='150' width='140' />",
+        style:
+          '#yyy {\n\tbackground-color:navy;\n\tcolor:white\n}\n#xxx, #yyy {\n\twhite-space:nowrap;\n\tmin-width:200px;\n}'
+      }
+    },
+    {
+      type: 'local reference',
+      description: 'local reference',
+      icon: localReference,
+      group: 'etc',
+      model: {
+        type: 'local-ref',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 1,
+        lineDash: 'solid',
+        lineCap: 'butt'
+      }
+    },
+    {
+      type: 'global reference',
+      description: 'global reference',
+      icon: globalReference,
+      group: 'etc',
+      model: {
+        type: 'global-ref',
+        left: 100,
+        top: 100,
+        width: 100,
+        height: 100,
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 1,
+        lineDash: 'solid',
+        lineCap: 'butt'
+      }
+    }
+  ]
+}

package/src/component/form.ts

@@ -0,0 +1,42 @@
+import { Group } from '../types'
+
+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}};}
+    .st7{fill:none;stroke:{{strokeColor}};stroke-width:1.5;stroke-miterlimit:10;}
+    .st9{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}
+  </style>
+  <g>
+    <rect x="3.1" y="5.5" class="st7" width="23.9" height="19"/>
+    <rect x="11.3" y="8.3" class="st9" width="12.5" height="3.3"/>
+    <rect x="5.5" y="8.8" class="st0" width="4.1" height="2.2"/>
+    <rect x="5.5" y="14.5" class="st0" width="4.1" height="2.2"/>
+    <rect x="10.7" y="19.4" class="st0" width="6.5" height="2.2"/>
+    <rect x="17.8" y="19.4" class="st0" width="6.3" height="2.2"/>
+    <rect x="11.3" y="13.8" class="st9" width="12.5" height="3.3"/>
+    <path class="st0" d="M15,14.7c0,0.1,0,0.3-0.1,0.5l0,0.2l0.2-0.1c0.3-0.2,0.5-0.3,0.6-0.3c0.1,0,0.3,0.1,0.3,0.3
+    c0,0.2-0.3,0.3-0.7,0.3l-0.2,0l0.1,0.1c0.3,0.2,0.5,0.4,0.5,0.5c0,0.1-0.1,0.2-0.3,0.2c-0.2,0-0.3-0.2-0.5-0.6l-0.1-0.2l-0.1,0.2
+    c-0.2,0.4-0.3,0.6-0.5,0.6c-0.2,0-0.3-0.1-0.3-0.2c0-0.2,0.2-0.3,0.5-0.5l0.1-0.1l-0.2,0c-0.5,0-0.7-0.1-0.7-0.3
+    c0-0.2,0.1-0.3,0.3-0.3c0.2,0,0.3,0.1,0.6,0.3l0.2,0.1l0-0.2c-0.1-0.2-0.1-0.4-0.1-0.5c0-0.2,0.1-0.3,0.3-0.3
+    C14.9,14.4,15,14.5,15,14.7z"/>
+    <path class="st0" d="M17.5,14.7c0,0.1,0,0.3-0.1,0.5l0,0.2l0.2-0.1c0.3-0.2,0.5-0.3,0.6-0.3c0.1,0,0.3,0.1,0.3,0.3
+    c0,0.2-0.3,0.3-0.7,0.3l-0.2,0l0.1,0.1c0.3,0.2,0.5,0.4,0.5,0.5c0,0.1-0.1,0.2-0.3,0.2c-0.2,0-0.3-0.2-0.5-0.6l-0.1-0.2l-0.1,0.2
+    c-0.2,0.4-0.3,0.6-0.5,0.6c-0.2,0-0.3-0.1-0.3-0.2c0-0.2,0.2-0.3,0.5-0.5l0.1-0.1l-0.2,0c-0.5,0-0.7-0.1-0.7-0.3
+    c0-0.2,0.1-0.3,0.3-0.3c0.2,0,0.3,0.1,0.6,0.3l0.2,0.1l0-0.2c-0.1-0.2-0.1-0.4-0.1-0.5c0-0.2,0.1-0.3,0.3-0.3
+    C17.4,14.4,17.5,14.5,17.5,14.7z"/>
+    <path class="st0" d="M19.9,14.7c0,0.1,0,0.3-0.1,0.5l0,0.2l0.2-0.1c0.3-0.2,0.5-0.3,0.6-0.3c0.1,0,0.3,0.1,0.3,0.3
+    c0,0.2-0.3,0.3-0.7,0.3l-0.2,0l0.1,0.1c0.3,0.2,0.5,0.4,0.5,0.5c0,0.1-0.1,0.2-0.3,0.2c-0.2,0-0.3-0.2-0.5-0.6l-0.1-0.2l-0.1,0.2
+    c-0.2,0.4-0.3,0.6-0.5,0.6c-0.2,0-0.3-0.1-0.3-0.2c0-0.2,0.2-0.3,0.5-0.5l0.1-0.1l-0.2,0c-0.5,0-0.7-0.1-0.7-0.3
+    c0-0.2,0.1-0.3,0.3-0.3c0.2,0,0.3,0.1,0.6,0.3l0.2,0.1l0-0.2c-0.1-0.2-0.1-0.4-0.1-0.5c0-0.2,0.1-0.3,0.3-0.3
+    C19.8,14.4,19.9,14.5,19.9,14.7z"/>
+  </g>
+</svg>
+`
+
+export const form: Group = {
+  name: 'form',
+  description: 'a group of various input components that make up a data entry form',
+  icon,
+  templates: []
+}

package/src/component/index.ts

@@ -0,0 +1,12 @@
+export * from './shape'
+export * from './line'
+export * from './text-and-media'
+export * from './chart-and-gauge'
+export * from './table'
+export * from './data-source'
+export * from './3d'
+export * from './iot'
+export * from './form'
+export * from './warehouse'
+export * from './container'
+export * from './etc'

package/src/component/iot.ts

@@ -0,0 +1,52 @@
+import { Group } from '../types'
+
+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">
+    .st9{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}
+    .st12{fill:#232020;stroke:{{strokeColor}};stroke-width:0.5;stroke-miterlimit:10;}
+    .st13{fill:#232020;stroke:{{strokeColor}};stroke-width:0.25;stroke-miterlimit:10;}
+  </style>
+  <g>
+    <path class="st12" d="M11.2,14.6c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.2-0.1-0.2-0.2c0-0.9,0.3-1.8,1-2.5c0.6-0.7,1.5-1.1,2.4-1.2
+    c0.1,0,0.2,0.1,0.2,0.2c0,0.1-0.1,0.2-0.2,0.2c-0.8,0.1-1.6,0.5-2.2,1.1c-0.6,0.6-0.9,1.5-0.9,2.3C11.2,14.5,11.2,14.6,11.2,14.6z"
+    />
+    <path class="st12" d="M8.8,14.7c0,0-0.1,0.1-0.1,0.1c-0.1,0-0.2-0.1-0.2-0.2c0-1.5,0.6-3,1.6-4.2c1-1.1,2.5-1.9,4-2
+    c0.1,0,0.2,0.1,0.2,0.2c0,0.1-0.1,0.2-0.2,0.2c-1.4,0.1-2.8,0.8-3.8,1.9c-1,1.1-1.5,2.5-1.5,3.9C8.9,14.6,8.9,14.6,8.8,14.7z"/>
+    <path class="st12" d="M18.6,15.2c0,0,0.1-0.1,0.1-0.1c0.1,0,0.2,0.1,0.2,0.2c-0.1,0.9-0.5,1.8-1.1,2.5c-0.7,0.7-1.6,1-2.5,1.1
+    c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c0.8,0,1.6-0.4,2.3-1c0.6-0.6,1-1.4,1-2.2C18.5,15.2,18.5,15.2,18.6,15.2z"/>
+    <path class="st12" d="M20.9,15.3c0,0,0.1-0.1,0.1-0.1c0.1,0,0.2,0.1,0.2,0.2c-0.1,1.5-0.8,3-1.9,4.1c-1.1,1.1-2.6,1.7-4.1,1.7
+    c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c1.4,0,2.8-0.6,3.9-1.6c1.1-1,1.7-2.4,1.8-3.8C20.9,15.3,20.9,15.3,20.9,15.3z"/>
+    <path class="st13" d="M8.8,6.7C7.9,6.7,7.2,6,7.2,5c0-0.9,0.7-1.7,1.6-1.7c0.9,0,1.7,0.7,1.7,1.7C10.5,6,9.8,6.7,8.8,6.7z M8.8,3.9
+    C8.2,3.9,7.7,4.4,7.7,5c0,0.6,0.5,1.2,1.2,1.2C9.5,6.2,10,5.7,10,5C10,4.4,9.5,3.9,8.8,3.9z"/>
+    <path class="st13" d="M20.9,6.7C20,6.7,19.3,6,19.3,5c0-0.9,0.7-1.7,1.6-1.7c0.9,0,1.7,0.7,1.7,1.7C22.6,6,21.8,6.7,20.9,6.7z
+    M20.9,3.9c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2C22.1,4.4,21.6,3.9,20.9,3.9z"/>
+    <path class="st13" d="M14.9,16.5c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.7,1.6-1.7c0.9,0,1.7,0.7,1.7,1.7
+    C16.6,15.7,15.9,16.5,14.9,16.5z M14.9,13.6c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2
+    C16.1,14.2,15.6,13.6,14.9,13.6z"/>
+    <path class="st13" d="M8.8,26.6c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.7,1.6-1.7c0.9,0,1.7,0.7,1.7,1.7C10.5,25.9,9.8,26.6,8.8,26.6z
+    M8.8,23.8c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2C10,24.3,9.5,23.8,8.8,23.8z"/>
+    <path class="st13" d="M20.9,26.6c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.7,1.6-1.7c0.9,0,1.7,0.7,1.7,1.7
+    C22.6,25.9,21.8,26.6,20.9,26.6z M20.9,23.8c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2
+    C22.1,24.3,21.6,23.8,20.9,23.8z"/>
+    <path class="st13" d="M3.1,16.6c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.7,1.6-1.7c0.9,0,1.7,0.7,1.7,1.7C4.7,15.9,4,16.6,3.1,16.6z
+    M3.1,13.8c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2C4.2,14.3,3.7,13.8,3.1,13.8z"/>
+    <path class="st13" d="M26.9,16.6c-0.9,0-1.6-0.7-1.6-1.6c0-0.9,0.7-1.7,1.6-1.7c0.9,0,1.7,0.7,1.7,1.7
+    C28.6,15.9,27.8,16.6,26.9,16.6z M26.9,13.8c-0.6,0-1.2,0.5-1.2,1.2c0,0.6,0.5,1.2,1.2,1.2c0.6,0,1.2-0.5,1.2-1.2
+    C28.1,14.3,27.6,13.8,26.9,13.8z"/>
+    <line class="st9" x1="10.2" y1="4.9" x2="18.2" y2="4.9"/>
+    <line class="st9" x1="22" y1="6.2" x2="26.1" y2="12.3"/>
+    <line class="st9" x1="4" y1="17.7" x2="7.7" y2="24"/>
+    <line class="st9" x1="23" y1="22.7" x2="26.8" y2="16.4"/>
+    <line class="st9" x1="3.7" y1="13.5" x2="7.5" y2="7.2"/>
+    <line class="st9" x1="11.7" y1="25.1" x2="19.7" y2="25.1"/>
+  </g>
+</svg>
+`
+
+export const iot: Group = {
+  name: 'IoT',
+  description: 'a group of various IoT protocols',
+  icon,
+  templates: []
+}

package/src/component/line.ts

@@ -0,0 +1,132 @@
+import { Group } from '../types'
+import bothArrow from '../../../assets/images/components/both-arrow.png'
+import dash from '../../../assets/images/components/dash.png'
+import lineIcon from '../../../assets/images/components/line.png'
+import polyline from '../../../assets/images/components/polyline.png'
+import singleArrow from '../../../assets/images/components/single-arrow.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">
+	  .st3{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+	  .st4{fill:none;stroke:{{strokeColor}};stroke-width:1.5;stroke-miterlimit:10;stroke-dasharray:3,1.5;}
+  </style>
+  <g>
+	  <line class="st3" x1="1.7" y1="18.9" x2="26.3" y2="6.2"/>
+	  <line class="st4" x1="1.7" y1="23.8" x2="28.3" y2="10.1"/>
+  </g>
+</svg>
+`
+
+export const line: Group = {
+  name: 'line',
+  description: 'a group of various lines',
+  icon,
+  templates: [
+    {
+      type: 'line',
+      description: 'simple line',
+      icon: lineIcon,
+      group: 'line',
+      model: {
+        type: 'line',
+        x1: 100,
+        y1: 100,
+        x2: 200,
+        y2: 200,
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 3,
+        lineDash: 'solid',
+        lineCap: 'butt'
+      }
+    },
+    {
+      type: 'dash',
+      description: 'dash line',
+      icon: dash,
+      group: 'line',
+      model: {
+        type: 'line',
+        x1: 100,
+        y1: 100,
+        x2: 200,
+        y2: 200,
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 3,
+        lineDash: 'round-dot',
+        lineCap: 'butt'
+      }
+    },
+    {
+      type: 'single arrow',
+      description: 'single arrow tip line',
+      icon: singleArrow,
+      group: 'line',
+      model: {
+        type: 'line',
+        x1: 100,
+        y1: 100,
+        x2: 200,
+        y2: 200,
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 3,
+        hidden: false,
+        lineWidth: 3,
+        lineDash: 'solid',
+        begin: 'arrow',
+        lineCap: 'butt'
+      }
+    },
+    {
+      type: 'both arrow',
+      description: 'both arrow tip line',
+      icon: bothArrow,
+      group: 'line',
+      model: {
+        type: 'line',
+        x1: 100,
+        y1: 100,
+        x2: 200,
+        y2: 200,
+        fillStyle: '#fff',
+        strokeStyle: '#000',
+        alpha: 1,
+        hidden: false,
+        lineWidth: 3,
+        lineDash: 'solid',
+        begin: 'arrow',
+        end: 'arrow',
+        lineCap: 'butt'
+      }
+    },
+    {
+      type: 'polyline',
+      description: 'polyline',
+      icon: polyline,
+      group: 'line',
+      model: {
+        type: 'polyline',
+        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'
+      }
+    }
+  ]
+}

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

@@ -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)
+}

package/src/component/shape.ts

@@ -0,0 +1,154 @@
+import { Group } from '../types'
+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: Group = {
+  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'
+      }
+    }
+  ]
+}

package/src/component/table.ts

@@ -0,0 +1,28 @@
+import { Group } from '../types'
+
+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: Group = {
+  name: 'table',
+  description: 'a group of various tables',
+  icon,
+  templates: []
+}

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

@@ -0,0 +1,124 @@
+import { Group } from '../types'
+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: Group = {
+  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
+      }
+    }
+  ]
+}