@vyr/service-graph 0.0.1

package/src/common/Unit.ts

@@ -0,0 +1,172 @@
+import { Generate } from '@vyr/engine'
+import { Cell, Shape } from '@antv/x6'
+import { GraphDrawer } from '../GraphDrawer'
+
+interface ClickEvent {
+  cell: Unit
+  x: number
+  y: number
+}
+
+interface UnitMeta {
+  drawer: GraphDrawer
+  id: string
+  icon: string
+  label: string
+  maxOutCount: number
+  maxInCount: number
+  status: '' | 'loading' | 'success' | 'warning'
+  position?: { x: number; y: number },
+}
+
+type UnitPartial<T extends UnitMeta = UnitMeta> = { drawer: GraphDrawer } & Partial<Omit<T, 'drawer'>>
+
+class Unit extends Shape.Rect {
+  static width = 180
+  static height = 45
+  static edge = { line: { stroke: '#A2B1C3', strokeWidth: 2, }, highlight: { stroke: '#feb663', } }
+  static attrs = {
+    card: { refWidth: '100%', refHeight: '100%', fill: 'transparent', rx: 4, ry: 4, },
+    html: { refWidth: '100%', refHeight: '100%', x: 0, y: 0, },
+  }
+  static instanceOf(instance: Cell, list: Array<typeof Unit>) {
+    for (const item of list) {
+      if (instance instanceof item) return true
+    }
+    return false
+  }
+  static getPortMeta(position: string) {
+    return {
+      position,
+      attrs: {
+        circle: {
+          r: 4,
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 1,
+          fill: '#fff',
+        },
+      },
+    }
+  }
+  static formatName(name: string) {
+    const len = 10
+    if (!name || name.length <= len) return name
+
+    return name.substring(0, len) + '...'
+  }
+
+  vMeta: UnitMeta
+
+  constructor(vMeta: UnitPartial<UnitMeta>) {
+    super({ id: vMeta.id ?? Generate.uuid(), label: vMeta.label, position: vMeta.position })
+    this.vMeta = {
+      drawer: vMeta.drawer,
+      icon: vMeta.icon ?? '',
+      label: vMeta.label ?? '',
+      status: vMeta.status ?? '',
+      maxOutCount: vMeta.maxOutCount ?? 1,
+      maxInCount: vMeta.maxInCount ?? 1,
+      id: this.id,
+    }
+    this.htmlFactory()
+  }
+
+  clone() {
+    const CLass = this.constructor as typeof Unit
+
+    return new CLass({ ...this.vMeta, id: undefined }) as any
+  }
+
+  htmlFactory() {
+    if (!this.attrs) return
+    const div = `
+    <div class="graph-service-unit">
+      <i class="${this.vMeta.icon} unit-icon" ></i>
+      <div class="unit-wrapper">${this.label}</div>
+      <i class="graphfont graph-${this.vMeta.status} unit-icon" ></i>
+    </div>
+    `
+    this.setAttrs({ html: { html: div } })
+  }
+
+  setVMeta(meta: Partial<UnitMeta>) {
+    const keys = Object.keys(meta) as Array<keyof UnitMeta>
+    for (const key of keys) {
+      const value = meta[key]
+      if (value === undefined) continue
+      //@ts-ignore
+      this.vMeta[key] = value
+    }
+    this.setLabel(meta.label)
+    if (meta.position) this.setPosition(meta.position)
+    this.htmlFactory()
+  }
+
+  /**点击节点 */
+  click(e: ClickEvent) {
+    //
+  }
+  /**右键点击节点 */
+  rightClick(e: ClickEvent) {
+    //
+  }
+  /**节点是否可移动 */
+  isMove() {
+    return true
+  }
+  /**节点是否可生成链接边 */
+  isCreateEdge(e: Element) {
+    if (e.getAttribute('port-group') !== 'out') return false
+    const edges = this.vMeta.drawer.graph.getConnectedEdges(this, { outgoing: true })
+    return edges.length < this.vMeta.maxOutCount
+  }
+  /**是否可以连接该节点 */
+  isConnection(e: Element, source: Cell) {
+    if (e.getAttribute('port-group') !== 'in') return false
+    const edges = this.vMeta.drawer.graph.getConnectedEdges(this, { incoming: true })
+    return edges.length < this.vMeta.maxInCount
+  }
+}
+Unit.config({
+  width: Unit.width,
+  height: Unit.height,
+  position: { x: 0, y: 0 },
+  attrs: {
+    card: Unit.attrs.card,
+    html: Unit.attrs.html,
+  },
+  markup: [
+    {
+      tagName: 'rect',
+      selector: 'card',
+    },
+    {
+      tagName: 'foreignObject',
+      selector: 'html',
+    }
+  ],
+  ports: {
+    groups: {
+      in: Unit.getPortMeta('left'),
+      out: Unit.getPortMeta('right'),
+    },
+    items: [
+      {
+        id: 'in',
+        group: 'in',
+      },
+      {
+        id: 'out',
+        group: 'out',
+      },
+    ],
+  },
+})
+
+export {
+  ClickEvent,
+  UnitMeta,
+  UnitPartial,
+  Unit,
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+import './asset/font/iconfont.css'
+import './asset/less/index.less'
+export * from './locale'
+export * from './common/Unit'
+export * from './common/RoutineUnit'
+export * from './GraphDrawer'
+export * from './GraphService'

package/src/locale/Language.ts

@@ -0,0 +1,10 @@
+import { Locale } from "@vyr/locale";
+import { zhCnLanguageProvider, ZhCNLanguageProvider } from "./LanguageProvider";
+
+Locale.register(zhCnLanguageProvider)
+
+const language = Locale.getLanguage<ZhCNLanguageProvider>(zhCnLanguageProvider.name)
+
+export {
+    language
+}

package/src/locale/LanguageProvider.ts

@@ -0,0 +1,16 @@
+import { LanguageProvider } from '@vyr/locale'
+
+interface ZhCNLanguageProvider extends LanguageProvider {
+    'graphDrawer.stencil.title': string
+}
+
+const zhCnLanguageProvider: ZhCNLanguageProvider = {
+    id: 'zh_CN',
+    name: '@vyr/service-graph',
+    'graphDrawer.stencil.title': '例程节点',
+}
+
+export {
+    ZhCNLanguageProvider,
+    zhCnLanguageProvider,
+}

package/src/locale/index.ts

@@ -0,0 +1,2 @@
+export * from './LanguageProvider'
+export * from './Language'