@code-hike/mini-editor - npm Package Compare versions

Comparing version 0.3.0--canary.47.52daf46.0 to 0.3.0--canary.49.d3183ba.0

dist/code.d.ts

@@ -11,5 +11,7 @@ /// <reference types="react" />
     minColumns: number;
+    minZoom: number;
+    maxZoom: number;
 };
-export declare function Code({ prevCode, prevFocus, nextCode, nextFocus, progress, language, parentHeight, minColumns, }: CodeProps): JSX.Element;
+export declare function Code({ prevCode, prevFocus, nextCode, nextFocus, progress, language, parentHeight, minColumns, minZoom, maxZoom, }: CodeProps): JSX.Element;
 export declare function flatMap<T, U>(array: T[], callbackfn: (value: T, index: number, array: T[]) => U[]): U[];
 export {};

dist/index.cjs.js

@@ -130,3 +130,2 @@ 'use strict';
         if (ref.current) {
-            var rect = ref.current.getBoundingClientRect();
             var pll = ref.current.querySelector(".prev-longest-line");
@@ -143,4 +142,4 @@ var nll = ref.current.querySelector(".next-longest-line");
             setDimensions({
-                width: rect.width,
-                height: rect.height,
+                width: getWidthWithoutPadding(ref.current),
+                height: getHeightWithoutPadding(ref.current),
                 lineWidths: [
@@ -164,2 +163,14 @@ plw || nlw || DEFAULT_WIDTH,
 }
+function getWidthWithoutPadding(element) {
+    var computedStyle = getComputedStyle(element);
+    return (element.clientWidth -
+        parseFloat(computedStyle.paddingLeft) -
+        parseFloat(computedStyle.paddingRight));
+}
+function getHeightWithoutPadding(element) {
+    var computedStyle = getComputedStyle(element);
+    return (element.clientHeight -
+        parseFloat(computedStyle.paddingTop) -
+        parseFloat(computedStyle.paddingBottom));
+}
 function depsChanged(oldDeps, newDeps) {
@@ -311,3 +322,3 @@ for (var i = 0; i < oldDeps.length; i++) {
 function Code(_a) {
-    var prevCode = _a.prevCode, prevFocus = _a.prevFocus, nextCode = _a.nextCode, nextFocus = _a.nextFocus, progress = _a.progress, language = _a.language, parentHeight = _a.parentHeight, minColumns = _a.minColumns;
+    var prevCode = _a.prevCode, prevFocus = _a.prevFocus, nextCode = _a.nextCode, nextFocus = _a.nextFocus, progress = _a.progress, language = _a.language, parentHeight = _a.parentHeight, minColumns = _a.minColumns, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
     var _b = useLineProps(prevCode, nextCode, language, prevFocus, nextFocus), prevLines = _b.prevLines, nextLines = _b.nextLines, prevFocusIndexes = _b.prevFocusIndexes, nextFocusIndexes = _b.nextFocusIndexes, prevLongestLine = _b.prevLongestLine, nextLongestLine = _b.nextLongestLine;
@@ -319,16 +330,6 @@ var _c = __read(useDimensions([
     ]), 2), ref = _c[0], dimensions = _c[1];
-    return (React__default['default'].createElement("pre", { ref: ref, className: "language-" + language, style: {
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            right: 16,
-            left: 16,
-            padding: 0,
-            margin: 0,
-            overflow: "hidden",
-            opacity: dimensions ? 1 : 0,
-        } },
+    return (React__default['default'].createElement("pre", { ref: ref, className: "language-" + language, style: { opacity: dimensions ? 1 : 0 } },
         React__default['default'].createElement("code", null, dimensions ? (React__default['default'].createElement(smoothLines.SmoothLines, { center: false, progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
                 return Math.max(lw, dimensions.colWidth * minColumns);
-            }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, maxZoom: 1 })) : (React__default['default'].createElement(React__default['default'].Fragment, null,
+            }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, minZoom: minZoom, maxZoom: maxZoom })) : (React__default['default'].createElement(React__default['default'].Fragment, null,
             React__default['default'].createElement("div", { className: "prev-longest-line" }, prevLongestLine),
@@ -539,4 +540,4 @@ React__default['default'].createElement("div", { className: "next-longest-line" }, nextLongestLine))))));
 function MiniEditor(props) {
-    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, ogTabs = props.tabs, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "tabs", "minColumns", "height"]);
-    var _d = useSteps(ogSteps, {
+    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, ogTabs = props.tabs, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, _d = props.minZoom, minZoom = _d === void 0 ? 0.2 : _d, _e = props.maxZoom, maxZoom = _e === void 0 ? 1 : _e, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "tabs", "minColumns", "minZoom", "maxZoom", "height"]);
+    var _f = useSteps(ogSteps, {
         code: code,
@@ -547,3 +548,3 @@ focus: focus,
         tabs: ogTabs,
-    }), steps = _d.steps, files = _d.files, stepsByFile = _d.stepsByFile;
+    }), steps = _f.steps, files = _f.files, stepsByFile = _f.stepsByFile;
     var activeStepIndex = backward
@@ -562,3 +563,3 @@ ? Math.floor(progress)
     return (React__default['default'].createElement(EditorFrame, __assign({ files: tabs, active: activeFile, terminalPanel: React__default['default'].createElement(TerminalPanel, { height: terminalHeight },
-            React__default['default'].createElement(miniTerminal.InnerTerminal, { steps: terminalSteps, progress: progress })), height: height }, rest), activeSteps.length > 0 && (React__default['default'].createElement(EditorContent, { key: activeFile, backward: backward, progress: progress, steps: contentSteps, parentHeight: height, minColumns: minColumns }))));
+            React__default['default'].createElement(miniTerminal.InnerTerminal, { steps: terminalSteps, progress: progress })), height: height }, rest), activeSteps.length > 0 && (React__default['default'].createElement(EditorContent, { key: activeFile, backward: backward, progress: progress, steps: contentSteps, parentHeight: height, minColumns: minColumns, minZoom: minZoom, maxZoom: maxZoom }))));
 }
@@ -582,3 +583,3 @@ function useStepsWithDefaults(defaults, steps) {
 function EditorContent(_a) {
-    var progress = _a.progress, backward = _a.backward, steps = _a.steps, parentHeight = _a.parentHeight, minColumns = _a.minColumns;
+    var progress = _a.progress, backward = _a.backward, steps = _a.steps, parentHeight = _a.parentHeight, minColumns = _a.minColumns, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
     var fwdTransitions = useForwardTransitions(steps);
@@ -590,3 +591,3 @@ var bwdTransitions = useBackwardTransitions(steps);
         : fwdTransitions[transitionIndex], prevCode = _b.prevCode, nextCode = _b.nextCode, prevFocus = _b.prevFocus, nextFocus = _b.nextFocus, lang = _b.lang;
-    return (React__default['default'].createElement(Code, { prevCode: prevCode || nextCode, nextCode: nextCode || prevCode, prevFocus: prevFocus, nextFocus: nextFocus, language: lang, progress: progress - transitionIndex + 1, parentHeight: parentHeight, minColumns: minColumns }));
+    return (React__default['default'].createElement(Code, { prevCode: prevCode || nextCode, nextCode: nextCode || prevCode, prevFocus: prevFocus, nextFocus: nextFocus, language: lang, progress: progress - transitionIndex + 1, parentHeight: parentHeight, minColumns: minColumns, minZoom: minZoom, maxZoom: maxZoom }));
 }
@@ -593,0 +594,0 @@ function useSteps(ogSteps, _a) {

dist/index.esm.js

@@ -122,3 +122,2 @@ import React from 'react';
         if (ref.current) {
-            var rect = ref.current.getBoundingClientRect();
             var pll = ref.current.querySelector(".prev-longest-line");
@@ -135,4 +134,4 @@ var nll = ref.current.querySelector(".next-longest-line");
             setDimensions({
-                width: rect.width,
-                height: rect.height,
+                width: getWidthWithoutPadding(ref.current),
+                height: getHeightWithoutPadding(ref.current),
                 lineWidths: [
@@ -156,2 +155,14 @@ plw || nlw || DEFAULT_WIDTH,
 }
+function getWidthWithoutPadding(element) {
+    var computedStyle = getComputedStyle(element);
+    return (element.clientWidth -
+        parseFloat(computedStyle.paddingLeft) -
+        parseFloat(computedStyle.paddingRight));
+}
+function getHeightWithoutPadding(element) {
+    var computedStyle = getComputedStyle(element);
+    return (element.clientHeight -
+        parseFloat(computedStyle.paddingTop) -
+        parseFloat(computedStyle.paddingBottom));
+}
 function depsChanged(oldDeps, newDeps) {
@@ -303,3 +314,3 @@ for (var i = 0; i < oldDeps.length; i++) {
 function Code(_a) {
-    var prevCode = _a.prevCode, prevFocus = _a.prevFocus, nextCode = _a.nextCode, nextFocus = _a.nextFocus, progress = _a.progress, language = _a.language, parentHeight = _a.parentHeight, minColumns = _a.minColumns;
+    var prevCode = _a.prevCode, prevFocus = _a.prevFocus, nextCode = _a.nextCode, nextFocus = _a.nextFocus, progress = _a.progress, language = _a.language, parentHeight = _a.parentHeight, minColumns = _a.minColumns, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
     var _b = useLineProps(prevCode, nextCode, language, prevFocus, nextFocus), prevLines = _b.prevLines, nextLines = _b.nextLines, prevFocusIndexes = _b.prevFocusIndexes, nextFocusIndexes = _b.nextFocusIndexes, prevLongestLine = _b.prevLongestLine, nextLongestLine = _b.nextLongestLine;
@@ -311,16 +322,6 @@ var _c = __read(useDimensions([
     ]), 2), ref = _c[0], dimensions = _c[1];
-    return (React.createElement("pre", { ref: ref, className: "language-" + language, style: {
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            right: 16,
-            left: 16,
-            padding: 0,
-            margin: 0,
-            overflow: "hidden",
-            opacity: dimensions ? 1 : 0,
-        } },
+    return (React.createElement("pre", { ref: ref, className: "language-" + language, style: { opacity: dimensions ? 1 : 0 } },
         React.createElement("code", null, dimensions ? (React.createElement(SmoothLines, { center: false, progress: progress, containerWidth: dimensions.width, containerHeight: dimensions.height, prevLines: prevLines, nextLines: nextLines, lineHeight: dimensions.lineHeight, lineWidth: dimensions.lineWidths.map(function (lw) {
                 return Math.max(lw, dimensions.colWidth * minColumns);
-            }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, maxZoom: 1 })) : (React.createElement(React.Fragment, null,
+            }), prevFocus: prevFocusIndexes, nextFocus: nextFocusIndexes, minZoom: minZoom, maxZoom: maxZoom })) : (React.createElement(React.Fragment, null,
             React.createElement("div", { className: "prev-longest-line" }, prevLongestLine),
@@ -531,4 +532,4 @@ React.createElement("div", { className: "next-longest-line" }, nextLongestLine))))));
 function MiniEditor(props) {
-    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, ogTabs = props.tabs, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "tabs", "minColumns", "height"]);
-    var _d = useSteps(ogSteps, {
+    var _a = props.progress, progress = _a === void 0 ? 0 : _a, _b = props.backward, backward = _b === void 0 ? false : _b, code = props.code, focus = props.focus, lang = props.lang, file = props.file, ogSteps = props.steps, ogTabs = props.tabs, _c = props.minColumns, minColumns = _c === void 0 ? 50 : _c, _d = props.minZoom, minZoom = _d === void 0 ? 0.2 : _d, _e = props.maxZoom, maxZoom = _e === void 0 ? 1 : _e, height = props.height, rest = __rest(props, ["progress", "backward", "code", "focus", "lang", "file", "steps", "tabs", "minColumns", "minZoom", "maxZoom", "height"]);
+    var _f = useSteps(ogSteps, {
         code: code,
@@ -539,3 +540,3 @@ focus: focus,
         tabs: ogTabs,
-    }), steps = _d.steps, files = _d.files, stepsByFile = _d.stepsByFile;
+    }), steps = _f.steps, files = _f.files, stepsByFile = _f.stepsByFile;
     var activeStepIndex = backward
@@ -554,3 +555,3 @@ ? Math.floor(progress)
     return (React.createElement(EditorFrame, __assign({ files: tabs, active: activeFile, terminalPanel: React.createElement(TerminalPanel, { height: terminalHeight },
-            React.createElement(InnerTerminal, { steps: terminalSteps, progress: progress })), height: height }, rest), activeSteps.length > 0 && (React.createElement(EditorContent, { key: activeFile, backward: backward, progress: progress, steps: contentSteps, parentHeight: height, minColumns: minColumns }))));
+            React.createElement(InnerTerminal, { steps: terminalSteps, progress: progress })), height: height }, rest), activeSteps.length > 0 && (React.createElement(EditorContent, { key: activeFile, backward: backward, progress: progress, steps: contentSteps, parentHeight: height, minColumns: minColumns, minZoom: minZoom, maxZoom: maxZoom }))));
 }
@@ -574,3 +575,3 @@ function useStepsWithDefaults(defaults, steps) {
 function EditorContent(_a) {
-    var progress = _a.progress, backward = _a.backward, steps = _a.steps, parentHeight = _a.parentHeight, minColumns = _a.minColumns;
+    var progress = _a.progress, backward = _a.backward, steps = _a.steps, parentHeight = _a.parentHeight, minColumns = _a.minColumns, minZoom = _a.minZoom, maxZoom = _a.maxZoom;
     var fwdTransitions = useForwardTransitions(steps);
@@ -582,3 +583,3 @@ var bwdTransitions = useBackwardTransitions(steps);
         : fwdTransitions[transitionIndex], prevCode = _b.prevCode, nextCode = _b.nextCode, prevFocus = _b.prevFocus, nextFocus = _b.nextFocus, lang = _b.lang;
-    return (React.createElement(Code, { prevCode: prevCode || nextCode, nextCode: nextCode || prevCode, prevFocus: prevFocus, nextFocus: nextFocus, language: lang, progress: progress - transitionIndex + 1, parentHeight: parentHeight, minColumns: minColumns }));
+    return (React.createElement(Code, { prevCode: prevCode || nextCode, nextCode: nextCode || prevCode, prevFocus: prevFocus, nextFocus: nextFocus, language: lang, progress: progress - transitionIndex + 1, parentHeight: parentHeight, minColumns: minColumns, minZoom: minZoom, maxZoom: maxZoom }));
 }
@@ -585,0 +586,0 @@ function useSteps(ogSteps, _a) {

dist/mini-editor.d.ts

@@ -23,2 +23,4 @@ import React from "react";
     minColumns?: number;
+    minZoom?: number;
+    maxZoom?: number;
     button?: React.ReactNode;
@@ -25,0 +27,0 @@ classes?: Classes;

package.json

 {
   "name": "@code-hike/mini-editor",
-  "version": "0.3.0--canary.47.52daf46.0",
+  "version": "0.3.0--canary.49.d3183ba.0",
   "main": "dist/index.cjs.js",
@@ -15,3 +15,3 @@ "typings": "dist/index.d.ts",
   "devDependencies": {
-    "@code-hike/script": "0.3.0--canary.47.52daf46.0",
+    "@code-hike/script": "0.3.0--canary.49.d3183ba.0",
     "@types/react": "^16.9.38",
@@ -21,7 +21,7 @@ "react": "^16.13.1"
   "dependencies": {
-    "@code-hike/classer": "0.3.0--canary.47.52daf46.0",
-    "@code-hike/code-diff": "0.3.0--canary.47.52daf46.0",
-    "@code-hike/mini-frame": "0.3.0--canary.47.52daf46.0",
-    "@code-hike/mini-terminal": "0.3.0--canary.47.52daf46.0",
-    "@code-hike/smooth-lines": "0.3.0--canary.47.52daf46.0",
+    "@code-hike/classer": "0.3.0--canary.49.d3183ba.0",
+    "@code-hike/code-diff": "0.3.0--canary.49.d3183ba.0",
+    "@code-hike/mini-frame": "0.3.0--canary.49.d3183ba.0",
+    "@code-hike/mini-terminal": "0.3.0--canary.49.d3183ba.0",
+    "@code-hike/smooth-lines": "0.3.0--canary.49.d3183ba.0",
     "use-spring": "^0.2.3"
@@ -43,3 +43,3 @@ },
   },
-  "gitHead": "52daf46c233ff995d2dd63172c8d53060261e50c"
+  "gitHead": "d3183baeb257ea8b9d7baa287d4fe93d2517f956"
 }

No alert changes

Improved metrics

Total package byte prevSize

71917

increased by2.02%

Lines of code

1451

increased by0.55%

Dependency changes

• + Added@code-hike/classer@0.3.0--canary.49.d3183ba.0(transitive)

• + Added@code-hike/code-diff@0.3.0--canary.49.d3183ba.0(transitive)

• + Added@code-hike/mini-frame@0.3.0--canary.49.d3183ba.0(transitive)

• + Added@code-hike/mini-terminal@0.3.0--canary.49.d3183ba.0(transitive)

• + Added@code-hike/smooth-lines@0.3.0--canary.49.d3183ba.0(transitive)

• - Removed@code-hike/classer@0.3.0--canary.47.52daf46.0(transitive)

• - Removed@code-hike/code-diff@0.3.0--canary.47.52daf46.0(transitive)

• - Removed@code-hike/mini-frame@0.3.0--canary.47.52daf46.0(transitive)

• - Removed@code-hike/mini-terminal@0.3.0--canary.47.52daf46.0(transitive)

• - Removed@code-hike/smooth-lines@0.3.0--canary.47.52daf46.0(transitive)

• Updated@code-hike/classer@0.3.0--canary.49.d3183ba.0

• Updated@code-hike/code-diff@0.3.0--canary.49.d3183ba.0

• Updated@code-hike/mini-frame@0.3.0--canary.49.d3183ba.0

• Updated@code-hike/mini-terminal@0.3.0--canary.49.d3183ba.0

• Updated@code-hike/smooth-lines@0.3.0--canary.49.d3183ba.0