generalization-drawing-tool

这是一个以vue3 + gojs开发的概化图定制插件。

使用方法如下：

• 可以作为插件安装在你的项目中，也可以单独启动该项目。

作为插件使用：

npm install tfq-drawing-tool

import 'tfq-drawing-tool/style.css';

import Drawing from 'tfq-drawing-tool';

<Drawing/>

作为项目启动

npm run dev

关键：导出的json如何使用以及如何绑定事件

这里有个前提是，导出的json只负责描述关系以及位置。关于模板(它的模样)，需要优先约定，也就是你必须使用本模板才能正确渲染。

在使用本模板时，你需要单独定义你的绑定事件。

// 如果使用了本插件，在node_modules中会存在该文件 文件地址为/node_modules/tfq-drawing-tool/dist/images
// 如果不适用该插件，这些文件需要你自己引入
import SK_big from '/public/images/SK_big.svg'
import SK_small from '/public/images/SK_small.svg'
import HD from '/public/images/HD.svg'
import brake from '/public/images/brake.svg'
import arrow_big from '/public/images/arrow_big.svg'
import arrow_small from '/public/images/arrow_small.svg'
import FHQ from '/public/images/FHQ.svg'
import FHQ1 from '/public/images/FHQ1.svg'
import legend from '/public/images/legend.png'
import legend1 from '/public/images/legend1.png'
import line from '/public/images/line.svg'
import line_arrow from '/public/images/line_arrow.svg'

/**
 * @param source 文件源
 * @param layerName 图层 'Below' || 'Above'
 * @param config 你的配置
 * @param width 自定义宽度
 * @param height 自定义高度
 * @returns {*}
 */
import * as go from 'gojs';
const $ = go.GraphObject.make;
function getMakeDragByConfig(source, layerName, config = {}, width, height) {
  return $(
    go.Node,
    'Auto',
    {
      ...config, // 你的配置
    },
    { layerName: layerName || 'Foreground' },
    new go.Binding("width", "width"),
    new go.Binding("height", "height"),
    new go.Binding('location', 'loc').makeTwoWay(),
    new go.Binding('angle', 'angle'),
    new go.Binding('layerName', 'layerName'),
    $(go.Picture, {
      name: 'SHAPE',
      source,
      width: width ? width : NaN,
      height: height ? height : NaN,
    })
  );
}

const SK_big_template = getMakeDragByConfig(SK_big, 'Above');

const SK_small_template = getMakeDragByConfig(SK_small, 'Above');
const HD_template = getMakeDragByConfig(HD, 'Above');

const ZB_template = getMakeDragByConfig(brake, 'Above');

const arrow_big_template = getMakeDragByConfig(arrow_big, 'Above', {});
const arrow_small_template = getMakeDragByConfig(arrow_small, 'Above', {});

const FHQ_template = getMakeDragByConfig(FHQ, 'Above', {});
const FHQ1_template = getMakeDragByConfig(FHQ1,  'Above', {});

const legend_template = getMakeDragByConfig(legend);
const legend1_template = getMakeDragByConfig(legend1);

const line_template = getMakeDragByConfig(line, 'Below', {});
const line_arrow_template = getMakeDragByConfig(line_arrow, 'Below', {});
const text_block = $(go.Node, "Spot",
  {
    // ... 你的配置
  },
  { layerName: 'default' },
  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
  new go.Binding('layerName', 'layerName'),
  new go.Binding('angle', 'angle', Number),
  $(go.TextBlock,
    {
      name: "TEXT",
      stroke: "#2196F3",
      background: "transparent",
      editable: false,
      font: "16px sans-serif"
    },
    new go.Binding("text", "text").makeTwoWay(),
    new go.Binding('stroke', 'color'),
    new go.Binding('font', 'fontSize', fs => `${fs}px sans-serif`),
  )
);

const box_template = $(go.Node, 'Auto',
  {
    resizeObjectName: 'SHAPE',
    // ... 你的配置
  },
  { layerName: 'default' },
  new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
  new go.Binding('layerName', 'layerName'),
  $(go.Shape,
    {
      name: 'SHAPE',
      figure: 'RoundedRectangle',
      stroke: '#689f9f',
      strokeWidth: 1,
      fill: '#04181ad6',
      spot1: go.Spot.TopLeft,
      spot2: go.Spot.BottomRight
    },
    new go.Binding('width', 'width').makeTwoWay(),
    new go.Binding('height', 'height').makeTwoWay(),
    new go.Binding('stroke', 'strokeColor', (v, t) => v || '#689f9f').makeTwoWay(),
    new go.Binding('fill', 'fill', (v, t) => v || '#04181ad6').makeTwoWay()
  )
)

myDiagram.nodeTemplateMap.add('bigSK', SK_big_template);
myDiagram.nodeTemplateMap.add('smallSK', SK_small_template);
myDiagram.nodeTemplateMap.add('HD', HD_template);
myDiagram.nodeTemplateMap.add('ZB', ZB_template);
myDiagram.nodeTemplateMap.add('bigArrow', arrow_big_template);
myDiagram.nodeTemplateMap.add('smallArrow', arrow_small_template);
myDiagram.nodeTemplateMap.add('FHQ', FHQ_template);
myDiagram.nodeTemplateMap.add('FHQ1', FHQ1_template);
myDiagram.nodeTemplateMap.add('legend', legend_template);
myDiagram.nodeTemplateMap.add('legend1', legend1_template);
myDiagram.nodeTemplateMap.add('line', line_template);
myDiagram.nodeTemplateMap.add('lineArrow', line_arrow_template);
myDiagram.nodeTemplateMap.add('textBlock', text_block);

// 按顺序把层建好（越早 push 的越靠下）
// 必要图层：'default', 'first', 'second', 'third', 'Below', 'Above'
myDiagram.addLayerBefore(
  $(go.Layer, { name: 'Below' }),
  myDiagram.findLayer('')
);
myDiagram.addLayerAfter(
  $(go.Layer, { name: 'Above' }),
  myDiagram.findLayer('')
);
const layerNames = ['default', 'first', 'second', 'third'];
layerNames.forEach(n => myDiagram.addLayer($(go.Layer, { name: n })));

使用导出的JSON。

// 加载默认 JSON 数据。json为你导出的定制好的文件。
myDiagram.model = go.Model.fromJson(json);