简柏林 / thingskit-scada · Commits

Commit cc5bbe362a0720f80c44cfa5f2bbd9ce28c375f9

Authored by xp.Huang
2 parents 7661c249 a9a23dd3

Merge branch 'ww' into 'main' 

feat: add save button && fix some bug

See merge request huang/thingskit-drawio!21
Inline Side-by-side
Showing 2 changed files with 315 additions and 268 deletions

Too many changes to show.
Reload with full diff Plain diff Email patch

To preserve performance only 2 of 4 files are displayed.

@@ -258,7 +258,9 @@ App.DROPBOX_URL = window.DRAWIO_BASE_URL + '/thingskit-drawio/js/dropbox/Dropbox @@ -258,7 +258,9 @@ App.DROPBOX_URL = window.DRAWIO_BASE_URL + '/thingskit-drawio/js/dropbox/Dropbox
258 /** 258 /**
259 * Sets URL to load the Dropbox dropins JS from. 259 * Sets URL to load the Dropbox dropins JS from.
260 */ 260 */
261 -App.DROPINS_URL = 'https://www.dropbox.com/static/api/2/dropins.js'; 261 +// App.DROPINS_URL = 'https://www.dropbox.com/static/api/2/dropins.js';
  262 +// TODO thingsKit
  263 +App.DROPINS_URL = '';
262 264
263 /** 265 /**
264 * OneDrive Client JS (file/folder picker). This is a slightly modified version to allow using accessTokens 266 * OneDrive Client JS (file/folder picker). This is a slightly modified version to allow using accessTokens
@@ -5859,6 +5861,29 @@ App.prototype.updateButtonContainer = function() @@ -5859,6 +5861,29 @@ App.prototype.updateButtonContainer = function()
5859 })); 5861 }));
5860 this.buttonContainer.appendChild(this.shareButton); 5862 this.buttonContainer.appendChild(this.shareButton);
5861 5863
  5864 + // TODO thingsKit 保存按钮
  5865 + this.saveButton = document.createElement('div');
  5866 + this.saveButton.className = 'geBtn gePrimaryBtn';
  5867 + this.saveButton.style.display = 'inline-block';
  5868 + this.saveButton.style.backgroundColor = '#F2931E';
  5869 + this.saveButton.style.borderColor = '#F08705';
  5870 + this.saveButton.style.backgroundImage = 'none';
  5871 + this.saveButton.style.marginTop = '-10px';
  5872 + this.saveButton.style.lineHeight = '28px';
  5873 + this.saveButton.style.minWidth = '0px';
  5874 + this.saveButton.style.cssFloat = 'right';
  5875 + this.saveButton.setAttribute('title', '保存');
  5876 + mxUtils.write(this.saveButton, '保存');
  5877 + mxEvent.addListener(this.saveButton, 'click', mxUtils.bind(this, function()
  5878 + {
  5879 + this.currentFile.ui.actions.get(
  5880 + (this.currentFile.mode == null || !this.currentFile.isEditable())
  5881 + ? 'saveAs'
  5882 + : 'save')
  5883 + .funct();
  5884 + }));
  5885 + this.buttonContainer.appendChild(this.saveButton);
  5886 +
5862 5887
5863 // this.shareButton = document.createElement('div'); 5888 // this.shareButton = document.createElement('div');
5864 // this.shareButton.className = 'geBtn gePrimaryBtn'; 5889 // this.shareButton.className = 'geBtn gePrimaryBtn';
@@ -5901,6 +5926,8 @@ App.prototype.updateButtonContainer = function() @@ -5901,6 +5926,8 @@ App.prototype.updateButtonContainer = function()
5901 { 5926 {
5902 this.shareButton.parentNode.removeChild(this.shareButton); 5927 this.shareButton.parentNode.removeChild(this.shareButton);
5903 this.shareButton = null; 5928 this.shareButton = null;
  5929 + this.saveButton.parentNode.removeChild(this.saveButton);
  5930 + this.saveButton = null;
5904 } 5931 }
5905 5932
5906 //Fetch notifications 5933 //Fetch notifications
@@ -3,7 +3,10 @@ @@ -3,7 +3,10 @@
3 // Adds Atlassian shapes 3 // Adds Atlassian shapes
4 // 图表 4 // 图表
5 Sidebar.prototype.addChartsPalette = function () { 5 Sidebar.prototype.addChartsPalette = function () {
6 - const { enumConst, enumChartType, generatorCell, generatorChartsId } = this.chartsComponentExtend() 6 + this.chartsComponentInit()
  7 + const enumConst = this.enumConst
  8 + const enumChartType = this.enumChartType
  9 + const self = this
7 10
8 const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.'; 11 const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
9 const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;'; 12 const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
@@ -11,17 +14,18 @@ @@ -11,17 +14,18 @@
11 const gn = 'mxgraph.charts'; 14 const gn = 'mxgraph.charts';
12 const dt = 'charts '; 15 const dt = 'charts ';
13 const sb = this; 16 const sb = this;
  17 +
14 this.setCurrentSearchEntryLibrary('charts'); 18 this.setCurrentSearchEntryLibrary('charts');
15 19
16 const fns = [ 20 const fns = [
17 this.addEntry('line chart', mxUtils.bind(this, function () { 21 this.addEntry('line chart', mxUtils.bind(this, function () {
18 - const id = generatorChartsId()  
19 - const cell = generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.LINE_CHART) 22 + const id = self.generatorChartsId()
  23 + const cell = self.generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.LINE_CHART)
20 return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '折线图'); 24 return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '折线图');
21 })), 25 })),
22 this.addEntry('bar chart', mxUtils.bind(this, function () { 26 this.addEntry('bar chart', mxUtils.bind(this, function () {
23 - const id = generatorChartsId()  
24 - const cell = generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumChartType.BAR_CHART, '/thingskit-drawio/images/thingskit/bar-chart.png') 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')
25 return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '柱状图'); 29 return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '柱状图');
26 })), 30 })),
27 ]; 31 ];
@@ -31,130 +35,89 @@ @@ -31,130 +35,89 @@
31 this.setCurrentSearchEntryLibrary(); 35 this.setCurrentSearchEntryLibrary();
32 }; 36 };
33 37
  38 + /**
  39 + * @description echarts 实例映射
  40 + * @type {Map<any, any>}
  41 + */
34 Sidebar.prototype.chartsInstanceMapping = new Map() 42 Sidebar.prototype.chartsInstanceMapping = new Map()
35 43
36 /** 44 /**
37 - * @description 图表组件 拓展  
38 - * @returns {{generatorChartsId: (function(): string), createChartsNode: (function(*, *=, *=): string), chartsLineChartsConfig: (function(): {yAxis: {type: string}, xAxis: {data, type: string}, series: [{data, type: string}]}), generatorCell: (function(*, *, *): *), chartsComponentInit: chartsComponentInit}} 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, COMPONENTS_TYPE_KEY: string, CHART_CONTAINER_CLS: string}}
39 */ 47 */
40 - Sidebar.prototype.chartsComponentExtend = function () {  
41 - const enumConst = {  
42 -  
43 - /**  
44 - * @description 图表cell 默认宽度  
45 - */  
46 - CHART_CELL_DEFAULT_WIDTH: 400,  
47 -  
48 - /**  
49 - * @description 图表cell 默认高度  
50 - */  
51 - CHART_CELL_DEFAULT_HEIGHT: 400,  
52 -  
53 - /**  
54 - * @description 图表cell的 width attribute  
55 - */  
56 - CHART_CELL_WIDTH: 'width',  
57 -  
58 - /**  
59 - * @description 图表cell的 height attribute  
60 - */  
61 - CHART_CELL_HEIGHT: 'height', 48 + Sidebar.prototype.enumConst = {
62 49
63 - /**  
64 - * @description cell 类型是否为 charts  
65 - */  
66 - CHART_COMP: 'charts',  
67 -  
68 - /**  
69 - * @description cell id key  
70 - */  
71 - CHART_CELL_ID: 'chartInstanceId',  
72 -  
73 - /**  
74 - * @description 组件类型 key  
75 - */  
76 - COMPONENTS_TYPE_KEY: 'componentsType',  
77 -  
78 - /**  
79 - * @description 图表容器 class name  
80 - */  
81 - CHART_CONTAINER_CLS: 'echarts__instance',  
82 -  
83 - /**  
84 - * @description 图表容器 id 前缀  
85 - */  
86 - CHART_CONTAINER_ID_PREFIX: 'echarts__instance__', 50 + /**
  51 + * @description 图表cell 默认宽度
  52 + */
  53 + CHART_CELL_DEFAULT_WIDTH: 400,
87 54
88 - /**  
89 - * @description 图表图片占位符大小  
90 - */  
91 - CHART_IMG_PLACEHOLDER_SIZE: 30, 55 + /**
  56 + * @description 图表cell 默认高度
  57 + */
  58 + CHART_CELL_DEFAULT_HEIGHT: 400,
92 59
93 - /**  
94 - * @description 图表类型 key  
95 - */  
96 - CHART_TYPE_KEY: 'chartType',  
97 - } 60 + /**
  61 + * @description 图表cell的 width attribute
  62 + */
  63 + CHART_CELL_WIDTH: 'width',
98 64
99 - const enumChartType = {  
100 - LINE_CHART: 'lineChart',  
101 - BAR_CHART: 'barChart',  
102 - } 65 + /**
  66 + * @description 图表cell的 height attribute
  67 + */
  68 + CHART_CELL_HEIGHT: 'height',
103 69
104 - const chartOptionMapping = {  
105 - [enumChartType.LINE_CHART]: chartsLineChartsConfig,  
106 - [enumChartType.BAR_CHART]: chartsBarChartConfig,  
107 - } 70 + /**
  71 + * @description cell 类型是否为 charts
  72 + */
  73 + CHART_COMP: 'charts',
108 74
109 - const graph = this.graph 75 + /**
  76 + * @description cell id key
  77 + */
  78 + CHART_CELL_ID: 'chartInstanceId',
110 79
111 - chartsComponentInit() 80 + /**
  81 + * @description 组件类型 key
  82 + */
  83 + COMPONENTS_TYPE_KEY: 'componentsType',
112 84
113 /** 85 /**
114 - * @description 创建cell  
115 - * @param id  
116 - * @param width  
117 - * @param height  
118 - * @param chartType  
119 - * @param placeholderPath  
120 - * @returns {*} 86 + * @description 图表容器 class name
121 */ 87 */
122 - function generatorCell(id, width, height, chartType, placeholderPath) {  
123 - const cell = new mxCell(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;');  
124 - cell.setVertex(true)  
125 - graph.setAttributeForCell(cell, enumConst.COMPONENTS_TYPE_KEY, 'charts');  
126 - graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);  
127 - graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)  
128 - graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)  
129 - graph.setAttributeForCell(cell, enumConst.CHART_TYPE_KEY, chartType)  
130 - return cell  
131 - } 88 + CHART_CONTAINER_CLS: 'echarts__instance',
132 89
133 /** 90 /**
134 - * @description 生成图表 id  
135 - * @returns {string} 91 + * @description 图表容器 id 前缀
136 */ 92 */
137 - function generatorChartsId() {  
138 - return `${ enumConst.CHART_CONTAINER_ID_PREFIX }${ Date.now() }`  
139 - } 93 + CHART_CONTAINER_ID_PREFIX: 'echarts__instance__',
140 94
141 /** 95 /**
142 - * @description 创建图表节点  
143 - * @param id  
144 - * @param width  
145 - * @param height  
146 - * @param placeholderPath  
147 - * @returns {string} 96 + * @description 图表图片占位符大小
148 */ 97 */
149 - function createChartsNode(id, width = 400, height = 400, placeholderPath = '/thingskit-drawio/images/thingskit/line-chart.png') {  
150 - return `<div class="echarts__instance" style="width: ${ width }px; height: ${ height }px" id="${ id }"><img src="${ placeholderPath }" alt=""></div>`  
151 - } 98 + CHART_IMG_PLACEHOLDER_SIZE: 30,
152 99
153 /** 100 /**
154 - * @description 折线图配置  
155 - * @returns {{yAxis: {type: string}, xAxis: {data: string[], type: string}, series: [{data: number[], type: string}]}} 101 + * @description 图表类型 key
156 */ 102 */
157 - function chartsLineChartsConfig() { 103 + CHART_TYPE_KEY: 'chartType',
  104 + }
  105 +
  106 + /**
  107 + * @description 图表类型值
  108 + * @type {{LINE_CHART: string, BAR_CHART: string}}
  109 + */
  110 + Sidebar.prototype.enumChartType = {
  111 + LINE_CHART: 'lineChart',
  112 + BAR_CHART: 'barChart',
  113 + }
  114 +
  115 + /**
  116 + * @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}]})}}
  118 + */
  119 + Sidebar.prototype.chartOptionMapping = {
  120 + [Sidebar.prototype.enumChartType.LINE_CHART]: function () {
158 return { 121 return {
159 xAxis: { 122 xAxis: {
160 type: 'category', 123 type: 'category',
@@ -170,13 +133,8 @@ @@ -170,13 +133,8 @@
170 }, 133 },
171 ], 134 ],
172 } 135 }
173 - }  
174 -  
175 - /**  
176 - * @description 柱状图  
177 - * @returns {{yAxis: {type: string}, xAxis: {data: string[], type: string}, series: [{data: number[], showBackground: boolean, backgroundStyle: {color: string}, type: string}]}}  
178 - */  
179 - function chartsBarChartConfig() { 136 + },
  137 + [Sidebar.prototype.enumChartType.BAR_CHART]: function () {
180 return { 138 return {
181 xAxis: { 139 xAxis: {
182 type: 'category', 140 type: 'category',
@@ -196,189 +154,251 @@ @@ -196,189 +154,251 @@
196 }, 154 },
197 ], 155 ],
198 }; 156 };
199 - } 157 + },
  158 + }
  159 +
  160 + /**
  161 + * @description 创建cell
  162 + * @param id
  163 + * @param width
  164 + * @param height
  165 + * @param chartType
  166 + * @param placeholderPath
  167 + * @returns {*}
  168 + */
  169 + 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;');
  172 + cell.setVertex(true)
  173 + this.graph.setAttributeForCell(cell, enumConst.COMPONENTS_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)
  178 + return cell
  179 + }
  180 +
  181 +
  182 + /**
  183 + * @description 生成图表 id
  184 + * @returns {string}
  185 + */
  186 + Sidebar.prototype.generatorChartsId = function () {
  187 + const enumConst = Sidebar.prototype.enumConst
  188 + return `${ enumConst.CHART_CONTAINER_ID_PREFIX }${ Date.now() }`
  189 + }
  190 +
  191 + /**
  192 + * @description 创建图表节点
  193 + * @param id
  194 + * @param width
  195 + * @param height
  196 + * @param placeholderPath
  197 + * @returns {string}
  198 + */
  199 + Sidebar.prototype.createChartsNode = function (id, width = 400, height = 400, placeholderPath = '/thingskit-drawio/images/thingskit/line-chart.png') {
  200 + return `<div class="echarts__instance" style="width: ${ width }px; height: ${ height }px" id="${ id }"><img src="${ placeholderPath }" alt=""></div>`
  201 + }
  202 +
  203 + /**
  204 + * @description 是否是图表cell
  205 + * @param cell
  206 + * @returns {boolean}
  207 + */
  208 + Sidebar.prototype.isChartCell = function (cell) {
  209 + const enumConst = Sidebar.prototype.enumConst
  210 + const componentsType = cell.getAttribute(enumConst.COMPONENTS_TYPE_KEY)
  211 + return !!(componentsType && componentsType === enumConst.CHART_COMP)
  212 + }
  213 +
  214 + /**
  215 + * @description 创建图表实例 并 保存实例到map中
  216 + * @param id
  217 + * @param width
  218 + * @param height
  219 + * @param chartType
  220 + */
  221 + Sidebar.prototype.generatorEChartInstance = function (id, width, height, chartType) {
  222 + const chartOptionMapping = this.chartOptionMapping
  223 + const chartsInstanceMapping = this.chartsInstanceMapping
  224 + const chartDom = document.getElementById(id);
  225 + chartDom.style.width = `${ width }px`
  226 + chartDom.style.height = `${ height }px`
  227 + const myChart = echarts.init(chartDom);
  228 + const option = chartOptionMapping[chartType] ? chartOptionMapping[chartType]() : {}
  229 + option && myChart.setOption(option);
  230 + chartsInstanceMapping.set(id, myChart)
  231 + }
  232 +
  233 + /**
  234 + * @description 获取charts cell 的id
  235 + * @param cell
  236 + * @returns {*}
  237 + */
  238 + Sidebar.prototype.getCellId = function (cell) {
  239 + return this.graph.getAttributeForCell(cell, this.enumConst.CHART_CELL_ID)
  240 + }
200 241
  242 + /**
  243 + * @description 图表组件 拓展处理
  244 + */
  245 + Sidebar.prototype.chartsComponentInit = function () {
  246 + const chartsInstanceMapping = this.chartsInstanceMapping
  247 + const enumConst = this.enumConst
  248 + const graph = this.graph
  249 + const self = this
201 /** 250 /**
202 - * @description 图表组件 拓展处理 251 + * @description 拓展添加charts 实例方法
203 */ 252 */
204 - function chartsComponentInit() {  
205 - const chartsInstanceMapping = Sidebar.prototype.chartsInstanceMapping 253 + const addClickHandler = Sidebar.prototype.addClickHandler
  254 + Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
  255 + const cell = cells[0]
  256 + const cellValue = cell.value
  257 + const validate = cellValue && cellValue.nodeName === 'UserObject' && this.isChartCell(cell)
206 258
207 /** 259 /**
208 - * @description 拓展添加charts 实例方法 260 + * @description 拓展Sidebar鼠标按下
  261 + * @type {ds.mouseDown | Function}
209 */ 262 */
210 - const addClickHandler = Sidebar.prototype.addClickHandler  
211 - Sidebar.prototype.addClickHandler = function (elt, ds, cells) {  
212 - const cell = cells[0]  
213 - const cellValue = cell.value  
214 - const validate = cellValue && cellValue.nodeName === 'UserObject' && isChartCell(cell)  
215 -  
216 - /**  
217 - * @description 拓展Sidebar鼠标按下  
218 - * @type {ds.mouseDown}  
219 - */  
220 - const mouseDown = ds.mouseDown  
221 - ds.mouseDown = function (evt) { 263 + const mouseDown = ds.mouseDown
  264 + ds.mouseDown = function (evt) {
  265 + if (validate) {
  266 + const id = self.generatorChartsId()
  267 + const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })
  268 + cell.setGeometry(geo)
  269 + self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
  270 + self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, enumConst.CHART_CELL_DEFAULT_WIDTH);
  271 + self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, enumConst.CHART_CELL_DEFAULT_HEIGHT);
  272 + self.graph.setAttributeForCell(cell, 'label', self.createChartsNode(id))
  273 + }
  274 + mouseDown.apply(this, arguments)
  275 + };
  276 +
  277 + /**
  278 + * @description 拓展放置图表
  279 + * @type {ds.mouseUp | Function}
  280 + */
  281 + const mouseUp = ds.mouseUp
  282 + ds.mouseUp = function () {
  283 + try {
  284 + mouseUp.apply(this, arguments)
  285 + } finally {
222 if (validate) { 286 if (validate) {
223 - const id = generatorChartsId()  
224 - const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })  
225 - cell.setGeometry(geo)  
226 - graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);  
227 - graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, enumConst.CHART_CELL_DEFAULT_WIDTH);  
228 - graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, enumConst.CHART_CELL_DEFAULT_HEIGHT);  
229 - graph.setAttributeForCell(cell, 'label', createChartsNode(id))  
230 - }  
231 - mouseDown.apply(this, arguments)  
232 - };  
233 -  
234 - /**  
235 - * @description 拓展放置图表  
236 - * @type {ds.mouseUp}  
237 - */  
238 - const mouseUp = ds.mouseUp  
239 - ds.mouseUp = function () {  
240 - try {  
241 - mouseUp.apply(this, arguments)  
242 - } finally {  
243 - if (validate) {  
244 - const id = getCellId(cell)  
245 - const chartType = graph.getAttributeForCell(cell, enumConst.CHART_TYPE_KEY)  
246 - const chartDom = document.getElementById(id);  
247 - const myChart = echarts.init(chartDom);  
248 - const option = chartOptionMapping[chartType] ? chartOptionMapping[chartType]() : {}  
249 - option && myChart.setOption(option);  
250 - chartsInstanceMapping.set(id, myChart)  
251 - } 287 + const id = self.getCellId(cell)
  288 + const chartType = cell.getAttribute(enumConst.CHART_TYPE_KEY)
  289 + self.generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
  290 +
252 } 291 }
253 } 292 }
254 - addClickHandler.apply(this, arguments)  
255 } 293 }
  294 + addClickHandler.apply(this, arguments)
  295 + }
256 296
257 - /**  
258 - * @description charts cell发生resize时改变charts size  
259 - * @type {Function}  
260 - */  
261 - const cellResized = mxGraph.prototype.cellResized  
262 - mxGraph.prototype.cellResized = function (cell, rect) { 297 + /**
  298 + * @description charts cell发生resize时改变charts size
  299 + * @type {Function}
  300 + */
  301 + const cellResized = mxGraph.prototype.cellResized
  302 + mxGraph.prototype.cellResized = function (cell, rect) {
  303 + if (Sidebar.prototype.isChartCell(cell)) {
263 const { width, height } = rect 304 const { width, height } = rect
264 - const id = getCellId(cell) 305 + const id = self.getCellId(cell)
265 const chartDom = document.getElementById(id) 306 const chartDom = document.getElementById(id)
266 chartDom.style.width = `${ width }px` 307 chartDom.style.width = `${ width }px`
267 chartDom.style.height = `${ height }px` 308 chartDom.style.height = `${ height }px`
268 - graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)  
269 - graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height) 309 + self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
  310 + self.graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
270 const instance = chartsInstanceMapping.get(id) 311 const instance = chartsInstanceMapping.get(id)
271 instance.resize() 312 instance.resize()
272 - cellResized.apply(this, arguments)  
273 - }  
274 -  
275 - /**  
276 - * @description 删除charts cell 时 删除保存的charts 实例  
277 - */  
278 - const deleteCells = Graph.prototype.deleteCells  
279 - Graph.prototype.deleteCells = function (cell) {  
280 - const id = getCellId(cell)  
281 - chartsInstanceMapping.delete(id)  
282 - return deleteCells.apply(this, arguments)  
283 } 313 }
  314 + cellResized.apply(this, arguments)
  315 + }
284 316
285 - /**  
286 - * @description 获取charts cell 的id  
287 - * @param cell  
288 - * @returns {*}  
289 - */  
290 - function getCellId(cell) {  
291 - return graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)  
292 - } 317 + /**
  318 + * @description 删除charts cell 时 删除保存的charts 实例
  319 + */
  320 + const deleteCells = Graph.prototype.deleteCells
  321 + Graph.prototype.deleteCells = function (cell) {
  322 + const id = self.getCellId(cell)
  323 + chartsInstanceMapping.delete(id)
  324 + return deleteCells.apply(this, arguments)
  325 + }
293 326
294 - /**  
295 - * @description 创建图表实例 并 保存实例到map中  
296 - * @param id  
297 - * @param width  
298 - * @param height  
299 - * @param chartType  
300 - */  
301 - function generatorEChartInstance(id, width, height, chartType) {  
302 - const chartDom = document.getElementById(id);  
303 - chartDom.style.width = `${ width }px`  
304 - chartDom.style.height = `${ height }px`  
305 - const myChart = echarts.init(chartDom);  
306 - const option = chartOptionMapping[chartType] ? chartOptionMapping[chartType]() : {}  
307 - option && myChart.setOption(option);  
308 - chartsInstanceMapping.set(id, myChart)  
309 - }  
310 327
311 - /**  
312 - * @description 初始化图表  
313 - */  
314 - const openFileHandle = EditorUi.prototype.openFileHandle  
315 - EditorUi.prototype.openFileHandle = function () {  
316 - try {  
317 - openFileHandle.apply(this, arguments)  
318 - } finally {  
319 - const allCell = this.editor.graph.getDefaultParent().children  
320 - const domIdMapping = new Map()  
321 - for (const cell of allCell) {  
322 - const chartInstanceId = graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)  
323 - if (isChartCell(cell) && chartInstanceId) {  
324 - const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)  
325 - const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)  
326 - const chartType = graph.getAttributeForCell(cell, enumConst.CHART_TYPE_KEY)  
327 - domIdMapping.set(chartInstanceId, { width, height, chartType })  
328 - }  
329 - }  
330 - const chartsDomList = document.querySelectorAll(`.${ enumConst.CHART_CONTAINER_CLS }`)  
331 - for (const chartDom of chartsDomList) {  
332 - const id = chartDom.getAttribute('id')  
333 - const { width, height, chartType } = domIdMapping.get(id)  
334 - console.log(chartType)  
335 - generatorEChartInstance(id, width, height, chartType)  
336 - } 328 + /**
  329 + * @description 拓展Sidebar 提示框
  330 + */
  331 + const createTooltip = Sidebar.prototype.createTooltip
  332 + Sidebar.prototype.createTooltip = function (elt, cells) {
  333 + const id = self.generatorChartsId()
  334 + const enumConst = self.enumConst
  335 + const validateFlag = self.isChartCell(cells[0])
  336 + const chartType = graph.getAttributeForCell(cells[0], enumConst.CHART_TYPE_KEY)
  337 + try {
  338 + if (validateFlag) {
  339 + const cell = self.generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
  340 + const _arguments = Array.prototype.slice.call(arguments, 0)
  341 + _arguments.splice(1, 1, [ cell ])
  342 + createTooltip.apply(this, _arguments)
  343 + } else {
  344 + createTooltip.apply(this, arguments)
337 } 345 }
  346 + } finally {
  347 + if (validateFlag) self.generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)
338 } 348 }
  349 + }
  350 + }
339 351
340 - /**  
341 - * @description 是否是图表cell  
342 - * @param cell  
343 - * @returns {boolean}  
344 - */  
345 - function isChartCell(cell) {  
346 - const componentsType = graph.getAttributeForCell(cell, enumConst.COMPONENTS_TYPE_KEY)  
347 - return !!(componentsType && componentsType === enumConst.CHART_COMP) 352 + /**
  353 + * @description 实例化echarts
  354 + * @param graph
  355 + */
  356 + Sidebar.prototype.initChartInstance = function (graph) {
  357 + const enumConst = Sidebar.prototype.enumConst
  358 + const allCell = graph.getDefaultParent().children
  359 + const domIdMapping = new Map()
  360 + for (const cell of allCell) {
  361 + const chartInstanceId = graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
  362 + if (Sidebar.prototype.isChartCell(cell) && chartInstanceId) {
  363 + const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
  364 + const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
  365 + const chartType = graph.getAttributeForCell(cell, enumConst.CHART_TYPE_KEY)
  366 + domIdMapping.set(chartInstanceId, { width, height, chartType })
348 } 367 }
349 -  
350 - /**  
351 - * @description 拓展Sidebar 提示框  
352 - */  
353 - const createTooltip = Sidebar.prototype.createTooltip  
354 - Sidebar.prototype.createTooltip = function (elt, cells) {  
355 - const id = generatorChartsId()  
356 - const validateFlag = isChartCell(cells[0])  
357 - const chartType = graph.getAttributeForCell(cells[0], enumConst.CHART_TYPE_KEY)  
358 - try {  
359 - if (validateFlag) {  
360 - const cell = generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)  
361 - const _arguments = Array.prototype.slice.call(arguments, 0)  
362 - _arguments.splice(1, 1, [ cell ])  
363 - createTooltip.apply(this, _arguments)  
364 - } else {  
365 - createTooltip.apply(this, arguments)  
366 - }  
367 - } finally {  
368 - if (validateFlag) generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, chartType)  
369 - } 368 + }
  369 + const chartsDomList = document.querySelectorAll(`.${ enumConst.CHART_CONTAINER_CLS }`)
  370 + for (const chartDom of chartsDomList) {
  371 + const id = chartDom.getAttribute('id')
  372 + if (!domIdMapping.has(id)) {
  373 + continue
370 } 374 }
  375 + const { width, height, chartType } = domIdMapping.get(id)
  376 + Sidebar.prototype.generatorEChartInstance(id, width, height, chartType)
371 } 377 }
  378 + }
372 379
373 - return {  
374 - generatorCell,  
375 - generatorChartsId,  
376 - createChartsNode,  
377 - chartsComponentInit,  
378 - chartsLineChartsConfig,  
379 - enumConst,  
380 - enumChartType, 380 + /**
  381 + * @description 初始化图表
  382 + */
  383 + const openFileHandle = EditorUi.prototype.openFileHandle
  384 + EditorUi.prototype.openFileHandle = function () {
  385 + try {
  386 + openFileHandle.apply(this, arguments)
  387 + } finally {
  388 + const graph = this.editor.graph
  389 + Sidebar.prototype.initChartInstance(graph)
381 } 390 }
382 } 391 }
383 392
  393 + /**
  394 + * @description 实例化 echarts
  395 + */
  396 + const refresh = Graph.prototype.refresh
  397 + Graph.prototype.refresh = function () {
  398 + refresh.apply(this, arguments)
  399 + if (!arguments.length) {
  400 + Sidebar.prototype.initChartInstance(this)
  401 + }
  402 + }
384 })(); 403 })();
  404 +