Skip to content

E
echarts

Five-菜鸟级 / echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
E
echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 444f6c79 编写于 作者: P pissang
浏览文件
操作

refact: use x, y, scaleX, scaleY instead of position and scale in Element

上级 a555834a
隐藏空白更改
内联 并排
Showing with 402 addition and 303 deletion
src/action/roamHelper.ts
浏览文件 @ 444f6c79
......@@ -59,14 +59,13 @@ export function updateCenterAndZoom(
}
// Zoom on given point(originX, originY)
view.scale[0] *= zoom;
view.scale[1] *= zoom;
const position = view.position;
const fixX = (payload.originX - position[0]) * (zoom - 1);
const fixY = (payload.originY - position[1]) * (zoom - 1);
view.scaleX *= zoom;
view.scaleY *= zoom;
const fixX = (payload.originX - view.x) * (zoom - 1);
const fixY = (payload.originY - view.y) * (zoom - 1);
position[0] -= fixX;
position[1] -= fixY;
view.x -= fixX;
view.y -= fixY;
view.updateTransform();
// Get the new center
......
src/chart/bar/PictorialBarView.ts
浏览文件 @ 444f6c79
......@@ -33,6 +33,7 @@ import type Displayable from 'zrender/src/graphic/Displayable';
import type Axis2D from '../../coord/cartesian/Axis2D';
import type Element from 'zrender/src/Element';
import { getDefaultLabel } from '../helper/labelHelper';
import { PathProps } from 'zrender/src/graphic/Path';
const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
......@@ -403,7 +404,8 @@ function prepareLineWidth(
if (valueLineWidth) {
pathForLineWidth.attr({
scale: symbolScale.slice(),
scaleX: symbolScale[0],
scaleY: symbolScale[1],
rotation: rotation
});
pathForLineWidth.updateTransform();
......@@ -554,7 +556,7 @@ function createOrUpdateRepeatSymbols(
updateAttr(path, null, makeTarget(index), symbolMeta, isUpdate);
}
else {
updateAttr(path, null, {scale: [0, 0]}, symbolMeta, isUpdate, function () {
updateAttr(path, null, { scaleX: 0, scaleY: 0 }, symbolMeta, isUpdate, function () {
bundle.remove(path);
});
}
......@@ -575,11 +577,14 @@ function createOrUpdateRepeatSymbols(
updateAttr(
path,
{
position: target.position,
scale: [0, 0]
x: target.x,
y: target.y,
scaleX: 0,
scaleY: 0
},
{
scale: target.scale,
scaleX: target.scaleX,
scaleY: target.scaleY,
rotation: target.rotation
},
symbolMeta,
......@@ -606,8 +611,10 @@ function createOrUpdateRepeatSymbols(
position[valueDim.index] = unit * (i - repeatTimes / 2 + 0.5) + pathPosition[valueDim.index];
return {
position: position,
scale: symbolMeta.symbolScale.slice(),
x: position[0],
y: position[1],
scaleX: symbolMeta.symbolScale[0],
scaleY: symbolMeta.symbolScale[1],
rotation: symbolMeta.rotation
};
}
......@@ -641,12 +648,15 @@ function createOrUpdateSingleSymbol(
updateAttr(
mainPath,
{
position: symbolMeta.pathPosition.slice(),
scale: [0, 0],
x: symbolMeta.pathPosition[0],
y: symbolMeta.pathPosition[1],
scaleX: 0,
scaleY: 0,
rotation: symbolMeta.rotation
},
{
scale: symbolMeta.symbolScale.slice()
scaleX: symbolMeta.symbolScale[0],
scaleY: symbolMeta.symbolScale[1]
},
symbolMeta,
isUpdate
......@@ -661,8 +671,10 @@ function createOrUpdateSingleSymbol(
mainPath,
null,
{
position: symbolMeta.pathPosition.slice(),
scale: symbolMeta.symbolScale.slice(),
x: symbolMeta.pathPosition[0],
y: symbolMeta.pathPosition[1],
scaleX: symbolMeta.symbolScale[0],
scaleY: symbolMeta.symbolScale[1],
rotation: symbolMeta.rotation
},
symbolMeta,
......@@ -767,17 +779,19 @@ function isAnimationEnabled(this: ItemModel) {
function updateHoverAnimation(path: PictorialSymbol, symbolMeta: SymbolMeta) {
path.off('emphasis').off('normal');
const scale = symbolMeta.symbolScale.slice();
const scale = symbolMeta.symbolScale;
symbolMeta.hoverAnimation && path
.on('emphasis', function () {
this.animateTo({
scale: [scale[0] * 1.1, scale[1] * 1.1]
scaleX: scale[0] * 1.1,
scaleY: scale[1] * 1.1
}, { duration: 400, easing: 'elasticOut' });
})
.on('normal', function () {
this.animateTo({
scale: scale.slice()
scaleX: scale[0],
scaleY: scale[1]
}, { duration: 400, easing: 'elasticOut' });
});
......@@ -790,7 +804,9 @@ function createBar(data: List, opt: CreateOpts, symbolMeta: SymbolMeta, isUpdate
const bundle = new graphic.Group();
bar.add(bundle);
bar.__pictorialBundle = bundle;
bundle.attr('position', symbolMeta.bundlePosition.slice());
bundle.x = symbolMeta.bundlePosition[0];
bundle.y = symbolMeta.bundlePosition[1];
if (symbolMeta.symbolRepeat) {
createOrUpdateRepeatSymbols(bar, opt, symbolMeta);
......@@ -815,7 +831,10 @@ function updateBar(bar: PictorialBarElement, opt: CreateOpts, symbolMeta: Symbol
const bundle = bar.__pictorialBundle;
graphic.updateProps(
bundle, {position: symbolMeta.bundlePosition.slice()}, animationModel, dataIndex
bundle, {
x: symbolMeta.bundlePosition[0],
y: symbolMeta.bundlePosition[1]
}, animationModel, dataIndex
);
if (symbolMeta.symbolRepeat) {
......@@ -848,7 +867,7 @@ function removeBar(
zrUtil.each(pathes, function (path) {
graphic.updateProps(
path, {scale: [0, 0]}, animationModel, dataIndex,
path, { scaleX: 0, scaleY: 0 }, animationModel, dataIndex,
function () {
bar.parent && bar.parent.remove(bar);
}
......@@ -879,8 +898,8 @@ function eachPath<Ctx>(
function updateAttr<T extends Element>(
el: T,
immediateAttrs: any,
animationAttrs: any,
immediateAttrs: PathProps,
animationAttrs: PathProps,
symbolMeta: SymbolMeta,
isUpdate?: boolean,
cb?: () => void
......
src/chart/funnel/FunnelView.ts
浏览文件 @ 444f6c79
......@@ -177,7 +177,8 @@ class FunnelPiece extends graphic.Group {
labelText.attr({
rotation: labelLayout.rotation,
origin: [labelLayout.x, labelLayout.y],
originX: labelLayout.x,
originY: labelLayout.y,
z2: 10
});
......
src/chart/graph/GraphView.ts
浏览文件 @ 444f6c79
......@@ -155,8 +155,8 @@ class GraphView extends ChartView {
if (isViewCoordSys(coordSys)) {
const groupNewProp = {
position: coordSys.position,
scale: coordSys.scale
x: coordSys.x, y: coordSys.y,
scaleX: coordSys.scaleX, scaleY: coordSys.scaleY
};
if (this._firstRender) {
group.attr(groupNewProp);
......@@ -198,7 +198,7 @@ class GraphView extends ChartView {
&& this._startForceLayoutIteration(forceLayout, layoutAnimation);
forceLayout.setFixed(idx);
// Write position back to layout
data.setItemLayout(idx, el.position);
data.setItemLayout(idx, [el.x, el.y]);
}
}).on('dragend', () => {
if (forceLayout) {
......@@ -443,10 +443,9 @@ class GraphView extends ChartView {
const data = seriesModel.getData();
const nodeScale = getNodeGlobalScale(seriesModel);
const invScale = [nodeScale, nodeScale];
data.eachItemGraphicEl(function (el, idx) {
el.attr('scale', invScale);
el.scaleX = el.scaleY = nodeScale;
});
}
......
src/chart/graph/graphHelper.ts
浏览文件 @ 444f6c79
......@@ -29,8 +29,7 @@ export function getNodeGlobalScale(seriesModel: GraphSeriesModel) {
const nodeScaleRatio = seriesModel.option.nodeScaleRatio;
const groupScale = coordSys.scale;
const groupZoom = (groupScale && groupScale[0]) || 1;
const groupZoom = coordSys.scaleX;
// Scale node when zoom changes
const roamZoom = coordSys.getZoom();
const nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
......
src/chart/helper/EffectLine.ts
浏览文件 @ 444f6c79
......@@ -92,10 +92,10 @@ class EffectLine extends graphic.Group {
symbol.setStyle('shadowColor', color);
symbol.setStyle(effectModel.getItemStyle(['color']));
symbol.attr('scale', size);
symbol.scaleX = size[0];
symbol.scaleY = size[1];
symbol.setColor(color);
symbol.attr('scale', size);
this._symbolType = symbolType;
this._symbolScale = size;
......@@ -194,8 +194,8 @@ class EffectLine extends graphic.Group {
const p2 = symbol.__p2;
const cp1 = symbol.__cp1;
const t = symbol.__t;
const pos = symbol.position;
const lastPos = [pos[0], pos[1]];
const pos = [symbol.x, symbol.y];
const lastPos = pos.slice();
const quadraticAt = curveUtil.quadraticAt;
const quadraticDerivativeAt = curveUtil.quadraticDerivativeAt;
pos[0] = quadraticAt(p1[0], cp1[0], p2[0], t);
......@@ -209,8 +209,7 @@ class EffectLine extends graphic.Group {
// enable continuity trail for 'line', 'rect', 'roundRect' symbolType
if (this._symbolType === 'line' || this._symbolType === 'rect' || this._symbolType === 'roundRect') {
if (symbol.__lastT !== undefined && symbol.__lastT < symbol.__t) {
const scaleY = vec2.dist(lastPos, pos) * 1.05;
symbol.attr('scale', [symbol.scale[0], scaleY]);
symbol.scaleY = vec2.dist(lastPos, pos) * 1.05;
// make sure the last segment render within endPoint
if (t === 1) {
pos[0] = lastPos[0] + (pos[0] - lastPos[0]) / 2;
......@@ -219,15 +218,16 @@ class EffectLine extends graphic.Group {
}
else if (symbol.__lastT === 1) {
// After first loop, symbol.__t does NOT start with 0, so connect p1 to pos directly.
const scaleY = 2 * vec2.dist(p1, pos);
symbol.attr('scale', [symbol.scale[0], scaleY ]);
symbol.scaleY = 2 * vec2.dist(p1, pos);
}
else {
symbol.attr('scale', this._symbolScale);
symbol.scaleY = this._symbolScale[1];
}
}
symbol.__lastT = symbol.__t;
symbol.ignore = false;
symbol.x = pos[0];
symbol.y = pos[1];
}
......
src/chart/helper/EffectPolyline.ts
浏览文件 @ 444f6c79
......@@ -100,13 +100,14 @@ class EffectPolyline extends EffectLine {
frame = Math.min(frame - 1, len - 2);
}
vec2.lerp(
symbol.position, points[frame], points[frame + 1],
(t - offsets[frame]) / (offsets[frame + 1] - offsets[frame])
);
const tx = points[frame + 1][0] - points[frame][0];
const ty = points[frame + 1][1] - points[frame][1];
const p = (t - offsets[frame]) / (offsets[frame + 1] - offsets[frame]);
const p0 = points[frame];
const p1 = points[frame + 1];
symbol.x = p0[0] * (1 - p) + p * p1[0];
symbol.y = p0[1] * (1 - p) + p * p1[1];
const tx = p1[0] - p0[0];
const ty = p1[1] - p0[1];
symbol.rotation = -Math.atan2(ty, tx) - Math.PI / 2;
this._lastFrame = frame;
......
src/chart/helper/EffectSymbol.ts
浏览文件 @ 444f6c79
......@@ -101,7 +101,8 @@ class EffectSymbol extends Group {
},
z2: 99,
silent: true,
scale: [0.5, 0.5]
scaleX: 0.5,
scaleY: 0.5
});
const delay = -i / EFFECT_RIPPLE_NUMBER * effectCfg.period + effectCfg.effectOffset;
......@@ -174,7 +175,7 @@ class EffectSymbol extends Group {
const symbolSize = normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
const color = data.getItemVisual(idx, 'color');
rippleGroup.attr('scale', symbolSize);
rippleGroup.setScale(symbolSize);
rippleGroup.traverse(function (ripplePath: Path) {
ripplePath.setStyle('fill', color);
......@@ -182,9 +183,8 @@ class EffectSymbol extends Group {
const symbolOffset = itemModel.getShallow('symbolOffset');
if (symbolOffset) {
const pos = rippleGroup.position;
pos[0] = parsePercent(symbolOffset[0], symbolSize[0]);
pos[1] = parsePercent(symbolOffset[1], symbolSize[1]);
rippleGroup.x = parsePercent(symbolOffset[0], symbolSize[0]);
rippleGroup.y = parsePercent(symbolOffset[1], symbolSize[1]);
}
rippleGroup.rotation = (itemModel.getShallow('symbolRotate') || 0) * Math.PI / 180 || 0;
......
src/chart/helper/Line.ts
浏览文件 @ 444f6c79
......@@ -333,8 +333,8 @@ class Line extends graphic.Group {
let invScale = 1;
let parentNode = this.parent;
while (parentNode) {
if (parentNode.scale) {
invScale /= parentNode.scale[0];
if (parentNode.scaleX) {
invScale /= parentNode.scaleX;
}
parentNode = parentNode.parent;
}
......@@ -354,29 +354,30 @@ class Line extends graphic.Group {
vector.normalize(d, d);
if (symbolFrom) {
symbolFrom.attr('position', fromPos);
symbolFrom.setPosition(fromPos);
const tangent = line.tangentAt(0);
symbolFrom.attr('rotation', Math.PI / 2 - Math.atan2(
symbolFrom.rotation = Math.PI / 2 - Math.atan2(
tangent[1], tangent[0]
));
symbolFrom.attr('scale', [invScale * percent, invScale * percent]);
);
symbolFrom.scaleX = symbolFrom.scaleY = invScale * percent;
symbolFrom.markRedraw();
}
if (symbolTo) {
symbolTo.attr('position', toPos);
symbolTo.setPosition(toPos);
const tangent = line.tangentAt(1);
symbolTo.attr('rotation', -Math.PI / 2 - Math.atan2(
symbolTo.rotation = -Math.PI / 2 - Math.atan2(
tangent[1], tangent[0]
));
symbolTo.attr('scale', [invScale * percent, invScale * percent]);
);
symbolTo.scaleX = symbolTo.scaleY = invScale * percent;
symbolTo.markRedraw();
}
if (!label.ignore) {
label.attr('position', toPos);
label.x = label.y = 0;
label.originX = label.originY = 0;
let textPosition;
let textAlign: ZRTextAlign;
let textVerticalAlign: ZRTextVerticalAlign;
let textOrigin;
const distance = label.__labelDistance;
const distanceX = distance[0] * invScale;
......@@ -396,7 +397,7 @@ class Line extends graphic.Group {
if (toPos[0] < fromPos[0]) {
rotation = Math.PI + rotation;
}
label.attr('rotation', rotation);
label.rotation = rotation;
}
let dy;
......@@ -423,13 +424,15 @@ class Line extends graphic.Group {
switch (label.__position) {
case 'end':
textPosition = [d[0] * distanceX + toPos[0], d[1] * distanceY + toPos[1]];
label.x = d[0] * distanceX + toPos[0];
label.y = d[1] * distanceY + toPos[1];
textAlign = d[0] > 0.8 ? 'left' : (d[0] < -0.8 ? 'right' : 'center');
textVerticalAlign = d[1] > 0.8 ? 'top' : (d[1] < -0.8 ? 'bottom' : 'middle');
break;
case 'start':
textPosition = [-d[0] * distanceX + fromPos[0], -d[1] * distanceY + fromPos[1]];
label.x = -d[0] * distanceX + fromPos[0];
label.y = -d[1] * distanceY + fromPos[1];
textAlign = d[0] > 0.8 ? 'right' : (d[0] < -0.8 ? 'left' : 'center');
textVerticalAlign = d[1] > 0.8 ? 'bottom' : (d[1] < -0.8 ? 'top' : 'middle');
break;
......@@ -437,38 +440,39 @@ class Line extends graphic.Group {
case 'insideStartTop':
case 'insideStart':
case 'insideStartBottom':
textPosition = [distanceX * dir + fromPos[0], fromPos[1] + dy];
label.x = distanceX * dir + fromPos[0];
label.y = fromPos[1] + dy;
textAlign = tangent[0] < 0 ? 'right' : 'left';
textOrigin = [-distanceX * dir, -dy];
label.originX = -distanceX * dir;
label.originY = -dy;
break;
case 'insideMiddleTop':
case 'insideMiddle':
case 'insideMiddleBottom':
case 'middle':
textPosition = [cp[0], cp[1] + dy];
label.x = cp[0];
label.y = cp[1] + dy;
textAlign = 'center';
textOrigin = [0, -dy];
label.originY = -dy;
break;
case 'insideEndTop':
case 'insideEnd':
case 'insideEndBottom':
textPosition = [-distanceX * dir + toPos[0], toPos[1] + dy];
label.x = -distanceX * dir + toPos[0];
label.y = toPos[1] + dy;
textAlign = tangent[0] >= 0 ? 'right' : 'left';
textOrigin = [distanceX * dir, -dy];
label.originX = distanceX * dir;
label.originY = -dy;
break;
}
label.attr({
style: {
// Use the user specified text align and baseline first
verticalAlign: label.__verticalAlign || textVerticalAlign,
align: label.__align || textAlign
},
position: textPosition,
scale: [invScale, invScale],
origin: textOrigin
label.scaleX = label.scaleY = invScale;
label.setStyle({
// Use the user specified text align and baseline first
verticalAlign: label.__verticalAlign || textVerticalAlign,
align: label.__align || textAlign
});
}
}
......
src/chart/helper/Symbol.ts
浏览文件 @ 444f6c79
......@@ -35,8 +35,6 @@ const normalLabelAccessPath = ['label'] as const;
const emphasisLabelAccessPath = ['emphasis', 'label'] as const;
type ECSymbol = ReturnType<typeof createSymbol> & {
__symbolOriginalScale: number[]
__z2Origin: number
highDownOnUpdate(fromState: DisplayState, toState: DisplayState): void
};
......@@ -46,6 +44,14 @@ class Symbol extends graphic.Group {
private _symbolType: string;
/**
* Original scale
*/
private _scaleX: number;
private _scaleY: number;
private _z2: number;
constructor(data: List, idx: number, seriesScope?: SymbolDrawSeriesScope) {
super();
this.updateData(data, idx, seriesScope);
......@@ -76,7 +82,8 @@ class Symbol extends graphic.Group {
symbolPath.attr({
z2: 100,
culling: true,
scale: getScale(symbolSize)
scaleX: symbolSize[0] / 2,
scaleY: symbolSize[1] / 2
});
// Rewrite drift method
symbolPath.drift = driftSymbol;
......@@ -112,7 +119,12 @@ class Symbol extends graphic.Group {
* Including the change caused by animation
*/
getScale() {
return this.childAt(0).scale;
const symbolPath = this.childAt(0);
return [symbolPath.scaleX, symbolPath.scaleY];
}
getOriginalScale() {
return [this._scaleX, this._scaleY];
}
/**
......@@ -164,7 +176,8 @@ class Symbol extends graphic.Group {
const symbolPath = this.childAt(0) as ECSymbol;
symbolPath.silent = false;
graphic.updateProps(symbolPath, {
scale: getScale(symbolSize)
scaleX: symbolSize[0] / 2,
scaleY: symbolSize[1] / 2
}, seriesModel, idx);
}
......@@ -175,13 +188,14 @@ class Symbol extends graphic.Group {
const fadeIn = seriesScope && seriesScope.fadeIn;
const target: PathProps = {
scale: symbolPath.scale.slice()
scaleX: symbolPath.scaleX,
scaleY: symbolPath.scaleY
};
fadeIn && (target.style = {
opacity: symbolPath.style.opacity
});
symbolPath.scale = [0, 0];
symbolPath.scaleX = symbolPath.scaleY = 0;
fadeIn && (symbolPath.style.opacity = 0);
graphic.initProps(symbolPath, target, seriesModel, idx);
......@@ -251,10 +265,8 @@ class Symbol extends graphic.Group {
symbolPath.attr('rotation', (symbolRotate || 0) * Math.PI / 180 || 0);
if (symbolOffset) {
symbolPath.attr('position', [
parsePercent(symbolOffset[0], symbolSize[0]),
parsePercent(symbolOffset[1], symbolSize[1])
]);
symbolPath.x = parsePercent(symbolOffset[0], symbolSize[0]);
symbolPath.y = parsePercent(symbolOffset[1], symbolSize[1]);
}
cursorStyle && symbolPath.attr('cursor', cursorStyle);
......@@ -270,16 +282,16 @@ class Symbol extends graphic.Group {
}
const liftZ = data.getItemVisual(idx, 'liftZ');
const z2Origin = symbolPath.__z2Origin;
const z2Origin = this._z2;
if (liftZ != null) {
if (z2Origin == null) {
symbolPath.__z2Origin = symbolPath.z2;
this._z2 = symbolPath.z2;
symbolPath.z2 += liftZ;
}
}
else if (z2Origin != null) {
symbolPath.z2 = z2Origin;
symbolPath.__z2Origin = null;
this._z2 = null;
}
const useNameLabel = seriesScope && seriesScope.useNameLabel;
......@@ -299,7 +311,8 @@ class Symbol extends graphic.Group {
return useNameLabel ? data.getName(idx) : getDefaultLabel(data, idx);
}
symbolPath.__symbolOriginalScale = getScale(symbolSize);
this._scaleX = symbolSize[0] / 2;
this._scaleY = symbolSize[1] / 2;
symbolPath.highDownOnUpdate = (
hoverAnimation && seriesModel.isAnimationEnabled()
) ? highDownOnUpdate : null;
......@@ -322,7 +335,8 @@ class Symbol extends graphic.Group {
style: {
opacity: 0
},
scale: [0, 0]
scaleX: 0,
scaleY: 0
},
this._seriesModel,
graphic.getECData(this).dataIndex,
......@@ -345,14 +359,12 @@ function highDownOnUpdate(this: ECSymbol, fromState: DisplayState, toState: Disp
return;
}
const scale = (this.parent as Symbol).getOriginalScale();
if (toState === 'emphasis') {
const scale = this.__symbolOriginalScale;
const ratio = scale[1] / scale[0];
const emphasisOpt = {
scale: [
Math.max(scale[0] * 1.1, scale[0] + 3),
Math.max(scale[1] * 1.1, scale[1] + 3 * ratio)
]
x: Math.max(scale[0] * 1.1, scale[0] + 3),
y: Math.max(scale[1] * 1.1, scale[1] + 3 * ratio)
};
// FIXME
// modify it after support stop specified animation.
......@@ -362,15 +374,12 @@ function highDownOnUpdate(this: ECSymbol, fromState: DisplayState, toState: Disp
}
else if (toState === 'normal') {
this.animateTo({
scale: this.__symbolOriginalScale
scaleX: scale[0],
scaleY: scale[1]
}, { duration: 400, easing: 'elasticOut' });
}
}
function getScale(symbolSize: number[]) {
return [symbolSize[0] / 2, symbolSize[1] / 2];
}
function driftSymbol(this: ECSymbol, dx: number, dy: number) {
this.parent.drift(dx, dy);
}
......
src/chart/helper/SymbolDraw.ts
浏览文件 @ 444f6c79
......@@ -161,7 +161,7 @@ class SymbolDraw {
const point = data.getItemLayout(newIdx) as number[];
if (symbolNeedsDraw(data, point, newIdx, opt)) {
const symbolEl = new SymbolCtor(data, newIdx, seriesScope);
symbolEl.attr('position', point);
symbolEl.setPosition(point);
data.setItemGraphicEl(newIdx, symbolEl);
group.add(symbolEl);
}
......@@ -175,12 +175,13 @@ class SymbolDraw {
}
if (!symbolEl) {
symbolEl = new SymbolCtor(data, newIdx);
symbolEl.attr('position', point);
symbolEl.setPosition(point);
}
else {
symbolEl.updateData(data, newIdx, seriesScope);
graphic.updateProps(symbolEl, {
position: point
x: point[0],
y: point[1]
}, seriesModel);
}
......@@ -210,7 +211,8 @@ class SymbolDraw {
// Not use animation
data.eachItemGraphicEl(function (el, idx) {
const point = data.getItemLayout(idx);
el.attr('position', point);
el.setPosition(point);
el.markRedraw();
});
}
};
......@@ -237,7 +239,7 @@ class SymbolDraw {
if (symbolNeedsDraw(data, point, idx, opt)) {
const el = new this._SymbolCtor(data, idx, this._seriesScope);
el.traverse(updateIncrementalAndHover);
el.attr('position', point);
el.setPosition(point);
this.group.add(el);
data.setItemGraphicEl(idx, el);
}
......
src/chart/line/LineView.ts
浏览文件 @ 444f6c79
......@@ -590,7 +590,7 @@ class LineView extends ChartView {
return;
}
symbol = new SymbolClz(data, dataIndex);
symbol.position = pt;
symbol.setPosition(pt);
symbol.setZ(
seriesModel.get('zlevel'),
seriesModel.get('z')
......@@ -721,12 +721,19 @@ class LineView extends ChartView {
next = turnPointsIntoStep(diff.next, coordSys, step);
stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, coordSys, step);
}
// if (next.length < polyline.shape.points.length) {
// debugger
// }
// `diff.current` is subset of `current` (which should be ensured by
// turnPointsIntoStep), so points in `__points` can be updated when
// points in `current` are update during animation.
(polyline.shape as any).__points = diff.current;
polyline.shape.points = current;
// Stop previous animation.
polyline.stopAnimation();
graphic.updateProps(polyline, {
shape: {
points: next
......@@ -738,6 +745,7 @@ class LineView extends ChartView {
points: current,
stackedOnPoints: stackedOnCurrent
});
polygon.stopAnimation();
graphic.updateProps(polygon, {
shape: {
points: next,
......@@ -769,7 +777,8 @@ class LineView extends ChartView {
polyline.animators[0].during(function () {
for (let i = 0; i < updatedDataInfo.length; i++) {
const el = updatedDataInfo[i].el;
el.attr('position', (polyline.shape as any).__points[updatedDataInfo[i].ptIdx]);
el.setPosition((polyline.shape as any).__points[updatedDataInfo[i].ptIdx]);
el.markRedraw();
}
});
}
......
src/chart/pie/PieView.ts
浏览文件 @ 444f6c79
......@@ -73,16 +73,17 @@ function toggleItemSelected(
const dy = Math.sin(midAngle);
const offset = isSelected ? selectedOffset : 0;
const position = [dx * offset, dy * offset];
const obj = {
x: dx * offset,
y: dy * offset
};
hasAnimation
// animateTo will stop revious animation like update transition
? el.animate()
.when(200, {
position: position
})
.when(200, obj)
.start('bounceOut')
: el.attr('position', position);
: el.attr(obj);
}
/**
......@@ -298,7 +299,8 @@ class PiePiece extends graphic.Group {
labelText.attr({
rotation: labelLayout.rotation,
origin: [labelLayout.x, labelLayout.y],
originX: labelLayout.x,
originY: labelLayout.y,
z2: 10
});
......
src/chart/radar/RadarView.ts
浏览文件 @ 444f6c79
......@@ -69,7 +69,8 @@ class RadarView extends ChartView {
strokeNoScale: true
},
z2: 100,
scale: [symbolSize[0] / 2, symbolSize[1] / 2]
scaleX: symbolSize[0] / 2,
scaleY: symbolSize[1] / 2
});
return symbolPath as RadarSymbol;
}
......@@ -89,15 +90,16 @@ class RadarView extends ChartView {
if (symbolPath) {
symbolPath.__dimIdx = i;
if (oldPoints[i]) {
symbolPath.attr('position', oldPoints[i]);
symbolPath.setPosition(oldPoints[i]);
graphic[isInit ? 'initProps' : 'updateProps'](
symbolPath, {
position: newPoints[i]
x: newPoints[i][0],
y: newPoints[i][1]
}, seriesModel, idx
);
}
else {
symbolPath.attr('position', newPoints[i]);
symbolPath.setPosition(newPoints[i]);
}
symbolGroup.add(symbolPath);
}
......
src/chart/sankey/SankeyView.ts
浏览文件 @ 444f6c79
......@@ -194,7 +194,8 @@ class SankeyView extends ChartView {
group.removeAll();
group.attr('position', [layoutInfo.x, layoutInfo.y]);
group.x = layoutInfo.x;
group.y = layoutInfo.y;
// generate a bezire Curve for each edge
graph.eachEdge(function (edge) {
......
src/chart/sunburst/SunburstPiece.ts
浏览文件 @ 444f6c79
......@@ -296,9 +296,8 @@ class SunburstPiece extends graphic.Group {
opacity: getLabelAttr('opacity')
});
const textX = r * dx + layout.cx;
const textY = r * dy + layout.cy;
label.attr('position', [textX, textY]);
label.x = r * dx + layout.cx;
label.y = r * dy + layout.cy;
const rotateType = getLabelAttr('rotate');
let rotate = 0;
......
src/chart/themeRiver/ThemeRiverView.ts
浏览文件 @ 444f6c79
......@@ -49,7 +49,8 @@ class ThemeRiverView extends ChartView {
const rect = layoutInfo.rect;
const boundaryGap = layoutInfo.boundaryGap;
group.attr('position', [0, rect.y + boundaryGap[0]]);
group.x = 0;
group.y = rect.y + boundaryGap[0];
function keyGetter(item: LayerSeries[number]) {
return item.name;
......
src/chart/tree/TreeView.ts
浏览文件 @ 444f6c79
......@@ -184,10 +184,12 @@ class TreeView extends ChartView {
const layout = seriesModel.get('layout');
if (layout === 'radial') {
group.attr('position', [layoutInfo.x + layoutInfo.width / 2, layoutInfo.y + layoutInfo.height / 2]);
group.x = layoutInfo.x + layoutInfo.width / 2;
group.y = layoutInfo.y + layoutInfo.height / 2;
}
else {
group.attr('position', [layoutInfo.x, layoutInfo.y]);
group.x = layoutInfo.x;
group.y = layoutInfo.y;
}
this._updateViewCoordSys(seriesModel);
......@@ -294,8 +296,10 @@ class TreeView extends ChartView {
// Here we use viewCoordSys just for computing the 'position' and 'scale' of the group
this.group.attr({
position: viewCoordSys.position,
scale: viewCoordSys.scale
x: viewCoordSys.x,
y: viewCoordSys.y,
scaleX: viewCoordSys.scaleX,
scaleY: viewCoordSys.scaleY
});
this._viewCoordSys = viewCoordSys;
......@@ -351,10 +355,9 @@ class TreeView extends ChartView {
const data = seriesModel.getData();
const nodeScale = this._getNodeGlobalScale(seriesModel);
const invScale = [nodeScale, nodeScale];
data.eachItemGraphicEl(function (el, idx) {
el.attr('scale', invScale);
el.scaleX = el.scaleY = nodeScale;
});
}
......@@ -366,8 +369,7 @@ class TreeView extends ChartView {
const nodeScaleRatio = this._nodeScaleRatio;
const groupScale = coordSys.scale;
const groupZoom = (groupScale && groupScale[0]) || 1;
const groupZoom = coordSys.scaleX || 1;
// Scale node when zoom changes
const roamZoom = coordSys.getZoom();
const nodeScale = (roamZoom - 1) * nodeScaleRatio + 1;
......@@ -435,8 +437,8 @@ function updateNode(
const sourceLayout = source.getLayout() as TreeNodeLayout;
const sourceOldLayout = sourceSymbolEl
? {
x: sourceSymbolEl.position[0],
y: sourceSymbolEl.position[1],
x: sourceSymbolEl.x,
y: sourceSymbolEl.y,
rawX: sourceSymbolEl.__radialOldRawX,
rawY: sourceSymbolEl.__radialOldRawY
}
......@@ -445,7 +447,8 @@ function updateNode(
if (isInit) {
symbolEl = new SymbolClz(data, dataIndex, seriesScope) as TreeSymbol;
symbolEl.attr('position', [sourceOldLayout.x, sourceOldLayout.y]);
symbolEl.x = sourceOldLayout.x;
symbolEl.y = sourceOldLayout.y;
}
else {
symbolEl.updateData(data, dataIndex, seriesScope);
......@@ -459,7 +462,8 @@ function updateNode(
group.add(symbolEl);
data.setItemGraphicEl(dataIndex, symbolEl);
graphic.updateProps(symbolEl, {
position: [targetLayout.x, targetLayout.y]
x: targetLayout.x,
y: targetLayout.y
}, seriesModel);
const symbolPath = symbolEl.getSymbolPath();
......@@ -616,7 +620,8 @@ function removeNode(
}
graphic.updateProps(symbolEl, {
position: [sourceLayout.x + 1, sourceLayout.y + 1]
x: sourceLayout.x + 1,
y: sourceLayout.y + 1
}, seriesModel, function () {
group.remove(symbolEl);
data.setItemGraphicEl(dataIndex, null);
......@@ -686,14 +691,14 @@ function getEdgeShape(seriesScope: TreeSeriesScope, sourceLayout: TreeNodeLayout
const radialCoor4 = radialCoordinate(x2, y2);
return {
x1: radialCoor1.x,
y1: radialCoor1.y,
x2: radialCoor4.x,
y2: radialCoor4.y,
cpx1: radialCoor2.x,
cpy1: radialCoor2.y,
cpx2: radialCoor3.x,
cpy2: radialCoor3.y
x1: radialCoor1.x || 0,
y1: radialCoor1.y || 0,
x2: radialCoor4.x || 0,
y2: radialCoor4.y || 0,
cpx1: radialCoor2.x || 0,
cpy1: radialCoor2.y || 0,
cpx2: radialCoor3.x || 0,
cpy2: radialCoor3.y || 0
};
}
else {
......
src/chart/treemap/TreemapView.ts
浏览文件 @ 444f6c79
......@@ -121,7 +121,8 @@ interface ReRoot {
}
interface LastCfg {
oldPos?: graphic.Group['position']
oldX?: number
oldY?: number
oldShape?: graphic.Rect['shape']
fadein: boolean
}
......@@ -218,7 +219,8 @@ class TreemapView extends ChartView {
this._initEvents(containerGroup);
this.group.add(containerGroup);
}
containerGroup.attr('position', [layoutInfo.x, layoutInfo.y]);
containerGroup.x = layoutInfo.x;
containerGroup.y = layoutInfo.y;
return containerGroup;
}
......@@ -403,7 +405,7 @@ class TreemapView extends ChartView {
}
target = storageName === 'nodeGroup'
? {position: [targetX, targetY], style: {opacity: 0}}
? {x: targetX, y: targetY, style: {opacity: 0}}
: {
shape: {x: targetX, y: targetY, width: 0, height: 0},
style: {opacity: 0}
......@@ -425,9 +427,11 @@ class TreemapView extends ChartView {
}
if (el instanceof graphic.Group) {
if (last.oldPos) {
target.position = el.position.slice();
el.attr('position', last.oldPos);
if (last.oldX != null) {
target.x = el.x;
target.y = el.y;
el.x = last.oldX;
el.y = last.oldY;
}
}
else {
......@@ -799,7 +803,8 @@ function renderNode(
parentGroup.add(group);
// x,y are not set when el is above view root.
group.attr('position', [thisLayout.x || 0, thisLayout.y || 0]);
group.x = thisLayout.x || 0;
group.y = thisLayout.y || 0;
inner(group).nodeWidth = thisWidth;
inner(group).nodeHeight = thisHeight;
......@@ -1013,7 +1018,8 @@ function renderNode(
function prepareAnimationWhenHasOld(lasts: LastCfg[], element: graphic.Group | graphic.Rect) {
const lastCfg = lasts[thisRawIndex] = {} as LastCfg;
if (element instanceof Group) {
lastCfg.oldPos = element.position.slice();
lastCfg.oldX = element.x;
lastCfg.oldY = element.y;
}
else {
lastCfg.oldShape = extend({}, element.shape);
......@@ -1042,7 +1048,8 @@ function renderNode(
// When no parent old shape found, its parent is new too,
// so we can just use {x:0, y:0}.
if (isGroup) {
lastCfg.oldPos = [0, parentOldY];
lastCfg.oldX = 0;
lastCfg.oldY = parentOldY;
}
else {
lastCfg.oldShape = {x: parentOldX, y: parentOldY, width: 0, height: 0};
......
src/component/axis/AxisBuilder.ts
浏览文件 @ 444f6c79
......@@ -154,7 +154,8 @@ class AxisBuilder {
// FIXME Not use a seperate text group?
const transformGroup = new graphic.Group({
position: opt.position.slice(),
x: opt.position[0],
y: opt.position[1],
rotation: opt.rotation
});
......@@ -325,14 +326,11 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
// Calculate arrow position with offset
const r = point.r + point.offset;
const pos = [
pt1[0] + r * Math.cos(opt.rotation),
pt1[1] - r * Math.sin(opt.rotation)
];
symbol.attr({
rotation: point.rotate,
position: pos,
x: pt1[0] + r * Math.cos(opt.rotation),
y: pt1[1] - r * Math.sin(opt.rotation),
silent: true,
z2: 11
});
......@@ -425,7 +423,8 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
formatterParams[mainType + 'Index' as AxisIndexKey] = axisModel.componentIndex;
const textEl = new graphic.Text({
position: pos,
x: pos[0],
y: pos[1],
rotation: labelLayout.rotation,
silent: AxisBuilder.isLabelSilent(axisModel),
style: graphic.createTextStyle(textStyleModel, {
......@@ -767,13 +766,10 @@ function buildAxisLabel(
|| axisModel.get(['axisLine', 'lineStyle', 'color']);
const tickCoord = axis.dataToCoord(tickValue);
const pos = [
tickCoord,
opt.labelOffset + opt.labelDirection * labelMargin
];
const textEl = new graphic.Text({
position: pos,
x: tickCoord,
y: opt.labelOffset + opt.labelDirection * labelMargin,
rotation: labelLayout.rotation,
silent: silent,
z2: 10,
......
src/component/axis/ParallelAxisView.ts
浏览文件 @ 444f6c79
......@@ -143,7 +143,8 @@ class ParallelAxisView extends ComponentView {
.mount({
enableGlobalPan: true,
rotation: builderOpt.rotation,
position: builderOpt.position
x: builderOpt.position[0],
y: builderOpt.position[1]
})
.setPanels([{
panelId: 'pl',
......
src/component/axisPointer/BaseAxisPointer.ts
浏览文件 @ 444f6c79
......@@ -26,7 +26,6 @@ import * as throttleUtil from '../../util/throttle';
import {makeInner} from '../../util/model';
import { AxisPointer } from './AxisPointer';
import { AxisBaseModel } from '../../coord/AxisBaseModel';
import { VectorArray } from 'zrender/src/core/vector';
import ExtensionAPI from '../../ExtensionAPI';
import Displayable, { DisplayableProps } from 'zrender/src/graphic/Displayable';
import Element from 'zrender/src/Element';
......@@ -45,7 +44,8 @@ const bind = zrUtil.bind;
type Icon = ReturnType<typeof graphic.createIcon>;
interface Transform {
position: VectorArray,
x: number,
y: number,
rotation: number
}
......@@ -323,7 +323,8 @@ class BaseAxisPointer implements AxisPointer {
// be used on shape, otherwise the effect will be weird.
// TODOTODO
// shape: elOption.label.shape,
position: elOption.label.position
x: elOption.label.x,
y: elOption.label.y
});
updateLabelShowHide(labelEl, axisPointerModel);
......@@ -383,7 +384,8 @@ class BaseAxisPointer implements AxisPointer {
if (!zrUtil.isArray(handleSize)) {
handleSize = [handleSize, handleSize];
}
(handle as graphic.Path).attr('scale', [handleSize[0] / 2, handleSize[1] / 2]);
handle.scaleX = handleSize[0] / 2;
handle.scaleY = handleSize[1] / 2;
throttleUtil.createOrUpdate(
this,
......@@ -549,7 +551,8 @@ function updateLabelShowHide(labelEl: Element, axisPointerModel: AxisPointerMode
function getHandleTransProps(trans: Transform): Transform {
return {
position: trans.position.slice(),
x: trans.x || 0,
y: trans.y || 0,
rotation: trans.rotation || 0
};
}
......
src/component/axisPointer/CartesianAxisPointer.ts
浏览文件 @ 444f6c79
......@@ -27,7 +27,6 @@ import { ScaleDataValue, VerticalAlign, HorizontalAlign, CommonAxisPointerOption
import Grid from '../../coord/cartesian/Grid';
import Axis2D from '../../coord/cartesian/Axis2D';
import { PathProps } from 'zrender/src/graphic/Path';
import { VectorArray } from 'zrender/src/core/vector';
import Model from '../../model/Model';
// Not use top level axisPointer model
......@@ -81,9 +80,10 @@ class CartesianAxisPointer extends BaseAxisPointer {
});
// @ts-ignore
layoutInfo.labelMargin = axisPointerModel.get(['handle', 'margin']);
const pos = viewHelper.getTransformedPosition(axisModel.axis, value, layoutInfo);
return {
// @ts-ignore
position: viewHelper.getTransformedPosition(axisModel.axis, value, layoutInfo),
x: pos[0],
y: pos[1],
rotation: layoutInfo.rotation + (layoutInfo.labelDirection < 0 ? Math.PI : 0)
};
}
......@@ -93,7 +93,7 @@ class CartesianAxisPointer extends BaseAxisPointer {
*/
updateHandleTransform(
transform: {
position: VectorArray,
x: number, y: number,
rotation: number
},
delta: number[],
......@@ -106,7 +106,7 @@ class CartesianAxisPointer extends BaseAxisPointer {
const otherExtent = getCartesian(grid, axis).getOtherAxis(axis).getGlobalExtent();
const dimIndex = axis.dim === 'x' ? 0 : 1;
const currPosition = transform.position;
const currPosition = [transform.x, transform.y];
currPosition[dimIndex] += delta[dimIndex];
currPosition[dimIndex] = Math.min(axisExtent[1], currPosition[dimIndex]);
currPosition[dimIndex] = Math.max(axisExtent[0], currPosition[dimIndex]);
......@@ -125,7 +125,8 @@ class CartesianAxisPointer extends BaseAxisPointer {
];
return {
position: currPosition,
x: currPosition[0],
y: currPosition[1],
rotation: transform.rotation,
cursorPoint: cursorPoint,
tooltipOption: tooltipOptions[dimIndex]
......
src/component/axisPointer/SingleAxisPointer.ts
浏览文件 @ 444f6c79
......@@ -27,7 +27,6 @@ import { PathProps } from 'zrender/src/graphic/Path';
import { ScaleDataValue, VerticalAlign, CommonAxisPointerOption } from '../../util/types';
import ExtensionAPI from '../../ExtensionAPI';
import SingleAxisModel from '../../coord/single/AxisModel';
import { VectorArray } from 'zrender/src/core/vector';
import Model from '../../model/Model';
const XY = ['x', 'y'] as const;
......@@ -83,8 +82,10 @@ class SingleAxisPointer extends BaseAxisPointer {
const layoutInfo = singleAxisHelper.layout(axisModel, {labelInside: false});
// @ts-ignore
layoutInfo.labelMargin = axisPointerModel.get(['handle', 'margin']);
const position = viewHelper.getTransformedPosition(axisModel.axis, value, layoutInfo);
return {
position: viewHelper.getTransformedPosition(axisModel.axis, value, layoutInfo),
x: position[0],
y: position[1],
rotation: layoutInfo.rotation + (layoutInfo.labelDirection < 0 ? Math.PI : 0)
};
}
......@@ -94,7 +95,8 @@ class SingleAxisPointer extends BaseAxisPointer {
*/
updateHandleTransform(
transform: {
position: VectorArray,
x: number,
y: number,
rotation: number
},
delta: number[],
......@@ -105,7 +107,7 @@ class SingleAxisPointer extends BaseAxisPointer {
const coordSys = axis.coordinateSystem;
const dimIndex = getPointDimIndex(axis);
const axisExtent = getGlobalExtent(coordSys, dimIndex);
const currPosition = transform.position;
const currPosition = [transform.x, transform.y];
currPosition[dimIndex] += delta[dimIndex];
currPosition[dimIndex] = Math.min(axisExtent[1], currPosition[dimIndex]);
currPosition[dimIndex] = Math.max(axisExtent[0], currPosition[dimIndex]);
......@@ -115,7 +117,8 @@ class SingleAxisPointer extends BaseAxisPointer {
cursorPoint[dimIndex] = currPosition[dimIndex];
return {
position: currPosition,
x: currPosition[0],
y: currPosition[1],
rotation: transform.rotation,
cursorPoint: cursorPoint,
tooltipOption: {
......
src/component/axisPointer/viewHelper.ts
浏览文件 @ 444f6c79
......@@ -119,7 +119,8 @@ export function buildLabelElOption(
elOption.label = {
// shape: {x: 0, y: 0, width: width, height: height, r: labelModel.get('borderRadius')},
position: position.slice(),
x: position[0],
y: position[1],
// TODO: rich
style: {
text: text,
......
src/component/calendar/CalendarView.ts
浏览文件 @ 444f6c79
......@@ -263,22 +263,23 @@ class CalendarView extends ComponentView {
margin: number
): RichTextProps {
point = point.slice();
let x = point[0];
let y = point[1];
let aligns: [ZRTextAlign, ZRTextVerticalAlign] = ['center', 'bottom'];
if (position === 'bottom') {
point[1] += margin;
y += margin;
aligns = ['center', 'top'];
}
else if (position === 'left') {
point[0] -= margin;
x -= margin;
}
else if (position === 'right') {
point[0] += margin;
x += margin;
aligns = ['center', 'top'];
}
else { // top
point[1] -= margin;
y -= margin;
}
let rotate = 0;
......@@ -288,7 +289,8 @@ class CalendarView extends ComponentView {
return {
rotation: rotate,
position: point,
x,
y,
style: {
align: aligns[0],
verticalAlign: aligns[1]
......
src/component/dataZoom/SliderZoomView.ts
浏览文件 @ 444f6c79
......@@ -238,18 +238,19 @@ class SliderZoomView extends DataZoomView {
// Transform barGroup.
barGroup.attr(
(orient === HORIZONTAL && !inverse)
? {scale: otherAxisInverse ? [1, 1] : [1, -1]}
? {scaleY: otherAxisInverse ? 1 : -1, scaleX: 1 }
: (orient === HORIZONTAL && inverse)
? {scale: otherAxisInverse ? [-1, 1] : [-1, -1]}
? {scaleY: otherAxisInverse ? 1 : -1, scaleX: -1 }
: (orient === VERTICAL && !inverse)
? {scale: otherAxisInverse ? [1, -1] : [1, 1], rotation: Math.PI / 2}
? {scaleY: otherAxisInverse ? -1 : 1, scaleX: 1, rotation: Math.PI / 2}
// Dont use Math.PI, considering shadow direction.
: {scale: otherAxisInverse ? [-1, -1] : [-1, 1], rotation: Math.PI / 2}
: {scaleY: otherAxisInverse ? -1 : 1, scaleX: -1, rotation: Math.PI / 2}
);
// Position barGroup
const rect = thisGroup.getBoundingRect([barGroup]);
thisGroup.attr('position', [location.x - rect.x, location.y - rect.y]);
thisGroup.x = location.x - rect.x;
thisGroup.y = location.y - rect.y;
}
/**
......@@ -569,8 +570,10 @@ class SliderZoomView extends DataZoomView {
const handle = displaybles.handles[handleIndex];
const handleHeight = this._handleHeight;
(handle as graphic.Path).attr({
scale: [handleHeight / 2, handleHeight / 2],
position: [handleEnds[handleIndex], size[1] / 2 - handleHeight / 2]
scaleX: handleHeight / 2,
scaleY: handleHeight / 2,
x: handleEnds[handleIndex],
y: size[1] / 2 - handleHeight / 2
});
}, this);
......
src/component/helper/BrushController.ts
浏览文件 @ 444f6c79
......@@ -338,9 +338,11 @@ class BrushController extends Eventful<BrushControllerEvents> {
mount(opt?: {
enableGlobalPan?: boolean;
position?: number[];
x?: number;
y?: number;
rotation?: number;
scale?: number[];
scaleX?: number;
scaleY?: number
}): BrushController {
opt = opt || {};
......@@ -354,9 +356,11 @@ class BrushController extends Eventful<BrushControllerEvents> {
this._zr.add(thisGroup);
thisGroup.attr({
position: opt.position || [0, 0],
x: opt.x || 0,
y: opt.y || 0,
rotation: opt.rotation || 0,
scale: opt.scale || [1, 1]
scaleX: opt.scaleX || 1,
scaleY: opt.scaleY || 1
});
this._transform = thisGroup.getLocalTransform();
......
src/component/helper/MapDraw.ts
浏览文件 @ 444f6c79
......@@ -139,9 +139,6 @@ class MapDraw {
group.decomposeTransform();
group.dirty();
const scale = transformInfo.rawScale;
const position = transformInfo.rawPosition;
regionsGroup.removeAll();
const itemStyleAccessPath = ['itemStyle'] as const;
......@@ -195,10 +192,14 @@ class MapDraw {
}
}
const sx = transformInfo.rawScaleX;
const sy = transformInfo.rawScaleY;
const offsetX = transformInfo.rawX;
const offsetY = transformInfo.rawY;
const transformPoint = function (point: number[]): number[] {
return [
point[0] * scale[0] + position[0],
point[1] * scale[1] + position[1]
point[0] * sx + offsetX,
point[1] * sy + offsetY
];
};
......@@ -258,13 +259,16 @@ class MapDraw {
labelFetcher = mapOrGeoModel;
}
const centerPt = transformPoint(region.center);
const textEl = new graphic.Text({
position: transformPoint(region.center.slice()),
x: centerPt[0],
y: centerPt[1],
// FIXME
// label rotation is not support yet in geo or regions of series-map
// that has no data. The rotation will be effected by this `scale`.
// So needed to change to RectText?
scale: [1 / group.scale[0], 1 / group.scale[1]],
scaleX: 1 / group.scaleX,
scaleY: 1 / group.scaleY,
z2: 10,
silent: true
});
......@@ -390,10 +394,11 @@ class MapDraw {
}));
if (this._updateGroup) {
const scale = this.group.scale;
const group = this.group;
this._regionsGroup.traverse(function (el) {
if (el.type === 'text') {
el.attr('scale', [1 / scale[0], 1 / scale[1]]);
el.scaleX = 1 / group.scaleX;
el.scaleY = 1 / group.scaleY;
}
});
}
......
src/component/legend/LegendView.ts
浏览文件 @ 444f6c79
......@@ -136,7 +136,8 @@ class LegendView extends ComponentView {
viewportSize,
padding
);
this.group.attr('position', [layoutRect.x - mainRect.x, layoutRect.y - mainRect.y]);
this.group.x = layoutRect.x - mainRect.x;
this.group.y = layoutRect.y - mainRect.y;
// Render background after group is layout.
this.group.add(
......@@ -483,6 +484,9 @@ class LegendView extends ComponentView {
const contentRect = contentGroup.getBoundingRect();
const contentPos = [-contentRect.x, -contentRect.y];
selectorGroup.markRedraw();
contentGroup.markRedraw();
if (selector) {
// Place buttons in selectorGroup
layoutUtil.box(
......@@ -510,8 +514,10 @@ class LegendView extends ComponentView {
//Always align selector to content as 'middle'
selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2;
selectorGroup.attr('position', selectorPos);
contentGroup.attr('position', contentPos);
selectorGroup.x = selectorPos[0];
selectorGroup.y = selectorPos[1];
contentGroup.x = contentPos[0];
contentGroup.y = contentPos[1];
const mainRect = {x: 0, y: 0} as ZRRectLike;
mainRect[wh] = contentRect[wh] + selectorButtonGap + selectorRect[wh];
......@@ -520,7 +526,8 @@ class LegendView extends ComponentView {
return mainRect;
}
else {
contentGroup.attr('position', contentPos);
contentGroup.x = contentPos[0];
contentGroup.y = contentPos[1];
return this.group.getBoundingRect();
}
}
......
src/component/legend/ScrollableLegendView.ts
浏览文件 @ 444f6c79
......@@ -223,7 +223,9 @@ class ScrollableLegendView extends LegendView {
mainRect[hw] = Math.max(mainRect[hw], selectorRect[hw]);
mainRect[yx] = Math.min(mainRect[yx], selectorRect[yx] + selectorPos[1 - orientIdx]);
selectorGroup.attr('position', selectorPos);
selectorGroup.x = selectorPos[0];
selectorGroup.y = selectorPos[1];
selectorGroup.markRedraw();
}
return mainRect;
......@@ -267,7 +269,7 @@ class ScrollableLegendView extends LegendView {
// If first rendering, `contentGroup.position` is [0, 0], which
// does not make sense and may cause unexepcted animation if adopted.
if (!isFirstRender) {
contentPos[orientIdx] = contentGroup.position[orientIdx];
contentPos[orientIdx] = contentGroup[yx];
}
// Layout container group based on 0.
......@@ -293,9 +295,9 @@ class ScrollableLegendView extends LegendView {
// Always align controller to content as 'middle'.
controllerPos[1 - orientIdx] += contentRect[hw] / 2 - controllerRect[hw] / 2;
contentGroup.attr('position', contentPos);
containerGroup.attr('position', containerPos);
controllerGroup.attr('position', controllerPos);
contentGroup.setPosition(contentPos);
containerGroup.setPosition(containerPos);
controllerGroup.setPosition(controllerPos);
// Calculate `mainRect` and set `clipPath`.
// mainRect should not be calculated by `this.group.getBoundingRect()`
......@@ -333,7 +335,7 @@ class ScrollableLegendView extends LegendView {
const pageInfo = this._getPageInfo(legendModel);
pageInfo.pageIndex != null && graphic.updateProps(
contentGroup,
{position: pageInfo.contentPosition},
{ x: pageInfo.contentPosition[0], y: pageInfo.contentPosition[1] },
// When switch from "show controller" to "not show controller", view should be
// updated immediately without animation, otherwise causes weird effect.
showController ? legendModel : null
......@@ -417,7 +419,7 @@ class ScrollableLegendView extends LegendView {
const pCount = !itemCount ? 0 : 1;
const result: PageInfo = {
contentPosition: zrUtil.slice(contentGroup.position),
contentPosition: [contentGroup.x, contentGroup.y],
pageCount: pCount,
pageIndex: pCount - 1,
pagePrevDataIndex: null,
......@@ -504,7 +506,7 @@ class ScrollableLegendView extends LegendView {
function getItemInfo(el: Element): ItemInfo {
if (el) {
const itemRect = el.getBoundingRect();
const start = itemRect[xy] + el.position[orientIdx];
const start = itemRect[xy] + el[xy];
return {
s: start,
e: start + itemRect[wh],
......
src/component/timeline/SliderTimelineView.ts
浏览文件 @ 444f6c79
......@@ -276,8 +276,8 @@ class SliderTimelineView extends TimelineView {
const mainBound = getBound(mainGroup.getBoundingRect());
const labelBound = getBound(labelGroup.getBoundingRect());
const mainPosition = mainGroup.position;
const labelsPosition = labelGroup.position;
const mainPosition = [mainGroup.x, mainGroup.y];
const labelsPosition = [labelGroup.x, labelGroup.y];
labelsPosition[0] = mainPosition[0] = viewBound[0][0];
......@@ -294,19 +294,16 @@ class SliderTimelineView extends TimelineView {
labelsPosition[1] = mainPosition[1] + labelPosOpt;
}
mainGroup.attr('position', mainPosition);
labelGroup.attr('position', labelsPosition);
mainGroup.setPosition(mainPosition);
labelGroup.setPosition(labelsPosition);
mainGroup.rotation = labelGroup.rotation = layoutInfo.rotation;
setOrigin(mainGroup);
setOrigin(labelGroup);
function setOrigin(targetGroup: graphic.Group) {
const pos = targetGroup.position;
targetGroup.origin = [
viewBound[0][0] - pos[0],
viewBound[1][0] - pos[1]
];
targetGroup.originX = viewBound[0][0] - targetGroup.x;
targetGroup.originY = viewBound[1][0] - targetGroup.y;
}
function getBound(rect: RectLike) {
......@@ -442,7 +439,8 @@ class SliderTimelineView extends TimelineView {
const hoverLabelModel = itemModel.getModel(['emphasis', 'label']);
const tickCoord = axis.dataToCoord(labelItem.tickValue);
const textEl = new graphic.Text({
position: [tickCoord, 0],
x: tickCoord,
y: 0,
rotation: layoutInfo.labelRotation - layoutInfo.rotation,
onclick: bind(this._changeTimeline, this, dataIndex),
silent: false,
......@@ -576,8 +574,8 @@ class SliderTimelineView extends TimelineView {
toCoord > axisExtent[1] && (toCoord = axisExtent[1]);
toCoord < axisExtent[0] && (toCoord = axisExtent[0]);
this._currentPointer.position[0] = toCoord;
this._currentPointer.dirty();
this._currentPointer.x = toCoord;
this._currentPointer.markRedraw();
const targetDataIndex = this._findNearestTick(toCoord);
const timelineModel = this.model;
......@@ -750,15 +748,16 @@ function giveSymbol(
symbolSize = symbolSize instanceof Array
? symbolSize.slice()
: [+symbolSize, +symbolSize];
symbolSize[0] /= 2;
symbolSize[1] /= 2;
opt.scale = symbolSize;
opt.scaleX = symbolSize[0] / 2;
opt.scaleY = symbolSize[1] / 2;
const symbolOffset = hostModel.get('symbolOffset');
if (symbolOffset) {
const pos = opt.position = opt.position || [0, 0];
pos[0] += numberUtil.parsePercent(symbolOffset[0], symbolSize[0]);
pos[1] += numberUtil.parsePercent(symbolOffset[1], symbolSize[1]);
opt.x = opt.x || 0;
opt.y = opt.y || 0;
opt.x += numberUtil.parsePercent(symbolOffset[0], symbolSize[0]);
opt.y += numberUtil.parsePercent(symbolOffset[1], symbolSize[1]);
}
const symbolRotate = hostModel.get('symbolRotate');
......@@ -792,18 +791,20 @@ function pointerMoveTo(
const toCoord = axis.dataToCoord(timelineModel.getData().get('value', dataIndex));
if (noAnimation || !pointerModel.get('animation', true)) {
pointer.attr({position: [toCoord, 0]});
pointer.x = toCoord;
pointer.y = 0;
}
else {
pointer.stopAnimation(true);
pointer.animateTo(
{ position: [toCoord, 0] },
{
pointer.animateTo({
x: toCoord,
y: 0
}, {
duration: pointerModel.get('animationDuration', true),
easing: pointerModel.get('animationEasing', true)
}
);
});
}
pointer.markRedraw();
}
......
src/component/title.ts
浏览文件 @ 444f6c79
......@@ -241,7 +241,8 @@ class TitleView extends ComponentView {
textVerticalAlign = textVerticalAlign || 'top';
}
group.attr('position', [layoutRect.x, layoutRect.y]);
group.x = layoutRect.x;
group.y = layoutRect.y;
const alignStyle = {
align: textAlign,
verticalAlign: textVerticalAlign
......
src/component/toolbox/ToolboxView.ts
浏览文件 @ 444f6c79
......@@ -296,8 +296,8 @@ class ToolboxView extends ComponentView {
const rect = textContain.getBoundingRect(
titleText, RichText.makeFont(emphasisTextStyle)
);
const offsetX = icon.position[0] + group.position[0];
const offsetY = icon.position[1] + group.position[1] + itemSize;
const offsetX = icon.x + group.x;
const offsetY = icon.y + group.y + itemSize;
let needPutOnTop = false;
if (offsetY + rect.height > api.getHeight()) {
......
src/component/tooltip/TooltipRichContent.ts
浏览文件 @ 444f6c79
......@@ -152,8 +152,11 @@ class TooltipRichContent {
}
moveTo(x: number, y: number) {
if (this.el) {
this.el.attr('position', [x, y]);
const el = this.el;
if (el) {
el.x = x;
el.y = y;
el.markRedraw();
}
}
......
src/component/tooltip/TooltipView.ts
浏览文件 @ 444f6c79
......@@ -305,7 +305,8 @@ class TooltipView extends ComponentView {
if (payload.tooltip && payload.x != null && payload.y != null) {
const el = proxyRect as ECElement;
el.position = [payload.x, payload.y];
el.x = payload.x;
el.y = payload.y;
el.update();
el.tooltip = payload.tooltip;
// Manually show tooltip while view is not using zrender elements.
......
src/component/visualMap/ContinuousModel.ts
浏览文件 @ 444f6c79
......@@ -263,7 +263,8 @@ class ContinuousModel extends VisualMapModel<ContinousVisualMapOption> {
static defaultOption = inheritDefaultOption(VisualMapModel.defaultOption, {
align: 'auto', // 'auto', 'left', 'right', 'top', 'bottom'
calculable: false,
hoverLink: true
hoverLink: true,
realtime: true
}) as ContinousVisualMapOption;
}
......
src/component/visualMap/ContinuousView.ts
浏览文件 @ 444f6c79
......@@ -238,7 +238,7 @@ class ContinuousView extends VisualMapView {
onDrift,
onDragEnd
);
handleThumb.position[0] = itemSize[0];
handleThumb.x = itemSize[0];
barGroup.add(handleThumb);
// Text is always horizontal layout but should not be effected by
......@@ -284,7 +284,7 @@ class ContinuousView extends VisualMapView {
orient: Orient
) {
const indicator = createPolygon([[0, 0]], 'move');
indicator.position[0] = itemSize[0];
indicator.x = itemSize[0];
indicator.attr({invisible: true, silent: true});
barGroup.add(indicator);
......@@ -508,12 +508,12 @@ class ContinuousView extends VisualMapView {
return new graphic.Group(
(orient === 'horizontal' && !inverse)
? {scale: itemAlign === 'bottom' ? [1, 1] : [-1, 1], rotation: Math.PI / 2}
? {scaleX: itemAlign === 'bottom' ? 1 : -1, rotation: Math.PI / 2}
: (orient === 'horizontal' && inverse)
? {scale: itemAlign === 'bottom' ? [-1, 1] : [1, 1], rotation: -Math.PI / 2}
? {scaleX: itemAlign === 'bottom' ? -1 : 1, rotation: -Math.PI / 2}
: (orient === 'vertical' && !inverse)
? {scale: itemAlign === 'left' ? [1, -1] : [-1, -1]}
: {scale: itemAlign === 'left' ? [1, 1] : [-1, 1]}
? {scaleX: itemAlign === 'left' ? 1 : -1, scaleY: -1}
: {scaleX: itemAlign === 'left' ? 1 : -1}
);
}
......@@ -530,7 +530,7 @@ class ContinuousView extends VisualMapView {
each([0, 1], function (handleIndex) {
const handleThumb = handleThumbs[handleIndex];
handleThumb.setStyle('fill', visualInRange.handlesColor[handleIndex]);
handleThumb.position[1] = handleEnds[handleIndex];
handleThumb.y = handleEnds[handleIndex];
// Update handle label position.
const textPoint = graphic.applyTransform(
......@@ -570,7 +570,7 @@ class ContinuousView extends VisualMapView {
return;
}
indicator.position[1] = pos;
indicator.y = pos;
indicator.attr('invisible', false);
indicator.setShape('points', createIndicatorPoints(
!!rangeSymbol, halfHoverLinkSize, pos, itemSize[1]
......
src/coord/View.ts
浏览文件 @ 444f6c79
......@@ -164,12 +164,11 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
center = vector.applyTransform([], center, rawTransformMatrix);
defaultCenter = vector.applyTransform([], defaultCenter, rawTransformMatrix);
roamTransform.origin = center;
roamTransform.position = [
defaultCenter[0] - center[0],
defaultCenter[1] - center[1]
];
roamTransform.scale = [zoom, zoom];
roamTransform.originX = center[0];
roamTransform.originY = center[1];
roamTransform.x = defaultCenter[0] - center[0];
roamTransform.y = defaultCenter[1] - center[1];
roamTransform.scaleX = roamTransform.scaleY = zoom;
this._updateTransform();
}
......@@ -195,17 +194,15 @@ class View extends Transformable implements CoordinateSystemMaster, CoordinateSy
this.decomposeTransform();
}
getTransformInfo(): {
roamTransform: matrix.MatrixArray,
rawScale: number[],
rawPosition: number[]
} {
getTransformInfo() {
const roamTransform = this._roamTransformable.transform;
const rawTransformable = this._rawTransformable;
return {
roamTransform: roamTransform ? zrUtil.slice(roamTransform) : matrix.create(),
rawScale: zrUtil.slice(rawTransformable.scale),
rawPosition: zrUtil.slice(rawTransformable.position)
rawScaleX: rawTransformable.scaleX,
rawScaleY: rawTransformable.scaleY,
rawX: rawTransformable.x,
rawY: rawTransformable.y
};
}
......
src/coord/geo/Geo.ts
浏览文件 @ 444f6c79
......@@ -102,8 +102,7 @@ class Geo extends View {
rawTransformable.decomposeTransform();
if (invertLongitute) {
const scale = rawTransformable.scale;
scale[1] = -scale[1];
rawTransformable.scaleY = -rawTransformable.scaleY;
}
rawTransformable.updateTransform();
......
src/coord/geo/geoSVGLoader.ts
浏览文件 @ 444f6c79
......@@ -137,8 +137,9 @@ function buildGraphic(
const elRoot = root;
root = new Group();
root.add(elRoot);
elRoot.scale = viewBoxTransform.scale;
elRoot.position = viewBoxTransform.position;
elRoot.scaleX = elRoot.scaleY = viewBoxTransform.scale;
elRoot.x = viewBoxTransform.x;
elRoot.y = viewBoxTransform.y;
}
root.setClipPath(new Rect({
......
src/util/graphic.ts
浏览文件 @ 444f6c79
......@@ -364,8 +364,8 @@ function singleEnterEmphasis(el: Displayable) {
}
const emphasisStyle = el.states.emphasis.style;
const currentFill = el.style.fill;
const currentStroke = el.style.stroke;
const currentFill = el.style && el.style.fill;
const currentStroke = el.style && el.style.stroke;
el.useState('emphasis');
......@@ -520,8 +520,12 @@ export function setAsHighDownDispatcher(el: Element, asDispatcher: boolean) {
const extendedEl = el as ExtendedElement;
// Make `highDownSilentOnTouch` and `highDownOnUpdate` only work after
// `setAsHighDownDispatcher` called. Avoid it is modified by user unexpectedly.
extendedEl.__highDownSilentOnTouch = (el as ECElement).highDownSilentOnTouch;
extendedEl.__highDownOnUpdate = (el as ECElement).highDownOnUpdate;
if ((el as ECElement).highDownSilentOnTouch) {
extendedEl.__highDownSilentOnTouch = (el as ECElement).highDownSilentOnTouch;
}
if ((el as ECElement).highDownOnUpdate) {
extendedEl.__highDownOnUpdate = (el as ECElement).highDownOnUpdate;
}
// Simple optimize, since this method might be
// called for each elements of a group in some cases.
......@@ -1207,7 +1211,8 @@ export function groupTransition(
}
function getAnimatableProps(el: Displayable) {
const obj: PathProps = {
position: vector.clone(el.position),
x: el.x,
y: el.y,
rotation: el.rotation
};
if (isPath(el)) {
......
src/util/layout.ts
浏览文件 @ 444f6c79
......@@ -73,7 +73,6 @@ function boxLayout(
let currentLineMaxSize = 0;
group.eachChild(function (child, idx) {
const position = child.position;
const rect = child.getBoundingRect();
const nextChild = group.childAt(idx + 1);
const nextChildRect = nextChild && nextChild.getBoundingRect();
......@@ -115,8 +114,8 @@ function boxLayout(
return;
}
position[0] = x;
position[1] = y;
child.x = x;
child.y = y;
orient === 'horizontal'
? (x = nextX + gap)
......@@ -379,11 +378,18 @@ export function positionElement(
// Because 'tranlate' is the last step in transform
// (see zrender/core/Transformable#getLocalTransform),
// we can just only modify el.position to get final result.
const elPos = el.position;
const dx = h ? layoutRect.x - rect.x : 0;
const dy = v ? layoutRect.y - rect.y : 0;
el.attr('position', boundingMode === 'raw' ? [dx, dy] : [elPos[0] + dx, elPos[1] + dy]);
if (boundingMode === 'raw') {
el.x = dx;
el.y = dy;
}
else {
el.x += dx;
el.y += dy;
}
el.markRedraw();
}
/**
......
test/pie.html
浏览文件 @ 444f6c79
......@@ -51,14 +51,11 @@ under the License.
// Pencil sketch texture
var patternSrc = window.pieTexture;
var img = new Image();
img.src = patternSrc;
var itemStyle = {
normal: {
opacity: 0.7,
color: {
image: img,
image: patternSrc,
repeat: 'repeat'
},
borderWidth: 3,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或