简柏林 / thingskit-scada · Commits

Commit 481e601c4ec5be7ba710a817d74bcca5921683cd

Authored by ww
1 parent 319a27f0

feat: rewrite graph lib file

Inline Side-by-side
Showing 12 changed files with 804 additions and 528 deletions
@@ -181,15 +181,64 @@ @@ -181,15 +181,64 @@
181 /** 181 /**
182 * @description 图表类型 182 * @description 图表类型
183 */ 183 */
184 - CHARTS: 'charts' 184 + CHARTS: 'charts',
  185 +
  186 + /**
  187 + * @description 标题类型
  188 + */
  189 + TITLE: 'title',
  190 +
  191 + /**
  192 + * @description 变量类型
  193 + */
  194 + VARIABLE: 'variable',
  195 +
  196 + /**
  197 + * @description 线条类型
  198 + */
  199 + LINE: 'line',
  200 +
  201 + /**
  202 + * @description 实时时间类型
  203 + */
  204 + REAL_TIME: 'realTime',
  205 +
  206 + /**
  207 + * @description 折线图类型
  208 + */
  209 + LINE_CHART: 'lineChart',
  210 +
  211 + /**
  212 + * @description 柱状图类型
  213 + */
  214 + BAR_CHART: 'barChart',
  215 +
  216 + /**
  217 + * @description 默认类型
  218 + */
  219 + DEFAULT: 'default'
185 } 220 }
186 221
  222 + /**
  223 + * @description 组件权限map
  224 + * @type {Map<string, string[]>}
  225 + */
187 Sidebar.prototype.componentDisplayPanelPermissionMap = new Map() 226 Sidebar.prototype.componentDisplayPanelPermissionMap = new Map()
188 227
189 - Sidebar.prototype.setComponentPermision = function (conmponentType, permission) {  
190 - this.componentDisplayPanelPermissionMap.set(componentType, permission) 228 + /**
  229 + * @description 设置组件权限
  230 + * @param conmponentType
  231 + * @param permission
  232 + */
  233 + Sidebar.prototype.setComponentPermission = function (conmponentType, permission) {
  234 + this.componentDisplayPanelPermissionMap.set(conmponentType, permission)
191 } 235 }
192 236
  237 + /**
  238 + * @description 获取该组件绑定的面板
  239 + * @param componentType
  240 + * @returns {string[]}
  241 + */
193 Sidebar.prototype.getComponentPermission = function (componentType) { 242 Sidebar.prototype.getComponentPermission = function (componentType) {
194 return this.componentDisplayPanelPermissionMap.get(componentType) || [] 243 return this.componentDisplayPanelPermissionMap.get(componentType) || []
195 } 244 }
@@ -198,11 +247,11 @@ @@ -198,11 +247,11 @@
198 * @description 数据面板权限 247 * @description 数据面板权限
199 */ 248 */
200 Sidebar.prototype.enumPermissionPanel = { 249 Sidebar.prototype.enumPermissionPanel = {
201 - DATA_SOURCE: 'dataSource',  
202 - DISPLAY_TYPE: 'displayType',  
203 - INTERACTION: 'interaction',  
204 - DYNAMIC_EFFECT: 'dynamicEffect',  
205 - VAR_IMAGE: 'variableImage' 250 + DATA_SOURCE: 'dataSource',
  251 + DISPLAY_TYPE: 'displayType',
  252 + INTERACTION: 'interaction',
  253 + DYNAMIC_EFFECT: 'dynamicEffect',
  254 + VAR_IMAGE: 'variableImage'
206 } 255 }
207 256
208 /** 257 /**
@@ -553,6 +602,19 @@ @@ -553,6 +602,19 @@
553 // {title: mxResources.get('clipart'), id: 'clipart', image: IMAGE_PATH + '/sidebar-clipart.png'}, 602 // {title: mxResources.get('clipart'), id: 'clipart', image: IMAGE_PATH + '/sidebar-clipart.png'},
554 // {title: mxResources.get('flowchart'), id: 'flowchart', image: IMAGE_PATH + '/sidebar-flowchart.png'}]; 603 // {title: mxResources.get('flowchart'), id: 'flowchart', image: IMAGE_PATH + '/sidebar-flowchart.png'}];
555 //更多图形，显示出来的的标题跟id，同时包括图片 604 //更多图形，显示出来的的标题跟id，同时包括图片
  605 +
  606 + // TODO thingsKit 设置数据绑定展示面板
  607 + const { DISPLAY_TYPE, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION } = this.enumPermissionPanel
  608 + const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART } = this.enumComponentType
  609 + this.setComponentPermission(LINE, [DYNAMIC_EFFECT])
  610 + this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
  611 + this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
  612 + this.setComponentPermission(TITLE, [INTERACTION, DYNAMIC_EFFECT])
  613 + this.setComponentPermission(VAR_IMAGE, [DATA_SOURCE, INTERACTION, VAR_IMAGE])
  614 + this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
  615 + this.setComponentPermission(BAR_CHART, [DATA_SOURCE, DISPLAY_TYPE, DYNAMIC_EFFECT])
  616 + this.setComponentPermission(LINE_CHART, [DATA_SOURCE, DISPLAY_TYPE, DYNAMIC_EFFECT])
  617 +
556 var thingskitEntries = [ 618 var thingskitEntries = [
557 { title: "风机", id: 'fan', image: IMAGE_PATH + '/thingskit/风机.png' }, 619 { title: "风机", id: 'fan', image: IMAGE_PATH + '/thingskit/风机.png' },
558 { title: "发动机", id: 'engine', image: IMAGE_PATH + '/thingskit/发动机.png' }, 620 { title: "发动机", id: 'engine', image: IMAGE_PATH + '/thingskit/发动机.png' },
1 (function () { 1 (function () {
2 - // Adds Atlassian shapes  
3 - Sidebar.prototype.addBasicComponentsPalette = function () {  
4 - this.setCurrentSearchEntryLibrary('component');  
5 - var currentDate = getCurrentDate();  
6 - var fns = [  
7 - this.createVertexTemplateEntry('text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;', 100, 40, 'Title', 'Title', null, null, 'text heading title'),  
8 - this.createVertexTemplateEntry('text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;', 100, 40, '变量', '变量', null, null, '变量'),  
9 - this.createEdgeTemplateEntry('shape=filledEdge;rounded=1;fixDash=1;endArrow=none;strokeWidth=10;fillColor=none;edgeStyle=orthogonalEdgeStyle;flowAnimation=1;strokeColor=#6666FF;endFill=1;metaEdit=0;backgroundOutline=0;', 60, 40, '', '线条'),  
10 - this.addEntry('real time', mxUtils.bind(this, function () {  
11 - // const template = `<div class="thingKit-component__real-time"><div class="real-time__date">%currentDate%</div> <div style="font-size:30px" class="real-time__now">%date{HH:MM:ss}%</div></div>`  
12 - const template = `<div class="thingKit-component__real-time"><div class="real-time__date"></div> <div style="font-size:30px" class="real-time__now">时间</div></div>`  
13 - const cell = new mxCell(template, new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');  
14 - cell.vertex = true;  
15 - this.graph.setAttributeForCell(cell, 'placeholders', '1');  
16 - this.graph.setAttributeForCell(cell, 'currentDate', currentDate);  
17 - return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '实时时间');  
18 - })),  
19 - this.addEntry(this.getTagsForStencil('mxgraph.basic', '变量图片', 'basic').join(' '), mxUtils.bind(this, function () {  
20 - const cell = new mxCell('', new mxGeometry(0, 0, 194, 95), 'image;image=images/thingskit/img-placeholder.png;imageAspect=0;');  
21 - cell.setVertex(true)  
22 - this.setCellAttributes(cell, { componentType: 'variableImage' })  
23 - return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');  
24 - }))  
25 - ]; 2 + // Adds Atlassian shapes
  3 + Sidebar.prototype.addBasicComponentsPalette = function () {
  4 + this.setCurrentSearchEntryLibrary('component');
  5 + const dt = 'basic'
  6 + const gn = `mxgraph.${dt}`
  7 + const currentDate = getCurrentDate();
  8 + const basicAttr = this.enumCellBasicAttribute
  9 + const componentType = this.enumComponentType
  10 + const { INTERACTION, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE } = this.enumPermissionPanel
  11 + const transparentBg = 'text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=center;'
  12 + const fns = [
  13 + this.addEntry(this.getTagsForStencil(gn, 'Title', dt).join(' '), mxUtils.bind(this, function () {
  14 + const cell = new mxCell('Title', new mxGeometry(0, 0, 100, 40), transparentBg);
  15 + cell.setVertex(true)
  16 + this.setCellAttributes(
  17 + cell,
  18 + {
  19 + [basicAttr.COMPONENT_TYPE]: componentType.TITLE,
  20 + },
  21 + )
  22 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'Title');
  23 + })),
26 24
27 - this.addPaletteFunctions('component', '基础元件', true, fns);  
28 - this.setCurrentSearchEntryLibrary();  
29 - }; 25 + this.addEntry(this.getTagsForStencil(gn, 'variable', dt).join(' '), mxUtils.bind(this, function () {
  26 + const cell = new mxCell('变量', new mxGeometry(0, 0, 100, 40), transparentBg);
  27 + cell.setVertex(true)
  28 + this.setCellAttributes(
  29 + cell,
  30 + {
  31 + [basicAttr.COMPONENT_TYPE]: componentType.VARIABLE,
  32 + },
  33 + )
  34 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量');
  35 + })),
30 36
31 - //封装日期函数  
32 - function getCurrentDate() {  
33 - var date = new Date(); //创建日期对象  
34 - var year = date.getFullYear();  
35 - var month = date.getMonth() + 1;  
36 - var dates = date.getDate();  
37 - arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六',]  
38 - var day = date.getDay();  
39 - return year + '年' + month + '月' + dates + '日 ' + arr[day];  
40 - } 37 + this.addEntry(this.getTagsForStencil(gn, 'line', dt).join(' '), mxUtils.bind(this, function () {
  38 + const style = 'shape=filledEdge;rounded=1;fixDash=1;endArrow=none;strokeWidth=10;fillColor=none;edgeStyle=orthogonalEdgeStyle;flowAnimation=1;strokeColor=#6666FF;endFill=1;metaEdit=0;backgroundOutline=0;'
  39 + const cell = new mxCell('', new mxGeometry(0, 0, 60, 40), style);
  40 + cell.geometry.setTerminalPoint(new mxPoint(0, 40), true);
  41 + cell.geometry.setTerminalPoint(new mxPoint(60, 0), false);
  42 + cell.geometry.relative = true;
  43 + cell.edge = true;
  44 + cell.setVertex(true)
  45 + this.setCellAttributes(
  46 + cell,
  47 + {
  48 + [basicAttr.COMPONENT_TYPE]: componentType.LINE,
  49 + },
  50 + )
  51 + return this.createEdgeTemplateFromCells([cell], 60, 40, '线条');
  52 + })),
  53 + this.addEntry('real time', mxUtils.bind(this, function () {
  54 + const template = `<div class="thingKit-component__real-time"><div class="real-time__date"></div> <div style="font-size:30px" class="real-time__now">时间</div></div>`
  55 + const cell = new mxCell(template, new mxGeometry(0, 0, 180, 60), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
  56 + cell.vertex = true;
  57 + this.setCellAttributes(
  58 + cell,
  59 + {
  60 + [basicAttr.COMPONENT_TYPE]: componentType.REAL_TIME,
  61 + placeholders: '1',
  62 + currentDate: currentDate,
  63 + },
  64 + )
  65 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '实时时间');
  66 + })),
  67 + this.addEntry(this.getTagsForStencil('mxgraph.basic', '变量图片', 'basic').join(' '), mxUtils.bind(this, function () {
  68 + const cell = new mxCell('', new mxGeometry(0, 0, 194, 95), 'image;image=images/thingskit/img-placeholder.png;imageAspect=0;');
  69 + cell.setVertex(true)
  70 + this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VAR_IMAGE })
  71 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '变量图片');
  72 + })),
  73 + ];
41 74
42 - /**  
43 - * @description 初始化实时事件组件  
44 - */  
45 - function initRealTimeComponent() {  
46 - RAFSetInterval(() => {  
47 - const allTimeNode = document.querySelectorAll('.thingKit-component__real-time .real-time__now')  
48 - for (const time of allTimeNode) {  
49 - const date = new Date()  
50 - time.innerHTML = `${date.getHours() < 10 ? '0' : ''}${date.getHours()}:${date.getMinutes() < 10 ? '0' : ''}${date.getMinutes()}:${date.getSeconds() < 10 ? '0' : ''}${date.getSeconds()}`  
51 - }  
52 - }, 1000)  
53 - } 75 + this.addPaletteFunctions('component', '基础元件', true, fns);
  76 + this.setCurrentSearchEntryLibrary();
  77 + };
54 78
55 - initRealTimeComponent() 79 + //封装日期函数
  80 + function getCurrentDate() {
  81 + var date = new Date(); //创建日期对象
  82 + var year = date.getFullYear();
  83 + var month = date.getMonth() + 1;
  84 + var dates = date.getDate();
  85 + arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  86 + var day = date.getDay();
  87 + return year + '年' + month + '月' + dates + '日 ' + arr[day];
  88 + }
  89 +
  90 + /**
  91 + * @description 初始化实时事件组件
  92 + */
  93 + function initRealTimeComponent() {
  94 + RAFSetInterval(() => {
  95 + const allTimeNode = document.querySelectorAll('.thingKit-component__real-time .real-time__now')
  96 + for (const time of allTimeNode) {
  97 + const date = new Date()
  98 + time.innerHTML = `${date.getHours() < 10 ? '0' : ''}${date.getHours()}:${date.getMinutes() < 10 ? '0' : ''}${date.getMinutes()}:${date.getSeconds() < 10 ? '0' : ''}${date.getSeconds()}`
  99 + }
  100 + }, 1000)
  101 + }
  102 +
  103 + initRealTimeComponent()
56 })(); 104 })();
@@ -3,69 +3,95 @@ @@ -3,69 +3,95 @@
3 // Adds Atlassian shapes 3 // Adds Atlassian shapes
4 // button 按钮 4 // button 按钮
5 Sidebar.prototype.addButtonPalette = function () { 5 Sidebar.prototype.addButtonPalette = function () {
6 - var gn = 'mxgraph.button';  
7 - var dt = 'button';  
8 - var width = 66;  
9 - var height = 74;  
10 - this.setCurrentSearchEntryLibrary('button'); 6 + const { COMPONENT_TYPE } = this.enumCellBasicAttribute
  7 + const { DEFAULT } = this.enumComponentType
  8 + const gn = 'mxgraph.button';
  9 + const dt = 'button';
  10 + const label = '按钮'
  11 + const width = 66;
  12 + const height = 74;
  13 + const staticPath = '/thingskit-drawio/img/lib/thingskit/'
  14 + const prefix = 'image;image=img/lib/thingskit/'
  15 + const defaultStyle = ';imageAspect=0;'
  16 + this.setCurrentSearchEntryLibrary(dt);
11 17
12 - var fns = [  
13 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/1.png;imageAspect=0;', width, height, '', '1', null, null, this.getTagsForStencil(gn, '1', dt).join(' ')),  
14 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/10.png;imageAspect=0;', width, height, '', '10', null, null, this.getTagsForStencil(gn, '10', dt).join(' ')),  
15 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/11.png;imageAspect=0;', width, height, '', '11', null, null, this.getTagsForStencil(gn, '11', dt).join(' ')),  
16 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/12.png;imageAspect=0;', width, height, '', '12', null, null, this.getTagsForStencil(gn, '12', dt).join(' ')),  
17 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/13.png;imageAspect=0;', width, height, '', '13', null, null, this.getTagsForStencil(gn, '13', dt).join(' ')),  
18 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/14.png;imageAspect=0;', width, height, '', '14', null, null, this.getTagsForStencil(gn, '14', dt).join(' ')),  
19 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/15.png;imageAspect=0;', width, height, '', '15', null, null, this.getTagsForStencil(gn, '15', dt).join(' ')),  
20 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/16.png;imageAspect=0;', width, height, '', '16', null, null, this.getTagsForStencil(gn, '16', dt).join(' ')),  
21 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/17.png;imageAspect=0;', width, height, '', '17', null, null, this.getTagsForStencil(gn, '17', dt).join(' ')),  
22 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/18.png;imageAspect=0;', width, height, '', '18', null, null, this.getTagsForStencil(gn, '18', dt).join(' ')),  
23 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/19.png;imageAspect=0;', width, height, '', '19', null, null, this.getTagsForStencil(gn, '19', dt).join(' ')),  
24 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/2.png;imageAspect=0;', width, height, '', '2', null, null, this.getTagsForStencil(gn, '2', dt).join(' ')),  
25 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/20.png;imageAspect=0;', width, height, '', '20', null, null, this.getTagsForStencil(gn, '20', dt).join(' ')),  
26 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/21.png;imageAspect=0;', width, height, '', '21', null, null, this.getTagsForStencil(gn, '21', dt).join(' ')),  
27 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/22.png;imageAspect=0;', width, height, '', '22', null, null, this.getTagsForStencil(gn, '22', dt).join(' ')),  
28 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/23.png;imageAspect=0;', width, height, '', '23', null, null, this.getTagsForStencil(gn, '23', dt).join(' ')),  
29 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/24.png;imageAspect=0;', width, height, '', '24', null, null, this.getTagsForStencil(gn, '24', dt).join(' ')),  
30 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/25.png;imageAspect=0;', width, height, '', '25', null, null, this.getTagsForStencil(gn, '25', dt).join(' ')),  
31 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/26.png;imageAspect=0;', width, height, '', '26', null, null, this.getTagsForStencil(gn, '26', dt).join(' ')),  
32 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/27.png;imageAspect=0;', width, height, '', '27', null, null, this.getTagsForStencil(gn, '27', dt).join(' ')),  
33 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/28.png;imageAspect=0;', width, height, '', '28', null, null, this.getTagsForStencil(gn, '28', dt).join(' ')),  
34 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/29.png;imageAspect=0;', width, height, '', '29', null, null, this.getTagsForStencil(gn, '29', dt).join(' ')),  
35 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/3.png;imageAspect=0;', width, height, '', '3', null, null, this.getTagsForStencil(gn, '3', dt).join(' ')),  
36 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/30.png;imageAspect=0;', width, height, '', '30', null, null, this.getTagsForStencil(gn, '30', dt).join(' ')),  
37 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/31.png;imageAspect=0;', width, height, '', '31', null, null, this.getTagsForStencil(gn, '31', dt).join(' ')),  
38 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/32.png;imageAspect=0;', width, height, '', '32', null, null, this.getTagsForStencil(gn, '32', dt).join(' ')),  
39 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/33.png;imageAspect=0;', width, height, '', '33', null, null, this.getTagsForStencil(gn, '33', dt).join(' ')),  
40 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/34.png;imageAspect=0;', width, height, '', '34', null, null, this.getTagsForStencil(gn, '34', dt).join(' ')),  
41 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/35.png;imageAspect=0;', width, height, '', '35', null, null, this.getTagsForStencil(gn, '35', dt).join(' ')),  
42 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/36.png;imageAspect=0;', width, height, '', '36', null, null, this.getTagsForStencil(gn, '36', dt).join(' ')),  
43 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/37.png;imageAspect=0;', width, height, '', '37', null, null, this.getTagsForStencil(gn, '37', dt).join(' ')),  
44 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/38.png;imageAspect=0;', width, height, '', '38', null, null, this.getTagsForStencil(gn, '38', dt).join(' ')),  
45 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/39.png;imageAspect=0;', width, height, '', '39', null, null, this.getTagsForStencil(gn, '39', dt).join(' ')),  
46 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/4.png;imageAspect=0;', width, height, '', '4', null, null, this.getTagsForStencil(gn, '4', dt).join(' ')),  
47 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/40.png;imageAspect=0;', width, height, '', '40', null, null, this.getTagsForStencil(gn, '40', dt).join(' ')),  
48 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/41.png;imageAspect=0;', width, height, '', '41', null, null, this.getTagsForStencil(gn, '41', dt).join(' ')),  
49 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/42.png;imageAspect=0;', width, height, '', '42', null, null, this.getTagsForStencil(gn, '42', dt).join(' ')),  
50 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/43.png;imageAspect=0;', width, height, '', '43', null, null, this.getTagsForStencil(gn, '43', dt).join(' ')),  
51 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/44.png;imageAspect=0;', width, height, '', '44', null, null, this.getTagsForStencil(gn, '44', dt).join(' ')),  
52 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/45.png;imageAspect=0;', width, height, '', '45', null, null, this.getTagsForStencil(gn, '45', dt).join(' ')),  
53 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/46.png;imageAspect=0;', width, height, '', '46', null, null, this.getTagsForStencil(gn, '46', dt).join(' ')),  
54 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/47.png;imageAspect=0;', width, height, '', '47', null, null, this.getTagsForStencil(gn, '47', dt).join(' ')),  
55 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/48.png;imageAspect=0;', width, height, '', '48', null, null, this.getTagsForStencil(gn, '48', dt).join(' ')),  
56 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/49.png;imageAspect=0;', width, height, '', '49', null, null, this.getTagsForStencil(gn, '49', dt).join(' ')),  
57 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/5.png;imageAspect=0;', width, height, '', '5', null, null, this.getTagsForStencil(gn, '5', dt).join(' ')),  
58 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/50.png;imageAspect=0;', width, height, '', '50', null, null, this.getTagsForStencil(gn, '50', dt).join(' ')),  
59 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/51.png;imageAspect=0;', width, height, '', '51', null, null, this.getTagsForStencil(gn, '51', dt).join(' ')),  
60 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/52.png;imageAspect=0;', width, height, '', '52', null, null, this.getTagsForStencil(gn, '52', dt).join(' ')),  
61 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/6.png;imageAspect=0;', width, height, '', '6', null, null, this.getTagsForStencil(gn, '6', dt).join(' ')),  
62 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/7.png;imageAspect=0;', width, height, '', '7', null, null, this.getTagsForStencil(gn, '7', dt).join(' ')),  
63 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/8.png;imageAspect=0;', width, height, '', '8', null, null, this.getTagsForStencil(gn, '8', dt).join(' ')),  
64 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/button/9.png;imageAspect=0;', width, height, '', '9', null, null, this.getTagsForStencil(gn, '9', dt).join(' ')),  
65 -  
66 - ]; 18 + // 自定义属性
  19 + const cellAttribute = {
  20 + [COMPONENT_TYPE]: DEFAULT
  21 + }
67 22
68 - this.addPaletteFunctions('button', '按钮', false, fns); 23 + const graphPathLib = [
  24 + { name: '1.png', path: 'button/1.png' },
  25 + { name: '10.png', path: 'button/10.png' },
  26 + { name: '11.png', path: 'button/11.png' },
  27 + { name: '12.png', path: 'button/12.png' },
  28 + { name: '13.png', path: 'button/13.png' },
  29 + { name: '14.png', path: 'button/14.png' },
  30 + { name: '15.png', path: 'button/15.png' },
  31 + { name: '16.png', path: 'button/16.png' },
  32 + { name: '17.png', path: 'button/17.png' },
  33 + { name: '18.png', path: 'button/18.png' },
  34 + { name: '19.png', path: 'button/19.png' },
  35 + { name: '2.png', path: 'button/2.png' },
  36 + { name: '20.png', path: 'button/20.png' },
  37 + { name: '21.png', path: 'button/21.png' },
  38 + { name: '22.png', path: 'button/22.png' },
  39 + { name: '23.png', path: 'button/23.png' },
  40 + { name: '24.png', path: 'button/24.png' },
  41 + { name: '25.png', path: 'button/25.png' },
  42 + { name: '26.png', path: 'button/26.png' },
  43 + { name: '27.png', path: 'button/27.png' },
  44 + { name: '28.png', path: 'button/28.png' },
  45 + { name: '29.png', path: 'button/29.png' },
  46 + { name: '3.png', path: 'button/3.png' },
  47 + { name: '30.png', path: 'button/30.png' },
  48 + { name: '31.png', path: 'button/31.png' },
  49 + { name: '32.png', path: 'button/32.png' },
  50 + { name: '33.png', path: 'button/33.png' },
  51 + { name: '34.png', path: 'button/34.png' },
  52 + { name: '35.png', path: 'button/35.png' },
  53 + { name: '36.png', path: 'button/36.png' },
  54 + { name: '37.png', path: 'button/37.png' },
  55 + { name: '38.png', path: 'button/38.png' },
  56 + { name: '39.png', path: 'button/39.png' },
  57 + { name: '4.png', path: 'button/4.png' },
  58 + { name: '40.png', path: 'button/40.png' },
  59 + { name: '41.png', path: 'button/41.png' },
  60 + { name: '42.png', path: 'button/42.png' },
  61 + { name: '43.png', path: 'button/43.png' },
  62 + { name: '44.png', path: 'button/44.png' },
  63 + { name: '45.png', path: 'button/45.png' },
  64 + { name: '46.png', path: 'button/46.png' },
  65 + { name: '47.png', path: 'button/47.png' },
  66 + { name: '48.png', path: 'button/48.png' },
  67 + { name: '49.png', path: 'button/49.png' },
  68 + { name: '5.png', path: 'button/5.png' },
  69 + { name: '50.png', path: 'button/50.png' },
  70 + { name: '51.png', path: 'button/51.png' },
  71 + { name: '52.png', path: 'button/52.png' },
  72 + { name: '6.png', path: 'button/6.png' },
  73 + { name: '7.png', path: 'button/7.png' },
  74 + { name: '8.png', path: 'button/8.png' },
  75 + { name: '9.png', path: 'button/9.png' },
  76 + ]
  77 +
  78 + const lib = graphPathLib.map(item => {
  79 + item.staticPath = staticPath + item.path
  80 + return item
  81 + })
  82 +
  83 + const fns = graphPathLib.map(item => {
  84 + return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
  85 + const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
  86 + cell.setVertex(true)
  87 + this.setCellAttributes(cell, cellAttribute)
  88 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);
  89 + }));
  90 + })
  91 +
  92 + this.setVariableImageLib(dt, label, lib)
  93 +
  94 + this.addPaletteFunctions(dt, label, false, fns);
69 95
70 this.setCurrentSearchEntryLibrary(); 96 this.setCurrentSearchEntryLibrary();
71 }; 97 };
1 (function () { 1 (function () {
2 -  
3 - // Adds Atlassian shapes  
4 - // 图表  
5 - Sidebar.prototype.addChartsPalette = function () {  
6 - this.chartsComponentInit()  
7 - const enumConst = this.enumConst  
8 - const enumChartType = this.enumChartType  
9 - const self = this  
10 -  
11 - const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';  
12 - const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';  
13 - const s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";  
14 - const gn = 'mxgraph.charts';  
15 - const dt = 'charts ';  
16 - const sb = this;  
17 -  
18 - this.setCurrentSearchEntryLibrary('charts');  
19 -  
20 - const fns = [  
21 - this.addEntry('line chart', mxUtils.bind(this, function () {  
22 - const id = self.generatorChartsId()  
23 - const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.LINE_CHART)  
24 - return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '折线图');  
25 - })),  
26 - this.addEntry('bar chart', mxUtils.bind(this, function () {  
27 - const id = self.generatorChartsId()  
28 - const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.BAR_CHART, '/thingskit-drawio/images/thingskit/bar-chart.png')  
29 - return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '柱状图');  
30 - })),  
31 - ];  
32 -  
33 - this.addPaletteFunctions('charts', '图表', false, fns);  
34 -  
35 - this.setCurrentSearchEntryLibrary();  
36 - };  
37 -  
38 - /**  
39 - * @description echarts 实例映射  
40 - * @type {Map<any, any>}  
41 - */  
42 - Sidebar.prototype.chartsInstanceMapping = new Map()  
43 -  
44 - /**  
45 - * @description Sidebar 类型枚举  
46 - * @type {{CHART_CELL_DEFAULT_WIDTH: number, CHART_CELL_HEIGHT: string, CHART_CELL_DEFAULT_HEIGHT: number, CHART_TYPE_KEY: string, CHART_CELL_WIDTH: string, CHART_COMP: string, CHART_CELL_ID: string, CHART_CONTAINER_ID_PREFIX: string, CHART_IMG_PLACEHOLDER_SIZE: number, COMPONENT_TYPE_KEY: string, CHART_CONTAINER_CLS: string}}  
47 - */  
48 - Sidebar.prototype.enumConst = { 2 + const enumConst = {
49 3
50 /** 4 /**
51 * @description 图表cell 默认宽度 5 * @description 图表cell 默认宽度
@@ -68,21 +22,11 @@ @@ -68,21 +22,11 @@
68 CHART_CELL_HEIGHT: 'height', 22 CHART_CELL_HEIGHT: 'height',
69 23
70 /** 24 /**
71 - * @description cell 类型是否为 charts  
72 - */  
73 - CHART_COMP: Sidebar.prototype.enumComponentType.CHARTS,  
74 -  
75 - /**  
76 * @description cell id key 25 * @description cell id key
77 */ 26 */
78 CHART_CELL_ID: 'chartInstanceId', 27 CHART_CELL_ID: 'chartInstanceId',
79 28
80 /** 29 /**
81 - * @description 组件类型 key  
82 - */  
83 - COMPONENT_TYPE_KEY: Sidebar.prototype.enumCellBasicAttribute.COMPONENT_TYPE,  
84 -  
85 - /**  
86 * @description 图表容器 class name 30 * @description 图表容器 class name
87 */ 31 */
88 CHART_CONTAINER_CLS: 'echarts__instance', 32 CHART_CONTAINER_CLS: 'echarts__instance',
@@ -96,28 +40,55 @@ @@ -96,28 +40,55 @@
96 * @description 图表图片占位符大小 40 * @description 图表图片占位符大小
97 */ 41 */
98 CHART_IMG_PLACEHOLDER_SIZE: 30, 42 CHART_IMG_PLACEHOLDER_SIZE: 30,
99 -  
100 - /**  
101 - * @description 图表类型 key  
102 - */  
103 - CHART_TYPE_KEY: 'chartType',  
104 } 43 }
105 44
  45 + // Adds Atlassian shapes
  46 + // 图表
  47 + Sidebar.prototype.addChartsPalette = function () {
  48 + this.chartsComponentInit()
  49 + const self = this
  50 + const componentType = this.enumComponentType
  51 + const { DATA_SOURCE, DYNAMIC_EFFECT, DISPLAY_TYPE } = this.enumPermissionPanel
  52 +
  53 + const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
  54 + const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
  55 + const s3 = mxConstants.STYLE_STROKEWIDTH + '=1;shadow=0;dashed=0;align=center;html=1;' + mxConstants.STYLE_SHAPE + "=mxgraph.mockup.";
  56 + const gn = 'mxgraph.charts';
  57 + const dt = 'charts ';
  58 + const sb = this;
  59 +
  60 + this.setCurrentSearchEntryLibrary('charts');
  61 +
  62 + const fns = [
  63 + this.addEntry('line chart', mxUtils.bind(this, function () {
  64 + const id = self.generatorChartsId()
  65 + const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.LINE_CHART)
  66 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '折线图');
  67 + })),
  68 + this.addEntry('bar chart', mxUtils.bind(this, function () {
  69 + const id = self.generatorChartsId()
  70 + const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, componentType.BAR_CHART, '/thingskit-drawio/images/thingskit/bar-chart.png')
  71 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '柱状图');
  72 + })),
  73 + ];
  74 +
  75 + this.addPaletteFunctions('charts', '图表', false, fns);
  76 +
  77 + this.setCurrentSearchEntryLibrary();
  78 + };
  79 +
106 /** 80 /**
107 - * @description 图表类型值  
108 - * @type {{LINE_CHART: string, BAR_CHART: string}} 81 + * @description echarts 实例映射
  82 + * @type {Map<any, any>}
109 */ 83 */
110 - Sidebar.prototype.enumChartType = {  
111 - LINE_CHART: 'lineChart',  
112 - BAR_CHART: 'barChart',  
113 - } 84 + Sidebar.prototype.chartsInstanceMapping = new Map()
114 85
115 /** 86 /**
116 * @description 图表options 映射 87 * @description 图表options 映射
117 * @type {{[p: string]: (function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, type: string}]})|(function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, showBackground: boolean, backgroundStyle: {color: string}, type: string}]})}} 88 * @type {{[p: string]: (function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, type: string}]})|(function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, showBackground: boolean, backgroundStyle: {color: string}, type: string}]})}}
118 */ 89 */
119 Sidebar.prototype.chartOptionMapping = { 90 Sidebar.prototype.chartOptionMapping = {
120 - [Sidebar.prototype.enumChartType.LINE_CHART]: function () { 91 + [Sidebar.prototype.enumComponentType.LINE_CHART]: function () {
121 return { 92 return {
122 xAxis: { 93 xAxis: {
123 type: 'category', 94 type: 'category',
@@ -134,7 +105,7 @@ @@ -134,7 +105,7 @@
134 ], 105 ],
135 } 106 }
136 }, 107 },
137 - [Sidebar.prototype.enumChartType.BAR_CHART]: function () { 108 + [Sidebar.prototype.enumComponentType.BAR_CHART]: function () {
138 return { 109 return {
139 xAxis: { 110 xAxis: {
140 type: 'category', 111 type: 'category',
@@ -167,14 +138,15 @@ @@ -167,14 +138,15 @@
167 * @returns {*} 138 * @returns {*}
168 */ 139 */
169 Sidebar.prototype.generatorCell = function (id, width, height, chartType, placeholderPath) { 140 Sidebar.prototype.generatorCell = function (id, width, height, chartType, placeholderPath) {
170 - const enumConst = this.enumConst  
171 const cell = new mxCell(this.createChartsNode(id, width, height, placeholderPath), new mxGeometry(0, 0, width, height), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;'); 141 const cell = new mxCell(this.createChartsNode(id, width, height, placeholderPath), new mxGeometry(0, 0, width, height), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
172 cell.setVertex(true) 142 cell.setVertex(true)
173 - this.graph.setAttributeForCell(cell, enumConst.COMPONENT_TYPE_KEY, 'charts');  
174 - this.graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);  
175 - this.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)  
176 - this.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)  
177 - this.graph.setAttributeForCell(cell, enumConst.CHART_TYPE_KEY, chartType) 143 + const basicAttr = this.enumCellBasicAttribute
  144 + this.setCellAttributes(cell, {
  145 + [basicAttr.COMPONENT_TYPE]: chartType,
  146 + [enumConst.CHART_CELL_ID]: id,
  147 + [enumConst.CHART_CELL_WIDTH]: width,
  148 + [enumConst.CHART_CELL_HEIGHT]: height,
  149 + })
178 return cell 150 return cell
179 } 151 }
180 152
@@ -184,7 +156,6 @@ @@ -184,7 +156,6 @@
184 * @returns {string} 156 * @returns {string}
185 */ 157 */
186 Sidebar.prototype.generatorChartsId = function () { 158 Sidebar.prototype.generatorChartsId = function () {
187 - const enumConst = Sidebar.prototype.enumConst  
188 return `${enumConst.CHART_CONTAINER_ID_PREFIX}${Date.now()}` 159 return `${enumConst.CHART_CONTAINER_ID_PREFIX}${Date.now()}`
189 } 160 }
190 161
@@ -206,9 +177,10 @@ @@ -206,9 +177,10 @@
206 * @returns {boolean} 177 * @returns {boolean}
207 */ 178 */
208 Sidebar.prototype.isChartCell = function (cell) { 179 Sidebar.prototype.isChartCell = function (cell) {
209 - const enumConst = Sidebar.prototype.enumConst  
210 - const componentType = cell.getAttribute(enumConst.COMPONENT_TYPE_KEY)  
211 - return !!(componentType && componentType === enumConst.CHART_COMP) 180 + const basitAttr = this.enumCellBasicAttribute
  181 + const componentType = this.enumComponentType
  182 + const currentType = cell.getAttribute(basitAttr.COMPONENT_TYPE)
  183 + return !!(currentType && (currentType === componentType.LINE_CHART || currentType === componentType.BAR_CHART))
212 } 184 }
213 185
214 /** 186 /**
@@ -236,7 +208,7 @@ @@ -236,7 +208,7 @@
236 * @returns {*} 208 * @returns {*}
237 */ 209 */
238 Sidebar.prototype.getCellId = function (cell) { 210 Sidebar.prototype.getCellId = function (cell) {
239 - return this.graph.getAttributeForCell(cell, this.enumConst.CHART_CELL_ID) 211 + return this.graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
240 } 212 }
241 213
242 /** 214 /**
@@ -244,9 +216,9 @@ @@ -244,9 +216,9 @@
244 */ 216 */
245 Sidebar.prototype.chartsComponentInit = function () { 217 Sidebar.prototype.chartsComponentInit = function () {
246 const chartsInstanceMapping = this.chartsInstanceMapping 218 const chartsInstanceMapping = this.chartsInstanceMapping
247 - const enumConst = this.enumConst  
248 const graph = this.graph 219 const graph = this.graph
249 const self = this 220 const self = this
  221 + const basicAttr = this.enumCellBasicAttribute
250 /** 222 /**
251 * @description 拓展添加charts 实例方法 223 * @description 拓展添加charts 实例方法
252 */ 224 */
@@ -285,7 +257,7 @@ @@ -285,7 +257,7 @@
285 } finally { 257 } finally {
286 if (validate) { 258 if (validate) {
287 const id = self.getCellId(cell) 259 const id = self.getCellId(cell)
288 - const chartType = cell.getAttribute(enumConst.CHART_TYPE_KEY) 260 + const chartType = cell.getAttribute(basicAttr.COMPONENT_TYPE)
289 self.generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType) 261 self.generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
290 262
291 } 263 }
@@ -331,9 +303,9 @@ @@ -331,9 +303,9 @@
331 const createTooltip = Sidebar.prototype.createTooltip 303 const createTooltip = Sidebar.prototype.createTooltip
332 Sidebar.prototype.createTooltip = function (elt, cells) { 304 Sidebar.prototype.createTooltip = function (elt, cells) {
333 const id = self.generatorChartsId() 305 const id = self.generatorChartsId()
334 - const enumConst = self.enumConst  
335 const validateFlag = self.isChartCell(cells[0]) 306 const validateFlag = self.isChartCell(cells[0])
336 - const chartType = graph.getAttributeForCell(cells[0], enumConst.CHART_TYPE_KEY) 307 +
  308 + const chartType = graph.getAttributeForCell(cells[0], basicAttr.COMPONENT_TYPE)
337 try { 309 try {
338 if (validateFlag) { 310 if (validateFlag) {
339 const cell = self.generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType) 311 const cell = self.generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
@@ -354,7 +326,7 @@ @@ -354,7 +326,7 @@
354 * @param graph 326 * @param graph
355 */ 327 */
356 Sidebar.prototype.initChartInstance = function (graph) { 328 Sidebar.prototype.initChartInstance = function (graph) {
357 - const enumConst = Sidebar.prototype.enumConst 329 + const basicAttr = this.enumCellBasicAttribute
358 const allCell = graph.getDefaultParent().children 330 const allCell = graph.getDefaultParent().children
359 const domIdMapping = new Map() 331 const domIdMapping = new Map()
360 for (const cell of allCell) { 332 for (const cell of allCell) {
@@ -362,7 +334,7 @@ @@ -362,7 +334,7 @@
362 if (Sidebar.prototype.isChartCell(cell) && chartInstanceId) { 334 if (Sidebar.prototype.isChartCell(cell) && chartInstanceId) {
363 const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH) 335 const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
364 const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT) 336 const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
365 - const chartType = graph.getAttributeForCell(cell, enumConst.CHART_TYPE_KEY) 337 + const chartType = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
366 domIdMapping.set(chartInstanceId, { width, height, chartType }) 338 domIdMapping.set(chartInstanceId, { width, height, chartType })
367 } 339 }
368 } 340 }
@@ -3,34 +3,60 @@ @@ -3,34 +3,60 @@
3 // Adds Atlassian shapes 3 // Adds Atlassian shapes
4 // conduit 管道 4 // conduit 管道
5 Sidebar.prototype.addConduitPalette = function () { 5 Sidebar.prototype.addConduitPalette = function () {
6 - var gn = 'mxgraph.conduit';  
7 - var dt = 'conduit';  
8 - var width = 66;  
9 - var height = 74;  
10 - this.setCurrentSearchEntryLibrary('conduit');  
11 -  
12 - var fns = [  
13 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/Y形接头.svg;imageAspect=0;', width, height, '', 'Y形接头', null, null, this.getTagsForStencil(gn, 'Y形接头', dt).join(' ')),  
14 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/三通.svg;imageAspect=0;', width, height, '', '三通', null, null, this.getTagsForStencil(gn, '三通', dt).join(' ')),  
15 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/四通.svg;imageAspect=0;', width, height, '', '四通', null, null, this.getTagsForStencil(gn, '四通', dt).join(' ')),  
16 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/斜三通 上.svg;imageAspect=0;', width, height, '', '斜三通 上', null, null, this.getTagsForStencil(gn, '斜三通 上', dt).join(' ')),  
17 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/斜三通 下.svg;imageAspect=0;', width, height, '', '斜三通 下', null, null, this.getTagsForStencil(gn, '斜三通 下', dt).join(' ')),  
18 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/斜四通.svg;imageAspect=0;', width, height, '', '斜四通', null, null, this.getTagsForStencil(gn, '斜四通', dt).join(' ')),  
19 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/斜面弯管 1.svg;imageAspect=0;', width, height, '', '斜面弯管 1', null, null, this.getTagsForStencil(gn, '斜面弯管 1', dt).join(' ')),  
20 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/斜面弯管 2.svg;imageAspect=0;', width, height, '', '斜面弯管 2', null, null, this.getTagsForStencil(gn, '斜面弯管 2', dt).join(' ')),  
21 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/斜面弯管 3.svg;imageAspect=0;', width, height, '', '斜面弯管 3', null, null, this.getTagsForStencil(gn, '斜面弯管 3', dt).join(' ')),  
22 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/斜面弯管 4.svg;imageAspect=0;', width, height, '', '斜面弯管 4', null, null, this.getTagsForStencil(gn, '斜面弯管 4', dt).join(' ')),  
23 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/直管 2.svg;imageAspect=0;', width, height, '', '直管 2', null, null, this.getTagsForStencil(gn, '直管 2', dt).join(' ')),  
24 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/直管.svg;imageAspect=0;', width, height, '', '直管', null, null, this.getTagsForStencil(gn, '直管', dt).join(' ')),  
25 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/转换接头 2.svg;imageAspect=0;', width, height, '', '转换接头 2', null, null, this.getTagsForStencil(gn, '转换接头 2', dt).join(' ')),  
26 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/转换接头 3.svg;imageAspect=0;', width, height, '', '转换接头 3', null, null, this.getTagsForStencil(gn, '转换接头 3', dt).join(' ')),  
27 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/转换接头 4.svg;imageAspect=0;', width, height, '', '转换接头 4', null, null, this.getTagsForStencil(gn, '转换接头 4', dt).join(' ')),  
28 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/转换接头 5.svg;imageAspect=0;', width, height, '', '转换接头 5', null, null, this.getTagsForStencil(gn, '转换接头 5', dt).join(' ')),  
29 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/conduit/转换接头.svg;imageAspect=0;', width, height, '', '转换接头', null, null, this.getTagsForStencil(gn, '转换接头', dt).join(' ')),  
30 -  
31 - ];  
32 -  
33 - this.addPaletteFunctions('conduit', '管道', false, fns); 6 + const { COMPONENT_TYPE } = this.enumCellBasicAttribute
  7 + const { DEFAULT } = this.enumComponentType
  8 + const gn = 'mxgraph.conduit';
  9 + const dt = 'conduit';
  10 + const label = '管道'
  11 + const width = 66;
  12 + const height = 74;
  13 + const staticPath = '/thingskit-drawio/img/lib/thingskit/'
  14 + const prefix = 'image;image=img/lib/thingskit/'
  15 + const defaultStyle = ';imageAspect=0;'
  16 + this.setCurrentSearchEntryLibrary(dt);
  17 +
  18 + // 自定义属性
  19 + const cellAttribute = {
  20 + [COMPONENT_TYPE]: DEFAULT
  21 + }
  22 +
  23 + const graphPathLib = [
  24 + { name: 'Y形接头.svg', path: 'conduit/Y形接头.svg' },
  25 + { name: '三通.svg', path: 'conduit/三通.svg' },
  26 + { name: '四通.svg', path: 'conduit/四通.svg' },
  27 + { name: '斜三通 上.svg', path: 'conduit/斜三通 上.svg' },
  28 + { name: '斜三通 下.svg', path: 'conduit/斜三通 下.svg' },
  29 + { name: '斜四通.svg', path: 'conduit/斜四通.svg' },
  30 + { name: '斜面弯管 1.svg', path: 'conduit/斜面弯管 1.svg' },
  31 + { name: '斜面弯管 2.svg', path: 'conduit/斜面弯管 2.svg' },
  32 + { name: '斜面弯管 3.svg', path: 'conduit/斜面弯管 3.svg' },
  33 + { name: '斜面弯管 4.svg', path: 'conduit/斜面弯管 4.svg' },
  34 + { name: '直管 2.svg', path: 'conduit/直管 2.svg' },
  35 + { name: '直管.svg', path: 'conduit/直管.svg' },
  36 + { name: '转换接头 2.svg', path: 'conduit/转换接头 2.svg' },
  37 + { name: '转换接头 3.svg', path: 'conduit/转换接头 3.svg' },
  38 + { name: '转换接头 4.svg', path: 'conduit/转换接头 4.svg' },
  39 + { name: '转换接头 5.svg', path: 'conduit/转换接头 5.svg' },
  40 + { name: '转换接头.svg', path: 'conduit/转换接头.svg' },
  41 + ]
  42 +
  43 + const lib = graphPathLib.map(item => {
  44 + item.staticPath = staticPath + item.path
  45 + return item
  46 + })
  47 +
  48 + const fns = graphPathLib.map(item => {
  49 + return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
  50 + const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
  51 + cell.setVertex(true)
  52 + this.setCellAttributes(cell, cellAttribute)
  53 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);
  54 + }));
  55 + })
  56 +
  57 + this.setVariableImageLib(dt, label, lib)
  58 +
  59 + this.addPaletteFunctions(dt, label, false, fns);
34 60
35 this.setCurrentSearchEntryLibrary(); 61 this.setCurrentSearchEntryLibrary();
36 }; 62 };
  1 +
1 (function () { 2 (function () {
2 // Adds Atlassian shapes 3 // Adds Atlassian shapes
3 // engine 发动机 4 // engine 发动机
4 Sidebar.prototype.addEnginePalette = function () { 5 Sidebar.prototype.addEnginePalette = function () {
  6 + const { COMPONENT_TYPE } = this.enumCellBasicAttribute
  7 + const { DEFAULT } = this.enumComponentType
5 const gn = 'mxgraph.engine'; 8 const gn = 'mxgraph.engine';
6 const dt = 'engine'; 9 const dt = 'engine';
7 const label = '发动机' 10 const label = '发动机'
@@ -13,7 +16,9 @@ @@ -13,7 +16,9 @@
13 this.setCurrentSearchEntryLibrary(dt); 16 this.setCurrentSearchEntryLibrary(dt);
14 17
15 // 自定义属性 18 // 自定义属性
16 - const cellAttribute = {} 19 + const cellAttribute = {
  20 + [COMPONENT_TYPE]: DEFAULT
  21 + }
17 22
18 const graphPathLib = [ 23 const graphPathLib = [
19 { name: '3-D 发动机.svg', path: 'engine/3-D 发动机.svg' }, 24 { name: '3-D 发动机.svg', path: 'engine/3-D 发动机.svg' },
@@ -43,10 +48,10 @@ @@ -43,10 +48,10 @@
43 48
44 const fns = graphPathLib.map(item => { 49 const fns = graphPathLib.map(item => {
45 return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () { 50 return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
46 - const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${ prefix }${ item.path }${ defaultStyle }`); 51 + const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
47 cell.setVertex(true) 52 cell.setVertex(true)
48 this.setCellAttributes(cell, cellAttribute) 53 this.setCellAttributes(cell, cellAttribute)
49 - return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, item.name); 54 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);
50 })); 55 }));
51 }) 56 })
52 57
1 1
2 (function () { 2 (function () {
3 // Adds Atlassian shapes 3 // Adds Atlassian shapes
4 - // fan 4 + // fan 风机
5 Sidebar.prototype.addFanPalette = function () { 5 Sidebar.prototype.addFanPalette = function () {
  6 + const { COMPONENT_TYPE } = this.enumCellBasicAttribute
  7 + const { DEFAULT } = this.enumComponentType
6 const gn = 'mxgraph.fan'; 8 const gn = 'mxgraph.fan';
7 const dt = 'fan'; 9 const dt = 'fan';
8 const label = '风机' 10 const label = '风机'
@@ -13,6 +15,11 @@ @@ -13,6 +15,11 @@
13 const defaultStyle = ';imageAspect=0;' 15 const defaultStyle = ';imageAspect=0;'
14 this.setCurrentSearchEntryLibrary(dt); 16 this.setCurrentSearchEntryLibrary(dt);
15 17
  18 + // 自定义属性
  19 + const cellAttribute = {
  20 + [COMPONENT_TYPE]: DEFAULT
  21 + }
  22 +
16 const graphPathLib = [ 23 const graphPathLib = [
17 { name: '风机1.png', path: 'fan/风机1.png' }, 24 { name: '风机1.png', path: 'fan/风机1.png' },
18 { name: '风机2.png', path: 'fan/风机2.png' }, 25 { name: '风机2.png', path: 'fan/风机2.png' },
@@ -30,7 +37,12 @@ @@ -30,7 +37,12 @@
30 }) 37 })
31 38
32 const fns = graphPathLib.map(item => { 39 const fns = graphPathLib.map(item => {
33 - return this.createVertexTemplateEntry(`${ prefix }${ item.path }${ defaultStyle }`, width, height, '', item.name, null, null, this.getTagsForStencil(gn, item.name, dt).join(' ')) 40 + return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
  41 + const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
  42 + cell.setVertex(true)
  43 + this.setCellAttributes(cell, cellAttribute)
  44 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);
  45 + }));
34 }) 46 })
35 47
36 this.setVariableImageLib(dt, label, lib) 48 this.setVariableImageLib(dt, label, lib)
@@ -3,29 +3,55 @@ @@ -3,29 +3,55 @@
3 // Adds Atlassian shapes 3 // Adds Atlassian shapes
4 // instrument 仪表 4 // instrument 仪表
5 Sidebar.prototype.addInstrumentPalette = function () { 5 Sidebar.prototype.addInstrumentPalette = function () {
6 - var gn = 'mxgraph.instrument';  
7 - var dt = 'instrument';  
8 - var width = 66;  
9 - var height = 74;  
10 - this.setCurrentSearchEntryLibrary('instrument');  
11 -  
12 - var fns = [  
13 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 1.svg;imageAspect=0;', width, height, '', '仪表 1', null, null, this.getTagsForStencil(gn, '仪表 1', dt).join(' ')),  
14 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 10.svg;imageAspect=0;', width, height, '', '仪表 10', null, null, this.getTagsForStencil(gn, '仪表 10', dt).join(' ')),  
15 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 11.svg;imageAspect=0;', width, height, '', '仪表 11', null, null, this.getTagsForStencil(gn, '仪表 11', dt).join(' ')),  
16 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 12.svg;imageAspect=0;', width, height, '', '仪表 12', null, null, this.getTagsForStencil(gn, '仪表 12', dt).join(' ')),  
17 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 2.svg;imageAspect=0;', width, height, '', '仪表 2', null, null, this.getTagsForStencil(gn, '仪表 2', dt).join(' ')),  
18 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 3.svg;imageAspect=0;', width, height, '', '仪表 3', null, null, this.getTagsForStencil(gn, '仪表 3', dt).join(' ')),  
19 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 4.svg;imageAspect=0;', width, height, '', '仪表 4', null, null, this.getTagsForStencil(gn, '仪表 4', dt).join(' ')),  
20 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 5.svg;imageAspect=0;', width, height, '', '仪表 5', null, null, this.getTagsForStencil(gn, '仪表 5', dt).join(' ')),  
21 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 6.svg;imageAspect=0;', width, height, '', '仪表 6', null, null, this.getTagsForStencil(gn, '仪表 6', dt).join(' ')),  
22 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 7.svg;imageAspect=0;', width, height, '', '仪表 7', null, null, this.getTagsForStencil(gn, '仪表 7', dt).join(' ')),  
23 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 8.svg;imageAspect=0;', width, height, '', '仪表 8', null, null, this.getTagsForStencil(gn, '仪表 8', dt).join(' ')),  
24 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/instrument/仪表 9.svg;imageAspect=0;', width, height, '', '仪表 9', null, null, this.getTagsForStencil(gn, '仪表 9', dt).join(' ')),  
25 -  
26 - ];  
27 -  
28 - this.addPaletteFunctions('instrument', '仪表', false, fns); 6 + const { COMPONENT_TYPE } = this.enumCellBasicAttribute
  7 + const { DEFAULT } = this.enumComponentType
  8 + const gn = 'mxgraph.instrument';
  9 + const dt = 'instrument';
  10 + const label = '仪表'
  11 + const width = 66;
  12 + const height = 74;
  13 + const staticPath = '/thingskit-drawio/img/lib/thingskit/'
  14 + const prefix = 'image;image=img/lib/thingskit/'
  15 + const defaultStyle = ';imageAspect=0;'
  16 + this.setCurrentSearchEntryLibrary(dt);
  17 +
  18 + // 自定义属性
  19 + const cellAttribute = {
  20 + [COMPONENT_TYPE]: DEFAULT
  21 + }
  22 +
  23 + const graphPathLib = [
  24 + { name: '仪表 1.svg', path: 'instrument/仪表 1.svg' },
  25 + { name: '仪表 10.svg', path: 'instrument/仪表 10.svg' },
  26 + { name: '仪表 11.svg', path: 'instrument/仪表 11.svg' },
  27 + { name: '仪表 12.svg', path: 'instrument/仪表 12.svg' },
  28 + { name: '仪表 2.svg', path: 'instrument/仪表 2.svg' },
  29 + { name: '仪表 3.svg', path: 'instrument/仪表 3.svg' },
  30 + { name: '仪表 4.svg', path: 'instrument/仪表 4.svg' },
  31 + { name: '仪表 5.svg', path: 'instrument/仪表 5.svg' },
  32 + { name: '仪表 6.svg', path: 'instrument/仪表 6.svg' },
  33 + { name: '仪表 7.svg', path: 'instrument/仪表 7.svg' },
  34 + { name: '仪表 8.svg', path: 'instrument/仪表 8.svg' },
  35 + { name: '仪表 9.svg', path: 'instrument/仪表 9.svg' },
  36 + ]
  37 +
  38 + const lib = graphPathLib.map(item => {
  39 + item.staticPath = staticPath + item.path
  40 + return item
  41 + })
  42 +
  43 + const fns = graphPathLib.map(item => {
  44 + return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
  45 + const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
  46 + cell.setVertex(true)
  47 + this.setCellAttributes(cell, cellAttribute)
  48 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);
  49 + }));
  50 + })
  51 +
  52 + this.setVariableImageLib(dt, label, lib)
  53 +
  54 + this.addPaletteFunctions(dt, label, false, fns);
29 55
30 this.setCurrentSearchEntryLibrary(); 56 this.setCurrentSearchEntryLibrary();
31 }; 57 };
@@ -3,54 +3,80 @@ @@ -3,54 +3,80 @@
3 // Adds Atlassian shapes 3 // Adds Atlassian shapes
4 // light 灯 4 // light 灯
5 Sidebar.prototype.addLightPalette = function () { 5 Sidebar.prototype.addLightPalette = function () {
6 - var gn = 'mxgraph.light';  
7 - var dt = 'light';  
8 - var width = 66;  
9 - var height = 74;  
10 - this.setCurrentSearchEntryLibrary('light');  
11 -  
12 - var fns = [  
13 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/1.png;imageAspect=0;', width, height, '', '1', null, null, this.getTagsForStencil(gn, '1', dt).join(' ')),  
14 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/10.png;imageAspect=0;', width, height, '', '10', null, null, this.getTagsForStencil(gn, '10', dt).join(' ')),  
15 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/11.png;imageAspect=0;', width, height, '', '11', null, null, this.getTagsForStencil(gn, '11', dt).join(' ')),  
16 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/12.png;imageAspect=0;', width, height, '', '12', null, null, this.getTagsForStencil(gn, '12', dt).join(' ')),  
17 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/13.png;imageAspect=0;', width, height, '', '13', null, null, this.getTagsForStencil(gn, '13', dt).join(' ')),  
18 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/14.png;imageAspect=0;', width, height, '', '14', null, null, this.getTagsForStencil(gn, '14', dt).join(' ')),  
19 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/15.png;imageAspect=0;', width, height, '', '15', null, null, this.getTagsForStencil(gn, '15', dt).join(' ')),  
20 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/16.png;imageAspect=0;', width, height, '', '16', null, null, this.getTagsForStencil(gn, '16', dt).join(' ')),  
21 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/17.png;imageAspect=0;', width, height, '', '17', null, null, this.getTagsForStencil(gn, '17', dt).join(' ')),  
22 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/18.png;imageAspect=0;', width, height, '', '18', null, null, this.getTagsForStencil(gn, '18', dt).join(' ')),  
23 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/19.png;imageAspect=0;', width, height, '', '19', null, null, this.getTagsForStencil(gn, '19', dt).join(' ')),  
24 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/2.png;imageAspect=0;', width, height, '', '2', null, null, this.getTagsForStencil(gn, '2', dt).join(' ')),  
25 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/20.png;imageAspect=0;', width, height, '', '20', null, null, this.getTagsForStencil(gn, '20', dt).join(' ')),  
26 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/21.png;imageAspect=0;', width, height, '', '21', null, null, this.getTagsForStencil(gn, '21', dt).join(' ')),  
27 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/22.png;imageAspect=0;', width, height, '', '22', null, null, this.getTagsForStencil(gn, '22', dt).join(' ')),  
28 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/23.png;imageAspect=0;', width, height, '', '23', null, null, this.getTagsForStencil(gn, '23', dt).join(' ')),  
29 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/24.png;imageAspect=0;', width, height, '', '24', null, null, this.getTagsForStencil(gn, '24', dt).join(' ')),  
30 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/25.png;imageAspect=0;', width, height, '', '25', null, null, this.getTagsForStencil(gn, '25', dt).join(' ')),  
31 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/26.png;imageAspect=0;', width, height, '', '26', null, null, this.getTagsForStencil(gn, '26', dt).join(' ')),  
32 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/27.png;imageAspect=0;', width, height, '', '27', null, null, this.getTagsForStencil(gn, '27', dt).join(' ')),  
33 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/28.png;imageAspect=0;', width, height, '', '28', null, null, this.getTagsForStencil(gn, '28', dt).join(' ')),  
34 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/29.png;imageAspect=0;', width, height, '', '29', null, null, this.getTagsForStencil(gn, '29', dt).join(' ')),  
35 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/3.png;imageAspect=0;', width, height, '', '3', null, null, this.getTagsForStencil(gn, '3', dt).join(' ')),  
36 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/30.png;imageAspect=0;', width, height, '', '30', null, null, this.getTagsForStencil(gn, '30', dt).join(' ')),  
37 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/31.png;imageAspect=0;', width, height, '', '31', null, null, this.getTagsForStencil(gn, '31', dt).join(' ')),  
38 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/32.png;imageAspect=0;', width, height, '', '32', null, null, this.getTagsForStencil(gn, '32', dt).join(' ')),  
39 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/33.png;imageAspect=0;', width, height, '', '33', null, null, this.getTagsForStencil(gn, '33', dt).join(' ')),  
40 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/34.png;imageAspect=0;', width, height, '', '34', null, null, this.getTagsForStencil(gn, '34', dt).join(' ')),  
41 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/35.png;imageAspect=0;', width, height, '', '35', null, null, this.getTagsForStencil(gn, '35', dt).join(' ')),  
42 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/36.png;imageAspect=0;', width, height, '', '36', null, null, this.getTagsForStencil(gn, '36', dt).join(' ')),  
43 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/37.png;imageAspect=0;', width, height, '', '37', null, null, this.getTagsForStencil(gn, '37', dt).join(' ')),  
44 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/4.png;imageAspect=0;', width, height, '', '4', null, null, this.getTagsForStencil(gn, '4', dt).join(' ')),  
45 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/5.png;imageAspect=0;', width, height, '', '5', null, null, this.getTagsForStencil(gn, '5', dt).join(' ')),  
46 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/6.png;imageAspect=0;', width, height, '', '6', null, null, this.getTagsForStencil(gn, '6', dt).join(' ')),  
47 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/7.png;imageAspect=0;', width, height, '', '7', null, null, this.getTagsForStencil(gn, '7', dt).join(' ')),  
48 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/8.png;imageAspect=0;', width, height, '', '8', null, null, this.getTagsForStencil(gn, '8', dt).join(' ')),  
49 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/light/9.png;imageAspect=0;', width, height, '', '9', null, null, this.getTagsForStencil(gn, '9', dt).join(' ')),  
50 -  
51 - ];  
52 -  
53 - this.addPaletteFunctions('light', '灯', false, fns); 6 + const { COMPONENT_TYPE } = this.enumCellBasicAttribute
  7 + const { DEFAULT } = this.enumComponentType
  8 + const gn = 'mxgraph.light';
  9 + const dt = 'light';
  10 + const label = '灯'
  11 + const width = 66;
  12 + const height = 74;
  13 + const staticPath = '/thingskit-drawio/img/lib/thingskit/'
  14 + const prefix = 'image;image=img/lib/thingskit/'
  15 + const defaultStyle = ';imageAspect=0;'
  16 + this.setCurrentSearchEntryLibrary(dt);
  17 +
  18 + // 自定义属性
  19 + const cellAttribute = {
  20 + [COMPONENT_TYPE]: DEFAULT
  21 + }
  22 +
  23 + const graphPathLib = [
  24 + { name: '1.png', path: 'light/1.png' },
  25 + { name: '10.png', path: 'light/10.png' },
  26 + { name: '11.png', path: 'light/11.png' },
  27 + { name: '12.png', path: 'light/12.png' },
  28 + { name: '13.png', path: 'light/13.png' },
  29 + { name: '14.png', path: 'light/14.png' },
  30 + { name: '15.png', path: 'light/15.png' },
  31 + { name: '16.png', path: 'light/16.png' },
  32 + { name: '17.png', path: 'light/17.png' },
  33 + { name: '18.png', path: 'light/18.png' },
  34 + { name: '19.png', path: 'light/19.png' },
  35 + { name: '2.png', path: 'light/2.png' },
  36 + { name: '20.png', path: 'light/20.png' },
  37 + { name: '21.png', path: 'light/21.png' },
  38 + { name: '22.png', path: 'light/22.png' },
  39 + { name: '23.png', path: 'light/23.png' },
  40 + { name: '24.png', path: 'light/24.png' },
  41 + { name: '25.png', path: 'light/25.png' },
  42 + { name: '26.png', path: 'light/26.png' },
  43 + { name: '27.png', path: 'light/27.png' },
  44 + { name: '28.png', path: 'light/28.png' },
  45 + { name: '29.png', path: 'light/29.png' },
  46 + { name: '3.png', path: 'light/3.png' },
  47 + { name: '30.png', path: 'light/30.png' },
  48 + { name: '31.png', path: 'light/31.png' },
  49 + { name: '32.png', path: 'light/32.png' },
  50 + { name: '33.png', path: 'light/33.png' },
  51 + { name: '34.png', path: 'light/34.png' },
  52 + { name: '35.png', path: 'light/35.png' },
  53 + { name: '36.png', path: 'light/36.png' },
  54 + { name: '37.png', path: 'light/37.png' },
  55 + { name: '4.png', path: 'light/4.png' },
  56 + { name: '5.png', path: 'light/5.png' },
  57 + { name: '6.png', path: 'light/6.png' },
  58 + { name: '7.png', path: 'light/7.png' },
  59 + { name: '8.png', path: 'light/8.png' },
  60 + { name: '9.png', path: 'light/9.png' },
  61 + ]
  62 +
  63 + const lib = graphPathLib.map(item => {
  64 + item.staticPath = staticPath + item.path
  65 + return item
  66 + })
  67 +
  68 + const fns = graphPathLib.map(item => {
  69 + return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
  70 + const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
  71 + cell.setVertex(true)
  72 + this.setCellAttributes(cell, cellAttribute)
  73 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);
  74 + }));
  75 + })
  76 +
  77 + this.setVariableImageLib(dt, label, lib)
  78 +
  79 + this.addPaletteFunctions(dt, label, false, fns);
54 80
55 this.setCurrentSearchEntryLibrary(); 81 this.setCurrentSearchEntryLibrary();
56 }; 82 };
1 1
2 (function () { 2 (function () {
3 // Adds Atlassian shapes 3 // Adds Atlassian shapes
4 - // sewage 污水处理 4 + // sewage 污水处理
5 Sidebar.prototype.addSewagePalette = function () { 5 Sidebar.prototype.addSewagePalette = function () {
6 - var gn = 'mxgraph.sewage';  
7 - var dt = 'sewage';  
8 - var width = 66;  
9 - var height = 74;  
10 - this.setCurrentSearchEntryLibrary('sewage'); 6 + const { COMPONENT_TYPE } = this.enumCellBasicAttribute
  7 + const { DEFAULT } = this.enumComponentType
  8 + const gn = 'mxgraph.sewage';
  9 + const dt = 'sewage';
  10 + const label = '污水处理'
  11 + const width = 66;
  12 + const height = 74;
  13 + const staticPath = '/thingskit-drawio/img/lib/thingskit/'
  14 + const prefix = 'image;image=img/lib/thingskit/'
  15 + const defaultStyle = ';imageAspect=0;'
  16 + this.setCurrentSearchEntryLibrary(dt);
11 17
12 - var fns = [  
13 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/中央净水器.svg;imageAspect=0;', width, height, '', '中央净水器', null, null, this.getTagsForStencil(gn, '中央净水器', dt).join(' ')),  
14 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/中央软水器.svg;imageAspect=0;', width, height, '', '中央软水器', null, null, this.getTagsForStencil(gn, '中央软水器', dt).join(' ')),  
15 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/主澄清器.svg;imageAspect=0;', width, height, '', '主澄清器', null, null, this.getTagsForStencil(gn, '主澄清器', dt).join(' ')),  
16 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/低速通风废水处理.svg;imageAspect=0;', width, height, '', '低速通风废水处理', null, null, this.getTagsForStencil(gn, '低速通风废水处理', dt).join(' ')),  
17 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/储水池.svg;imageAspect=0;', width, height, '', '储水池', null, null, this.getTagsForStencil(gn, '储水池', dt).join(' ')),  
18 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/冷却塔组.svg;imageAspect=0;', width, height, '', '冷却塔组', null, null, this.getTagsForStencil(gn, '冷却塔组', dt).join(' ')),  
19 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/净水器.svg;imageAspect=0;', width, height, '', '净水器', null, null, this.getTagsForStencil(gn, '净水器', dt).join(' ')),  
20 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/净水系统.svg;imageAspect=0;', width, height, '', '净水系统', null, null, this.getTagsForStencil(gn, '净水系统', dt).join(' ')),  
21 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/净水系统2.svg;imageAspect=0;', width, height, '', '净水系统2', null, null, this.getTagsForStencil(gn, '净水系统2', dt).join(' ')),  
22 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/制氧机.svg;imageAspect=0;', width, height, '', '制氧机', null, null, this.getTagsForStencil(gn, '制氧机', dt).join(' ')),  
23 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/加氯器.svg;imageAspect=0;', width, height, '', '加氯器', null, null, this.getTagsForStencil(gn, '加氯器', dt).join(' ')),  
24 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/化学品加料机.svg;imageAspect=0;', width, height, '', '化学品加料机', null, null, this.getTagsForStencil(gn, '化学品加料机', dt).join(' ')),  
25 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/压榨过滤机.svg;imageAspect=0;', width, height, '', '压榨过滤机', null, null, this.getTagsForStencil(gn, '压榨过滤机', dt).join(' ')),  
26 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/厌氧序批式反应器.svg;imageAspect=0;', width, height, '', '厌氧序批式反应器', null, null, this.getTagsForStencil(gn, '厌氧序批式反应器', dt).join(' ')),  
27 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/反渗透主机.svg;imageAspect=0;', width, height, '', '反渗透主机', null, null, this.getTagsForStencil(gn, '反渗透主机', dt).join(' ')),  
28 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/吸收器.svg;imageAspect=0;', width, height, '', '吸收器', null, null, this.getTagsForStencil(gn, '吸收器', dt).join(' ')),  
29 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/喷头.svg;imageAspect=0;', width, height, '', '喷头', null, null, this.getTagsForStencil(gn, '喷头', dt).join(' ')),  
30 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/圆顶水箱.svg;imageAspect=0;', width, height, '', '圆顶水箱', null, null, this.getTagsForStencil(gn, '圆顶水箱', dt).join(' ')),  
31 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/地面.svg;imageAspect=0;', width, height, '', '地面', null, null, this.getTagsForStencil(gn, '地面', dt).join(' ')),  
32 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/处理池.svg;imageAspect=0;', width, height, '', '处理池', null, null, this.getTagsForStencil(gn, '处理池', dt).join(' ')),  
33 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/处理罐.svg;imageAspect=0;', width, height, '', '处理罐', null, null, this.getTagsForStencil(gn, '处理罐', dt).join(' ')),  
34 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/大蜻蜓.svg;imageAspect=0;', width, height, '', '大蜻蜓', null, null, this.getTagsForStencil(gn, '大蜻蜓', dt).join(' ')),  
35 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/容器.svg;imageAspect=0;', width, height, '', '容器', null, null, this.getTagsForStencil(gn, '容器', dt).join(' ')),  
36 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/小瓶灌装机.svg;imageAspect=0;', width, height, '', '小瓶灌装机', null, null, this.getTagsForStencil(gn, '小瓶灌装机', dt).join(' ')),  
37 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/带式压滤机.svg;imageAspect=0;', width, height, '', '带式压滤机', null, null, this.getTagsForStencil(gn, '带式压滤机', dt).join(' ')),  
38 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/带罐澄清器.svg;imageAspect=0;', width, height, '', '带罐澄清器', null, null, this.getTagsForStencil(gn, '带罐澄清器', dt).join(' ')),  
39 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/干燥装置.svg;imageAspect=0;', width, height, '', '干燥装置', null, null, this.getTagsForStencil(gn, '干燥装置', dt).join(' ')),  
40 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/废水研磨机.svg;imageAspect=0;', width, height, '', '废水研磨机', null, null, this.getTagsForStencil(gn, '废水研磨机', dt).join(' ')),  
41 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/废水蒸发器.svg;imageAspect=0;', width, height, '', '废水蒸发器', null, null, this.getTagsForStencil(gn, '废水蒸发器', dt).join(' ')),  
42 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/引水渠.svg;imageAspect=0;', width, height, '', '引水渠', null, null, this.getTagsForStencil(gn, '引水渠', dt).join(' ')),  
43 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/排水池.svg;imageAspect=0;', width, height, '', '排水池', null, null, this.getTagsForStencil(gn, '排水池', dt).join(' ')),  
44 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/排水系统.svg;imageAspect=0;', width, height, '', '排水系统', null, null, this.getTagsForStencil(gn, '排水系统', dt).join(' ')),  
45 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/斜板澄清器.svg;imageAspect=0;', width, height, '', '斜板澄清器', null, null, this.getTagsForStencil(gn, '斜板澄清器', dt).join(' ')),  
46 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/旋液分离器.svg;imageAspect=0;', width, height, '', '旋液分离器', null, null, this.getTagsForStencil(gn, '旋液分离器', dt).join(' ')),  
47 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/曝气池 1.svg;imageAspect=0;', width, height, '', '曝气池 1', null, null, this.getTagsForStencil(gn, '曝气池 1', dt).join(' ')),  
48 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/曝气池 2.svg;imageAspect=0;', width, height, '', '曝气池 2', null, null, this.getTagsForStencil(gn, '曝气池 2', dt).join(' ')),  
49 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/曝气消化池 1.svg;imageAspect=0;', width, height, '', '曝气消化池 1', null, null, this.getTagsForStencil(gn, '曝气消化池 1', dt).join(' ')),  
50 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/曝气消化池 2.svg;imageAspect=0;', width, height, '', '曝气消化池 2', null, null, this.getTagsForStencil(gn, '曝气消化池 2', dt).join(' ')),  
51 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/板式澄清器.svg;imageAspect=0;', width, height, '', '板式澄清器', null, null, this.getTagsForStencil(gn, '板式澄清器', dt).join(' ')),  
52 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/格栅.svg;imageAspect=0;', width, height, '', '格栅', null, null, this.getTagsForStencil(gn, '格栅', dt).join(' ')),  
53 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/桨式干燥机.svg;imageAspect=0;', width, height, '', '桨式干燥机', null, null, this.getTagsForStencil(gn, '桨式干燥机', dt).join(' ')),  
54 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/民用自来水.svg;imageAspect=0;', width, height, '', '民用自来水', null, null, this.getTagsForStencil(gn, '民用自来水', dt).join(' ')),  
55 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/气体处理.svg;imageAspect=0;', width, height, '', '气体处理', null, null, this.getTagsForStencil(gn, '气体处理', dt).join(' ')),  
56 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/水处理厂.svg;imageAspect=0;', width, height, '', '水处理厂', null, null, this.getTagsForStencil(gn, '水处理厂', dt).join(' ')),  
57 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/水处理池（俯视）.svg;imageAspect=0;', width, height, '', '水处理池（俯视）', null, null, this.getTagsForStencil(gn, '水处理池（俯视）', dt).join(' ')),  
58 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/水处理系统.svg;imageAspect=0;', width, height, '', '水处理系统', null, null, this.getTagsForStencil(gn, '水处理系统', dt).join(' ')),  
59 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/水处理罐.svg;imageAspect=0;', width, height, '', '水处理罐', null, null, this.getTagsForStencil(gn, '水处理罐', dt).join(' ')),  
60 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/水渠.svg;imageAspect=0;', width, height, '', '水渠', null, null, this.getTagsForStencil(gn, '水渠', dt).join(' ')),  
61 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/水解沉砂池.svg;imageAspect=0;', width, height, '', '水解沉砂池', null, null, this.getTagsForStencil(gn, '水解沉砂池', dt).join(' ')),  
62 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/水解酸化池.svg;imageAspect=0;', width, height, '', '水解酸化池', null, null, this.getTagsForStencil(gn, '水解酸化池', dt).join(' ')),  
63 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/水龙头.svg;imageAspect=0;', width, height, '', '水龙头', null, null, this.getTagsForStencil(gn, '水龙头', dt).join(' ')),  
64 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/池塘.svg;imageAspect=0;', width, height, '', '池塘', null, null, this.getTagsForStencil(gn, '池塘', dt).join(' ')),  
65 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/污水槽气泡扩散器.svg;imageAspect=0;', width, height, '', '污水槽气泡扩散器', null, null, this.getTagsForStencil(gn, '污水槽气泡扩散器', dt).join(' ')),  
66 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/污水罐.svg;imageAspect=0;', width, height, '', '污水罐', null, null, this.getTagsForStencil(gn, '污水罐', dt).join(' ')),  
67 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/污泥塘.svg;imageAspect=0;', width, height, '', '污泥塘', null, null, this.getTagsForStencil(gn, '污泥塘', dt).join(' ')),  
68 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/污泥浓缩池.svg;imageAspect=0;', width, height, '', '污泥浓缩池', null, null, this.getTagsForStencil(gn, '污泥浓缩池', dt).join(' ')),  
69 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/污泥消化池.svg;imageAspect=0;', width, height, '', '污泥消化池', null, null, this.getTagsForStencil(gn, '污泥消化池', dt).join(' ')),  
70 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/沉淀池 2.svg;imageAspect=0;', width, height, '', '沉淀池 2', null, null, this.getTagsForStencil(gn, '沉淀池 2', dt).join(' ')),  
71 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/沉淀池.svg;imageAspect=0;', width, height, '', '沉淀池', null, null, this.getTagsForStencil(gn, '沉淀池', dt).join(' ')),  
72 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/沉砂池.svg;imageAspect=0;', width, height, '', '沉砂池', null, null, this.getTagsForStencil(gn, '沉砂池', dt).join(' ')),  
73 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/沥青过滤器.svg;imageAspect=0;', width, height, '', '沥青过滤器', null, null, this.getTagsForStencil(gn, '沥青过滤器', dt).join(' ')),  
74 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/油水分离和回收装置.svg;imageAspect=0;', width, height, '', '油水分离和回收装置', null, null, this.getTagsForStencil(gn, '油水分离和回收装置', dt).join(' ')),  
75 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/油水分离器 1.svg;imageAspect=0;', width, height, '', '油水分离器 1', null, null, this.getTagsForStencil(gn, '油水分离器 1', dt).join(' ')),  
76 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/油水分离器 2.svg;imageAspect=0;', width, height, '', '油水分离器 2', null, null, this.getTagsForStencil(gn, '油水分离器 2', dt).join(' ')),  
77 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/油箱消化池.svg;imageAspect=0;', width, height, '', '油箱消化池', null, null, this.getTagsForStencil(gn, '油箱消化池', dt).join(' ')),  
78 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/洗水处理和回收系统.svg;imageAspect=0;', width, height, '', '洗水处理和回收系统', null, null, this.getTagsForStencil(gn, '洗水处理和回收系统', dt).join(' ')),  
79 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/洗涤器设备.svg;imageAspect=0;', width, height, '', '洗涤器设备', null, null, this.getTagsForStencil(gn, '洗涤器设备', dt).join(' ')),  
80 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/流阀.svg;imageAspect=0;', width, height, '', '流阀', null, null, this.getTagsForStencil(gn, '流阀', dt).join(' ')),  
81 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/浮油回收器.svg;imageAspect=0;', width, height, '', '浮油回收器', null, null, this.getTagsForStencil(gn, '浮油回收器', dt).join(' ')),  
82 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/浴缸.svg;imageAspect=0;', width, height, '', '浴缸', null, null, this.getTagsForStencil(gn, '浴缸', dt).join(' ')),  
83 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/消化池.svg;imageAspect=0;', width, height, '', '消化池', null, null, this.getTagsForStencil(gn, '消化池', dt).join(' ')),  
84 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/湿式收尘器.svg;imageAspect=0;', width, height, '', '湿式收尘器', null, null, this.getTagsForStencil(gn, '湿式收尘器', dt).join(' ')),  
85 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/溶气浮选装置.svg;imageAspect=0;', width, height, '', '溶气浮选装置', null, null, this.getTagsForStencil(gn, '溶气浮选装置', dt).join(' ')),  
86 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/溶液给料机.svg;imageAspect=0;', width, height, '', '溶液给料机', null, null, this.getTagsForStencil(gn, '溶液给料机', dt).join(' ')),  
87 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/滤水器.svg;imageAspect=0;', width, height, '', '滤水器', null, null, this.getTagsForStencil(gn, '滤水器', dt).join(' ')),  
88 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/滤膜.svg;imageAspect=0;', width, height, '', '滤膜', null, null, this.getTagsForStencil(gn, '滤膜', dt).join(' ')),  
89 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/潜水式搅拌器.svg;imageAspect=0;', width, height, '', '潜水式搅拌器', null, null, this.getTagsForStencil(gn, '潜水式搅拌器', dt).join(' ')),  
90 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/澄清器 1.svg;imageAspect=0;', width, height, '', '澄清器 1', null, null, this.getTagsForStencil(gn, '澄清器 1', dt).join(' ')),  
91 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/澄清器 2.svg;imageAspect=0;', width, height, '', '澄清器 2', null, null, this.getTagsForStencil(gn, '澄清器 2', dt).join(' ')),  
92 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/澄清器和浓缩器.svg;imageAspect=0;', width, height, '', '澄清器和浓缩器', null, null, this.getTagsForStencil(gn, '澄清器和浓缩器', dt).join(' ')),  
93 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/澄清器（侧面）.svg;imageAspect=0;', width, height, '', '澄清器（侧面）', null, null, this.getTagsForStencil(gn, '澄清器（侧面）', dt).join(' ')),  
94 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/灌装机.svg;imageAspect=0;', width, height, '', '灌装机', null, null, this.getTagsForStencil(gn, '灌装机', dt).join(' ')),  
95 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/灰处理池.svg;imageAspect=0;', width, height, '', '灰处理池', null, null, this.getTagsForStencil(gn, '灰处理池', dt).join(' ')),  
96 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/焚化炉.svg;imageAspect=0;', width, height, '', '焚化炉', null, null, this.getTagsForStencil(gn, '焚化炉', dt).join(' ')),  
97 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/球形储罐 1.svg;imageAspect=0;', width, height, '', '球形储罐 1', null, null, this.getTagsForStencil(gn, '球形储罐 1', dt).join(' ')),  
98 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/球形储罐 2.svg;imageAspect=0;', width, height, '', '球形储罐 2', null, null, this.getTagsForStencil(gn, '球形储罐 2', dt).join(' ')),  
99 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/生物反应池.svg;imageAspect=0;', width, height, '', '生物反应池', null, null, this.getTagsForStencil(gn, '生物反应池', dt).join(' ')),  
100 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/生物处理设备.svg;imageAspect=0;', width, height, '', '生物处理设备', null, null, this.getTagsForStencil(gn, '生物处理设备', dt).join(' ')),  
101 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/电动阀式浇口（关闭）.svg;imageAspect=0;', width, height, '', '电动阀式浇口（关闭）', null, null, this.getTagsForStencil(gn, '电动阀式浇口（关闭）', dt).join(' ')),  
102 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/电动阀式浇口（打开）.svg;imageAspect=0;', width, height, '', '电动阀式浇口（打开）', null, null, this.getTagsForStencil(gn, '电动阀式浇口（打开）', dt).join(' ')),  
103 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/真空过滤器.svg;imageAspect=0;', width, height, '', '真空过滤器', null, null, this.getTagsForStencil(gn, '真空过滤器', dt).join(' ')),  
104 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/碳吸收器.svg;imageAspect=0;', width, height, '', '碳吸收器', null, null, this.getTagsForStencil(gn, '碳吸收器', dt).join(' ')),  
105 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/空气扩散装置.svg;imageAspect=0;', width, height, '', '空气扩散装置', null, null, this.getTagsForStencil(gn, '空气扩散装置', dt).join(' ')),  
106 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/筛子.svg;imageAspect=0;', width, height, '', '筛子', null, null, this.getTagsForStencil(gn, '筛子', dt).join(' ')),  
107 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/简单蒸发器.svg;imageAspect=0;', width, height, '', '简单蒸发器', null, null, this.getTagsForStencil(gn, '简单蒸发器', dt).join(' ')),  
108 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/简单高位槽.svg;imageAspect=0;', width, height, '', '简单高位槽', null, null, this.getTagsForStencil(gn, '简单高位槽', dt).join(' ')),  
109 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/精细过滤器.svg;imageAspect=0;', width, height, '', '精细过滤器', null, null, this.getTagsForStencil(gn, '精细过滤器', dt).join(' ')),  
110 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/紧密耦合自吸泵.svg;imageAspect=0;', width, height, '', '紧密耦合自吸泵', null, null, this.getTagsForStencil(gn, '紧密耦合自吸泵', dt).join(' ')),  
111 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/絮凝器.svg;imageAspect=0;', width, height, '', '絮凝器', null, null, this.getTagsForStencil(gn, '絮凝器', dt).join(' ')),  
112 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/聚合物注入装置.svg;imageAspect=0;', width, height, '', '聚合物注入装置', null, null, this.getTagsForStencil(gn, '聚合物注入装置', dt).join(' ')),  
113 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/聚合物混合装置.svg;imageAspect=0;', width, height, '', '聚合物混合装置', null, null, this.getTagsForStencil(gn, '聚合物混合装置', dt).join(' ')),  
114 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/蒸发器.svg;imageAspect=0;', width, height, '', '蒸发器', null, null, this.getTagsForStencil(gn, '蒸发器', dt).join(' ')),  
115 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/蒸发装置.svg;imageAspect=0;', width, height, '', '蒸发装置', null, null, this.getTagsForStencil(gn, '蒸发装置', dt).join(' ')),  
116 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/蓄水池.svg;imageAspect=0;', width, height, '', '蓄水池', null, null, this.getTagsForStencil(gn, '蓄水池', dt).join(' ')),  
117 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/蓝色过滤器.svg;imageAspect=0;', width, height, '', '蓝色过滤器', null, null, this.getTagsForStencil(gn, '蓝色过滤器', dt).join(' ')),  
118 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/螺杆传动.svg;imageAspect=0;', width, height, '', '螺杆传动', null, null, this.getTagsForStencil(gn, '螺杆传动', dt).join(' ')),  
119 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/袋式过滤器.svg;imageAspect=0;', width, height, '', '袋式过滤器', null, null, this.getTagsForStencil(gn, '袋式过滤器', dt).join(' ')),  
120 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/豪华立式管线机.svg;imageAspect=0;', width, height, '', '豪华立式管线机', null, null, this.getTagsForStencil(gn, '豪华立式管线机', dt).join(' ')),  
121 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/超微细筛机.svg;imageAspect=0;', width, height, '', '超微细筛机', null, null, this.getTagsForStencil(gn, '超微细筛机', dt).join(' ')),  
122 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/转鼓浓缩机.svg;imageAspect=0;', width, height, '', '转鼓浓缩机', null, null, this.getTagsForStencil(gn, '转鼓浓缩机', dt).join(' ')),  
123 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/过滤器 2.svg;imageAspect=0;', width, height, '', '过滤器 2', null, null, this.getTagsForStencil(gn, '过滤器 2', dt).join(' ')),  
124 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/过滤器 3.svg;imageAspect=0;', width, height, '', '过滤器 3', null, null, this.getTagsForStencil(gn, '过滤器 3', dt).join(' ')),  
125 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/过滤器 4.svg;imageAspect=0;', width, height, '', '过滤器 4', null, null, this.getTagsForStencil(gn, '过滤器 4', dt).join(' ')),  
126 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/过滤器 5.svg;imageAspect=0;', width, height, '', '过滤器 5', null, null, this.getTagsForStencil(gn, '过滤器 5', dt).join(' ')),  
127 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/过滤器 6.svg;imageAspect=0;', width, height, '', '过滤器 6', null, null, this.getTagsForStencil(gn, '过滤器 6', dt).join(' ')),  
128 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/过滤器.svg;imageAspect=0;', width, height, '', '过滤器', null, null, this.getTagsForStencil(gn, '过滤器', dt).join(' ')),  
129 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/过滤器外壳.svg;imageAspect=0;', width, height, '', '过滤器外壳', null, null, this.getTagsForStencil(gn, '过滤器外壳', dt).join(' ')),  
130 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/重力带式机械浓缩机.svg;imageAspect=0;', width, height, '', '重力带式机械浓缩机', null, null, this.getTagsForStencil(gn, '重力带式机械浓缩机', dt).join(' ')),  
131 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/防爆维护.svg;imageAspect=0;', width, height, '', '防爆维护', null, null, this.getTagsForStencil(gn, '防爆维护', dt).join(' ')),  
132 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/预滤器.svg;imageAspect=0;', width, height, '', '预滤器', null, null, this.getTagsForStencil(gn, '预滤器', dt).join(' ')),  
133 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/高位槽 1.svg;imageAspect=0;', width, height, '', '高位槽 1', null, null, this.getTagsForStencil(gn, '高位槽 1', dt).join(' ')),  
134 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/高位槽 2.svg;imageAspect=0;', width, height, '', '高位槽 2', null, null, this.getTagsForStencil(gn, '高位槽 2', dt).join(' ')),  
135 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/高位槽 3.svg;imageAspect=0;', width, height, '', '高位槽 3', null, null, this.getTagsForStencil(gn, '高位槽 3', dt).join(' ')),  
136 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/高位槽 4.svg;imageAspect=0;', width, height, '', '高位槽 4', null, null, this.getTagsForStencil(gn, '高位槽 4', dt).join(' ')),  
137 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/高位槽 5.svg;imageAspect=0;', width, height, '', '高位槽 5', null, null, this.getTagsForStencil(gn, '高位槽 5', dt).join(' ')),  
138 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/sewage/鼓式过滤器.svg;imageAspect=0;', width, height, '', '鼓式过滤器', null, null, this.getTagsForStencil(gn, '鼓式过滤器', dt).join(' ')), 18 + // 自定义属性
  19 + const cellAttribute = {
  20 + [COMPONENT_TYPE]: DEFAULT
  21 + }
139 22
140 - ]; 23 + const graphPathLib = [
  24 + { name: '中央净水器.svg', path: 'sewage/中央净水器.svg' },
  25 + { name: '中央软水器.svg', path: 'sewage/中央软水器.svg' },
  26 + { name: '主澄清器.svg', path: 'sewage/主澄清器.svg' },
  27 + { name: '低速通风废水处理.svg', path: 'sewage/低速通风废水处理.svg' },
  28 + { name: '储水池.svg', path: 'sewage/储水池.svg' },
  29 + { name: '冷却塔组.svg', path: 'sewage/冷却塔组.svg' },
  30 + { name: '净水器.svg', path: 'sewage/净水器.svg' },
  31 + { name: '净水系统.svg', path: 'sewage/净水系统.svg' },
  32 + { name: '净水系统2.svg', path: 'sewage/净水系统2.svg' },
  33 + { name: '制氧机.svg', path: 'sewage/制氧机.svg' },
  34 + { name: '加氯器.svg', path: 'sewage/加氯器.svg' },
  35 + { name: '化学品加料机.svg', path: 'sewage/化学品加料机.svg' },
  36 + { name: '压榨过滤机.svg', path: 'sewage/压榨过滤机.svg' },
  37 + { name: '厌氧序批式反应器.svg', path: 'sewage/厌氧序批式反应器.svg' },
  38 + { name: '反渗透主机.svg', path: 'sewage/反渗透主机.svg' },
  39 + { name: '吸收器.svg', path: 'sewage/吸收器.svg' },
  40 + { name: '喷头.svg', path: 'sewage/喷头.svg' },
  41 + { name: '圆顶水箱.svg', path: 'sewage/圆顶水箱.svg' },
  42 + { name: '地面.svg', path: 'sewage/地面.svg' },
  43 + { name: '处理池.svg', path: 'sewage/处理池.svg' },
  44 + { name: '处理罐.svg', path: 'sewage/处理罐.svg' },
  45 + { name: '大蜻蜓.svg', path: 'sewage/大蜻蜓.svg' },
  46 + { name: '容器.svg', path: 'sewage/容器.svg' },
  47 + { name: '小瓶灌装机.svg', path: 'sewage/小瓶灌装机.svg' },
  48 + { name: '带式压滤机.svg', path: 'sewage/带式压滤机.svg' },
  49 + { name: '带罐澄清器.svg', path: 'sewage/带罐澄清器.svg' },
  50 + { name: '干燥装置.svg', path: 'sewage/干燥装置.svg' },
  51 + { name: '废水研磨机.svg', path: 'sewage/废水研磨机.svg' },
  52 + { name: '废水蒸发器.svg', path: 'sewage/废水蒸发器.svg' },
  53 + { name: '引水渠.svg', path: 'sewage/引水渠.svg' },
  54 + { name: '排水池.svg', path: 'sewage/排水池.svg' },
  55 + { name: '排水系统.svg', path: 'sewage/排水系统.svg' },
  56 + { name: '斜板澄清器.svg', path: 'sewage/斜板澄清器.svg' },
  57 + { name: '旋液分离器.svg', path: 'sewage/旋液分离器.svg' },
  58 + { name: '曝气池 1.svg', path: 'sewage/曝气池 1.svg' },
  59 + { name: '曝气池 2.svg', path: 'sewage/曝气池 2.svg' },
  60 + { name: '曝气消化池 1.svg', path: 'sewage/曝气消化池 1.svg' },
  61 + { name: '曝气消化池 2.svg', path: 'sewage/曝气消化池 2.svg' },
  62 + { name: '板式澄清器.svg', path: 'sewage/板式澄清器.svg' },
  63 + { name: '格栅.svg', path: 'sewage/格栅.svg' },
  64 + { name: '桨式干燥机.svg', path: 'sewage/桨式干燥机.svg' },
  65 + { name: '民用自来水.svg', path: 'sewage/民用自来水.svg' },
  66 + { name: '气体处理.svg', path: 'sewage/气体处理.svg' },
  67 + { name: '水处理厂.svg', path: 'sewage/水处理厂.svg' },
  68 + { name: '水处理池（俯视）.svg', path: 'sewage/水处理池（俯视）.svg' },
  69 + { name: '水处理系统.svg', path: 'sewage/水处理系统.svg' },
  70 + { name: '水处理罐.svg', path: 'sewage/水处理罐.svg' },
  71 + { name: '水渠.svg', path: 'sewage/水渠.svg' },
  72 + { name: '水解沉砂池.svg', path: 'sewage/水解沉砂池.svg' },
  73 + { name: '水解酸化池.svg', path: 'sewage/水解酸化池.svg' },
  74 + { name: '水龙头.svg', path: 'sewage/水龙头.svg' },
  75 + { name: '池塘.svg', path: 'sewage/池塘.svg' },
  76 + { name: '污水槽气泡扩散器.svg', path: 'sewage/污水槽气泡扩散器.svg' },
  77 + { name: '污水罐.svg', path: 'sewage/污水罐.svg' },
  78 + { name: '污泥塘.svg', path: 'sewage/污泥塘.svg' },
  79 + { name: '污泥浓缩池.svg', path: 'sewage/污泥浓缩池.svg' },
  80 + { name: '污泥消化池.svg', path: 'sewage/污泥消化池.svg' },
  81 + { name: '沉淀池 2.svg', path: 'sewage/沉淀池 2.svg' },
  82 + { name: '沉淀池.svg', path: 'sewage/沉淀池.svg' },
  83 + { name: '沉砂池.svg', path: 'sewage/沉砂池.svg' },
  84 + { name: '沥青过滤器.svg', path: 'sewage/沥青过滤器.svg' },
  85 + { name: '油水分离和回收装置.svg', path: 'sewage/油水分离和回收装置.svg' },
  86 + { name: '油水分离器 1.svg', path: 'sewage/油水分离器 1.svg' },
  87 + { name: '油水分离器 2.svg', path: 'sewage/油水分离器 2.svg' },
  88 + { name: '油箱消化池.svg', path: 'sewage/油箱消化池.svg' },
  89 + { name: '洗水处理和回收系统.svg', path: 'sewage/洗水处理和回收系统.svg' },
  90 + { name: '洗涤器设备.svg', path: 'sewage/洗涤器设备.svg' },
  91 + { name: '流阀.svg', path: 'sewage/流阀.svg' },
  92 + { name: '浮油回收器.svg', path: 'sewage/浮油回收器.svg' },
  93 + { name: '浴缸.svg', path: 'sewage/浴缸.svg' },
  94 + { name: '消化池.svg', path: 'sewage/消化池.svg' },
  95 + { name: '湿式收尘器.svg', path: 'sewage/湿式收尘器.svg' },
  96 + { name: '溶气浮选装置.svg', path: 'sewage/溶气浮选装置.svg' },
  97 + { name: '溶液给料机.svg', path: 'sewage/溶液给料机.svg' },
  98 + { name: '滤水器.svg', path: 'sewage/滤水器.svg' },
  99 + { name: '滤膜.svg', path: 'sewage/滤膜.svg' },
  100 + { name: '潜水式搅拌器.svg', path: 'sewage/潜水式搅拌器.svg' },
  101 + { name: '澄清器 1.svg', path: 'sewage/澄清器 1.svg' },
  102 + { name: '澄清器 2.svg', path: 'sewage/澄清器 2.svg' },
  103 + { name: '澄清器和浓缩器.svg', path: 'sewage/澄清器和浓缩器.svg' },
  104 + { name: '澄清器（侧面）.svg', path: 'sewage/澄清器（侧面）.svg' },
  105 + { name: '灌装机.svg', path: 'sewage/灌装机.svg' },
  106 + { name: '灰处理池.svg', path: 'sewage/灰处理池.svg' },
  107 + { name: '焚化炉.svg', path: 'sewage/焚化炉.svg' },
  108 + { name: '球形储罐 1.svg', path: 'sewage/球形储罐 1.svg' },
  109 + { name: '球形储罐 2.svg', path: 'sewage/球形储罐 2.svg' },
  110 + { name: '生物反应池.svg', path: 'sewage/生物反应池.svg' },
  111 + { name: '生物处理设备.svg', path: 'sewage/生物处理设备.svg' },
  112 + { name: '电动阀式浇口（关闭）.svg', path: 'sewage/电动阀式浇口（关闭）.svg' },
  113 + { name: '电动阀式浇口（打开）.svg', path: 'sewage/电动阀式浇口（打开）.svg' },
  114 + { name: '真空过滤器.svg', path: 'sewage/真空过滤器.svg' },
  115 + { name: '碳吸收器.svg', path: 'sewage/碳吸收器.svg' },
  116 + { name: '空气扩散装置.svg', path: 'sewage/空气扩散装置.svg' },
  117 + { name: '筛子.svg', path: 'sewage/筛子.svg' },
  118 + { name: '简单蒸发器.svg', path: 'sewage/简单蒸发器.svg' },
  119 + { name: '简单高位槽.svg', path: 'sewage/简单高位槽.svg' },
  120 + { name: '精细过滤器.svg', path: 'sewage/精细过滤器.svg' },
  121 + { name: '紧密耦合自吸泵.svg', path: 'sewage/紧密耦合自吸泵.svg' },
  122 + { name: '絮凝器.svg', path: 'sewage/絮凝器.svg' },
  123 + { name: '聚合物注入装置.svg', path: 'sewage/聚合物注入装置.svg' },
  124 + { name: '聚合物混合装置.svg', path: 'sewage/聚合物混合装置.svg' },
  125 + { name: '蒸发器.svg', path: 'sewage/蒸发器.svg' },
  126 + { name: '蒸发装置.svg', path: 'sewage/蒸发装置.svg' },
  127 + { name: '蓄水池.svg', path: 'sewage/蓄水池.svg' },
  128 + { name: '蓝色过滤器.svg', path: 'sewage/蓝色过滤器.svg' },
  129 + { name: '螺杆传动.svg', path: 'sewage/螺杆传动.svg' },
  130 + { name: '袋式过滤器.svg', path: 'sewage/袋式过滤器.svg' },
  131 + { name: '豪华立式管线机.svg', path: 'sewage/豪华立式管线机.svg' },
  132 + { name: '超微细筛机.svg', path: 'sewage/超微细筛机.svg' },
  133 + { name: '转鼓浓缩机.svg', path: 'sewage/转鼓浓缩机.svg' },
  134 + { name: '过滤器 2.svg', path: 'sewage/过滤器 2.svg' },
  135 + { name: '过滤器 3.svg', path: 'sewage/过滤器 3.svg' },
  136 + { name: '过滤器 4.svg', path: 'sewage/过滤器 4.svg' },
  137 + { name: '过滤器 5.svg', path: 'sewage/过滤器 5.svg' },
  138 + { name: '过滤器 6.svg', path: 'sewage/过滤器 6.svg' },
  139 + { name: '过滤器.svg', path: 'sewage/过滤器.svg' },
  140 + { name: '过滤器外壳.svg', path: 'sewage/过滤器外壳.svg' },
  141 + { name: '重力带式机械浓缩机.svg', path: 'sewage/重力带式机械浓缩机.svg' },
  142 + { name: '防爆维护.svg', path: 'sewage/防爆维护.svg' },
  143 + { name: '预滤器.svg', path: 'sewage/预滤器.svg' },
  144 + { name: '高位槽 1.svg', path: 'sewage/高位槽 1.svg' },
  145 + { name: '高位槽 2.svg', path: 'sewage/高位槽 2.svg' },
  146 + { name: '高位槽 3.svg', path: 'sewage/高位槽 3.svg' },
  147 + { name: '高位槽 4.svg', path: 'sewage/高位槽 4.svg' },
  148 + { name: '高位槽 5.svg', path: 'sewage/高位槽 5.svg' },
  149 + { name: '鼓式过滤器.svg', path: 'sewage/鼓式过滤器.svg' },
  150 + ]
141 151
142 - this.addPaletteFunctions('sewage', '污水处理', false, fns); 152 + const lib = graphPathLib.map(item => {
  153 + item.staticPath = staticPath + item.path
  154 + return item
  155 + })
  156 +
  157 + const fns = graphPathLib.map(item => {
  158 + return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
  159 + const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
  160 + cell.setVertex(true)
  161 + this.setCellAttributes(cell, cellAttribute)
  162 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);
  163 + }));
  164 + })
  165 +
  166 + this.setVariableImageLib(dt, label, lib)
  167 +
  168 + this.addPaletteFunctions(dt, label, false, fns);
143 169
144 this.setCurrentSearchEntryLibrary(); 170 this.setCurrentSearchEntryLibrary();
145 }; 171 };
1 1
2 (function () { 2 (function () {
3 // Adds Atlassian shapes 3 // Adds Atlassian shapes
4 - // valve 4 + // valve 阀门
5 Sidebar.prototype.addValvePalette = function () { 5 Sidebar.prototype.addValvePalette = function () {
6 - var gn = 'mxgraph.valve';  
7 - var dt = 'valve';  
8 - var width = 66;  
9 - var height = 74;  
10 - this.setCurrentSearchEntryLibrary('valve');  
11 -  
12 - var fns = [  
13 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/卸灰阀.svg;imageAspect=0;', width, height, '', '卸灰阀', null, null, this.getTagsForStencil(gn, '卸灰阀', dt).join(' ')),  
14 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/双通阀.svg;imageAspect=0;', width, height, '', '双通阀', null, null, this.getTagsForStencil(gn, '双通阀', dt).join(' ')),  
15 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/垂直单向阀.svg;imageAspect=0;', width, height, '', '垂直单向阀', null, null, this.getTagsForStencil(gn, '垂直单向阀', dt).join(' ')),  
16 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/垂直控制阀.svg;imageAspect=0;', width, height, '', '垂直控制阀', null, null, this.getTagsForStencil(gn, '垂直控制阀', dt).join(' ')),  
17 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/塑料旋启式止回阀.svg;imageAspect=0;', width, height, '', '塑料旋启式止回阀', null, null, this.getTagsForStencil(gn, '塑料旋启式止回阀', dt).join(' ')),  
18 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/夹管阀.svg;imageAspect=0;', width, height, '', '夹管阀', null, null, this.getTagsForStencil(gn, '夹管阀', dt).join(' ')),  
19 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/安全阀.svg;imageAspect=0;', width, height, '', '安全阀', null, null, this.getTagsForStencil(gn, '安全阀', dt).join(' ')),  
20 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/手动阀 1.svg;imageAspect=0;', width, height, '', '手动阀 1', null, null, this.getTagsForStencil(gn, '手动阀 1', dt).join(' ')),  
21 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/手动阀 2.svg;imageAspect=0;', width, height, '', '手动阀 2', null, null, this.getTagsForStencil(gn, '手动阀 2', dt).join(' ')),  
22 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/控制阀 2.svg;imageAspect=0;', width, height, '', '控制阀 2', null, null, this.getTagsForStencil(gn, '控制阀 2', dt).join(' ')),  
23 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/控制阀.svg;imageAspect=0;', width, height, '', '控制阀', null, null, this.getTagsForStencil(gn, '控制阀', dt).join(' ')),  
24 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/旋转阀.svg;imageAspect=0;', width, height, '', '旋转阀', null, null, this.getTagsForStencil(gn, '旋转阀', dt).join(' ')),  
25 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/水平单向阀.svg;imageAspect=0;', width, height, '', '水平单向阀', null, null, this.getTagsForStencil(gn, '水平单向阀', dt).join(' ')),  
26 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/水平控制阀.svg;imageAspect=0;', width, height, '', '水平控制阀', null, null, this.getTagsForStencil(gn, '水平控制阀', dt).join(' ')),  
27 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/水平控制阀2.svg;imageAspect=0;', width, height, '', '水平控制阀2', null, null, this.getTagsForStencil(gn, '水平控制阀2', dt).join(' ')),  
28 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/水平控制阀3.svg;imageAspect=0;', width, height, '', '水平控制阀3', null, null, this.getTagsForStencil(gn, '水平控制阀3', dt).join(' ')),  
29 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/法兰控制阀.svg;imageAspect=0;', width, height, '', '法兰控制阀', null, null, this.getTagsForStencil(gn, '法兰控制阀', dt).join(' ')),  
30 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/球形阀 1.svg;imageAspect=0;', width, height, '', '球形阀 1', null, null, this.getTagsForStencil(gn, '球形阀 1', dt).join(' ')),  
31 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/球形阀 2.svg;imageAspect=0;', width, height, '', '球形阀 2', null, null, this.getTagsForStencil(gn, '球形阀 2', dt).join(' ')),  
32 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/球形阀 3.svg;imageAspect=0;', width, height, '', '球形阀 3', null, null, this.getTagsForStencil(gn, '球形阀 3', dt).join(' ')),  
33 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/电动阀.svg;imageAspect=0;', width, height, '', '电动阀', null, null, this.getTagsForStencil(gn, '电动阀', dt).join(' ')),  
34 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/阀门.svg;imageAspect=0;', width, height, '', '阀门', null, null, this.getTagsForStencil(gn, '阀门', dt).join(' ')),  
35 - this.createVertexTemplateEntry('image;image=img/lib/thingskit/valve/阀门2.svg;imageAspect=0;', width, height, '', '阀门2', null, null, this.getTagsForStencil(gn, '阀门2', dt).join(' ')),  
36 -  
37 - ];  
38 -  
39 - this.addPaletteFunctions('valve', '阀门', false, fns); 6 + const { COMPONENT_TYPE } = this.enumCellBasicAttribute
  7 + const { DEFAULT } = this.enumComponentType
  8 + const gn = 'mxgraph.valve';
  9 + const dt = 'valve';
  10 + const label = '阀门'
  11 + const width = 66;
  12 + const height = 74;
  13 + const staticPath = '/thingskit-drawio/img/lib/thingskit/'
  14 + const prefix = 'image;image=img/lib/thingskit/'
  15 + const defaultStyle = ';imageAspect=0;'
  16 + this.setCurrentSearchEntryLibrary(dt);
  17 +
  18 + // 自定义属性
  19 + const cellAttribute = {
  20 + [COMPONENT_TYPE]: DEFAULT
  21 + }
  22 +
  23 + const graphPathLib = [
  24 + { name: '卸灰阀.svg', path: 'valve/卸灰阀.svg' },
  25 + { name: '双通阀.svg', path: 'valve/双通阀.svg' },
  26 + { name: '垂直单向阀.svg', path: 'valve/垂直单向阀.svg' },
  27 + { name: '垂直控制阀.svg', path: 'valve/垂直控制阀.svg' },
  28 + { name: '塑料旋启式止回阀.svg', path: 'valve/塑料旋启式止回阀.svg' },
  29 + { name: '夹管阀.svg', path: 'valve/夹管阀.svg' },
  30 + { name: '安全阀.svg', path: 'valve/安全阀.svg' },
  31 + { name: '手动阀 1.svg', path: 'valve/手动阀 1.svg' },
  32 + { name: '手动阀 2.svg', path: 'valve/手动阀 2.svg' },
  33 + { name: '控制阀 2.svg', path: 'valve/控制阀 2.svg' },
  34 + { name: '控制阀.svg', path: 'valve/控制阀.svg' },
  35 + { name: '旋转阀.svg', path: 'valve/旋转阀.svg' },
  36 + { name: '水平单向阀.svg', path: 'valve/水平单向阀.svg' },
  37 + { name: '水平控制阀.svg', path: 'valve/水平控制阀.svg' },
  38 + { name: '水平控制阀2.svg', path: 'valve/水平控制阀2.svg' },
  39 + { name: '水平控制阀3.svg', path: 'valve/水平控制阀3.svg' },
  40 + { name: '法兰控制阀.svg', path: 'valve/法兰控制阀.svg' },
  41 + { name: '球形阀 1.svg', path: 'valve/球形阀 1.svg' },
  42 + { name: '球形阀 2.svg', path: 'valve/球形阀 2.svg' },
  43 + { name: '球形阀 3.svg', path: 'valve/球形阀 3.svg' },
  44 + { name: '电动阀.svg', path: 'valve/电动阀.svg' },
  45 + { name: '阀门.svg', path: 'valve/阀门.svg' },
  46 + { name: '阀门2.svg', path: 'valve/阀门2.svg' },
  47 + ]
  48 +
  49 + const lib = graphPathLib.map(item => {
  50 + item.staticPath = staticPath + item.path
  51 + return item
  52 + })
  53 +
  54 + const fns = graphPathLib.map(item => {
  55 + return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
  56 + const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
  57 + cell.setVertex(true)
  58 + this.setCellAttributes(cell, cellAttribute)
  59 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);
  60 + }));
  61 + })
  62 +
  63 + this.setVariableImageLib(dt, label, lib)
  64 +
  65 + this.addPaletteFunctions(dt, label, false, fns);
40 66
41 this.setCurrentSearchEntryLibrary(); 67 this.setCurrentSearchEntryLibrary();
42 }; 68 };
@@ -4879,13 +4879,11 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -4879,13 +4879,11 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4879 const ss = ui.getSelectionState(); 4879 const ss = ui.getSelectionState();
4880 const vertices = ss.vertices || [] 4880 const vertices = ss.vertices || []
4881 const sidebarInstance = ui.sidebar 4881 const sidebarInstance = ui.sidebar
4882 - // console.log(this.editorUi)  
4883 console.log(vertices) 4882 console.log(vertices)
4884 console.log(ui) 4883 console.log(ui)
4885 4884
4886 const hasModifyNotSave = editor.status 4885 const hasModifyNotSave = editor.status
4887 4886
4888 - // console.log(vertices[0]?.get('bindType'))  
4889 /** 4887 /**
4890 * @description 不是单一节点则不进入数据绑定 4888 * @description 不是单一节点则不进入数据绑定
4891 */ 4889 */
@@ -4937,7 +4935,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -4937,7 +4935,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4937 4935
4938 /** 4936 /**
4939 * @description 当前节点绑定数据 4937 * @description 当前节点绑定数据
4940 - * @type {null | object} 4938 + * @type {null | {act: [], event: []}}
4941 */ 4939 */
4942 let currentNodeData = null 4940 let currentNodeData = null
4943 4941
@@ -5025,12 +5023,7 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5025,12 +5023,7 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5025 label: "旋转", 5023 label: "旋转",
5026 type: enumDynamicEffectType.ROTATE, 5024 type: enumDynamicEffectType.ROTATE,
5027 category: enumCategory.ACT, 5025 category: enumCategory.ACT,
5028 - },  
5029 - {  
5030 - label: '设置变量值图片',  
5031 - type: enumDynamicEffectType.IMAGE,  
5032 - category: enumCategory.ACT,  
5033 - }, 5026 + }
5034 ]; 5027 ];
5035 5028
5036 // const functionList = [ 5029 // const functionList = [
@@ -5092,12 +5085,33 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5092,12 +5085,33 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5092 * @description 初始化节点 5085 * @description 初始化节点
5093 */ 5086 */
5094 async function initNode() { 5087 async function initNode() {
5095 - createDataSourcePanel()  
5096 - createChartBindPanel()  
5097 - createInteractionPanel()  
5098 - createDynamicEffectPanel()  
5099 - createSubmitPanel()  
5100 - UseLayUi.nextTick(() => form.render()) 5088 + const basicAttr = sidebarInstance.enumCellBasicAttribute
  5089 + const permissionKey = sidebarInstance.enumPermissionPanel
  5090 +
  5091 +
  5092 + const renderMapping = {
  5093 + [permissionKey.DATA_SOURCE]: createDataSourcePanel,
  5094 + [permissionKey.DISPLAY_TYPE]: createChartBindPanel,
  5095 + [permissionKey.INTERACTION]: createInteractionPanel,
  5096 + [permissionKey.DYNAMIC_EFFECT]: createDynamicEffectPanel,
  5097 + [permissionKey.VAR_IMAGE]: createVarImagePanel,
  5098 + }
  5099 +
  5100 +
  5101 + function permissionRender() {
  5102 + const cell = vertices[0]
  5103 + const permission = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
  5104 + console.log(graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE))
  5105 + const needDisplayPanel = sidebarInstance.getComponentPermission(permission)
  5106 + for (const key of needDisplayPanel) {
  5107 + renderMapping[key]()
  5108 + }
  5109 + if (needDisplayPanel.length) createSubmitPanel()
  5110 + UseLayUi.nextTick(() => form.render())
  5111 + }
  5112 +
  5113 + permissionRender()
  5114 + await getNodeBindInfo()
5101 } 5115 }
5102 5116
5103 initNode(); 5117 initNode();
@@ -5111,6 +5125,30 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5111,6 +5125,30 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5111 const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('NODE', id)) 5125 const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('NODE', id))
5112 currentNodeData = res 5126 currentNodeData = res
5113 if (echoRefreshFn && typeof echoRefreshFn === 'function') echoRefreshFn() 5127 if (echoRefreshFn && typeof echoRefreshFn === 'function') echoRefreshFn()
  5128 + await echoActionType()
  5129 + }
  5130 +
  5131 + async function echoActionType() {
  5132 + const act = currentNodeData.act ?? []
  5133 + const event = currentNodeData.event ?? []
  5134 + const actionType = {}
  5135 + for (const item of act) {
  5136 + if (!item.condition || !item.condition?.length) {
  5137 + $(`.interaction__container input[name="${item.type}"]`).attr('disabled', true)
  5138 + } else {
  5139 + $(`.interaction__container input[name="${item.type}"]`).attr('disabled', false)
  5140 + }
  5141 + actionType[item.type] = item.enabled
  5142 + }
  5143 + for (const item of event) {
  5144 + if (!item.content) {
  5145 + $(`.interaction__container input[name="${item.type}"]`).attr('disabled', true)
  5146 + } else {
  5147 + $(`.interaction__container input[name="${item.type}"]`).attr('disabled', false)
  5148 + }
  5149 + actionType[item.type] = item.enabled
  5150 + }
  5151 + form.val(CONTAINER_FILTER, actionType)
5114 } 5152 }
5115 5153
5116 /** 5154 /**
@@ -5162,34 +5200,8 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5162,34 +5200,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5162 refreshFn.apply(this) 5200 refreshFn.apply(this)
5163 const { dataSources: [dataSource] = [] } = currentNodeData || {} 5201 const { dataSources: [dataSource] = [] } = currentNodeData || {}
5164 echoDataSource(dataSource) 5202 echoDataSource(dataSource)
5165 - echoActionType()  
5166 form.render(null, CONTAINER_FILTER) 5203 form.render(null, CONTAINER_FILTER)
5167 } 5204 }
5168 -  
5169 - await getNodeBindInfo()  
5170 - }  
5171 -  
5172 - async function echoActionType() {  
5173 - const act = currentNodeData.act ?? []  
5174 - const event = currentNodeData.event ?? []  
5175 - const actionType = {}  
5176 - for (const item of act) {  
5177 - if (!item.condition || !item.condition?.length) {  
5178 - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', true)  
5179 - } else {  
5180 - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', false)  
5181 - }  
5182 - actionType[item.type] = item.enabled  
5183 - }  
5184 - for (const item of event) {  
5185 - if (!item.content) {  
5186 - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', true)  
5187 - } else {  
5188 - $(`.interaction__container input[name="${item.type}"]`).attr('disabled', false)  
5189 - }  
5190 - actionType[item.type] = item.enabled  
5191 - }  
5192 - form.val(CONTAINER_FILTER, actionType)  
5193 } 5205 }
5194 5206
5195 mount() 5207 mount()
@@ -5577,6 +5589,17 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -5577,6 +5589,17 @@ DataFormatPanel.prototype.addDataFont = function (container) {
5577 $(container).append(fragment) 5589 $(container).append(fragment)
5578 } 5590 }
5579 5591
  5592 + /**
  5593 + * @description 变量图片动效面板
  5594 + */
  5595 + function createVarImagePanel() {
  5596 + dynamicEffectList.push({
  5597 + label: '设置变量值图片',
  5598 + type: enumDynamicEffectType.IMAGE,
  5599 + category: enumCategory.ACT,
  5600 + })
  5601 + createDynamicEffectPanel()
  5602 + }
5580 5603
5581 /** 5604 /**
5582 * @description 创建提交按钮 5605 * @description 创建提交按钮
@@ -6019,10 +6042,6 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6019,10 +6042,6 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6019 */ 6042 */
6020 function handleDownOrUpEvent(event) { 6043 function handleDownOrUpEvent(event) {
6021 6044
6022 - // if (!currentCheckedOrgNode) {  
6023 - // layer.msg('请先选择组织')  
6024 - // return  
6025 - // }  
6026 // 事件类型 6045 // 事件类型
6027 const enumEventType = { 6046 const enumEventType = {
6028 DOWN: "按下", 6047 DOWN: "按下",
@@ -6175,7 +6194,9 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6175,7 +6194,9 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6175 /** 6194 /**
6176 * @description 创建组织树 6195 * @description 创建组织树
6177 */ 6196 */
6178 - function createOrgTreeSelect() { 6197 + async function createOrgTreeSelect() {
  6198 + const [err, treeList] = await to(ConfigurationNodeApi.getOrgTree())
  6199 + if (err) return
6179 UseLayUi.createTreeSelect({ 6200 UseLayUi.createTreeSelect({
6180 elem: `#${enumActionEl.ORG_EL}`, 6201 elem: `#${enumActionEl.ORG_EL}`,
6181 layFilter: enumConst.ORG_ID, 6202 layFilter: enumConst.ORG_ID,
@@ -6318,8 +6339,8 @@ DataFormatPanel.prototype.addDataFont = function (container) { @@ -6318,8 +6339,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
6318 6339
6319 /** 6340 /**
6320 * @description 判断是否为正确的JSON结构 6341 * @description 判断是否为正确的JSON结构
6321 - * @param {string} string  
6322 - * @returns 6342 + * @param {string} string
  6343 + * @returns
6323 */ 6344 */
6324 function isJson(string) { 6345 function isJson(string) {
6325 if (typeof string === 'string') { 6346 if (typeof string === 'string') {