123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594 |
- import { cubicSubdivide } from '../core/curve.js';
- import Path from '../graphic/Path.js';
- import { defaults, map } from '../core/util.js';
- import { lerp } from '../core/vector.js';
- import { clonePath } from './path.js';
- import Transformable from '../core/Transformable.js';
- import { split } from './dividePath.js';
- import { pathToBezierCurves } from './convertPath.js';
- function alignSubpath(subpath1, subpath2) {
- var len1 = subpath1.length;
- var len2 = subpath2.length;
- if (len1 === len2) {
- return [subpath1, subpath2];
- }
- var tmpSegX = [];
- var tmpSegY = [];
- var shorterPath = len1 < len2 ? subpath1 : subpath2;
- var shorterLen = Math.min(len1, len2);
- var diff = Math.abs(len2 - len1) / 6;
- var shorterBezierCount = (shorterLen - 2) / 6;
- var eachCurveSubDivCount = Math.ceil(diff / shorterBezierCount) + 1;
- var newSubpath = [shorterPath[0], shorterPath[1]];
- var remained = diff;
- for (var i = 2; i < shorterLen;) {
- var x0 = shorterPath[i - 2];
- var y0 = shorterPath[i - 1];
- var x1 = shorterPath[i++];
- var y1 = shorterPath[i++];
- var x2 = shorterPath[i++];
- var y2 = shorterPath[i++];
- var x3 = shorterPath[i++];
- var y3 = shorterPath[i++];
- if (remained <= 0) {
- newSubpath.push(x1, y1, x2, y2, x3, y3);
- continue;
- }
- var actualSubDivCount = Math.min(remained, eachCurveSubDivCount - 1) + 1;
- for (var k = 1; k <= actualSubDivCount; k++) {
- var p = k / actualSubDivCount;
- cubicSubdivide(x0, x1, x2, x3, p, tmpSegX);
- cubicSubdivide(y0, y1, y2, y3, p, tmpSegY);
- x0 = tmpSegX[3];
- y0 = tmpSegY[3];
- newSubpath.push(tmpSegX[1], tmpSegY[1], tmpSegX[2], tmpSegY[2], x0, y0);
- x1 = tmpSegX[5];
- y1 = tmpSegY[5];
- x2 = tmpSegX[6];
- y2 = tmpSegY[6];
- }
- remained -= actualSubDivCount - 1;
- }
- return shorterPath === subpath1 ? [newSubpath, subpath2] : [subpath1, newSubpath];
- }
- function createSubpath(lastSubpathSubpath, otherSubpath) {
- var len = lastSubpathSubpath.length;
- var lastX = lastSubpathSubpath[len - 2];
- var lastY = lastSubpathSubpath[len - 1];
- var newSubpath = [];
- for (var i = 0; i < otherSubpath.length;) {
- newSubpath[i++] = lastX;
- newSubpath[i++] = lastY;
- }
- return newSubpath;
- }
- export function alignBezierCurves(array1, array2) {
- var _a;
- var lastSubpath1;
- var lastSubpath2;
- var newArray1 = [];
- var newArray2 = [];
- for (var i = 0; i < Math.max(array1.length, array2.length); i++) {
- var subpath1 = array1[i];
- var subpath2 = array2[i];
- var newSubpath1 = void 0;
- var newSubpath2 = void 0;
- if (!subpath1) {
- newSubpath1 = createSubpath(lastSubpath1 || subpath2, subpath2);
- newSubpath2 = subpath2;
- }
- else if (!subpath2) {
- newSubpath2 = createSubpath(lastSubpath2 || subpath1, subpath1);
- newSubpath1 = subpath1;
- }
- else {
- _a = alignSubpath(subpath1, subpath2), newSubpath1 = _a[0], newSubpath2 = _a[1];
- lastSubpath1 = newSubpath1;
- lastSubpath2 = newSubpath2;
- }
- newArray1.push(newSubpath1);
- newArray2.push(newSubpath2);
- }
- return [newArray1, newArray2];
- }
- export function centroid(array) {
- var signedArea = 0;
- var cx = 0;
- var cy = 0;
- var len = array.length;
- for (var i = 0, j = len - 2; i < len; j = i, i += 2) {
- var x0 = array[j];
- var y0 = array[j + 1];
- var x1 = array[i];
- var y1 = array[i + 1];
- var a = x0 * y1 - x1 * y0;
- signedArea += a;
- cx += (x0 + x1) * a;
- cy += (y0 + y1) * a;
- }
- if (signedArea === 0) {
- return [array[0] || 0, array[1] || 0];
- }
- return [cx / signedArea / 3, cy / signedArea / 3, signedArea];
- }
- function findBestRingOffset(fromSubBeziers, toSubBeziers, fromCp, toCp) {
- var bezierCount = (fromSubBeziers.length - 2) / 6;
- var bestScore = Infinity;
- var bestOffset = 0;
- var len = fromSubBeziers.length;
- var len2 = len - 2;
- for (var offset = 0; offset < bezierCount; offset++) {
- var cursorOffset = offset * 6;
- var score = 0;
- for (var k = 0; k < len; k += 2) {
- var idx = k === 0 ? cursorOffset : ((cursorOffset + k - 2) % len2 + 2);
- var x0 = fromSubBeziers[idx] - fromCp[0];
- var y0 = fromSubBeziers[idx + 1] - fromCp[1];
- var x1 = toSubBeziers[k] - toCp[0];
- var y1 = toSubBeziers[k + 1] - toCp[1];
- var dx = x1 - x0;
- var dy = y1 - y0;
- score += dx * dx + dy * dy;
- }
- if (score < bestScore) {
- bestScore = score;
- bestOffset = offset;
- }
- }
- return bestOffset;
- }
- function reverse(array) {
- var newArr = [];
- var len = array.length;
- for (var i = 0; i < len; i += 2) {
- newArr[i] = array[len - i - 2];
- newArr[i + 1] = array[len - i - 1];
- }
- return newArr;
- }
- function findBestMorphingRotation(fromArr, toArr, searchAngleIteration, searchAngleRange) {
- var result = [];
- var fromNeedsReverse;
- for (var i = 0; i < fromArr.length; i++) {
- var fromSubpathBezier = fromArr[i];
- var toSubpathBezier = toArr[i];
- var fromCp = centroid(fromSubpathBezier);
- var toCp = centroid(toSubpathBezier);
- if (fromNeedsReverse == null) {
- fromNeedsReverse = fromCp[2] < 0 !== toCp[2] < 0;
- }
- var newFromSubpathBezier = [];
- var newToSubpathBezier = [];
- var bestAngle = 0;
- var bestScore = Infinity;
- var tmpArr = [];
- var len = fromSubpathBezier.length;
- if (fromNeedsReverse) {
- fromSubpathBezier = reverse(fromSubpathBezier);
- }
- var offset = findBestRingOffset(fromSubpathBezier, toSubpathBezier, fromCp, toCp) * 6;
- var len2 = len - 2;
- for (var k = 0; k < len2; k += 2) {
- var idx = (offset + k) % len2 + 2;
- newFromSubpathBezier[k + 2] = fromSubpathBezier[idx] - fromCp[0];
- newFromSubpathBezier[k + 3] = fromSubpathBezier[idx + 1] - fromCp[1];
- }
- newFromSubpathBezier[0] = fromSubpathBezier[offset] - fromCp[0];
- newFromSubpathBezier[1] = fromSubpathBezier[offset + 1] - fromCp[1];
- if (searchAngleIteration > 0) {
- var step = searchAngleRange / searchAngleIteration;
- for (var angle = -searchAngleRange / 2; angle <= searchAngleRange / 2; angle += step) {
- var sa = Math.sin(angle);
- var ca = Math.cos(angle);
- var score = 0;
- for (var k = 0; k < fromSubpathBezier.length; k += 2) {
- var x0 = newFromSubpathBezier[k];
- var y0 = newFromSubpathBezier[k + 1];
- var x1 = toSubpathBezier[k] - toCp[0];
- var y1 = toSubpathBezier[k + 1] - toCp[1];
- var newX1 = x1 * ca - y1 * sa;
- var newY1 = x1 * sa + y1 * ca;
- tmpArr[k] = newX1;
- tmpArr[k + 1] = newY1;
- var dx = newX1 - x0;
- var dy = newY1 - y0;
- score += dx * dx + dy * dy;
- }
- if (score < bestScore) {
- bestScore = score;
- bestAngle = angle;
- for (var m = 0; m < tmpArr.length; m++) {
- newToSubpathBezier[m] = tmpArr[m];
- }
- }
- }
- }
- else {
- for (var i_1 = 0; i_1 < len; i_1 += 2) {
- newToSubpathBezier[i_1] = toSubpathBezier[i_1] - toCp[0];
- newToSubpathBezier[i_1 + 1] = toSubpathBezier[i_1 + 1] - toCp[1];
- }
- }
- result.push({
- from: newFromSubpathBezier,
- to: newToSubpathBezier,
- fromCp: fromCp,
- toCp: toCp,
- rotation: -bestAngle
- });
- }
- return result;
- }
- export function isCombineMorphing(path) {
- return path.__isCombineMorphing;
- }
- export function isMorphing(el) {
- return el.__morphT >= 0;
- }
- var SAVED_METHOD_PREFIX = '__mOriginal_';
- function saveAndModifyMethod(obj, methodName, modifiers) {
- var savedMethodName = SAVED_METHOD_PREFIX + methodName;
- var originalMethod = obj[savedMethodName] || obj[methodName];
- if (!obj[savedMethodName]) {
- obj[savedMethodName] = obj[methodName];
- }
- var replace = modifiers.replace;
- var after = modifiers.after;
- var before = modifiers.before;
- obj[methodName] = function () {
- var args = arguments;
- var res;
- before && before.apply(this, args);
- if (replace) {
- res = replace.apply(this, args);
- }
- else {
- res = originalMethod.apply(this, args);
- }
- after && after.apply(this, args);
- return res;
- };
- }
- function restoreMethod(obj, methodName) {
- var savedMethodName = SAVED_METHOD_PREFIX + methodName;
- if (obj[savedMethodName]) {
- obj[methodName] = obj[savedMethodName];
- obj[savedMethodName] = null;
- }
- }
- function applyTransformOnBeziers(bezierCurves, mm) {
- for (var i = 0; i < bezierCurves.length; i++) {
- var subBeziers = bezierCurves[i];
- for (var k = 0; k < subBeziers.length;) {
- var x = subBeziers[k];
- var y = subBeziers[k + 1];
- subBeziers[k++] = mm[0] * x + mm[2] * y + mm[4];
- subBeziers[k++] = mm[1] * x + mm[3] * y + mm[5];
- }
- }
- }
- function prepareMorphPath(fromPath, toPath) {
- var fromPathProxy = fromPath.getUpdatedPathProxy();
- var toPathProxy = toPath.getUpdatedPathProxy();
- var _a = alignBezierCurves(pathToBezierCurves(fromPathProxy), pathToBezierCurves(toPathProxy)), fromBezierCurves = _a[0], toBezierCurves = _a[1];
- var fromPathTransform = fromPath.getComputedTransform();
- var toPathTransform = toPath.getComputedTransform();
- function updateIdentityTransform() {
- this.transform = null;
- }
- fromPathTransform && applyTransformOnBeziers(fromBezierCurves, fromPathTransform);
- toPathTransform && applyTransformOnBeziers(toBezierCurves, toPathTransform);
- saveAndModifyMethod(toPath, 'updateTransform', { replace: updateIdentityTransform });
- toPath.transform = null;
- var morphingData = findBestMorphingRotation(fromBezierCurves, toBezierCurves, 10, Math.PI);
- var tmpArr = [];
- saveAndModifyMethod(toPath, 'buildPath', { replace: function (path) {
- var t = toPath.__morphT;
- var onet = 1 - t;
- var newCp = [];
- for (var i = 0; i < morphingData.length; i++) {
- var item = morphingData[i];
- var from = item.from;
- var to = item.to;
- var angle = item.rotation * t;
- var fromCp = item.fromCp;
- var toCp = item.toCp;
- var sa = Math.sin(angle);
- var ca = Math.cos(angle);
- lerp(newCp, fromCp, toCp, t);
- for (var m = 0; m < from.length; m += 2) {
- var x0_1 = from[m];
- var y0_1 = from[m + 1];
- var x1 = to[m];
- var y1 = to[m + 1];
- var x = x0_1 * onet + x1 * t;
- var y = y0_1 * onet + y1 * t;
- tmpArr[m] = (x * ca - y * sa) + newCp[0];
- tmpArr[m + 1] = (x * sa + y * ca) + newCp[1];
- }
- var x0 = tmpArr[0];
- var y0 = tmpArr[1];
- path.moveTo(x0, y0);
- for (var m = 2; m < from.length;) {
- var x1 = tmpArr[m++];
- var y1 = tmpArr[m++];
- var x2 = tmpArr[m++];
- var y2 = tmpArr[m++];
- var x3 = tmpArr[m++];
- var y3 = tmpArr[m++];
- if (x0 === x1 && y0 === y1 && x2 === x3 && y2 === y3) {
- path.lineTo(x3, y3);
- }
- else {
- path.bezierCurveTo(x1, y1, x2, y2, x3, y3);
- }
- x0 = x3;
- y0 = y3;
- }
- }
- } });
- }
- export function morphPath(fromPath, toPath, animationOpts) {
- if (!fromPath || !toPath) {
- return toPath;
- }
- var oldDone = animationOpts.done;
- var oldDuring = animationOpts.during;
- prepareMorphPath(fromPath, toPath);
- toPath.__morphT = 0;
- function restoreToPath() {
- restoreMethod(toPath, 'buildPath');
- restoreMethod(toPath, 'updateTransform');
- toPath.__morphT = -1;
- toPath.createPathProxy();
- toPath.dirtyShape();
- }
- toPath.animateTo({
- __morphT: 1
- }, defaults({
- during: function (p) {
- toPath.dirtyShape();
- oldDuring && oldDuring(p);
- },
- done: function () {
- restoreToPath();
- oldDone && oldDone();
- }
- }, animationOpts));
- return toPath;
- }
- function hilbert(x, y, minX, minY, maxX, maxY) {
- var bits = 16;
- x = (maxX === minX) ? 0 : Math.round(32767 * (x - minX) / (maxX - minX));
- y = (maxY === minY) ? 0 : Math.round(32767 * (y - minY) / (maxY - minY));
- var d = 0;
- var tmp;
- for (var s = (1 << bits) / 2; s > 0; s /= 2) {
- var rx = 0;
- var ry = 0;
- if ((x & s) > 0) {
- rx = 1;
- }
- if ((y & s) > 0) {
- ry = 1;
- }
- d += s * s * ((3 * rx) ^ ry);
- if (ry === 0) {
- if (rx === 1) {
- x = s - 1 - x;
- y = s - 1 - y;
- }
- tmp = x;
- x = y;
- y = tmp;
- }
- }
- return d;
- }
- function sortPaths(pathList) {
- var xMin = Infinity;
- var yMin = Infinity;
- var xMax = -Infinity;
- var yMax = -Infinity;
- var cps = map(pathList, function (path) {
- var rect = path.getBoundingRect();
- var m = path.getComputedTransform();
- var x = rect.x + rect.width / 2 + (m ? m[4] : 0);
- var y = rect.y + rect.height / 2 + (m ? m[5] : 0);
- xMin = Math.min(x, xMin);
- yMin = Math.min(y, yMin);
- xMax = Math.max(x, xMax);
- yMax = Math.max(y, yMax);
- return [x, y];
- });
- var items = map(cps, function (cp, idx) {
- return {
- cp: cp,
- z: hilbert(cp[0], cp[1], xMin, yMin, xMax, yMax),
- path: pathList[idx]
- };
- });
- return items.sort(function (a, b) { return a.z - b.z; }).map(function (item) { return item.path; });
- }
- ;
- function defaultDividePath(param) {
- return split(param.path, param.count);
- }
- function createEmptyReturn() {
- return {
- fromIndividuals: [],
- toIndividuals: [],
- count: 0
- };
- }
- export function combineMorph(fromList, toPath, animationOpts) {
- var fromPathList = [];
- function addFromPath(fromList) {
- for (var i = 0; i < fromList.length; i++) {
- var from = fromList[i];
- if (isCombineMorphing(from)) {
- addFromPath(from.childrenRef());
- }
- else if (from instanceof Path) {
- fromPathList.push(from);
- }
- }
- }
- addFromPath(fromList);
- var separateCount = fromPathList.length;
- if (!separateCount) {
- return createEmptyReturn();
- }
- var dividePath = animationOpts.dividePath || defaultDividePath;
- var toSubPathList = dividePath({
- path: toPath, count: separateCount
- });
- if (toSubPathList.length !== separateCount) {
- console.error('Invalid morphing: unmatched splitted path');
- return createEmptyReturn();
- }
- fromPathList = sortPaths(fromPathList);
- toSubPathList = sortPaths(toSubPathList);
- var oldDone = animationOpts.done;
- var oldDuring = animationOpts.during;
- var individualDelay = animationOpts.individualDelay;
- var identityTransform = new Transformable();
- for (var i = 0; i < separateCount; i++) {
- var from = fromPathList[i];
- var to = toSubPathList[i];
- to.parent = toPath;
- to.copyTransform(identityTransform);
- if (!individualDelay) {
- prepareMorphPath(from, to);
- }
- }
- toPath.__isCombineMorphing = true;
- toPath.childrenRef = function () {
- return toSubPathList;
- };
- function addToSubPathListToZr(zr) {
- for (var i = 0; i < toSubPathList.length; i++) {
- toSubPathList[i].addSelfToZr(zr);
- }
- }
- saveAndModifyMethod(toPath, 'addSelfToZr', {
- after: function (zr) {
- addToSubPathListToZr(zr);
- }
- });
- saveAndModifyMethod(toPath, 'removeSelfFromZr', {
- after: function (zr) {
- for (var i = 0; i < toSubPathList.length; i++) {
- toSubPathList[i].removeSelfFromZr(zr);
- }
- }
- });
- function restoreToPath() {
- toPath.__isCombineMorphing = false;
- toPath.__morphT = -1;
- toPath.childrenRef = null;
- restoreMethod(toPath, 'addSelfToZr');
- restoreMethod(toPath, 'removeSelfFromZr');
- }
- var toLen = toSubPathList.length;
- if (individualDelay) {
- var animating_1 = toLen;
- var eachDone = function () {
- animating_1--;
- if (animating_1 === 0) {
- restoreToPath();
- oldDone && oldDone();
- }
- };
- for (var i = 0; i < toLen; i++) {
- var indivdualAnimationOpts = individualDelay ? defaults({
- delay: (animationOpts.delay || 0) + individualDelay(i, toLen, fromPathList[i], toSubPathList[i]),
- done: eachDone
- }, animationOpts) : animationOpts;
- morphPath(fromPathList[i], toSubPathList[i], indivdualAnimationOpts);
- }
- }
- else {
- toPath.__morphT = 0;
- toPath.animateTo({
- __morphT: 1
- }, defaults({
- during: function (p) {
- for (var i = 0; i < toLen; i++) {
- var child = toSubPathList[i];
- child.__morphT = toPath.__morphT;
- child.dirtyShape();
- }
- oldDuring && oldDuring(p);
- },
- done: function () {
- restoreToPath();
- for (var i = 0; i < fromList.length; i++) {
- restoreMethod(fromList[i], 'updateTransform');
- }
- oldDone && oldDone();
- }
- }, animationOpts));
- }
- if (toPath.__zr) {
- addToSubPathListToZr(toPath.__zr);
- }
- return {
- fromIndividuals: fromPathList,
- toIndividuals: toSubPathList,
- count: toLen
- };
- }
- export function separateMorph(fromPath, toPathList, animationOpts) {
- var toLen = toPathList.length;
- var fromPathList = [];
- var dividePath = animationOpts.dividePath || defaultDividePath;
- function addFromPath(fromList) {
- for (var i = 0; i < fromList.length; i++) {
- var from = fromList[i];
- if (isCombineMorphing(from)) {
- addFromPath(from.childrenRef());
- }
- else if (from instanceof Path) {
- fromPathList.push(from);
- }
- }
- }
- if (isCombineMorphing(fromPath)) {
- addFromPath(fromPath.childrenRef());
- var fromLen = fromPathList.length;
- if (fromLen < toLen) {
- var k = 0;
- for (var i = fromLen; i < toLen; i++) {
- fromPathList.push(clonePath(fromPathList[k++ % fromLen]));
- }
- }
- fromPathList.length = toLen;
- }
- else {
- fromPathList = dividePath({ path: fromPath, count: toLen });
- var fromPathTransform = fromPath.getComputedTransform();
- for (var i = 0; i < fromPathList.length; i++) {
- fromPathList[i].setLocalTransform(fromPathTransform);
- }
- if (fromPathList.length !== toLen) {
- console.error('Invalid morphing: unmatched splitted path');
- return createEmptyReturn();
- }
- }
- fromPathList = sortPaths(fromPathList);
- toPathList = sortPaths(toPathList);
- var individualDelay = animationOpts.individualDelay;
- for (var i = 0; i < toLen; i++) {
- var indivdualAnimationOpts = individualDelay ? defaults({
- delay: (animationOpts.delay || 0) + individualDelay(i, toLen, fromPathList[i], toPathList[i])
- }, animationOpts) : animationOpts;
- morphPath(fromPathList[i], toPathList[i], indivdualAnimationOpts);
- }
- return {
- fromIndividuals: fromPathList,
- toIndividuals: toPathList,
- count: toPathList.length
- };
- }
- export { split as defaultDividePath };
|