This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch next in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit ec5bcf444f0338c3fe9ac8b76701e464b93e2c86 Author: 100pah <sushuang0...@gmail.com> AuthorDate: Wed Oct 28 03:10:57 2020 +0800 fix: [graphic component] compat legacy style. --- src/component/graphic.ts | 19 ++++- test/graphic-cases.html | 202 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 219 insertions(+), 2 deletions(-) diff --git a/src/component/graphic.ts b/src/component/graphic.ts index 04beade..909976e 100644 --- a/src/component/graphic.ts +++ b/src/component/graphic.ts @@ -36,6 +36,7 @@ import ComponentView from '../view/Component'; import ExtensionAPI from '../ExtensionAPI'; import { getECData } from '../util/innerStore'; import { TextStyleProps } from 'zrender/src/graphic/Text'; +import { isEC4CompatibleStyle, convertFromEC4CompatibleStyle } from '../util/styleCompat'; const TRANSFORM_PROPS = { @@ -436,8 +437,9 @@ class GraphicComponentView extends ComponentView { const parentId = modelUtil.convertOptionIdName(elOption.parentId, null); const targetElParent = (parentId != null ? elMap.get(parentId) : rootGroup) as graphicUtil.Group; + const elType = elOption.type; const elOptionStyle = (elOption as GraphicComponentDisplayableOption).style; - if (elOption.type === 'text' && elOptionStyle) { + if (elType === 'text' && elOptionStyle) { // In top/bottom mode, textVerticalAlign should not be used, which cause // inaccurately locating. if (elOption.hv && elOption.hv[1]) { @@ -448,7 +450,20 @@ class GraphicComponentView extends ComponentView { } } - const textContentOption = (elOption as GraphicComponentZRPathOption).textContent; + let textContentOption = (elOption as GraphicComponentZRPathOption).textContent; + let textConfig = (elOption as GraphicComponentZRPathOption).textConfig; + if (elOptionStyle + && isEC4CompatibleStyle(elOptionStyle, elType, !!textConfig, !!textContentOption) + ) { + const convertResult = convertFromEC4CompatibleStyle(elOptionStyle, elType, true); + if (!textConfig && convertResult.textConfig) { + textConfig = (elOption as GraphicComponentZRPathOption).textConfig = convertResult.textConfig; + } + if (!textContentOption && convertResult.textContent) { + textContentOption = convertResult.textContent; + } + } + // Remove unnecessary props to avoid potential problems. const elOptionCleaned = getCleanedElOption(elOption); diff --git a/test/graphic-cases.html b/test/graphic-cases.html new file mode 100644 index 0000000..7b4b1c4 --- /dev/null +++ b/test/graphic-cases.html @@ -0,0 +1,202 @@ +<!DOCTYPE html> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> + + +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <script src="lib/esl.js"></script> + <script src="lib/config.js"></script> + <script src="lib/jquery.min.js"></script> + <script src="lib/facePrint.js"></script> + <script src="lib/testHelper.js"></script> + <!-- <script src="ut/lib/canteen.js"></script> --> + <link rel="stylesheet" href="lib/reset.css" /> + </head> + <body> + <style> + </style> + + + + <div id="main0"></div> + <div id="main-legacy-style"></div> + + + + + <script> + require(['echarts'/*, 'map/js/china' */], function (echarts) { + var option; + // $.getJSON('./data/nutrients.json', function (data) {}); + + + const imageURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIUARQAHY8+4wAAApBJREFUeNrt3cFqAjEUhlEjvv8rXzciiiBGk/He5JxdN2U649dY+KmnEwAAAAAv2uMXEeGOwERntwAEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOCgpkuKq2it/r8Li2hbvGKqP6s/PycnHHv9YvSWEgQHCA4EBwgOBAeCAwQHggMEByXM+QRUE6D3suwuPafDn5MTDg50KXnVPSdxa54y/oYDwQGCA8EBggPBAYIDwYHggBE+X5rY3Y3Tey97Nn2eU+rnlGfaZa6Ft5SA4EBwgOBAcCA4QHAgOEBwIDjg [...] + + + option = { + graphic: [{ + type: 'circle', + x: 100, + y: 50, + shape: { + cx: 0, + cy: 0, + r: 50 + }, + style: { + fill: 'orange' + }, + textContent: { + style: { + text: 'x: 100, y: 50\nposition: bottom', + fill: 'blue' + } + }, + textConfig: { + position: 'bottom' + } + }, { + type: 'rect', + x: 200, + y: 0, + scaleX: 10, + scaleY: 20, + shape: { + x: 0, + y: 0, + width: 5, + height: 5 + }, + style: { + fill: 'red' + }, + textContent: { + style: { + text: 'x: 200, y: 0\nscaleX: 10, scaleY: 20\nposition: inside' + } + }, + textConfig: { + position: 'inside' + } + }, { + type: 'image', + x: 300, + y: 0, + style: { + width: 50, + height: 100, + image: imageURI, + storke: 'blue', + lineWidth: 5 + } + }] + }; + + var chart = testHelper.create(echarts, 'main0', { + title: [ + 'New API:', + '**textContent** should be displayed.', + 'Check transform according to textContent.' + ], + option: option + }); + + }); + </script> + + + + + + + + <script> + require(['echarts'/*, 'map/js/china' */], function (echarts) { + var option; + // $.getJSON('./data/nutrients.json', function (data) {}); + + + const imageURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIUARQAHY8+4wAAApBJREFUeNrt3cFqAjEUhlEjvv8rXzciiiBGk/He5JxdN2U649dY+KmnEwAAAAAv2uMXEeGOwERntwAEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOCgpkuKq2it/r8Li2hbvGKqP6s/PycnHHv9YvSWEgQHCA4EBwgOBAeCAwQHggMEByXM+QRUE6D3suwuPafDn5MTDg50KXnVPSdxa54y/oYDwQGCA8EBggPBAYIDwYHggBE+X5rY3Y3Tey97Nn2eU+rnlGfaZa6Ft5SA4EBwgOBAcCA4QHAgOEBwIDjg [...] + + + option = { + graphic: [{ + type: 'circle', + x: 100, + y: 50, + shape: { + cx: 0, + cy: 0, + r: 50 + }, + style: { + fill: 'orange', + text: 'x: 100, y: 50\nposition: bottom', + textFill: 'blue', + textPosition: 'bottom' + }, + }, { + type: 'rect', + x: 200, + y: 0, + scaleX: 10, + scaleY: 20, + shape: { + x: 0, + y: 0, + width: 5, + height: 5 + }, + style: { + fill: 'red', + text: 'x: 200, y: 0\nscaleX: 10, scaleY: 20\nposition: inside', + textPosition: 'inside' + } + }, { + type: 'image', + x: 300, + y: 0, + style: { + width: 50, + height: 100, + image: imageURI, + storke: 'blue', + lineWidth: 5 + } + }] + }; + + var chart = testHelper.create(echarts, 'main-legacy-style', { + title: [ + 'Legacy API:', + 'Should the same as new API' + ], + option: option + }); + + }); + </script> + + + </body> +</html> + --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org