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 };