简柏林 / 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 258 /**
259 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 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 5861 }));
5860 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 5888 // this.shareButton = document.createElement('div');
5864 5889 // this.shareButton.className = 'geBtn gePrimaryBtn';
... ... @@ -5901,6 +5926,8 @@ App.prototype.updateButtonContainer = function()
5901 5926 {
5902 5927 this.shareButton.parentNode.removeChild(this.shareButton);
5903 5928 this.shareButton = null;
  5929 + this.saveButton.parentNode.removeChild(this.saveButton);
  5930 + this.saveButton = null;
5904 5931 }
5905 5932
5906 5933 //Fetch notifications
... ...
... ... @@ -3,7 +3,10 @@
3 3 // Adds Atlassian shapes
4 4 // 图表
5 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 11 const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
9 12 const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
... ... @@ -11,17 +14,18 @@
11 14 const gn = 'mxgraph.charts';
12 15 const dt = 'charts ';
13 16 const sb = this;
  17 +
14 18 this.setCurrentSearchEntryLibrary('charts');
15 19
16 20 const fns = [
17 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 24 return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '折线图');
21 25 })),
22 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 29 return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '柱状图');
26 30 })),
27 31 ];
... ... @@ -31,130 +35,89 @@
31 35 this.setCurrentSearchEntryLibrary();
32 36 };
33 37
  38 + /**
  39 + * @description echarts 实例映射
  40 + * @type {Map<any, any>}
  41 + */
34 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 121 return {
159 122 xAxis: {
160 123 type: 'category',
... ... @@ -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 138 return {
181 139 xAxis: {
182 140 type: 'category',
... ... @@ -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 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 304 const { width, height } = rect
264   - const id = getCellId(cell)
  305 + const id = self.getCellId(cell)
265 306 const chartDom = document.getElementById(id)
266 307 chartDom.style.width = `${ width }px`
267 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 311 const instance = chartsInstanceMapping.get(id)
271 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 +
... ...