@jsenv/terminal-recorder 1.4.5 → 1.4.7

package/dist/js/terminal_recorder.js

@@ -1,3 +1,5 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.FitAddon=t():e.FitAddon=t();}(self,(()=>(()=>{var e={};return (()=>{var t=e;Object.defineProperty(t,"__esModule",{value:!0}),t.FitAddon=void 0,t.FitAddon=class{activate(e){this._terminal=e;}dispose(){}fit(){const e=this.proposeDimensions();if(!e||!this._terminal||isNaN(e.cols)||isNaN(e.rows))return;const t=this._terminal._core;this._terminal.rows===e.rows&&this._terminal.cols===e.cols||(t._renderService.clear(),this._terminal.resize(e.cols,e.rows));}proposeDimensions(){if(!this._terminal)return;if(!this._terminal.element||!this._terminal.element.parentElement)return;const e=this._terminal._core,t=e._renderService.dimensions;if(0===t.css.cell.width||0===t.css.cell.height)return;const r=0===this._terminal.options.scrollback?0:e.viewport.scrollBarWidth,i=window.getComputedStyle(this._terminal.element.parentElement),o=parseInt(i.getPropertyValue("height")),s=Math.max(0,parseInt(i.getPropertyValue("width"))),n=window.getComputedStyle(this._terminal.element),l=o-(parseInt(n.getPropertyValue("padding-top"))+parseInt(n.getPropertyValue("padding-bottom"))),a=s-(parseInt(n.getPropertyValue("padding-right"))+parseInt(n.getPropertyValue("padding-left")))-r;return {cols:Math.max(2,Math.floor(a/t.css.cell.width)),rows:Math.max(1,Math.floor(l/t.css.cell.height))}}};})(),e})()));
+
 !function (e, t) {
   "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.SerializeAddon = t() : e.SerializeAddon = t();
 }(window, () => (() => {
@@ -1916,6 +1918,7 @@ https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts
 
 
 const { Terminal } = window;
+const { FitAddon } = window.FitAddon;
 const { WebglAddon } = window.WebglAddon;
 const { SerializeAddon } = window.SerializeAddon;
 
@@ -1972,74 +1975,80 @@ const initTerminal = ({
       brightBlue: "#87CEEB",
     },
   });
-  term.loadAddon(
-    new WebglAddon(
-      // we pass true to enable preserveDrawingBuffer
-      // it's not actually useful thanks to term.write callback +
-      // call on _innerRefresh() before context.drawImage
-      // but let's keep it nevertheless
-      true,
-    ),
-  );
   const serializeAddon = new SerializeAddon();
   term.loadAddon(serializeAddon);
-
-  const terminalElement = document.getElementById("terminal");
+  const fitAddon = new FitAddon();
+  term.loadAddon(fitAddon);
+  const webglAddon = new WebglAddon(
+    // we pass true to enable preserveDrawingBuffer
+    // it's not actually useful thanks to term.write callback +
+    // call on _innerRefresh() before context.drawImage
+    // but let's keep it nevertheless
+    true,
+  );
+  term.loadAddon(webglAddon);
+  const terminalElement = document.querySelector("#terminal");
   term.open(terminalElement);
+  fitAddon.fit();
 
   const canvas = document.querySelector("#canvas");
-  const context = canvas.getContext("2d", { willReadFrequently: true });
-  context.imageSmoothingEnabled = true;
-  const xtermCanvas = document.querySelector(
-    "#terminal canvas.xterm-link-layer + canvas",
-  );
-  const headerHeight = 40;
-  canvas.width = paddingLeft + xtermCanvas.width + paddingRight;
-  canvas.height = headerHeight + xtermCanvas.height;
-
-  {
-    drawRectangle(context, {
-      x: 0,
-      y: 0,
-      width: canvas.width,
-      height: canvas.height,
-      fill: "#282c34",
-      stroke: "rgba(255,255,255,0.35)",
-      strokeWidth: 10,
-      radius: 8,
-    });
-    drawCircle(context, {
-      x: 20,
-      y: headerHeight / 2,
-      radius: 6,
-      fill: "#ff5f57",
-    });
-    drawCircle(context, {
-      x: 40,
-      y: headerHeight / 2,
-      radius: 6,
-      fill: "#febc2e",
-    });
-    drawCircle(context, {
-      x: 60,
-      y: headerHeight / 2,
-      radius: 6,
-      fill: "#28c840",
-    });
-
-    // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
-    const text = "Terminal";
-    context.font = `${fontSize}px ${fontFamily}`;
-    context.textBaseline = "middle";
-    context.textAlign = "center";
-    // const textSize = context.measureText(text);
-    context.fillStyle = "#abb2bf";
-    context.fillText(text, canvas.width / 2, headerHeight / 2);
+  if (!canvas) {
+    throw new Error('Cannot find <canvas id="canvas"> in the document');
+  }
+  const xTermCanvasSelector = "#terminal canvas.xterm-link-layer + canvas";
+  const xtermCanvas = document.querySelector(xTermCanvasSelector);
+  if (!xtermCanvas) {
+    throw new Error(`Cannot find xterm canvas (${xTermCanvasSelector})`);
   }
 
   return {
     term,
     startRecording: async () => {
+      const context = canvas.getContext("2d", { willReadFrequently: true });
+      context.imageSmoothingEnabled = true;
+      const headerHeight = 40;
+      canvas.width = paddingLeft + xtermCanvas.width + paddingRight;
+      canvas.height = headerHeight + xtermCanvas.height;
+      {
+        drawRectangle(context, {
+          x: 0,
+          y: 0,
+          width: canvas.width,
+          height: canvas.height,
+          fill: "#282c34",
+          stroke: "rgba(255,255,255,0.35)",
+          strokeWidth: 10,
+          radius: 8,
+        });
+        drawCircle(context, {
+          x: 20,
+          y: headerHeight / 2,
+          radius: 6,
+          fill: "#ff5f57",
+        });
+        drawCircle(context, {
+          x: 40,
+          y: headerHeight / 2,
+          radius: 6,
+          fill: "#febc2e",
+        });
+        drawCircle(context, {
+          x: 60,
+          y: headerHeight / 2,
+          radius: 6,
+          fill: "#28c840",
+        });
+
+        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
+        const text = "Terminal";
+        context.font = `${fontSize}px ${fontFamily}`;
+        context.textBaseline = "middle";
+        context.textAlign = "center";
+        // const textSize = context.measureText(text);
+        context.fillStyle = "#abb2bf";
+        context.fillText(text, canvas.width / 2, headerHeight / 2);
+      }
+
       const records = {};
       let writePromise = Promise.resolve();
       const frameCallbackSet = new Set();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/terminal-recorder",
-  "version": "1.4.5",
+  "version": "1.4.7",
   "description": "Record terminal output as .svg, .gif, .webm, .mp4",
   "license": "MIT",
   "repository": {
@@ -49,8 +49,9 @@
     "webm-to-mp4": "1.0.0"
   },
   "devDependencies": {
+    "@xterm/addon-fit": "0.10.0",
     "@xterm/addon-serialize": "0.13.0",
-    "@xterm/xterm": "5.5.0",
-    "@xterm/addon-webgl": "0.18.0"
+    "@xterm/addon-webgl": "0.18.0",
+    "@xterm/xterm": "5.5.0"
   }
 }