简柏林 / thingskit-scada · Commits

Commit 2da0504acdbe415c06adc592d8177eaa000facdd

Authored by ww
1 parent e0700ed1

feat: implement chart component

Inline Side-by-side
Showing 4 changed files with 326 additions and 214 deletions
src/main/webapp/images/thingskit/line-chart.png renamed from src/main/webapp/images/thingskit/charts.png

224 Bytes
1 1 (function () {
2 2
3   - const enumConst = {
4   -
5   - /**
6   - * @description 图表cell 默认宽度
7   - */
8   - CHART_CELL_DEFAULT_WIDTH: 400,
9   -
10   - /**
11   - * @description 图表cell 默认高度
12   - */
13   - CHART_CELL_DEFAULT_HEIGHT: 400,
14   -
15   - /**
16   - * @description 图表cell的 width attribute
17   - */
18   - CHART_CELL_WIDTH: 'width',
19   -
20   - /**
21   - * @description 图表cell的 height attribute
22   - */
23   - CHART_CELL_HEIGHT: 'height',
24   -
25   - /**
26   - * @description cell 类型是否为 charts
27   - */
28   - IS_CHART_COMP: 'charts',
29   -
30   - /**
31   - * @description cell id key
32   - */
33   - CHART_CELL_ID: 'chartInstanceId',
34   -
35   - /**
36   - * @description 图表类型key
37   - */
38   - CHART_CELL_TYPE: 'componentsType',
39   -
40   - /**
41   - * @description 图表容器 class name
42   - */
43   - CHART_CONTAINER_CLS: 'echarts__instance',
44   -
45   - /**
46   - * @description 图表容器 id 前缀
47   - */
48   - CHART_CONTAINER_ID_PREFIX: 'echarts__instance__',
49   -
50   - /**
51   - * @description 图表图片占位符大小
52   - */
53   - CHART_IMG_PLACEHOLDER_SIZE: 30,
54   - }
55   -
56 3 // Adds Atlassian shapes
57 4 // 图表
58 5 Sidebar.prototype.addChartsPalette = function () {
59   - const graph = this.graph
60   - chartsComponentInit(graph)
  6 + const { enumConst, enumChartType, generatorCell, generatorChartsId } = this.chartsComponentExtend()
61 7
62 8 const s = 'html=1;shadow=0;dashed=0;shape=mxgraph.atlassian.';
63 9 const s2 = 'html=1;shadow=0;dashed=0;fillColor=none;strokeColor=none;shape=mxgraph.bootstrap.rect;';
... ... @@ -68,10 +14,15 @@
68 14 this.setCurrentSearchEntryLibrary('charts');
69 15
70 16 const fns = [
71   - this.addEntry('charts', mxUtils.bind(this, function () {
  17 + this.addEntry('line chart', mxUtils.bind(this, function () {
72 18 const id = generatorChartsId()
73   - const cell = generatorCell(id, enumConst.CHART_IMG_PLACEHOLDER_SIZE, enumConst.CHART_IMG_PLACEHOLDER_SIZE, graph)
74   - return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, 'charts');
  19 + const cell = 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, '折线图');
  21 + })),
  22 + 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')
  25 + return this.createVertexTemplateFromCells([ cell ], cell.geometry.width, cell.geometry.height, '柱状图');
75 26 })),
76 27 ];
77 28
... ... @@ -80,195 +31,354 @@
80 31 this.setCurrentSearchEntryLibrary();
81 32 };
82 33
  34 + Sidebar.prototype.chartsInstanceMapping = new Map()
  35 +
83 36 /**
84   - * @description 创建cell
85   - * @param id
86   - * @param width
87   - * @param height
88   - * @returns {*}
  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}}
89 39 */
90   - function generatorCell(id, width, height, graph) {
91   - const cell = new mxCell(createChartsNode(id, width, height), new mxGeometry(0, 0, width, height), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
92   - cell.setVertex(true)
93   - graph.setAttributeForCell(cell, enumConst.CHART_CELL_TYPE, 'charts');
94   - graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
95   - graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
96   - graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
97   - return cell
98   - }
99   -
100   - function generatorChartsId() {
101   - return `${ enumConst.CHART_CONTAINER_ID_PREFIX }${ Date.now() }`
102   - }
103   -
  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',
  62 +
  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__',
  87 +
  88 + /**
  89 + * @description 图表图片占位符大小
  90 + */
  91 + CHART_IMG_PLACEHOLDER_SIZE: 30,
  92 +
  93 + /**
  94 + * @description 图表类型 key
  95 + */
  96 + CHART_TYPE_KEY: 'chartType',
  97 + }
104 98
105   - function createChartsNode(id, width = 400, height = 400) {
106   - const chartImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAAlUlEQVRIie2UWwqAIBBFD+0hqR21lVpuffRfC7GPJpAYNe1BQRcGxcc9MyrCrwxZiUtUXGX0FMAAbWxR7IiMhDY+yN4uF1ACPTACtTJuZa7KAbgmm1Gdau4DuOUPgb52dFGAlqFWTTRzDRAq372Pw+Z7QEe4fN+LOgyA9V0nm6QATulzX8U7ALO09kQE1QDTnYBfz2oBmQJYp8UoXcoAAAAASUVORK5CYII='
107   - return `<div class="echarts__instance" style="width: ${ width }px; height: ${ height }px" id="${ id }"><img src="${ chartImg }" alt=""></div>`
108   - }
  99 + const enumChartType = {
  100 + LINE_CHART: 'lineChart',
  101 + BAR_CHART: 'barChart',
  102 + }
109 103
110   - /**
111   - * @description 折线图配置
112   - * @returns {{yAxis: {type: string}, xAxis: {data: string[], type: string}, series: [{data: number[], type: string}]}}
113   - */
114   - function chartsLineChartsConfig() {
115   - return {
116   - xAxis: {
117   - type: 'category',
118   - data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
119   - },
120   - yAxis: {
121   - type: 'value',
122   - },
123   - series: [
124   - {
125   - data: [ 150, 230, 224, 218, 135, 147, 260 ],
126   - type: 'line',
127   - },
128   - ],
  104 + const chartOptionMapping = {
  105 + [enumChartType.LINE_CHART]: chartsLineChartsConfig,
  106 + [enumChartType.BAR_CHART]: chartsBarChartConfig,
129 107 }
130   - }
131 108
132   - function chartsComponentInit(graph) {
133   - const chartsInstanceMapping = new Map()
  109 + const graph = this.graph
  110 +
  111 + chartsComponentInit()
134 112
135 113 /**
136   - * @description 拓展添加charts 实例方法
  114 + * @description 创建cell
  115 + * @param id
  116 + * @param width
  117 + * @param height
  118 + * @param chartType
  119 + * @param placeholderPath
  120 + * @returns {*}
137 121 */
138   - const addClickHandler = Sidebar.prototype.addClickHandler
139   - Sidebar.prototype.addClickHandler = function (elt, ds, cells) {
140   - const cell = cells[0]
141   - const cellValue = cell.value
142   - const validate = cellValue && cellValue.nodeName === 'UserObject' && isChartCell(cell)
143   -
144   - const mouseDown = ds.mouseDown
145   - ds.mouseDown = function (evt) {
146   - if (validate) {
147   - const id = generatorChartsId()
148   - const geo = Object.assign(graph.model.getGeometry(cell), { width: 400, height: 400 })
149   - cell.setGeometry(geo)
150   - graph.setAttributeForCell(cell, enumConst.CHART_CELL_ID, id);
151   - graph.setAttributeForCell(cell, 'label', createChartsNode(id))
152   - }
153   - mouseDown.apply(this, arguments)
154   - };
155   -
156   - const mouseUp = ds.mouseUp
157   - ds.mouseUp = function () {
158   - try {
159   - mouseUp.apply(this, arguments)
160   - } finally {
161   - if (validate) {
162   - const id = getCellId(cell)
163   - const chartDom = document.getElementById(id);
164   - const myChart = echarts.init(chartDom);
165   - const option = chartsLineChartsConfig()
166   - option && myChart.setOption(option);
167   - chartsInstanceMapping.set(id, myChart)
168   - }
169   - }
170   - }
171   - addClickHandler.apply(this, arguments)
  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
172 131 }
173 132
174 133 /**
175   - * @description charts cell发生resize时改变charts size
176   - * @type {mxGraph.cellResized}
  134 + * @description 生成图表 id
  135 + * @returns {string}
177 136 */
178   - const cellResized = mxGraph.prototype.cellResized
179   - mxGraph.prototype.cellResized = function (cell, rect) {
180   - const { width, height } = rect
181   - const id = getCellId(cell)
182   - const chartDom = document.getElementById(id)
183   - chartDom.style.width = `${ width }px`
184   - chartDom.style.height = `${ height }px`
185   - graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
186   - graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
187   - const instance = chartsInstanceMapping.get(id)
188   - instance.resize()
189   - cellResized.apply(this, arguments)
  137 + function generatorChartsId() {
  138 + return `${ enumConst.CHART_CONTAINER_ID_PREFIX }${ Date.now() }`
190 139 }
191 140
192 141 /**
193   - * @description 删除charts cell 时 删除保存的charts 实例
  142 + * @description 创建图表节点
  143 + * @param id
  144 + * @param width
  145 + * @param height
  146 + * @param placeholderPath
  147 + * @returns {string}
194 148 */
195   - const deleteCells = Graph.prototype.deleteCells
196   - Graph.prototype.deleteCells = function (cell) {
197   - const id = getCellId(cell)
198   - chartsInstanceMapping.delete(id)
199   - return deleteCells.apply(this, arguments)
  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>`
200 151 }
201 152
202 153 /**
203   - * @description 获取charts cell 的id
204   - * @param cell
205   - * @returns {*}
  154 + * @description 折线图配置
  155 + * @returns {{yAxis: {type: string}, xAxis: {data: string[], type: string}, series: [{data: number[], type: string}]}}
206 156 */
207   - function getCellId(cell) {
208   - return graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
  157 + function chartsLineChartsConfig() {
  158 + return {
  159 + xAxis: {
  160 + type: 'category',
  161 + data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
  162 + },
  163 + yAxis: {
  164 + type: 'value',
  165 + },
  166 + series: [
  167 + {
  168 + data: [ 150, 230, 224, 218, 135, 147, 260 ],
  169 + type: 'line',
  170 + },
  171 + ],
  172 + }
209 173 }
210 174
211   - function generatorEChartInstance(id, width, height) {
212   - const chartDom = document.getElementById(id);
213   - chartDom.style.width = `${ width }px`
214   - chartDom.style.height = `${ height }px`
215   - const myChart = echarts.init(chartDom);
216   - const option = chartsLineChartsConfig()
217   - option && myChart.setOption(option);
218   - chartsInstanceMapping.set(id, myChart)
  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() {
  180 + return {
  181 + xAxis: {
  182 + type: 'category',
  183 + data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
  184 + },
  185 + yAxis: {
  186 + type: 'value',
  187 + },
  188 + series: [
  189 + {
  190 + data: [ 120, 200, 150, 80, 70, 110, 130 ],
  191 + type: 'bar',
  192 + showBackground: true,
  193 + backgroundStyle: {
  194 + color: 'rgba(180, 180, 180, 0.2)',
  195 + },
  196 + },
  197 + ],
  198 + };
219 199 }
220 200
221   - // 初始化图表
222   - const openFileHandle = EditorUi.prototype.openFileHandle
223   - EditorUi.prototype.openFileHandle = function () {
224   - try {
225   - openFileHandle.apply(this, arguments)
226   - } finally {
227   - const allCell = this.editor.graph.getDefaultParent().children
228   - const domIdMapping = new Map()
229   - for (const cell of allCell) {
230   - const chartInstanceId = graph.getAttributeForCell(cell, enumConst.CHART_CELL_ID)
231   - if (isChartCell(cell) && chartInstanceId) {
232   - const width = graph.getAttributeForCell(cell, enumConst.CHART_CELL_WIDTH)
233   - const height = graph.getAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT)
234   - domIdMapping.set(chartInstanceId, { width, height })
  201 + /**
  202 + * @description 图表组件 拓展处理
  203 + */
  204 + function chartsComponentInit() {
  205 + const chartsInstanceMapping = Sidebar.prototype.chartsInstanceMapping
  206 +
  207 + /**
  208 + * @description 拓展添加charts 实例方法
  209 + */
  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) {
  222 + 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 + }
235 252 }
236 253 }
237   - const chartsDomList = document.querySelectorAll(`.${ enumConst.CHART_CONTAINER_CLS }`)
238   - for (const chartDom of chartsDomList) {
239   - const id = chartDom.getAttribute('id')
240   - const { width, height } = domIdMapping.get(id)
241   - generatorEChartInstance(id, width, height)
  254 + addClickHandler.apply(this, arguments)
  255 + }
  256 +
  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) {
  263 + const { width, height } = rect
  264 + const id = getCellId(cell)
  265 + const chartDom = document.getElementById(id)
  266 + chartDom.style.width = `${ width }px`
  267 + chartDom.style.height = `${ height }px`
  268 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_WIDTH, width)
  269 + graph.setAttributeForCell(cell, enumConst.CHART_CELL_HEIGHT, height)
  270 + const instance = chartsInstanceMapping.get(id)
  271 + 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 + }
  284 +
  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 + }
  293 +
  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 +
  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 + }
242 337 }
243 338 }
244   - }
245 339
246   - /**
247   - * @description 是否是图表cell
248   - * @param cell
249   - * @returns {boolean}
250   - */
251   - function isChartCell(cell) {
252   - const componentsType = graph.getAttributeForCell(cell, enumConst.CHART_CELL_TYPE)
253   - return !!(componentsType && componentsType === enumConst.IS_CHART_COMP)
254   - }
  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)
  348 + }
255 349
256   - const createTooltip = Sidebar.prototype.createTooltip
257   - Sidebar.prototype.createTooltip = function (elt, cells) {
258   - const id = generatorChartsId()
259   - const validateFlag = isChartCell(cells[0])
260   - try {
261   - if (validateFlag) {
262   - const cell = generatorCell(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT, graph)
263   - const _arguments = Array.prototype.slice.call(arguments, 0)
264   - _arguments.splice(1, 1, [ cell ])
265   - createTooltip.apply(this, _arguments)
266   - } else {
267   - createTooltip.apply(this, arguments)
  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)
268 369 }
269   - } finally {
270   - if (validateFlag) generatorEChartInstance(id, enumConst.CHART_CELL_DEFAULT_WIDTH, enumConst.CHART_CELL_DEFAULT_HEIGHT)
271 370 }
272 371 }
  372 +
  373 + return {
  374 + generatorCell,
  375 + generatorChartsId,
  376 + createChartsNode,
  377 + chartsComponentInit,
  378 + chartsLineChartsConfig,
  379 + enumConst,
  380 + enumChartType,
  381 + }
273 382 }
  383 +
274 384 })();
... ...
... ... @@ -4879,6 +4879,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
4879 4879 const ss = ui.getSelectionState();
4880 4880 const vertices = ss.vertices || []
4881 4881
  4882 + console.log(Sidebar.prototype)
  4883 + console.log(Sidebar.prototype.chartsInstanceMapping)
4882 4884 // console.log(this.editorUi)
4883 4885 console.log(vertices)
4884 4886
... ...