| /* | |
| * 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); | |
| }); | |
| }); | |
| }); |