1356 lines
45 KiB
TypeScript
Generated
1356 lines
45 KiB
TypeScript
Generated
/*
|
||
* 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.
|
||
*/
|
||
|
||
import { createChart, getGraphicElements, getECModel } from '../../../core/utHelper';
|
||
// import { imageURI } from './setOptionImageURI';
|
||
import { EChartsType } from '../../../../../src/echarts';
|
||
import Element from 'zrender/src/Element';
|
||
import { EChartsOption } from '../../../../../src/export/option';
|
||
import {
|
||
GraphicComponentOption,
|
||
GraphicComponentImageOption
|
||
} from '../../../../../src/component/graphic/GraphicModel';
|
||
import Group from 'zrender/src/graphic/Group';
|
||
import { Dictionary } from 'zrender/src/core/types';
|
||
|
||
|
||
|
||
// eslint-disable-next-line max-len
|
||
const imageURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIUARQAHY8+4wAAApBJREFUeNrt3cFqAjEUhlEjvv8rXzciiiBGk/He5JxdN2U649dY+KmnEwAAAAAv2uMXEeGOwERntwAEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOCgpkuKq2it/r8Li2hbvGKqP6s/PycnHHv9YvSWEgQHCA4EBwgOBAeCAwQHggMEByXM+QRUE6D3suwuPafDn5MTDg50KXnVPSdxa54y/oYDwQGCA8EBggPBAYIDwYHggBE+X5rY3Y3Tey97Nn2eU+rnlGfaZa6Ft5SA4EBwgOBAcCA4QHAgOEBwIDjgZu60y1xrDPtIJxwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4GADcz9y2McIgxMOBAeCAwQHggMEB4IDwQGCA8EBggPBATdP6+KIGPRdW7i1LCFi6ALfCQfeUoLgAMGB4ADBgeBAcIDgQHCA4CCdOVvK7quwveQgg7eRTjjwlhIQHAgOBAcIDgQHCA4EB4IDBAfl5dhSdl+17SX3F22rdLlOOBAcCA4QHAgOEBwIDgQHCA4EBwgO0qm5pez6Ce0uSym2jXTCgeAAwYHgQHCA4EBwgOBAcCA4QHBQ3vpbyu47Yns51OLbSCccCA4QHAgOBAcIDgQHCA4EB4ID5jDt+vkObjgFM9dywoHgAMGB4EBwgOBAcIDgQHAgOEBwsA5bysPveMLtpW2kEw4EBwgOBAcIDgQHggMEB4IDBAeCg33ZUqZ/Ql9sL20jnXCA4EBwIDhAcCA4QHAgOBAcIDgQHNOZai3DlhKccCA4QHAgOEBwIDgQHCA4AAAAAGA1VyxaWIohrgXFAAAAAElFTkSuQmCC';
|
||
|
||
// function loadImage(onload: (img: HTMLImageElement) => void) {
|
||
// const img = new window.Image();
|
||
// img.onload = function () {
|
||
// onload(img);
|
||
// };
|
||
// img.src = imageURI;
|
||
// }
|
||
// FIXME: TMEP use rect, would have used image.
|
||
// node-canvas will throw error when using data URI to zrender directly.
|
||
// Havn't dig it out why yet.
|
||
function tmpConvertImageOption(opt: GraphicComponentImageOption): object {
|
||
const outOpt = opt as Dictionary<unknown>;
|
||
outOpt.type = 'rect';
|
||
const style = opt.style || {};
|
||
delete style.image;
|
||
outOpt.shape = {
|
||
x: style.x || 0,
|
||
y: style.y || 0,
|
||
width: style.width || 0,
|
||
height: style.height || 0
|
||
};
|
||
return outOpt;
|
||
}
|
||
|
||
|
||
describe('graphic_setOption', function () {
|
||
|
||
const NUMBER_PRECISION = 6;
|
||
|
||
function propHasAll(els: Element[], propsObjList: object[]) {
|
||
for (let i = 0; i < propsObjList.length; i++) {
|
||
propHas(els[i], propsObjList[i]);
|
||
}
|
||
}
|
||
|
||
function propHas(target: object, propsObj: object): void {
|
||
if (target == null || propsObj == null) {
|
||
expect(false).toEqual(true);
|
||
}
|
||
expect(typeof target === 'object' && typeof propsObj === 'object').toEqual(true);
|
||
|
||
// propsObj can be array
|
||
if (propsObj instanceof Array) {
|
||
expect(target instanceof Array).toEqual(true);
|
||
for (let i = 0; i < propsObj.length; i++) {
|
||
each((target as Element[])[i], propsObj[i], i);
|
||
}
|
||
}
|
||
else {
|
||
for (const name in propsObj) {
|
||
if (propsObj.hasOwnProperty(name)) {
|
||
each((target as any)[name], (propsObj as any)[name], name);
|
||
}
|
||
}
|
||
}
|
||
|
||
function each(targetVal: unknown, propVal: unknown, keyInfo: string | number): void {
|
||
// console.log(targetVal, propVal, keyInfo);
|
||
if (propVal == null) {
|
||
expect(targetVal == null).toEqual(true);
|
||
}
|
||
// object or array
|
||
else if (typeof propVal === 'object') {
|
||
propHas(targetVal as object, propVal);
|
||
}
|
||
else if (typeof propVal === 'number') {
|
||
expect(typeof targetVal).toEqual('number');
|
||
expect((targetVal as number).toFixed(NUMBER_PRECISION)).toEqual(propVal.toFixed(NUMBER_PRECISION));
|
||
}
|
||
else {
|
||
expect(targetVal).toStrictEqual(propVal);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
let chart: EChartsType;
|
||
beforeEach(function () {
|
||
chart = createChart();
|
||
});
|
||
|
||
afterEach(function () {
|
||
chart.dispose();
|
||
});
|
||
|
||
describe('option', function () {
|
||
|
||
it('optionFlatten', function () {
|
||
chart.setOption({
|
||
graphic: [
|
||
tmpConvertImageOption({
|
||
id: 'uriimg',
|
||
type: 'image',
|
||
name: 'nameuriimg',
|
||
originX: 20,
|
||
originY: 20,
|
||
left: 10,
|
||
top: 10,
|
||
style: {
|
||
image: imageURI,
|
||
width: 80,
|
||
height: 80,
|
||
opacity: 0.5
|
||
}
|
||
}),
|
||
{
|
||
type: 'group',
|
||
id: 'gr',
|
||
width: 230,
|
||
height: 110,
|
||
x: 70,
|
||
y: 90,
|
||
children: [
|
||
{
|
||
type: 'rect',
|
||
name: 'rectxx',
|
||
shape: {
|
||
width: 230,
|
||
height: 80
|
||
},
|
||
style: {
|
||
stroke: 'red',
|
||
fill: 'transparent',
|
||
lineWidth: 2
|
||
},
|
||
z: 100
|
||
},
|
||
{
|
||
id: 'grouptext',
|
||
type: 'text',
|
||
bottom: 0,
|
||
right: 0,
|
||
rotation: 0.5,
|
||
style: {
|
||
text: 'aaa'
|
||
},
|
||
z: 100
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'text',
|
||
bottom: 0,
|
||
left: 'center',
|
||
style: {
|
||
text: 'bbb'
|
||
},
|
||
z: 100
|
||
}
|
||
]
|
||
});
|
||
|
||
// Set option using getOption
|
||
const option = chart.getOption();
|
||
const graphicOptionList = option.graphic as GraphicComponentOption[];
|
||
|
||
expect(graphicOptionList.length === 1).toEqual(true);
|
||
const optionElements = graphicOptionList[0].elements;
|
||
expect(optionElements && optionElements.length === 5).toEqual(true);
|
||
|
||
expect(optionElements[0].id === 'uriimg' && optionElements[0].parentId == null).toEqual(true);
|
||
expect(optionElements[1].id === 'gr' && optionElements[1].parentId == null).toEqual(true);
|
||
expect(optionElements[2].name === 'rectxx' && optionElements[2].parentId === 'gr').toEqual(true);
|
||
expect((optionElements[3] as any).style.text === 'aaa' && optionElements[3].parentId === 'gr')
|
||
.toEqual(true);
|
||
expect((optionElements[4] as any).style.text === 'bbb' && optionElements[4].parentId == null)
|
||
.toEqual(true);
|
||
|
||
});
|
||
|
||
|
||
it('groupSetOptionGetOption', function () {
|
||
|
||
chart.setOption({
|
||
graphic: [
|
||
tmpConvertImageOption({
|
||
id: 'uriimg',
|
||
type: 'image',
|
||
name: 'nameuriimg',
|
||
originX: 20,
|
||
originY: 20,
|
||
left: 10,
|
||
top: 10,
|
||
style: {
|
||
image: imageURI,
|
||
width: 80,
|
||
height: 80,
|
||
opacity: 0.5
|
||
}
|
||
}),
|
||
{
|
||
type: 'group',
|
||
id: 'gr',
|
||
width: 230,
|
||
height: 110,
|
||
x: 70,
|
||
y: 90,
|
||
children: [
|
||
{
|
||
type: 'rect',
|
||
name: 'rectxx',
|
||
shape: {
|
||
width: 230,
|
||
height: 80
|
||
},
|
||
style: {
|
||
stroke: 'red',
|
||
fill: 'transparent',
|
||
lineWidth: 2
|
||
},
|
||
z: 100
|
||
},
|
||
{
|
||
id: 'grouptext',
|
||
type: 'text',
|
||
bottom: 0,
|
||
right: 0,
|
||
rotation: 0.5,
|
||
style: {
|
||
text: 'aaa'
|
||
},
|
||
z: 100
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'text',
|
||
bottom: 0,
|
||
left: 'center',
|
||
style: {
|
||
text: 'bbb'
|
||
},
|
||
z: 100
|
||
}
|
||
]
|
||
});
|
||
|
||
checkExistsAndRelations();
|
||
|
||
// Set option using getOption
|
||
chart.setOption(chart.getOption());
|
||
|
||
// Check again, should be the same as before.
|
||
checkExistsAndRelations();
|
||
|
||
function checkExistsAndRelations() {
|
||
const els = getGraphicElements(chart, 'graphic');
|
||
|
||
expect(els.length === 6).toEqual(true);
|
||
expect(els[0].type === 'group').toEqual(true);
|
||
expect(els[1].name === 'nameuriimg').toEqual(true);
|
||
|
||
expect(els[2].type === 'group').toEqual(true);
|
||
const groupEls = getGraphicElements(els[2] as Group, 'graphic');
|
||
expect(groupEls.length === 2).toEqual(true);
|
||
expect(groupEls[0] === els[3]).toEqual(true);
|
||
expect(groupEls[1] === els[4]).toEqual(true);
|
||
expect(els[3].name === 'rectxx').toEqual(true);
|
||
expect((els[4] as any).style.text === 'aaa').toEqual(true);
|
||
|
||
expect((els[5] as any).style.text === 'bbb').toEqual(true);
|
||
}
|
||
});
|
||
|
||
|
||
it('onlyOneGraphicComponentAvailable', function () {
|
||
|
||
|
||
chart.setOption({
|
||
graphic: [
|
||
{
|
||
elements: [
|
||
{
|
||
type: 'circle',
|
||
shape: {
|
||
cx: 50,
|
||
cy: 50,
|
||
r: 20
|
||
}
|
||
},
|
||
{
|
||
type: 'circle',
|
||
shape: {
|
||
cx: 150,
|
||
cy: 150,
|
||
r: 20
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elements: [
|
||
{
|
||
type: 'circle',
|
||
shape: {
|
||
cx: 100,
|
||
cy: 100,
|
||
r: 20
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
});
|
||
|
||
expect(!!getECModel(chart).getComponent('graphic')).toEqual(true);
|
||
expect(getECModel(chart).getComponent('graphic', 1) == null).toEqual(true);
|
||
});
|
||
|
||
|
||
it('replace', function () {
|
||
|
||
|
||
chart.setOption({
|
||
graphic: {
|
||
type: 'circle',
|
||
name: 'a',
|
||
shape: {
|
||
cx: 50,
|
||
cy: 50,
|
||
r: 20
|
||
},
|
||
style: {
|
||
fill: 'green',
|
||
stroke: 'pink',
|
||
lineWidth: 3
|
||
}
|
||
}
|
||
});
|
||
|
||
let els: Element[];
|
||
|
||
els = getGraphicElements(chart, 'graphic');
|
||
|
||
expect(els.length === 2).toEqual(true);
|
||
expect(els[0].type === 'group').toEqual(true);
|
||
expect(els[1].name === 'a' && els[1].type === 'circle').toEqual(true);
|
||
|
||
chart.setOption({
|
||
graphic: {
|
||
type: 'rect',
|
||
$action: 'replace',
|
||
name: 'b',
|
||
shape: {
|
||
x: 50,
|
||
y: 50,
|
||
width: 20,
|
||
height: 60
|
||
},
|
||
style: {
|
||
fill: 'green',
|
||
stroke: 'pink',
|
||
lineWidth: 3
|
||
}
|
||
}
|
||
});
|
||
|
||
els = getGraphicElements(chart, 'graphic');
|
||
|
||
expect(els.length === 2).toEqual(true);
|
||
expect(els[0].type === 'group').toEqual(true);
|
||
expect(els[1].name === 'b' && els[1].type === 'rect').toEqual(true);
|
||
expect((els[1] as any).shape && (els[1] as any).shape.width === 20).toEqual(true);
|
||
});
|
||
|
||
|
||
function getDeleteSourceOption() {
|
||
return {
|
||
graphic: [
|
||
{
|
||
type: 'text',
|
||
name: 'textname',
|
||
style: {
|
||
text: 'asdf哈呵',
|
||
font: '40px sans-serif',
|
||
x: 100,
|
||
y: 40
|
||
}
|
||
},
|
||
{
|
||
id: 'rrr',
|
||
name: 'ringname',
|
||
type: 'ring',
|
||
shape: {
|
||
cx: 50,
|
||
cy: 150,
|
||
r: 20,
|
||
r0: 5
|
||
}
|
||
},
|
||
{
|
||
id: 'xxx',
|
||
name: 'rectname',
|
||
type: 'rect',
|
||
shape: {
|
||
x: 250,
|
||
y: 50,
|
||
width: 20,
|
||
height: 80
|
||
}
|
||
}
|
||
]
|
||
};
|
||
}
|
||
|
||
function checkDeteteSource(chart: EChartsType) {
|
||
const els = getGraphicElements(chart, 'graphic');
|
||
expect(els.length === 4);
|
||
expect(els[1].type === 'text' && els[1].name === 'textname').toEqual(true);
|
||
expect(els[2].type === 'ring' && els[2].name === 'ringname').toEqual(true);
|
||
expect(els[3].type === 'rect' && els[3].name === 'rectname').toEqual(true);
|
||
}
|
||
|
||
it('deleteBy$action', function () {
|
||
|
||
chart.setOption(getDeleteSourceOption());
|
||
|
||
checkDeteteSource(chart);
|
||
|
||
chart.setOption({
|
||
graphic: {
|
||
id: 'rrr',
|
||
$action: 'remove'
|
||
}
|
||
});
|
||
|
||
const els = getGraphicElements(chart, 'graphic');
|
||
expect(els.length === 3);
|
||
expect(els[1].type === 'text' && els[1].name === 'textname').toEqual(true);
|
||
expect(els[2].type === 'rect' && els[2].name === 'rectname').toEqual(true);
|
||
});
|
||
|
||
it('deleteBySetOptionNotMerge', function () {
|
||
|
||
|
||
chart.setOption(getDeleteSourceOption());
|
||
|
||
checkDeteteSource(chart);
|
||
|
||
chart.setOption({
|
||
graphic: {
|
||
type: 'rect',
|
||
name: 'rectname2',
|
||
shape: {
|
||
y: 100,
|
||
x: 250,
|
||
width: 40,
|
||
height: 140
|
||
},
|
||
style: {
|
||
fill: 'blue'
|
||
}
|
||
}
|
||
}, true);
|
||
|
||
const els = getGraphicElements(chart, 'graphic');
|
||
expect(els.length === 2);
|
||
expect(els[1].type === 'rect' && els[1].name === 'rectname2').toEqual(true);
|
||
});
|
||
|
||
it('deleteByClear', function () {
|
||
|
||
|
||
chart.setOption(getDeleteSourceOption());
|
||
|
||
checkDeteteSource(chart);
|
||
|
||
chart.clear();
|
||
|
||
const els = getGraphicElements(chart, 'graphic');
|
||
expect(els.length === 0);
|
||
});
|
||
|
||
|
||
function checkMergeElements(chart: EChartsType, merged: boolean): void {
|
||
const makeIdentityTransformProps = () => ({
|
||
x: 0,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0
|
||
});
|
||
propHasAll(getGraphicElements(chart, 'graphic'), [
|
||
{
|
||
...makeIdentityTransformProps()
|
||
},
|
||
{
|
||
...makeIdentityTransformProps(),
|
||
style: {},
|
||
shape: {
|
||
x: !merged ? 250 : 350,
|
||
y: 50,
|
||
width: 20,
|
||
height: 80
|
||
// r: 0
|
||
}
|
||
},
|
||
{
|
||
...makeIdentityTransformProps()
|
||
},
|
||
{
|
||
...makeIdentityTransformProps(),
|
||
style: {
|
||
fill: !merged ? 'yellow' : 'pink'
|
||
},
|
||
shape: {
|
||
x: 30,
|
||
y: 30,
|
||
width: 10,
|
||
height: 20
|
||
// r: 0
|
||
}
|
||
},
|
||
{
|
||
...makeIdentityTransformProps(),
|
||
style: !merged
|
||
? {}
|
||
: {
|
||
fill: 'green'
|
||
},
|
||
shape: {
|
||
cx: !merged ? 50 : 150,
|
||
cy: 150,
|
||
r: 20,
|
||
r0: 5
|
||
}
|
||
}
|
||
]);
|
||
}
|
||
|
||
it('mergeTroughFlatForamt', function () {
|
||
|
||
chart.setOption({
|
||
graphic: [
|
||
{
|
||
type: 'rect',
|
||
shape: {
|
||
x: 250,
|
||
y: 50,
|
||
width: 20,
|
||
height: 80
|
||
}
|
||
},
|
||
{
|
||
type: 'group',
|
||
children: [
|
||
{
|
||
id: 'ing',
|
||
type: 'rect',
|
||
shape: {
|
||
x: 30,
|
||
y: 30,
|
||
width: 10,
|
||
height: 20
|
||
},
|
||
style: {
|
||
fill: 'yellow'
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
id: 'rrr',
|
||
type: 'ring',
|
||
shape: {
|
||
cx: 50,
|
||
cy: 150,
|
||
r: 20,
|
||
r0: 5
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
checkMergeElements(chart, false);
|
||
|
||
chart.setOption({
|
||
graphic: [
|
||
{
|
||
shape: {
|
||
x: 350
|
||
}
|
||
},
|
||
{
|
||
id: 'rrr',
|
||
shape: {
|
||
cx: 150
|
||
},
|
||
style: {
|
||
fill: 'green'
|
||
}
|
||
},
|
||
// flat mode
|
||
{
|
||
id: 'ing',
|
||
style: {
|
||
fill: 'pink'
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
checkMergeElements(chart, true);
|
||
});
|
||
|
||
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
describe('groupLRTB', function () {
|
||
|
||
function getOption() {
|
||
return {
|
||
graphic: [
|
||
{
|
||
type: 'text',
|
||
bottom: 0,
|
||
right: 0,
|
||
rotation: Math.PI / 4,
|
||
style: {
|
||
font: '24px Microsoft YaHei',
|
||
text: '全屏右下角'
|
||
},
|
||
z: 100
|
||
},
|
||
tmpConvertImageOption({
|
||
id: 'uriimg',
|
||
type: 'image',
|
||
originX: 20,
|
||
originY: 20,
|
||
left: 10,
|
||
top: 10,
|
||
style: {
|
||
image: imageURI,
|
||
width: 80,
|
||
height: 80,
|
||
opacity: 0.5
|
||
}
|
||
}),
|
||
{
|
||
type: 'group',
|
||
id: 'gr',
|
||
width: 230,
|
||
height: 110,
|
||
x: 70,
|
||
y: 90,
|
||
children: [
|
||
{
|
||
type: 'rect',
|
||
shape: {
|
||
width: 230,
|
||
height: 80
|
||
},
|
||
style: {
|
||
stroke: 'red',
|
||
fill: 'transparent',
|
||
lineWidth: 2
|
||
},
|
||
z: 100
|
||
},
|
||
{
|
||
type: 'rect',
|
||
shape: {
|
||
width: 60,
|
||
height: 110
|
||
},
|
||
style: {
|
||
stroke: 'red',
|
||
fill: 'transparent',
|
||
lineWidth: 2
|
||
},
|
||
z: 100
|
||
},
|
||
{
|
||
id: 'grouptext',
|
||
type: 'text',
|
||
bottom: 0,
|
||
right: 0,
|
||
rotation: 0.5,
|
||
style: {
|
||
font: '14px Microsoft YaHei',
|
||
text: 'group最右下角'
|
||
},
|
||
z: 100
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'text',
|
||
bottom: 0,
|
||
left: 'center',
|
||
style: {
|
||
font: '18px sans-serif',
|
||
text: '全屏最下中间\n这是多行文字\n这是第三行'
|
||
},
|
||
z: 100
|
||
}
|
||
]
|
||
};
|
||
}
|
||
|
||
function checkLocations(chart: EChartsType, uriimgChanged?: boolean) {
|
||
|
||
propHasAll(getGraphicElements(chart, 'graphic'), [
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0
|
||
},
|
||
{/* FIXME: node-canvas measure issue casue behavior different from browser. comment out it temporarily.
|
||
x: 98.17662350913716,
|
||
y: 133.02943725152284,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0.7853981633974483,
|
||
style: {
|
||
font: '24px Microsoft YaHei',
|
||
text: '全屏右下角',
|
||
textVerticalAlign: null,
|
||
verticalAlign: null
|
||
}
|
||
*/},
|
||
!uriimgChanged
|
||
? tmpConvertImageOption({
|
||
x: 10,
|
||
y: 10,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
height: 80,
|
||
opacity: 0.5,
|
||
width: 80,
|
||
image: imageURI
|
||
}
|
||
})
|
||
: tmpConvertImageOption({
|
||
x: 61,
|
||
y: 45,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
height: 60,
|
||
opacity: 0.5,
|
||
width: 78,
|
||
image: imageURI
|
||
}
|
||
}),
|
||
{
|
||
x: 70,
|
||
y: 90,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0
|
||
},
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
stroke: 'red',
|
||
fill: 'transparent',
|
||
lineWidth: 2
|
||
},
|
||
shape: {
|
||
width: 230,
|
||
height: 80,
|
||
x: 0,
|
||
y: 0
|
||
// r: 0,
|
||
}
|
||
},
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
stroke: 'red',
|
||
fill: 'transparent',
|
||
lineWidth: 2
|
||
},
|
||
shape: {
|
||
width: 60,
|
||
height: 110,
|
||
x: 0,
|
||
y: 0
|
||
// r: 0,
|
||
}
|
||
},
|
||
{/* FIXME: node-canvas measure issue casue behavior different from browser. comment out it temporarily.
|
||
x: 145.47972137162424,
|
||
y: 97.71384413353478,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0.5,
|
||
style: {
|
||
font: '14px Microsoft YaHei',
|
||
text: 'group最右下角',
|
||
textVerticalAlign: null,
|
||
verticalAlign: null
|
||
}
|
||
*/},
|
||
{/* FIXME: node-canvas measure issue casue behavior different from browser. comment out it temporarily.
|
||
x: 46,
|
||
y: 96,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
font: '18px sans-serif',
|
||
text: '全屏最下中间\n这是多行文字\n这是第三行',
|
||
textVerticalAlign: null,
|
||
verticalAlign: null
|
||
}
|
||
*/}
|
||
]);
|
||
}
|
||
|
||
function checkResizedLocations(chart: EChartsType) {
|
||
propHasAll(getGraphicElements(chart, 'graphic'), [
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0
|
||
},
|
||
{/* FIXME: node-canvas measure issue casue behavior different from browser. comment out it temporarily.
|
||
x: 98.17662350913716,
|
||
y: 133.02943725152286,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0.7853981633974483,
|
||
style: {
|
||
font: '24px Microsoft YaHei',
|
||
text: '全屏右下角',
|
||
textVerticalAlign: null,
|
||
verticalAlign: null
|
||
}
|
||
*/},
|
||
tmpConvertImageOption({
|
||
x: 10,
|
||
y: 10,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
image: imageURI,
|
||
width: 80,
|
||
height: 80,
|
||
opacity: 0.5
|
||
}
|
||
}),
|
||
{
|
||
x: 70,
|
||
y: 90,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0
|
||
},
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
stroke: 'red',
|
||
fill: 'transparent',
|
||
lineWidth: 2
|
||
},
|
||
shape: {
|
||
width: 230,
|
||
height: 80,
|
||
x: 0,
|
||
y: 0
|
||
// r: 0,
|
||
}
|
||
},
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
stroke: 'red',
|
||
fill: 'transparent',
|
||
lineWidth: 2
|
||
},
|
||
shape: {
|
||
width: 60,
|
||
height: 110,
|
||
x: 0,
|
||
y: 0
|
||
// r: 0,
|
||
}
|
||
},
|
||
{/* FIXME: node-canvas measure issue casue behavior different from browser. comment out it temporarily.
|
||
x: 145.47972137162424,
|
||
y: 97.71384413353478,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0.5,
|
||
style: {
|
||
font: '14px Microsoft YaHei',
|
||
text: 'group最右下角',
|
||
textVerticalAlign: null,
|
||
verticalAlign: null
|
||
}
|
||
*/},
|
||
{/* FIXME: node-canvas measure issue casue behavior different from browser. comment out it temporarily.
|
||
x: 46,
|
||
y: 96,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
font: '18px sans-serif',
|
||
text: '全屏最下中间\n这是多行文字\n这是第三行',
|
||
textVerticalAlign: null,
|
||
verticalAlign: null
|
||
}
|
||
*/}
|
||
]);
|
||
}
|
||
|
||
it('getAndGet', function () {
|
||
const myChart = createChart({
|
||
width: 200,
|
||
height: 150
|
||
});
|
||
myChart.setOption(getOption());
|
||
|
||
checkLocations(myChart);
|
||
// Set option using getOption
|
||
chart.setOption(myChart.getOption());
|
||
// Check again, should be the same as before.
|
||
checkLocations(myChart);
|
||
|
||
myChart.dispose();
|
||
});
|
||
|
||
// Test modify location by setOption.
|
||
// And test center and middle.
|
||
it('modifyAndCenter', function () {
|
||
const myChart = createChart({
|
||
width: 200,
|
||
height: 150
|
||
});
|
||
|
||
myChart.setOption(getOption());
|
||
|
||
checkLocations(myChart);
|
||
|
||
myChart.setOption({
|
||
graphic: [tmpConvertImageOption({
|
||
id: 'uriimg',
|
||
left: 'center',
|
||
top: 'middle',
|
||
style: {
|
||
width: 78,
|
||
height: 60
|
||
}
|
||
})]
|
||
});
|
||
|
||
checkLocations(myChart, true);
|
||
|
||
myChart.dispose();
|
||
});
|
||
|
||
it('resize', function () {
|
||
const myChart = createChart({
|
||
width: 200,
|
||
height: 150
|
||
});
|
||
|
||
myChart.setOption(getOption());
|
||
|
||
checkLocations(myChart);
|
||
|
||
myChart.resize({
|
||
width: 220,
|
||
height: 300
|
||
});
|
||
|
||
checkResizedLocations(myChart);
|
||
|
||
myChart.dispose();
|
||
});
|
||
});
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
describe('boundingAndRotation', function () {
|
||
|
||
function getOption(): EChartsOption {
|
||
return {
|
||
legend: {
|
||
data: ['高度(km)与气温(°C)变化关系']
|
||
},
|
||
xAxis: {
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
|
||
},
|
||
graphic: [
|
||
tmpConvertImageOption({
|
||
type: 'image',
|
||
id: 'img',
|
||
z: -10,
|
||
right: 0,
|
||
top: 0,
|
||
bounding: 'raw',
|
||
originX: 75,
|
||
originY: 75,
|
||
style: {
|
||
fill: '#000',
|
||
image: imageURI,
|
||
width: 150,
|
||
height: 150,
|
||
opacity: 0.4
|
||
} as any
|
||
}),
|
||
{
|
||
type: 'group',
|
||
id: 'rectgroup1',
|
||
bottom: 0,
|
||
right: 0,
|
||
bounding: 'raw',
|
||
children: [
|
||
{
|
||
type: 'rect',
|
||
left: 'center',
|
||
top: 'center',
|
||
shape: {
|
||
width: 20,
|
||
height: 80
|
||
},
|
||
style: {
|
||
stroke: 'green',
|
||
fill: 'transparent'
|
||
}
|
||
},
|
||
{
|
||
type: 'rect',
|
||
left: 'center',
|
||
top: 'center',
|
||
shape: {
|
||
width: 80,
|
||
height: 20
|
||
},
|
||
style: {
|
||
stroke: 'green',
|
||
fill: 'transparent'
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
type: 'rect',
|
||
id: 'rect2',
|
||
bottom: 0,
|
||
right: 'center',
|
||
shape: {
|
||
width: 50,
|
||
height: 80
|
||
},
|
||
style: {
|
||
stroke: 'green',
|
||
fill: 'transparent'
|
||
}
|
||
},
|
||
{
|
||
type: 'group',
|
||
id: 'textGroup1',
|
||
left: '10%',
|
||
top: 'center',
|
||
scaleX: 1,
|
||
scaleY: 0.5,
|
||
children: [
|
||
{
|
||
type: 'rect',
|
||
z: 100,
|
||
left: 'center',
|
||
top: 'center',
|
||
shape: {
|
||
width: 170,
|
||
height: 70
|
||
},
|
||
style: {
|
||
fill: '#fff',
|
||
stroke: '#999',
|
||
lineWidth: 2,
|
||
shadowBlur: 8,
|
||
shadowOffsetX: 3,
|
||
shadowOffsetY: 3,
|
||
shadowColor: 'rgba(0,0,0,0.3)'
|
||
}
|
||
},
|
||
{
|
||
type: 'text',
|
||
z: 100,
|
||
top: 'middle',
|
||
left: 'center',
|
||
style: {
|
||
text: [
|
||
'横轴表示温度，单位是°C',
|
||
'纵轴表示高度，单位是km',
|
||
'右上角有一个图片做的水印'
|
||
].join('\n'),
|
||
font: '12px Microsoft YaHei'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '高度(km)与气温(°C)变化关系',
|
||
type: 'line',
|
||
data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
|
||
}
|
||
]
|
||
};
|
||
}
|
||
|
||
function checkLocations(chart: EChartsType, rotated?: boolean) {
|
||
propHasAll(getGraphicElements(chart, 'graphic'), [
|
||
{
|
||
x: 0,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0
|
||
},
|
||
tmpConvertImageOption({
|
||
x: 350,
|
||
y: 0,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: !rotated ? 0 : 0.6283185307179586,
|
||
style: {
|
||
// fill: '#000',
|
||
image: imageURI,
|
||
width: 150,
|
||
height: 150,
|
||
opacity: 0.4
|
||
}
|
||
}),
|
||
{
|
||
x: 500,
|
||
y: 400,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: !rotated ? 0 : 0.6283185307179586
|
||
},
|
||
{
|
||
x: -10,
|
||
y: -40,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
stroke: 'green',
|
||
fill: 'transparent'
|
||
},
|
||
shape: {
|
||
width: 20,
|
||
height: 80,
|
||
x: 0,
|
||
y: 0
|
||
// r: 0,
|
||
}
|
||
},
|
||
{
|
||
x: -40,
|
||
y: -10,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
stroke: 'green',
|
||
fill: 'transparent'
|
||
},
|
||
shape: {
|
||
width: 80,
|
||
height: 20,
|
||
x: 0,
|
||
y: 0
|
||
// r: 0,
|
||
}
|
||
},
|
||
{
|
||
x: !rotated ? 225 : 206.2631650489274,
|
||
y: !rotated ? 319.5 : 334.5802393266705,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: !rotated ? 0 : 0.6283185307179586,
|
||
style: {
|
||
stroke: 'green',
|
||
fill: 'transparent'
|
||
},
|
||
shape: {
|
||
width: 50,
|
||
height: 80,
|
||
x: 0,
|
||
y: 0
|
||
// r: 0,
|
||
}
|
||
},
|
||
{
|
||
x: !rotated ? 136 : 130.15559605751,
|
||
y: 200,
|
||
scaleX: 1,
|
||
scaleY: 0.5,
|
||
rotation: !rotated ? 0 : 0.6283185307179586
|
||
},
|
||
{
|
||
x: -85,
|
||
y: -35,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
fill: '#fff',
|
||
stroke: '#999',
|
||
lineWidth: 2,
|
||
shadowBlur: 8,
|
||
shadowOffsetX: 3,
|
||
shadowOffsetY: 3,
|
||
shadowColor: 'rgba(0,0,0,0.3)'
|
||
},
|
||
shape: {
|
||
width: 170,
|
||
height: 70,
|
||
x: 0,
|
||
y: 0
|
||
// r: 0,
|
||
}
|
||
},
|
||
{/* FIXME: node-canvas measure issue casue behavior different from browser. comment out it temporarily.
|
||
x: -72,
|
||
y: -18,
|
||
scaleX: 1,
|
||
scaleY: 1,
|
||
rotation: 0,
|
||
style: {
|
||
text: '横轴表示温度，单位是°C\n纵轴表示高度，单位是km\n右上角有一个图片做的水印',
|
||
font: '12px Microsoft YaHei',
|
||
textVerticalAlign: null,
|
||
verticalAlign: null
|
||
}
|
||
*/}
|
||
]);
|
||
}
|
||
|
||
it('bounding', function () {
|
||
|
||
|
||
chart.setOption(getOption());
|
||
|
||
checkLocations(chart);
|
||
|
||
// Set option using getOption
|
||
chart.setOption(chart.getOption());
|
||
|
||
// Check again, should be the same as before.
|
||
checkLocations(chart);
|
||
|
||
const rotation = Math.PI / 5;
|
||
|
||
chart.setOption({
|
||
graphic: [{
|
||
id: 'img',
|
||
bounding: 'raw',
|
||
originX: 75,
|
||
originY: 75,
|
||
rotation: rotation
|
||
} as any, {
|
||
id: 'rectgroup1',
|
||
rotation: rotation
|
||
}, {
|
||
id: 'rect2',
|
||
rotation: rotation
|
||
}, {
|
||
id: 'textGroup1',
|
||
rotation: rotation
|
||
}]
|
||
});
|
||
|
||
checkLocations(chart, true);
|
||
|
||
});
|
||
|
||
});
|
||
|
||
});
|