@fmsim/machine 0.0.49

package/src/data-subscription.ts

@@ -0,0 +1,150 @@
+import { SubscriptionClient } from 'subscriptions-transport-ws'
+import { Component, ComponentNature, DataSource, RectPath, Shape } from '@hatiolab/things-scene'
+
+const COMPONENT_IMAGE = new URL('../icons/symbol-data-subscription.png', import.meta.url).href
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'string',
+      label: 'tag',
+      name: 'tag'
+    }
+  ],
+  'value-property': 'tag',
+  help: 'scene/component/data-subscription'
+}
+
+export default class DataSubscription extends DataSource(RectPath(Shape)) {
+  static _image
+  subscription
+  client
+  disposed
+
+  static get image() {
+    if (!DataSubscription._image) {
+      DataSubscription._image = new Image()
+      DataSubscription._image.src = COMPONENT_IMAGE
+    }
+
+    return DataSubscription._image
+  }
+
+  dispose() {
+    if (this.subscription) {
+      this.subscription.unsubscribe()
+    }
+    if (this.client) {
+      this.client.unsubscribeAll()
+      this.client.close(true)
+    }
+
+    super.dispose()
+  }
+
+  render(context) {
+    var { left, top, width, height } = this.bounds
+
+    context.beginPath()
+    this.drawImage(context, DataSubscription.image, left, top, width, height)
+  }
+
+  ready() {
+    this._initDataSubscription()
+  }
+
+  get nature() {
+    return NATURE
+  }
+
+  get tag() {
+    return this.state.tag
+  }
+
+  set tag(tag) {
+    this.setState('tag', tag)
+  }
+
+  _initDataSubscription() {
+    if (!this.app.isViewMode) return
+
+    this.requestData()
+  }
+
+  async requestData() {
+    var { tag } = this.state
+    var self = this
+    var query = `"${tag}"`
+    // var query = `
+    // subscription {
+    //   data(tag: "${tag}") {
+    //     tag
+    //     data
+    //   }
+    // }`
+    // let wsKey = guid()
+    var endpoint = location.origin.replace(/^http/, 'ws') + '/subscriptions'
+    this.client = new SubscriptionClient(
+      endpoint,
+      {
+        reconnect: true,
+        connectionParams: {
+          headers: {
+            /* 
+            특정 도메인의 데이타만 받고자 하는 경우에, referer 정보를 제공해서 서버에서 서브도메인 정보를 취득하도록 한다.
+            referer: location.href
+            또는, 이미 서브도메인 정보를 알고 있다면,
+            'x-things-factory-domain': '[subdomain]'
+            을 보낼 수 있다.
+            관련 정보를 보내지 않는다면, 사용자가 권한을 가진 모든 도메인의 데이타를 수신하게 된다.
+          */
+            referer: location.href
+          }
+        }
+      }
+      // null,
+      // null
+      // wsKey
+    )
+
+    this.client.onError(e => {
+      var client = this.client
+      // 보드가 실행중이면 재시도, 아니면 재연결 취소
+      if (this.disposed) {
+        client.reconnect = false
+
+        this.client.unsubscribeAll()
+        this.client.close(true)
+      }
+    })
+    this.client.onConnected(() => {
+      // this.subscription = this.client.request({ query }).subscribe({
+      //   next({ data }) {
+      //     if (data) {
+      //       self.data = data.data.data
+      //     }
+      //   }
+      // })
+      // console.log('this.subscription : ', this.subscription)
+    })
+    this.subscription = this.client.request({ query }).subscribe({
+      next({ data }) {
+        if (data) {
+          self.data = data.data.data
+        }
+      }
+    })
+
+    // function guid() {
+    //   function s4() {
+    //     return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
+    //   }
+    //   return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4()
+    // }
+  }
+}
+
+Component.register('data-subscription', DataSubscription)

package/src/equipment.ts

@@ -0,0 +1,21 @@
+import { Component, ComponentNature } from '@hatiolab/things-scene'
+import MCSMachine from './mcs-machine'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [...MCSMachine.properties]
+}
+
+export default class Equipment extends MCSMachine {
+  static get nature() {
+    return NATURE
+  }
+
+  containable(component: Component) {
+    return super.containable(component) || ['Port'].includes(component.state.type)
+  }
+}
+
+Component.register('Equipment', Equipment)

package/src/features/client-api.ts

@@ -0,0 +1,52 @@
+import gql from 'graphql-tag'
+
+import { client } from '@operato/graphql'
+
+export const themesColorMap = async () => {
+  var response = await client.query({
+    query: gql`
+      query {
+        themes {
+          items {
+            name
+            type
+          }
+        }
+      }
+    `
+  })
+
+  if (response.errors) {
+    return ['']
+  }
+
+  const items = response.data.themes.items.filter((item: any) => item.type == 'color-map').map((item: any) => item.name)
+  const sorted = items.sort()
+
+  return [''].concat(sorted)
+}
+
+export const themesColorRange = async () => {
+  var response = await client.query({
+    query: gql`
+      query {
+        themes {
+          items {
+            name
+            type
+          }
+        }
+      }
+    `
+  })
+  if (response.errors) {
+    return ['']
+  }
+
+  const items = response.data.themes.items
+    .filter((item: any) => item.type == 'color-range')
+    .map((item: any) => item.name)
+  const sorted = items.sort()
+
+  return [''].concat(sorted)
+}

package/src/features/conveyor-mixin.ts

@@ -0,0 +1,75 @@
+import { Component } from '@hatiolab/things-scene'
+type Constructor<T = {}> = new (...args: any[]) => T
+
+function pattern(component: any) {
+  var { height } = component.bounds
+
+  var { rollWidth = 10 } = component.model
+
+  var width = Math.max(rollWidth, 1)
+
+  var color = component.statusColor!
+  var stroke = component.auxColor!
+  var lineWidth = 1
+
+  if (!component._pattern) {
+    component._pattern = document.createElement('canvas')
+  }
+
+  component._pattern.width = width
+  component._pattern.height = height
+
+  var context = component._pattern.getContext('2d')
+
+  context.beginPath()
+  context.fillStyle = color
+  context.strokeStyle = stroke
+  context.lineWidth = lineWidth
+
+  context.moveTo(0, 0)
+  context.lineTo(width, 0)
+  context.lineTo(width, height)
+  context.lineTo(0, height)
+  context.lineTo(0, 0)
+  context.fill()
+
+  context.beginPath()
+
+  context.globalAlpha = 0.2
+
+  var x_for_belt = (component._step || 0) % width
+  if (component.value == 2) {
+    x_for_belt = width - x_for_belt
+  }
+
+  context.moveTo(x_for_belt, height)
+  context.lineTo(x_for_belt, 0)
+
+  context.stroke()
+
+  return component._pattern
+}
+
+export function ConveyorMixin<TBase extends Constructor<Component>>(Base: TBase) {
+  const A = class extends Base {
+    _pattern
+
+    dispose() {
+      super.dispose()
+      delete this._pattern
+    }
+
+    get fillStyle() {
+      return {
+        image: pattern(this),
+        offsetX: 0,
+        offsetY: 0,
+        type: 'pattern'
+      }
+    }
+  }
+
+  Component.memoize(A.prototype, 'fillStyle', false)
+
+  return A
+}

package/src/features/mcs-status-default.ts

@@ -0,0 +1,76 @@
+export interface Legend {
+  [key: string]: string
+}
+
+export const LEGEND_NULL: Legend = { default: 'black' }
+
+export const LEGEND_MACHINE: Legend = {
+  '1000': '#ad0d8c', // DISCONNECTED
+  '1001': '#01ff00', // UP
+  '1002': '#ff0000', // OUTOFSERVICE
+  '1003': '#7030a0', // PM
+  '1004': '#ffffff', // NOTONLINE
+  '1005': '#ff0000', // DOWN
+  '1006': '#ffff00', // NOTAUTO
+  '1007': '#ff9900', // ALARM
+  '1008': '#0600ff', // FULL
+  default: '#d6d6d6'
+}
+
+export const LEGEND_VEHICLE: Legend = {
+  '4000': '#ff0000', // OUTOFSERVICE
+  '4001': '#01ff00', // ASSIGNED
+  // '4002': '#cbf266', // ASSIGNED_ACQUIRING
+  // '4003': '#cbf266', // ASSIGNED_DEPOSITING
+  // '4004': '#cbf266', // ASSIGNED_ENROUTE
+  // '4005': '#cbf266', // ASSIGNED_PARKED
+  '4006': '#ffff00', // NOTASSIGNED
+  '4007': '#ffffff', // INSTALLED
+  '4008': '#b1a0c7', // CHARGING
+  '4009': '#7030a0', // CHARGED
+  '4010': '#7f878f', // REMOVED
+  default: '#cbf266'
+}
+
+export const LEGEND_UNIT: Legend = {
+  '2000': '#808080', // BANNED
+  '2001': '#ff0000', // DOWN
+  '2002': 'transparent', // EMPTY
+  '2003': '#01ff00', // EMPTY_RESERVED
+  '2004': '#01ffff', // FULL_RESERVED
+  '2005': '#0600ff', // FULL
+  '2006': '#ff0000', // NOTINSERVICE
+  default: '#d6d6d6'
+}
+
+export const LEGEND_TRANSPORT: Legend = {
+  '1000': '#ad0d8c', // DISCONNECTED
+  '1001': '#01ff00', // UP
+  '1002': '#ff0000', // OUTOFSERVICE
+  '1003': '#7030a0', // PM
+  '1004': '#ffffff', // NOTONLINE
+  '1005': '#ff0000', // DOWN
+  '1006': '#ffff00', // NOTAUTO
+  '1007': '#ff9900', // ALARM
+  '1008': '#0600ff', // FULL
+  default: '#d6d6d6'
+}
+
+export const LEGEND_CARRIER: Legend = {
+  Full: '#ad0d8c',
+  Empty: '#01ff00',
+  FullFull: '#ffff00',
+  FullEmpty: '#7030a0',
+  EmptyFull: '#ff9900',
+  EmptyEmpty: '#ff0000',
+  default: '#d6d6d6'
+}
+
+export const LEGEND_CAPACITY: Legend = {
+  '0~20': '#ad0d8c',
+  '20~40': '#01ff00',
+  '40~60': '#ffff00',
+  '60~80': '#7030a0',
+  '80~100': '#ff9900',
+  default: '#d6d6d6'
+}

package/src/features/mcs-status-mixin.ts

@@ -0,0 +1,53 @@
+type Constructor<T = {}> = new (...args: any[]) => T
+
+interface Legend {
+  [key: string]: string
+}
+
+import { LEGEND_NULL } from './mcs-status-default'
+import { themesColorMap } from './client-api'
+
+export const MCSStatusMixinProperties = [
+  {
+    type: 'select',
+    label: 'legend-name',
+    name: 'legendName',
+    property: {
+      options: themesColorMap
+    }
+  }
+]
+
+export function MCSStatusMixin<TBase extends Constructor>(Base: TBase) {
+  return class extends Base {
+    get status(): string | undefined {
+      return
+    }
+
+    get auxStatus(): string | undefined {
+      return
+    }
+
+    get legend(): Legend {
+      return LEGEND_NULL
+    }
+
+    get auxLegend(): Legend {
+      return LEGEND_NULL
+    }
+
+    get statusColor(): string | undefined {
+      const status = this.status
+      const legend = this.legend
+
+      return (status && legend && (legend[status] || legend[status!] || legend.default)) || legend?.default
+    }
+
+    get auxColor(): string | undefined {
+      const status = this.auxStatus
+      const legend = this.auxLegend
+
+      return (status && legend && (legend[status] || legend[status!] || legend.default)) || legend?.default
+    }
+  }
+}

package/src/features/mcs-zone-mixin.ts

@@ -0,0 +1,23 @@
+type Constructor<T = {}> = new (...args: any[]) => T
+
+import MCSUnit from 'src/mcs-unit'
+
+export const MCSZoneMixinProperties = [
+  {
+    type: 'string',
+    label: 'zone',
+    name: 'zone'
+  }
+]
+
+export function MCSZoneMixin<TBase extends Constructor<MCSUnit>>(Base: TBase) {
+  return class extends Base {
+    get zone(): string | undefined {
+      return
+    }
+
+    set zone(zone: string) {
+      this.zone = zone
+    }
+  }
+}

package/src/groups/index.ts

@@ -0,0 +1,10 @@
+import { ACS } from './mcs-acs'
+import { BCS } from './mcs-bcs'
+import { CCS } from './mcs-ccs'
+import { ECS } from './mcs-ecs'
+import { OCS } from './mcs-ocs'
+import { SCS } from './mcs-scs'
+import { mcsPath } from './mcs-path'
+import { mcsShape } from './mcs-shape'
+
+export default [ACS, BCS, CCS, ECS, OCS, SCS, mcsShape, mcsPath]

package/src/groups/mcs-acs.ts

@@ -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 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:{{strokeColor}};}
+</style>
+<path class="st0" d="M7.12,20.14l-0.93,3.44H4.14l3.47-12.14h2.52l3.52,12.14h-2.12l-0.98-3.44H7.12z M10.22,18.46l-0.85-2.99
+    c-0.21-0.74-0.39-1.57-0.55-2.27H8.79c-0.16,0.7-0.32,1.55-0.51,2.27l-0.84,2.99H10.22z"/>
+<path class="st0" d="M22.61,23.22c-0.47,0.27-1.5,0.54-2.8,0.54c-3.44,0-5.53-2.41-5.53-6.1c0-4,2.48-6.41,5.79-6.41
+    c1.3,0,2.24,0.31,2.64,0.54l-0.43,1.76c-0.51-0.25-1.22-0.47-2.12-0.47c-2.2,0-3.8,1.55-3.8,4.47c0,2.66,1.4,4.38,3.78,4.38
+    c0.8,0,1.64-0.18,2.16-0.45L22.61,23.22z"/>
+<path class="st0" d="M24.25,21.16c0.64,0.41,1.61,0.77,2.62,0.77c1.27,0,1.98-0.67,1.98-1.66c0-0.92-0.55-1.46-1.93-2.02
+    c-1.79-0.72-2.93-1.78-2.93-3.53c0-1.98,1.48-3.49,3.83-3.49c1.17,0,2.04,0.29,2.61,0.61l-0.48,1.78c-0.39-0.23-1.14-0.58-2.16-0.58
+    c-1.25,0-1.8,0.76-1.8,1.46c0,0.94,0.63,1.37,2.07,2c1.88,0.79,2.8,1.85,2.8,3.6c0,1.94-1.32,3.64-4.12,3.64
+    c-1.14,0-2.33-0.36-2.93-0.76L24.25,21.16z"/>
+</svg>
+`
+
+export const ACS = {
+  name: 'ACS',
+  description: 'The object groups composing the ACS system',
+  icon,
+  templates: []
+}

package/src/groups/mcs-bcs.ts

@@ -0,0 +1,27 @@
+const icon = `
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:{{strokeColor}};}
+</style>
+<path class="st0" d="M4.86,11.6c0.63-0.14,1.77-0.25,2.88-0.25c1.46,0,2.36,0.2,3.1,0.77c0.68,0.45,1.13,1.24,1.13,2.27
+	c0,1.12-0.63,2.14-1.8,2.63v0.04c1.14,0.32,2.19,1.33,2.19,3.01c0,1.08-0.42,1.93-1.05,2.5c-0.77,0.76-2.04,1.13-4.02,1.13
+	c-1.09,0-1.93-0.09-2.43-0.16V11.6z M6.82,16.39h1.01c1.37,0,2.14-0.72,2.14-1.75c0-1.13-0.77-1.66-2.03-1.66
+	c-0.58,0-0.92,0.04-1.13,0.09V16.39z M6.82,21.97c0.26,0.04,0.6,0.05,1.05,0.05c1.27,0,2.4-0.54,2.4-2.03c0-1.4-1.09-1.98-2.46-1.98
+	H6.82V21.97z"/>
+<path class="st0" d="M21.89,23.22c-0.47,0.27-1.5,0.54-2.8,0.54c-3.44,0-5.53-2.41-5.53-6.1c0-4,2.48-6.41,5.79-6.41
+	c1.3,0,2.24,0.31,2.64,0.54l-0.43,1.76c-0.51-0.25-1.22-0.47-2.12-0.47c-2.2,0-3.8,1.55-3.8,4.47c0,2.66,1.4,4.38,3.78,4.38
+	c0.8,0,1.64-0.18,2.16-0.45L21.89,23.22z"/>
+<path class="st0" d="M23.53,21.16c0.64,0.41,1.61,0.77,2.62,0.77c1.27,0,1.98-0.67,1.98-1.66c0-0.92-0.55-1.46-1.93-2.02
+	c-1.79-0.72-2.93-1.78-2.93-3.53c0-1.98,1.48-3.49,3.83-3.49c1.17,0,2.04,0.29,2.61,0.61l-0.48,1.78c-0.39-0.23-1.14-0.58-2.16-0.58
+	c-1.25,0-1.8,0.76-1.8,1.46c0,0.94,0.63,1.37,2.07,2c1.88,0.79,2.8,1.85,2.8,3.6c0,1.94-1.32,3.64-4.12,3.64
+	c-1.14,0-2.33-0.36-2.93-0.76L23.53,21.16z"/>
+</svg>
+`
+
+export const BCS = {
+  name: 'BCS',
+  description: 'The object groups composing the BCS system',
+  icon,
+  templates: []
+}

package/src/groups/mcs-ccs.ts

@@ -0,0 +1,25 @@
+const icon = `
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:{{strokeColor}};}
+</style>
+<path class="st0" d="M13.02,23.22c-0.47,0.27-1.5,0.54-2.8,0.54c-3.44,0-5.53-2.41-5.53-6.1c0-4,2.48-6.41,5.79-6.41
+	c1.3,0,2.24,0.31,2.64,0.54l-0.43,1.76c-0.51-0.25-1.22-0.47-2.12-0.47c-2.2,0-3.8,1.55-3.8,4.47c0,2.66,1.4,4.38,3.78,4.38
+	c0.8,0,1.64-0.18,2.16-0.45L13.02,23.22z"/>
+<path class="st0" d="M22.06,23.22c-0.47,0.27-1.5,0.54-2.8,0.54c-3.44,0-5.53-2.41-5.53-6.1c0-4,2.48-6.41,5.79-6.41
+	c1.3,0,2.24,0.31,2.64,0.54l-0.43,1.76c-0.51-0.25-1.22-0.47-2.12-0.47c-2.2,0-3.8,1.55-3.8,4.47c0,2.66,1.4,4.38,3.78,4.38
+	c0.8,0,1.64-0.18,2.16-0.45L22.06,23.22z"/>
+<path class="st0" d="M23.7,21.16c0.64,0.41,1.61,0.77,2.62,0.77c1.27,0,1.98-0.67,1.98-1.66c0-0.92-0.55-1.46-1.93-2.02
+	c-1.79-0.72-2.93-1.78-2.93-3.53c0-1.98,1.48-3.49,3.83-3.49c1.17,0,2.04,0.29,2.61,0.61l-0.48,1.78c-0.39-0.23-1.14-0.58-2.16-0.58
+	c-1.25,0-1.8,0.76-1.8,1.46c0,0.94,0.63,1.37,2.07,2c1.88,0.79,2.8,1.85,2.8,3.6c0,1.94-1.32,3.64-4.12,3.64
+	c-1.14,0-2.33-0.36-2.93-0.76L23.7,21.16z"/>
+</svg>
+`
+
+export const CCS = {
+  name: 'CCS',
+  description: 'The object groups composing the CCS system',
+  icon,
+  templates: []
+}

package/src/groups/mcs-ecs.ts

@@ -0,0 +1,23 @@
+const icon = `
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:{{strokeColor}};}
+</style>
+<path class="st0" d="M11.41,18.19H7.33v3.57h4.57v1.82H5.35V11.44h6.3v1.82H7.33v3.13h4.08V18.19z"/>
+<path class="st0" d="M21.4,23.22c-0.47,0.27-1.5,0.54-2.8,0.54c-3.44,0-5.53-2.41-5.53-6.1c0-4,2.48-6.41,5.79-6.41
+	c1.3,0,2.24,0.31,2.64,0.54l-0.43,1.76c-0.51-0.25-1.22-0.47-2.12-0.47c-2.2,0-3.8,1.55-3.8,4.47c0,2.66,1.4,4.38,3.78,4.38
+	c0.8,0,1.64-0.18,2.16-0.45L21.4,23.22z"/>
+<path class="st0" d="M23.04,21.16c0.64,0.41,1.61,0.77,2.62,0.77c1.27,0,1.98-0.67,1.98-1.66c0-0.92-0.55-1.46-1.93-2.02
+	c-1.79-0.72-2.93-1.78-2.93-3.53c0-1.98,1.48-3.49,3.83-3.49c1.17,0,2.04,0.29,2.61,0.61l-0.48,1.78c-0.39-0.23-1.14-0.58-2.16-0.58
+	c-1.25,0-1.8,0.76-1.8,1.46c0,0.94,0.63,1.37,2.07,2c1.88,0.79,2.8,1.85,2.8,3.6c0,1.94-1.32,3.64-4.12,3.64
+	c-1.14,0-2.33-0.36-2.93-0.76L23.04,21.16z"/>
+</svg>
+`
+
+export const ECS = {
+  name: 'ECS',
+  description: 'The object groups composing the ECS system',
+  icon,
+  templates: []
+}

package/src/groups/mcs-ocs.ts

@@ -0,0 +1,25 @@
+const icon = `
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:{{strokeColor}};}
+</style>
+<path class="st0" d="M13.73,17.37c0,4.07-2.2,6.39-5.19,6.39c-3.06,0-4.99-2.61-4.99-6.18c0-3.73,2.09-6.36,5.15-6.36
+	C11.86,11.23,13.73,13.92,13.73,17.37z M5.64,17.55c0,2.47,1.11,4.43,3.01,4.43c1.91,0,2.99-1.98,2.99-4.52
+	c0-2.29-1.01-4.45-2.99-4.45C6.68,13.02,5.64,15.05,5.64,17.55z"/>
+<path class="st0" d="M23.2,23.21c-0.47,0.27-1.5,0.54-2.8,0.54c-3.44,0-5.53-2.41-5.53-6.1c0-4,2.48-6.41,5.79-6.41
+	c1.3,0,2.24,0.31,2.64,0.54l-0.43,1.76c-0.51-0.25-1.22-0.47-2.12-0.47c-2.2,0-3.8,1.55-3.8,4.47c0,2.66,1.4,4.38,3.78,4.38
+	c0.8,0,1.64-0.18,2.16-0.45L23.2,23.21z"/>
+<path class="st0" d="M24.84,21.16c0.64,0.41,1.61,0.77,2.62,0.77c1.27,0,1.98-0.67,1.98-1.66c0-0.92-0.55-1.46-1.93-2.02
+	c-1.79-0.72-2.93-1.78-2.93-3.53c0-1.98,1.48-3.49,3.83-3.49c1.17,0,2.04,0.29,2.61,0.61l-0.48,1.78c-0.39-0.23-1.14-0.58-2.16-0.58
+	c-1.25,0-1.8,0.76-1.8,1.46c0,0.94,0.63,1.37,2.07,2c1.88,0.79,2.8,1.85,2.8,3.6c0,1.94-1.32,3.64-4.12,3.64
+	c-1.14,0-2.33-0.36-2.93-0.76L24.84,21.16z"/>
+</svg>
+`
+
+export const OCS = {
+  name: 'OCS',
+  description: 'The object groups composing the OCS system',
+  icon,
+  templates: []
+}

package/src/groups/mcs-path.ts

@@ -0,0 +1,28 @@
+const icon = `
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+  <style type="text/css">
+    .st0{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
+    .st1{fill:{{strokeColor}}}
+    .st2{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}
+  </style>
+  <path class="st0" d="M26.17,27.87H8.74c-2.36,0-4.29-1.93-4.29-4.29V12.16c0-2.36,1.93-4.29,4.29-4.29h17.43
+	c2.36,0,4.29,1.93,4.29,4.29v11.43C30.46,25.94,28.53,27.87,26.17,27.87z"/>
+  <path class="st0" d="M26.46,27.87h-18c-2.2,0-4-1.8-4-4v0c0-2.2,1.8-4,4-4h18c2.2,0,4,1.8,4,4v0
+    C30.46,26.07,28.66,27.87,26.46,27.87z"/>
+  <circle class="st1" cx="10.29" cy="24.06" r="1.5"/>
+  <circle class="st1" cx="17.64" cy="24.06" r="1.5"/>
+  <circle class="st1" cx="24.99" cy="24.06" r="1.5"/>
+  <line class="st2" x1="8.61" y1="7.87" x2="8.61" y2="19.87"/>
+  <line class="st2" x1="14.57" y1="7.87" x2="14.57" y2="19.87"/>
+  <line class="st2" x1="20.53" y1="7.87" x2="20.53" y2="19.87"/>
+  <line class="st2" x1="26.49" y1="7.87" x2="26.49" y2="19.87"/>
+</svg>
+`
+
+export const mcsPath = {
+  name: 'mcsPath',
+  description: 'a group of various mcs-paths',
+  icon,
+  templates: []
+}

package/src/groups/mcs-scs.ts

@@ -0,0 +1,26 @@
+const icon = `
+<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:{{strokeColor}};}
+</style>
+<path class="st0" d="M5.51,21.16c0.64,0.41,1.61,0.77,2.62,0.77c1.27,0,1.98-0.67,1.98-1.66c0-0.92-0.55-1.46-1.93-2.02
+	c-1.79-0.72-2.93-1.78-2.93-3.53c0-1.98,1.48-3.49,3.83-3.49c1.17,0,2.04,0.29,2.61,0.61l-0.48,1.78c-0.39-0.23-1.14-0.58-2.16-0.58
+	c-1.25,0-1.8,0.76-1.8,1.46c0,0.94,0.63,1.37,2.07,2c1.88,0.79,2.8,1.85,2.8,3.6c0,1.94-1.32,3.64-4.12,3.64
+	c-1.14,0-2.33-0.36-2.93-0.76L5.51,21.16z"/>
+<path class="st0" d="M21.67,23.22c-0.47,0.27-1.5,0.54-2.8,0.54c-3.44,0-5.53-2.41-5.53-6.1c0-4,2.48-6.41,5.79-6.41
+	c1.3,0,2.24,0.31,2.64,0.54l-0.43,1.76c-0.51-0.25-1.22-0.47-2.12-0.47c-2.2,0-3.8,1.55-3.8,4.47c0,2.66,1.4,4.38,3.78,4.38
+	c0.8,0,1.64-0.18,2.16-0.45L21.67,23.22z"/>
+<path class="st0" d="M23.32,21.16c0.64,0.41,1.61,0.77,2.62,0.77c1.27,0,1.98-0.67,1.98-1.66c0-0.92-0.55-1.46-1.93-2.02
+	c-1.79-0.72-2.93-1.78-2.93-3.53c0-1.98,1.48-3.49,3.83-3.49c1.17,0,2.04,0.29,2.61,0.61l-0.48,1.78c-0.39-0.23-1.14-0.58-2.16-0.58
+	c-1.25,0-1.8,0.76-1.8,1.46c0,0.94,0.63,1.37,2.07,2c1.88,0.79,2.8,1.85,2.8,3.6c0,1.94-1.32,3.64-4.12,3.64
+	c-1.14,0-2.33-0.36-2.93-0.76L23.32,21.16z"/>
+</svg>
+`
+
+export const SCS = {
+  name: 'SCS',
+  description: 'The object groups composing the SCS system',
+  icon,
+  templates: []
+}