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
