@code-hike/smooth-lines - npm Package Compare versions

Comparing version 0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0 to 0.3.0--canary.45.6c84da7.0

dist/index.cjs.js

@@ -178,84 +178,127 @@ 'use strict';
 
+function Lines(_a) {
+    var lines = _a.lines, prevFocusKeys = _a.prevFocusKeys, nextFocusKeys = _a.nextFocusKeys, focusWidth = _a.focusWidth, lineHeight = _a.lineHeight, progress = _a.progress;
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, lines.map(function (_a) {
+        var element = _a.element, key = _a.key, tweenX = _a.tweenX, tweenY = _a.tweenY, elementWithProgress = _a.elementWithProgress;
+        var dx = tween(tweenX, progress);
+        var dy = tween(tweenY, progress);
+        var opacity = getOpacity(prevFocusKeys, key, nextFocusKeys, progress, dx);
+        return (React__default['default'].createElement(LineContainer, { key: key, dx: dx * focusWidth, dy: dy * lineHeight, opacity: opacity, width: focusWidth }, elementWithProgress
+            ? elementWithProgress(progress)
+            : element));
+    })));
+}
+function LineContainer(_a) {
+    var children = _a.children, dx = _a.dx, dy = _a.dy, opacity = _a.opacity, width = _a.width;
+    return (React__default['default'].createElement("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            transform: "translate(" + dx + "px, " + dy + "px)",
+            opacity: opacity,
+            width: width,
+        } }, children));
+}
 var OFF_OPACITY = 0.33;
+function getOpacity(prevFocusKeys, key, nextFocusKeys, progress, dx) {
+    return (tween({
+        fixed: false,
+        extremes: [
+            prevFocusKeys.includes(key) ? 0.99 : OFF_OPACITY,
+            nextFocusKeys.includes(key) ? 0.99 : OFF_OPACITY,
+        ],
+        interval: [0, 1],
+    }, progress) -
+        Math.abs(dx) * 1);
+}
+
 function SmoothLines(_a) {
-    var progress = _a.progress, containerHeight = _a.containerHeight, containerWidth = _a.containerWidth, lineHeight = _a.lineHeight, lineWidth = _a.lineWidth, _b = _a.prevLines, prevLines = _b === void 0 ? [] : _b, _c = _a.nextLines, nextLines = _c === void 0 ? [] : _c, prevFocus = _a.prevFocus, nextFocus = _a.nextFocus, center = _a.center, _d = _a.maxZoom, maxZoom = _d === void 0 ? 1.2 : _d;
+    var progress = _a.progress, containerHeight = _a.containerHeight, containerWidth = _a.containerWidth, lineHeight = _a.lineHeight, lineWidth = _a.lineWidth, _b = _a.prevLines, prevLines = _b === void 0 ? [] : _b, _c = _a.nextLines, nextLines = _c === void 0 ? [] : _c, prevFocus = _a.prevFocus, nextFocus = _a.nextFocus, center = _a.center; _a.minZoom; var _e = _a.maxZoom, // TODO use minZoom
+    maxZoom = _e === void 0 ? 1.2 : _e;
     var lines = useLineTransitions(prevLines, nextLines);
-    var prevExtremes = [
-        Math.min.apply(Math, __spread(prevFocus)),
-        Math.max.apply(Math, __spread(prevFocus)),
-    ];
-    var nextExtremes = [
-        Math.min.apply(Math, __spread(nextFocus)),
-        Math.max.apply(Math, __spread(nextFocus)),
-    ];
-    var prevCenter = (prevExtremes[0] + prevExtremes[1] + 1) / 2;
-    var nextCenter = (nextExtremes[0] + nextExtremes[1] + 1) / 2;
-    var yCenter = tween({
-        fixed: false,
-        // TODO use verticalInterval
-        interval: [0, 1],
-        extremes: [prevCenter, nextCenter],
-        ease: easing.easeInOutCubic,
-    }, progress) * lineHeight;
-    var prevFocusHeight = (prevExtremes[1] - prevExtremes[0] + 3) * lineHeight;
-    var nextFocusHeight = (nextExtremes[1] - nextExtremes[0] + 3) * lineHeight;
-    var focusHeight = tween({
-        fixed: false,
-        interval: [0, 1],
-        extremes: [prevFocusHeight, nextFocusHeight],
-    }, progress);
-    var lw = Array.isArray(lineWidth)
-        ? tween({
-            fixed: false,
-            interval: [0, 1],
-            extremes: lineWidth,
-        }, progress)
+    var focusWidth = Array.isArray(lineWidth)
+        ? tweenProp(lineWidth[0], lineWidth[1], progress)
         : lineWidth;
-    var zoom = Math.min(containerWidth / lw, containerHeight / focusHeight, maxZoom);
-    var left = center
-        ? containerWidth / 2 - (lw * zoom) / 2
-        : 0;
     var prevFocusKeys = prevFocus.map(function (index) { var _a; return (_a = prevLines[index]) === null || _a === void 0 ? void 0 : _a.key; });
     var nextFocusKeys = nextFocus.map(function (index) { var _a; return (_a = nextLines[index]) === null || _a === void 0 ? void 0 : _a.key; });
+    var _f = __read(getContentProps({
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        lineWidth: Array.isArray(lineWidth)
+            ? lineWidth[0]
+            : lineWidth,
+        lineHeight: lineHeight,
+        maxZoom: maxZoom,
+        horizontalCenter: !!center,
+        focusLineIndexList: prevFocus,
+        originalContentHeight: prevLines.length * lineHeight,
+    }), 3), prevZoom = _f[0], prevDX = _f[1], prevDY = _f[2];
+    var _g = __read(getContentProps({
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        lineWidth: Array.isArray(lineWidth)
+            ? lineWidth[1]
+            : lineWidth,
+        lineHeight: lineHeight,
+        maxZoom: maxZoom,
+        horizontalCenter: !!center,
+        focusLineIndexList: nextFocus,
+        originalContentHeight: nextLines.length * lineHeight,
+    }), 3), nextZoom = _g[0], nextDX = _g[1], nextDY = _g[2];
+    var zoom = tweenProp(prevZoom, nextZoom, progress);
+    var dx = tweenProp(prevDX, nextDX, progress);
+    var dy = tweenProp(prevDY, nextDY, progress);
+    return (React__default['default'].createElement(Container, { width: containerWidth, height: containerHeight },
+        React__default['default'].createElement(Content, { dx: dx, dy: dy, scale: zoom },
+            React__default['default'].createElement(Lines, { lines: lines, prevFocusKeys: prevFocusKeys, nextFocusKeys: nextFocusKeys, focusWidth: focusWidth, lineHeight: lineHeight, progress: progress }))));
+}
+function getContentProps(_a) {
+    var containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, lineWidth = _a.lineWidth, lineHeight = _a.lineHeight, maxZoom = _a.maxZoom, focusLineIndexList = _a.focusLineIndexList, originalContentHeight = _a.originalContentHeight, horizontalCenter = _a.horizontalCenter;
+    var extremes = [
+        Math.min.apply(Math, __spread(focusLineIndexList)),
+        Math.max.apply(Math, __spread(focusLineIndexList)),
+    ];
+    var originalFocusHeight = (extremes[1] - extremes[0] + 3) * lineHeight;
+    var zoom = Math.min(containerWidth / lineWidth, containerHeight / originalFocusHeight, maxZoom);
+    var contentHeight = originalContentHeight * zoom;
+    var focusStart = (extremes[0] - 1) * lineHeight * zoom;
+    var focusEnd = (extremes[1] + 2) * lineHeight * zoom;
+    var focusCenter = (focusEnd + focusStart) / 2;
+    var dy = containerHeight > contentHeight
+        ? (containerHeight - contentHeight) / 2
+        : clamp(containerHeight / 2 - focusCenter, containerHeight - contentHeight, 0);
+    var dx = horizontalCenter
+        ? containerWidth / 2 - (lineWidth * zoom) / 2
+        : 0;
+    return [zoom, dx, dy];
+}
+function Container(_a) {
+    var width = _a.width, height = _a.height, children = _a.children;
     return (React__default['default'].createElement("div", { style: {
-            width: containerWidth,
-            height: containerHeight,
-            // background: "salmon",
+            width: width,
+            height: height,
             position: "relative",
-        } },
-        React__default['default'].createElement("div", { style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                transform: "translateY(" + (containerHeight / 2 - yCenter * zoom) + "px) translateX(" + left + "px) scale(" + zoom + ")",
-            } }, lines.map(function (_a) {
-            var element = _a.element, key = _a.key, tweenX = _a.tweenX, tweenY = _a.tweenY, elementWithProgress = _a.elementWithProgress;
-            var dx = tween(tweenX, progress);
-            var dy = tween(tweenY, progress);
-            var opacity = tween({
-                fixed: false,
-                extremes: [
-                    prevFocusKeys.includes(key)
-                        ? 0.99
-                        : OFF_OPACITY,
-                    nextFocusKeys.includes(key)
-                        ? 0.99
-                        : OFF_OPACITY,
-                ],
-                interval: [0, 1],
-            }, progress) -
-                Math.abs(dx) * 1;
-            return (React__default['default'].createElement("div", { key: key, style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    transform: "translate(" + dx * lw + "px, " + dy * lineHeight + "px)",
-                    opacity: opacity,
-                    width: lw,
-                } }, elementWithProgress
-                ? elementWithProgress(progress)
-                : element));
-        }))));
+        } }, children));
 }
+function Content(_a) {
+    var dx = _a.dx, dy = _a.dy, scale = _a.scale, children = _a.children;
+    return (React__default['default'].createElement("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            transform: "translateX(" + dx + "px) translateY(" + dy + "px) scale(" + scale + ")",
+        } }, children));
+}
+function tweenProp(start, end, progress) {
+    return tween({
+        fixed: false,
+        interval: [0, 1],
+        extremes: [start, end],
+        ease: easing.easeInOutCubic,
+    }, progress);
+}
+function clamp(num, min, max) {
+    return num <= min ? min : num >= max ? max : num;
+}
 
 exports.SmoothLines = SmoothLines;

dist/index.d.ts

@@ -16,4 +16,6 @@ /// <reference types="react" />
     center?: boolean;
+    minZoom?: number;
     maxZoom?: number;
 };
-declare function SmoothLines({ progress, containerHeight, containerWidth, lineHeight, lineWidth, prevLines, nextLines, prevFocus, nextFocus, center, maxZoom, }: Props): JSX.Element;
+declare function SmoothLines({ progress, containerHeight, containerWidth, lineHeight, lineWidth, prevLines, nextLines, prevFocus, nextFocus, center, minZoom, // TODO use minZoom
+maxZoom, }: Props): JSX.Element;

dist/index.esm.js

@@ -170,84 +170,127 @@ import React, { useMemo } from 'react';
 
+function Lines(_a) {
+    var lines = _a.lines, prevFocusKeys = _a.prevFocusKeys, nextFocusKeys = _a.nextFocusKeys, focusWidth = _a.focusWidth, lineHeight = _a.lineHeight, progress = _a.progress;
+    return (React.createElement(React.Fragment, null, lines.map(function (_a) {
+        var element = _a.element, key = _a.key, tweenX = _a.tweenX, tweenY = _a.tweenY, elementWithProgress = _a.elementWithProgress;
+        var dx = tween(tweenX, progress);
+        var dy = tween(tweenY, progress);
+        var opacity = getOpacity(prevFocusKeys, key, nextFocusKeys, progress, dx);
+        return (React.createElement(LineContainer, { key: key, dx: dx * focusWidth, dy: dy * lineHeight, opacity: opacity, width: focusWidth }, elementWithProgress
+            ? elementWithProgress(progress)
+            : element));
+    })));
+}
+function LineContainer(_a) {
+    var children = _a.children, dx = _a.dx, dy = _a.dy, opacity = _a.opacity, width = _a.width;
+    return (React.createElement("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            transform: "translate(" + dx + "px, " + dy + "px)",
+            opacity: opacity,
+            width: width,
+        } }, children));
+}
 var OFF_OPACITY = 0.33;
+function getOpacity(prevFocusKeys, key, nextFocusKeys, progress, dx) {
+    return (tween({
+        fixed: false,
+        extremes: [
+            prevFocusKeys.includes(key) ? 0.99 : OFF_OPACITY,
+            nextFocusKeys.includes(key) ? 0.99 : OFF_OPACITY,
+        ],
+        interval: [0, 1],
+    }, progress) -
+        Math.abs(dx) * 1);
+}
+
 function SmoothLines(_a) {
-    var progress = _a.progress, containerHeight = _a.containerHeight, containerWidth = _a.containerWidth, lineHeight = _a.lineHeight, lineWidth = _a.lineWidth, _b = _a.prevLines, prevLines = _b === void 0 ? [] : _b, _c = _a.nextLines, nextLines = _c === void 0 ? [] : _c, prevFocus = _a.prevFocus, nextFocus = _a.nextFocus, center = _a.center, _d = _a.maxZoom, maxZoom = _d === void 0 ? 1.2 : _d;
+    var progress = _a.progress, containerHeight = _a.containerHeight, containerWidth = _a.containerWidth, lineHeight = _a.lineHeight, lineWidth = _a.lineWidth, _b = _a.prevLines, prevLines = _b === void 0 ? [] : _b, _c = _a.nextLines, nextLines = _c === void 0 ? [] : _c, prevFocus = _a.prevFocus, nextFocus = _a.nextFocus, center = _a.center; _a.minZoom; var _e = _a.maxZoom, // TODO use minZoom
+    maxZoom = _e === void 0 ? 1.2 : _e;
     var lines = useLineTransitions(prevLines, nextLines);
-    var prevExtremes = [
-        Math.min.apply(Math, __spread(prevFocus)),
-        Math.max.apply(Math, __spread(prevFocus)),
-    ];
-    var nextExtremes = [
-        Math.min.apply(Math, __spread(nextFocus)),
-        Math.max.apply(Math, __spread(nextFocus)),
-    ];
-    var prevCenter = (prevExtremes[0] + prevExtremes[1] + 1) / 2;
-    var nextCenter = (nextExtremes[0] + nextExtremes[1] + 1) / 2;
-    var yCenter = tween({
-        fixed: false,
-        // TODO use verticalInterval
-        interval: [0, 1],
-        extremes: [prevCenter, nextCenter],
-        ease: easing.easeInOutCubic,
-    }, progress) * lineHeight;
-    var prevFocusHeight = (prevExtremes[1] - prevExtremes[0] + 3) * lineHeight;
-    var nextFocusHeight = (nextExtremes[1] - nextExtremes[0] + 3) * lineHeight;
-    var focusHeight = tween({
-        fixed: false,
-        interval: [0, 1],
-        extremes: [prevFocusHeight, nextFocusHeight],
-    }, progress);
-    var lw = Array.isArray(lineWidth)
-        ? tween({
-            fixed: false,
-            interval: [0, 1],
-            extremes: lineWidth,
-        }, progress)
+    var focusWidth = Array.isArray(lineWidth)
+        ? tweenProp(lineWidth[0], lineWidth[1], progress)
         : lineWidth;
-    var zoom = Math.min(containerWidth / lw, containerHeight / focusHeight, maxZoom);
-    var left = center
-        ? containerWidth / 2 - (lw * zoom) / 2
-        : 0;
     var prevFocusKeys = prevFocus.map(function (index) { var _a; return (_a = prevLines[index]) === null || _a === void 0 ? void 0 : _a.key; });
     var nextFocusKeys = nextFocus.map(function (index) { var _a; return (_a = nextLines[index]) === null || _a === void 0 ? void 0 : _a.key; });
+    var _f = __read(getContentProps({
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        lineWidth: Array.isArray(lineWidth)
+            ? lineWidth[0]
+            : lineWidth,
+        lineHeight: lineHeight,
+        maxZoom: maxZoom,
+        horizontalCenter: !!center,
+        focusLineIndexList: prevFocus,
+        originalContentHeight: prevLines.length * lineHeight,
+    }), 3), prevZoom = _f[0], prevDX = _f[1], prevDY = _f[2];
+    var _g = __read(getContentProps({
+        containerWidth: containerWidth,
+        containerHeight: containerHeight,
+        lineWidth: Array.isArray(lineWidth)
+            ? lineWidth[1]
+            : lineWidth,
+        lineHeight: lineHeight,
+        maxZoom: maxZoom,
+        horizontalCenter: !!center,
+        focusLineIndexList: nextFocus,
+        originalContentHeight: nextLines.length * lineHeight,
+    }), 3), nextZoom = _g[0], nextDX = _g[1], nextDY = _g[2];
+    var zoom = tweenProp(prevZoom, nextZoom, progress);
+    var dx = tweenProp(prevDX, nextDX, progress);
+    var dy = tweenProp(prevDY, nextDY, progress);
+    return (React.createElement(Container, { width: containerWidth, height: containerHeight },
+        React.createElement(Content, { dx: dx, dy: dy, scale: zoom },
+            React.createElement(Lines, { lines: lines, prevFocusKeys: prevFocusKeys, nextFocusKeys: nextFocusKeys, focusWidth: focusWidth, lineHeight: lineHeight, progress: progress }))));
+}
+function getContentProps(_a) {
+    var containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, lineWidth = _a.lineWidth, lineHeight = _a.lineHeight, maxZoom = _a.maxZoom, focusLineIndexList = _a.focusLineIndexList, originalContentHeight = _a.originalContentHeight, horizontalCenter = _a.horizontalCenter;
+    var extremes = [
+        Math.min.apply(Math, __spread(focusLineIndexList)),
+        Math.max.apply(Math, __spread(focusLineIndexList)),
+    ];
+    var originalFocusHeight = (extremes[1] - extremes[0] + 3) * lineHeight;
+    var zoom = Math.min(containerWidth / lineWidth, containerHeight / originalFocusHeight, maxZoom);
+    var contentHeight = originalContentHeight * zoom;
+    var focusStart = (extremes[0] - 1) * lineHeight * zoom;
+    var focusEnd = (extremes[1] + 2) * lineHeight * zoom;
+    var focusCenter = (focusEnd + focusStart) / 2;
+    var dy = containerHeight > contentHeight
+        ? (containerHeight - contentHeight) / 2
+        : clamp(containerHeight / 2 - focusCenter, containerHeight - contentHeight, 0);
+    var dx = horizontalCenter
+        ? containerWidth / 2 - (lineWidth * zoom) / 2
+        : 0;
+    return [zoom, dx, dy];
+}
+function Container(_a) {
+    var width = _a.width, height = _a.height, children = _a.children;
     return (React.createElement("div", { style: {
-            width: containerWidth,
-            height: containerHeight,
-            // background: "salmon",
+            width: width,
+            height: height,
             position: "relative",
-        } },
-        React.createElement("div", { style: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                transform: "translateY(" + (containerHeight / 2 - yCenter * zoom) + "px) translateX(" + left + "px) scale(" + zoom + ")",
-            } }, lines.map(function (_a) {
-            var element = _a.element, key = _a.key, tweenX = _a.tweenX, tweenY = _a.tweenY, elementWithProgress = _a.elementWithProgress;
-            var dx = tween(tweenX, progress);
-            var dy = tween(tweenY, progress);
-            var opacity = tween({
-                fixed: false,
-                extremes: [
-                    prevFocusKeys.includes(key)
-                        ? 0.99
-                        : OFF_OPACITY,
-                    nextFocusKeys.includes(key)
-                        ? 0.99
-                        : OFF_OPACITY,
-                ],
-                interval: [0, 1],
-            }, progress) -
-                Math.abs(dx) * 1;
-            return (React.createElement("div", { key: key, style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    transform: "translate(" + dx * lw + "px, " + dy * lineHeight + "px)",
-                    opacity: opacity,
-                    width: lw,
-                } }, elementWithProgress
-                ? elementWithProgress(progress)
-                : element));
-        }))));
+        } }, children));
 }
+function Content(_a) {
+    var dx = _a.dx, dy = _a.dy, scale = _a.scale, children = _a.children;
+    return (React.createElement("div", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            transform: "translateX(" + dx + "px) translateY(" + dy + "px) scale(" + scale + ")",
+        } }, children));
+}
+function tweenProp(start, end, progress) {
+    return tween({
+        fixed: false,
+        interval: [0, 1],
+        extremes: [start, end],
+        ease: easing.easeInOutCubic,
+    }, progress);
+}
+function clamp(num, min, max) {
+    return num <= min ? min : num >= max ? max : num;
+}
 
 export { SmoothLines };

dist/line-transitions.d.ts

@@ -10,3 +10,3 @@ /// <reference types="react" />
 };
-declare type LineTransition = {
+export declare type LineTransition = {
     element: React.ReactNode;
@@ -13,0 +13,0 @@ elementWithProgress?: (progress: number) => Element;

package.json

 {
   "name": "@code-hike/smooth-lines",
-  "version": "0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0",
-  "main": "dist/index.js",
+  "version": "0.3.0--canary.45.6c84da7.0",
+  "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -11,7 +11,6 @@ "module": "dist/index.esm.js",
   "scripts": {
-    "x": "x",
-    "publish-canary": "yarn publish --tag canary --access public"
+    "x": "x"
   },
   "devDependencies": {
-    "@code-hike/script": "0.3.0--canary.38.269a97e9d5ac21fec0f226bdfeddd37c99664e33.0",
+    "@code-hike/script": "0.3.0--canary.45.6c84da7.0",
     "@types/react": "^16.9.38",
@@ -34,3 +33,3 @@ "react": "^16.13.1"
   },
-  "gitHead": "269a97e9d5ac21fec0f226bdfeddd37c99664e33"
+  "gitHead": "6c84da7eb4b19bd4b845af42523b406ba918ff0b"
 }

No alert changes

Worsened metrics

Total package byte prevSize

29689

decreased by-18.42%

Lines of code

646

decreased by-19.15%

No dependency changes