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

Comparing version 0.3.0--canary.75.b3e0bf9.0 to 0.3.0--canary.77.87864a9.0

dist/index.cjs.js

@@ -26,2 +26,25 @@ 'use strict';
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __read(o, n) {
@@ -133,2 +156,4 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
             key: key,
+            prevIndex: prevIndex,
+            nextIndex: nextIndex,
             tweenY: { fixed: true, value: nextIndex },
@@ -149,2 +174,4 @@ tweenX: {
             key: key,
+            prevIndex: prevIndex,
+            nextIndex: nextIndex,
             tweenY: { fixed: true, value: prevIndex },
@@ -163,2 +190,4 @@ tweenX: {
         key: key,
+        prevIndex: prevIndex,
+        nextIndex: nextIndex,
         tweenY: {
@@ -187,13 +216,82 @@ fixed: false,
 function Lines(_a) {
-    var lines = _a.lines, prevFocusKeys = _a.prevFocusKeys, nextFocusKeys = _a.nextFocusKeys, focusWidth = _a.focusWidth, lineHeight = _a.lineHeight, progress = _a.progress;
+    var lines = _a.lines, progress = _a.progress, annotations = _a.annotations, rest = __rest(_a, ["lines", "progress", "annotations"]);
+    var start = annotations.prev.length ? 0.1 : 0;
+    var end = annotations.next.length ? 0.9 : 1;
+    var t = tween({
+        extremes: [0, 1],
+        interval: [start, end],
+        fixed: false,
+    }, progress);
+    if (annotations.prev.length && progress < 0.1) {
+        return (React__default['default'].createElement(WithAnnotations, __assign({ lines: lines, annotations: annotations.prev, t: 0 }, rest)));
+    }
+    if (annotations.next.length && progress > 0.9) {
+        return (React__default['default'].createElement(WithAnnotations, __assign({ lines: lines, annotations: annotations.next, t: 1 }, rest)));
+    }
+    return React__default['default'].createElement(LineGroup, __assign({ lines: lines }, rest, { t: t }));
+}
+function LineGroup(_a) {
+    var lines = _a.lines, prevFocusKeys = _a.prevFocusKeys, nextFocusKeys = _a.nextFocusKeys, focusWidth = _a.focusWidth, lineHeight = _a.lineHeight, t = _a.t, _b = _a.startY, startY = _b === void 0 ? 0 : _b;
     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)
+        var dx = tween(tweenX, t);
+        var dy = tween(tweenY, t);
+        var opacity = getOpacity(prevFocusKeys, key, nextFocusKeys, t, dx);
+        return (React__default['default'].createElement(LineContainer, { key: key, dx: dx * focusWidth, dy: (dy - startY) * lineHeight, opacity: opacity, width: focusWidth }, elementWithProgress
+            ? elementWithProgress(t)
             : element));
     })));
 }
+function groupLines(lines, annotations, prev) {
+    var getIndex = function (x) {
+        return prev ? x.prevIndex : x.nextIndex;
+    };
+    var currentLines = lines.filter(function (l) { return getIndex(l) != null; });
+    var index = 0;
+    var groups = [];
+    var _loop_1 = function () {
+        var group = {
+            lines: [],
+            annotation: annotations.find(function (a) { return a.startIndex === index; }),
+        };
+        groups.push(group);
+        var groupEndingCondition = function (i) {
+            return group.annotation
+                ? i > group.annotation.endIndex ||
+                    i >= currentLines.length
+                : annotations.some(function (a) { return a.startIndex === i; }) ||
+                    i >= currentLines.length;
+        };
+        while (!groupEndingCondition(index)) {
+            group.lines.push(currentLines.find(function (l) { return getIndex(l) === index; }));
+            index++;
+        }
+    };
+    while (index < currentLines.length) {
+        _loop_1();
+    }
+    return groups;
+}
+function WithAnnotations(_a) {
+    var lines = _a.lines, annotations = _a.annotations, t = _a.t, rest = __rest(_a, ["lines", "annotations", "t"]);
+    var groups = groupLines(lines, annotations, t === 0);
+    return (React__default['default'].createElement(React__default['default'].Fragment, null, groups.map(function (group) {
+        var annotation = group.annotation;
+        if (!annotation) {
+            return (React__default['default'].createElement(LineGroup, __assign({ lines: group.lines }, rest, { t: t })));
+        }
+        var lineCount = annotation.endIndex - annotation.startIndex + 1;
+        var lineHeight = rest.lineHeight;
+        var startY = tween(group.lines[0].tweenY, t);
+        var Component = annotation.Component;
+        return (React__default['default'].createElement(Component, { style: {
+                position: "absolute",
+                background: "#ff555588",
+                height: lineCount * lineHeight,
+                width: "100%",
+                transform: "translateY(" + startY * lineHeight + "px)",
+            } },
+            React__default['default'].createElement(LineGroup, __assign({ lines: group.lines }, rest, { t: t, startY: startY }))));
+    })));
+}
 function LineContainer(_a) {
@@ -225,3 +323,3 @@ var children = _a.children, dx = _a.dx, dy = _a.dy, opacity = _a.opacity, width = _a.width;
 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.minZoom, minZoom = _d === void 0 ? 0 : _d, _e = _a.maxZoom, maxZoom = _e === void 0 ? 1.2 : _e;
+    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.minZoom, minZoom = _d === void 0 ? 0 : _d, _e = _a.maxZoom, maxZoom = _e === void 0 ? 1.2 : _e, annotations = _a.annotations;
     var _f = useLineTransitions(prevLines, nextLines), lines = _f.lines, verticalInterval = _f.verticalInterval;
@@ -256,2 +354,3 @@ var prevFocusKeys = prevFocus.map(function (index) { var _a; return (_a = prevLines[index]) === null || _a === void 0 ? void 0 : _a.key; });
     }), 5), nextZoom = _h[0], nextDX = _h[1], nextDY = _h[2], nextContentHeight = _h[3], nextContentWidth = _h[4];
+    // all these tweens depends on annotations now (t instead of progress)
     var zoom = tweenProp(prevZoom, nextZoom, progress);
@@ -264,3 +363,3 @@ var dx = tweenProp(prevDX, nextDX, progress);
         React__default['default'].createElement(Content, { dx: dx, dy: dy, scale: zoom, height: Math.max(focusHeight, containerHeight), width: Math.max(focusWidth, containerWidth) },
-            React__default['default'].createElement(Lines, { lines: lines, prevFocusKeys: prevFocusKeys, nextFocusKeys: nextFocusKeys, focusWidth: focusWidth, lineHeight: lineHeight, progress: progress }))));
+            React__default['default'].createElement(Lines, { lines: lines, prevFocusKeys: prevFocusKeys, nextFocusKeys: nextFocusKeys, focusWidth: focusWidth, lineHeight: lineHeight, progress: progress, annotations: annotations }))));
 }
@@ -320,2 +419,3 @@ function getContentProps(_a) {
                 transformOrigin: "top left",
+                width: "100%",
             } }, children)));
@@ -322,0 +422,0 @@ }

dist/index.d.ts

 /// <reference types="react" />
 import { Line } from "./line-transitions";
-export { SmoothLines };
+import { LinesAnnotation } from "./lines";
+import { FullTween } from "@code-hike/utils";
+export { SmoothLines, LinesAnnotation };
 declare type Props = {
@@ -18,3 +20,4 @@ progress: number;
     maxZoom?: number;
+    annotations: FullTween<LinesAnnotation[]>;
 };
-declare function SmoothLines({ progress, containerHeight, containerWidth, lineHeight, lineWidth, prevLines, nextLines, prevFocus, nextFocus, center, minZoom, maxZoom, }: Props): JSX.Element;
+declare function SmoothLines({ progress, containerHeight, containerWidth, lineHeight, lineWidth, prevLines, nextLines, prevFocus, nextFocus, center, minZoom, maxZoom, annotations, }: Props): JSX.Element;

dist/index.esm.js

@@ -18,2 +18,25 @@ import React, { useMemo } from 'react';
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 function __read(o, n) {
@@ -125,2 +148,4 @@ var m = typeof Symbol === "function" && o[Symbol.iterator];
             key: key,
+            prevIndex: prevIndex,
+            nextIndex: nextIndex,
             tweenY: { fixed: true, value: nextIndex },
@@ -141,2 +166,4 @@ tweenX: {
             key: key,
+            prevIndex: prevIndex,
+            nextIndex: nextIndex,
             tweenY: { fixed: true, value: prevIndex },
@@ -155,2 +182,4 @@ tweenX: {
         key: key,
+        prevIndex: prevIndex,
+        nextIndex: nextIndex,
         tweenY: {
@@ -179,13 +208,82 @@ fixed: false,
 function Lines(_a) {
-    var lines = _a.lines, prevFocusKeys = _a.prevFocusKeys, nextFocusKeys = _a.nextFocusKeys, focusWidth = _a.focusWidth, lineHeight = _a.lineHeight, progress = _a.progress;
+    var lines = _a.lines, progress = _a.progress, annotations = _a.annotations, rest = __rest(_a, ["lines", "progress", "annotations"]);
+    var start = annotations.prev.length ? 0.1 : 0;
+    var end = annotations.next.length ? 0.9 : 1;
+    var t = tween({
+        extremes: [0, 1],
+        interval: [start, end],
+        fixed: false,
+    }, progress);
+    if (annotations.prev.length && progress < 0.1) {
+        return (React.createElement(WithAnnotations, __assign({ lines: lines, annotations: annotations.prev, t: 0 }, rest)));
+    }
+    if (annotations.next.length && progress > 0.9) {
+        return (React.createElement(WithAnnotations, __assign({ lines: lines, annotations: annotations.next, t: 1 }, rest)));
+    }
+    return React.createElement(LineGroup, __assign({ lines: lines }, rest, { t: t }));
+}
+function LineGroup(_a) {
+    var lines = _a.lines, prevFocusKeys = _a.prevFocusKeys, nextFocusKeys = _a.nextFocusKeys, focusWidth = _a.focusWidth, lineHeight = _a.lineHeight, t = _a.t, _b = _a.startY, startY = _b === void 0 ? 0 : _b;
     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)
+        var dx = tween(tweenX, t);
+        var dy = tween(tweenY, t);
+        var opacity = getOpacity(prevFocusKeys, key, nextFocusKeys, t, dx);
+        return (React.createElement(LineContainer, { key: key, dx: dx * focusWidth, dy: (dy - startY) * lineHeight, opacity: opacity, width: focusWidth }, elementWithProgress
+            ? elementWithProgress(t)
             : element));
     })));
 }
+function groupLines(lines, annotations, prev) {
+    var getIndex = function (x) {
+        return prev ? x.prevIndex : x.nextIndex;
+    };
+    var currentLines = lines.filter(function (l) { return getIndex(l) != null; });
+    var index = 0;
+    var groups = [];
+    var _loop_1 = function () {
+        var group = {
+            lines: [],
+            annotation: annotations.find(function (a) { return a.startIndex === index; }),
+        };
+        groups.push(group);
+        var groupEndingCondition = function (i) {
+            return group.annotation
+                ? i > group.annotation.endIndex ||
+                    i >= currentLines.length
+                : annotations.some(function (a) { return a.startIndex === i; }) ||
+                    i >= currentLines.length;
+        };
+        while (!groupEndingCondition(index)) {
+            group.lines.push(currentLines.find(function (l) { return getIndex(l) === index; }));
+            index++;
+        }
+    };
+    while (index < currentLines.length) {
+        _loop_1();
+    }
+    return groups;
+}
+function WithAnnotations(_a) {
+    var lines = _a.lines, annotations = _a.annotations, t = _a.t, rest = __rest(_a, ["lines", "annotations", "t"]);
+    var groups = groupLines(lines, annotations, t === 0);
+    return (React.createElement(React.Fragment, null, groups.map(function (group) {
+        var annotation = group.annotation;
+        if (!annotation) {
+            return (React.createElement(LineGroup, __assign({ lines: group.lines }, rest, { t: t })));
+        }
+        var lineCount = annotation.endIndex - annotation.startIndex + 1;
+        var lineHeight = rest.lineHeight;
+        var startY = tween(group.lines[0].tweenY, t);
+        var Component = annotation.Component;
+        return (React.createElement(Component, { style: {
+                position: "absolute",
+                background: "#ff555588",
+                height: lineCount * lineHeight,
+                width: "100%",
+                transform: "translateY(" + startY * lineHeight + "px)",
+            } },
+            React.createElement(LineGroup, __assign({ lines: group.lines }, rest, { t: t, startY: startY }))));
+    })));
+}
 function LineContainer(_a) {
@@ -217,3 +315,3 @@ var children = _a.children, dx = _a.dx, dy = _a.dy, opacity = _a.opacity, width = _a.width;
 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.minZoom, minZoom = _d === void 0 ? 0 : _d, _e = _a.maxZoom, maxZoom = _e === void 0 ? 1.2 : _e;
+    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.minZoom, minZoom = _d === void 0 ? 0 : _d, _e = _a.maxZoom, maxZoom = _e === void 0 ? 1.2 : _e, annotations = _a.annotations;
     var _f = useLineTransitions(prevLines, nextLines), lines = _f.lines, verticalInterval = _f.verticalInterval;
@@ -248,2 +346,3 @@ var prevFocusKeys = prevFocus.map(function (index) { var _a; return (_a = prevLines[index]) === null || _a === void 0 ? void 0 : _a.key; });
     }), 5), nextZoom = _h[0], nextDX = _h[1], nextDY = _h[2], nextContentHeight = _h[3], nextContentWidth = _h[4];
+    // all these tweens depends on annotations now (t instead of progress)
     var zoom = tweenProp(prevZoom, nextZoom, progress);
@@ -256,3 +355,3 @@ var dx = tweenProp(prevDX, nextDX, progress);
         React.createElement(Content, { dx: dx, dy: dy, scale: zoom, height: Math.max(focusHeight, containerHeight), width: Math.max(focusWidth, containerWidth) },
-            React.createElement(Lines, { lines: lines, prevFocusKeys: prevFocusKeys, nextFocusKeys: nextFocusKeys, focusWidth: focusWidth, lineHeight: lineHeight, progress: progress }))));
+            React.createElement(Lines, { lines: lines, prevFocusKeys: prevFocusKeys, nextFocusKeys: nextFocusKeys, focusWidth: focusWidth, lineHeight: lineHeight, progress: progress, annotations: annotations }))));
 }
@@ -312,2 +411,3 @@ function getContentProps(_a) {
                 transformOrigin: "top left",
+                width: "100%",
             } }, children)));
@@ -314,0 +414,0 @@ }

dist/line-transitions.d.ts

@@ -16,2 +16,4 @@ /// <reference types="react" />
     tweenX: TweenParams;
+    prevIndex: number | null;
+    nextIndex: number | null;
 };
@@ -18,0 +20,0 @@ export declare function useLineTransitions(prevLines: Line[], nextLines: Line[]): {

dist/lines.d.ts

@@ -1,5 +0,14 @@
-/// <reference types="react" />
 import { LineTransition } from "./line-transitions";
+import { FullTween } from "@code-hike/utils";
+import React from "react";
 export { Lines };
-declare function Lines({ lines, prevFocusKeys, nextFocusKeys, focusWidth, lineHeight, progress, }: {
+export declare type LinesAnnotation = {
+    startIndex: number;
+    endIndex: number;
+    Component: (props: {
+        style: React.CSSProperties;
+        children: React.ReactNode;
+    }) => React.ReactElement;
+};
+declare function Lines({ lines, progress, annotations, ...rest }: {
     lines: LineTransition[];
@@ -11,2 +20,3 @@ prevFocusKeys: number[];
     progress: number;
+    annotations: FullTween<LinesAnnotation[]>;
 }): JSX.Element;

package.json

 {
   "name": "@code-hike/smooth-lines",
-  "version": "0.3.0--canary.75.b3e0bf9.0",
+  "version": "0.3.0--canary.77.87864a9.0",
   "main": "dist/index.cjs.js",
@@ -14,3 +14,3 @@ "typings": "dist/index.d.ts",
   "devDependencies": {
-    "@code-hike/script": "0.3.0--canary.75.b3e0bf9.0",
+    "@code-hike/script": "0.3.0--canary.77.87864a9.0",
     "@types/react": "^16.9.38",
@@ -22,2 +22,5 @@ "react": "^16.13.1"
   },
+  "dependencies": {
+    "@code-hike/utils": "0.3.0--canary.77.87864a9.0"
+  },
   "keywords": [
@@ -37,3 +40,3 @@ "react"
   },
-  "gitHead": "b3e0bf994f016d67dfdd881b3654e3efff8f798b"
+  "gitHead": "87864a94ce18cb710aa1a30699add71915339dc1"
 }

No alert changes

Improved metrics

Total package byte prevSize

41747

increased by28.85%

Lines of code

907

increased by30.32%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Added@code-hike/utils@0.3.0--canary.77.87864a9.0

• + Added@code-hike/utils@0.3.0--canary.77.87864a9.0(transitive)