@aptoma/folio-tools 1.0.4 → 2.0.0

package/dist/src/utils.d.ts

@@ -5,6 +5,7 @@ export declare function getGridCssProps({ column, baseline, dimensions, margin }
     dimensions: Dimension;
     margin: ComputedMargin;
 }): string[];
+export declare function getObjectCssProps(elements: PageElement[]): string[];
 export declare function getMarginsInMm(edition: {
     margin: RawMargin;
 }, page: {

package/dist/src/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAE/H,wBAAgB,eAAe,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAC,EAAE;IACvE,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;CACvB,GAAG,MAAM,EAAE,CAqBX;AAMD,wBAAgB,cAAc,CAAC,OAAO,EAAE;IAAC,MAAM,EAAE,SAAS,CAAA;CAAC,EAAE,IAAI,EAAE;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAAC,GAAG,cAAc,CAYhH;AAMD,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,EAAE,YAAY,GAAG,WAAW,EAAE,CAQ/H"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAE/H,wBAAgB,eAAe,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAC,EAAE;IACvE,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,SAAS,CAAC;IACtB,MAAM,EAAE,cAAc,CAAC;CACvB,GAAG,MAAM,EAAE,CAqBX;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,WAAW,EAAE,GAAG,MAAM,EAAE,CAWnE;AAMD,wBAAgB,cAAc,CAAC,OAAO,EAAE;IAAC,MAAM,EAAE,SAAS,CAAA;CAAC,EAAE,IAAI,EAAE;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAAC,GAAG,cAAc,CAYhH;AAMD,wBAAgB,4BAA4B,CAAC,OAAO,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,YAAY,EAAE,YAAY,GAAG,WAAW,EAAE,CAQ/H"}

package/dist/src/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getGridCssProps = getGridCssProps;
+exports.getObjectCssProps = getObjectCssProps;
 exports.getMarginsInMm = getMarginsInMm;
 exports.convertObjectsToPageElements = convertObjectsToPageElements;
 function getGridCssProps({ column, baseline, dimensions, margin }) {
@@ -22,6 +23,18 @@ function getGridCssProps({ column, baseline, dimensions, margin }) {
     props.push(`--grid-baseline-increment: ${round(toMm(baseline.height))}mm`);
     return props;
 }
+function getObjectCssProps(elements) {
+    const props = [`--obj-count: ${elements.length}`];
+    elements.forEach((e, i) => {
+        const n = i + 1;
+        props.push(`--obj-${n}-top: ${e.pagePosition.top}`);
+        props.push(`--obj-${n}-left: ${e.pagePosition.left}`);
+        props.push(`--obj-${n}-width: ${e.pagePosition.width}`);
+        props.push(`--obj-${n}-height: ${e.pagePosition.height}`);
+        props.push(`--obj-${n}-type: ${e.type || ''}`);
+    });
+    return props;
+}
 function round(n) {
     return Math.round(n * 1000) / 1000;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aptoma/folio-tools",
-  "version": "1.0.4",
+  "version": "2.0.0",
   "description": "Build tooling and dev server for Aptoma DrEdition print folio renderers",
   "license": "Unlicensed",
   "main": "dist/index.js",
@@ -23,6 +23,7 @@
     "url": "git+https://github.com/aptoma/folio-tools.git"
   },
   "scripts": {
+    "test": "tsx --test src/*.test.ts",
     "build": "tsc",
     "prepublishOnly": "tsc",
     "prerelease-check": "tsc --noEmit",
@@ -37,12 +38,13 @@
     "joi": "^17.6.0",
     "node-fetch": "^2.6.7",
     "nodemon": "^2.0.15",
-    "vm2": "^3.10.5"
+    "isolated-vm": "^6.0.2"
   },
   "devDependencies": {
     "@types/node": "^25.3.0",
     "auto-changelog": "^2.5.0",
     "release-it": "^19.0.5",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3"
   }
 }

package/server/grid-overlay.js

@@ -15,8 +15,10 @@ class FgGridOverlay extends HTMLElement {
 			return;
 		}
 
+		const objCount = parseInt(st.getPropertyValue('--obj-count'), 10) || 0;
+
 		const shadow = this.attachShadow({mode: 'open'});
-		shadow.innerHTML = this._template(st, colCount);
+		shadow.innerHTML = this._template(st, colCount, objCount);
 
 		const root = shadow;
 		function wire(cbId, layerId) {
@@ -34,10 +36,12 @@ class FgGridOverlay extends HTMLElement {
 		wire('fg-cb-margins', 'fg-margins');
 		wire('fg-cb-columns', 'fg-columns');
 		wire('fg-cb-baseline', 'fg-baseline');
+		wire('fg-cb-objects', 'fg-objects');
 	}
 
-	_template(st, colCount) {
+	_template(st, colCount, objCount) {
 		const columnLines = this._buildColumnLines(st, colCount);
+		const objectBoxes = this._buildObjectBoxes(st, objCount);
 		return `
 <style>
 :host {
@@ -112,17 +116,47 @@ class FgGridOverlay extends HTMLElement {
     gap: 4px;
     align-items: center;
 }
+#fg-objects {
+    position: absolute;
+    top: var(--margin-top);
+    left: var(--margin-left);
+    pointer-events: none;
+    display: none;
+}
+.obj-box {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.08);
+    box-sizing: border-box;
+}
+.obj-box[data-type="article"] { background: rgba(255, 200, 0, 0.3); }
+.obj-box[data-type="ad"]      { background: rgba(0, 100, 255, 0.2); }
+.obj-box[data-type="pdf"]     { background: rgba(255, 0, 150, 0.2); }
 </style>
 <div id="fg-margins"></div>
 <div id="fg-columns">${columnLines}</div>
 <div id="fg-baseline"></div>
+<div id="fg-objects">${objectBoxes}</div>
 <div id="fg-controls">
     <label><input type="checkbox" id="fg-cb-margins"> <span style="color:#e040fb">Margins</span></label>
     <label><input type="checkbox" id="fg-cb-columns"> <span style="color:#4db6ac">Columns</span></label>
     <label><input type="checkbox" id="fg-cb-baseline"> <span style="color:#039be5">Baseline</span></label>
+    <label><input type="checkbox" id="fg-cb-objects"> <span style="color:#555">Objects</span></label>
 </div>`;
 	}
 
+	_buildObjectBoxes(st, objCount) {
+		const boxes = [];
+		for (let i = 1; i <= objCount; i++) {
+			const top = st.getPropertyValue(`--obj-${i}-top`).trim();
+			const left = st.getPropertyValue(`--obj-${i}-left`).trim();
+			const width = st.getPropertyValue(`--obj-${i}-width`).trim();
+			const height = st.getPropertyValue(`--obj-${i}-height`).trim();
+			const type = st.getPropertyValue(`--obj-${i}-type`).trim();
+			boxes.push(`<div class="obj-box" style="top:${top};left:${left};width:${width};height:${height}" data-type="${type}"></div>`);
+		}
+		return boxes.join('\n');
+	}
+
 	_buildColumnLines(st, colCount) {
 		const lines = [];
 		for (let i = 1; i <= colCount; i++) {

package/test-vm.js

@@ -1,10 +1,26 @@
 #!/usr/bin/env node
 'use strict';
 
-const {NodeVM, VMScript} = require('vm2');
-const vm = new NodeVM({
-	sandbox: {self: null}
-});
+const ivm = require('isolated-vm');
+const isolate = new ivm.Isolate({memoryLimit: 128});
 const file = require('fs').readFileSync('./files/index.js').toString();
-const script = new VMScript(file);
-vm.run(script);
+
+(async () => {
+	const context = await isolate.createContext();
+	try {
+		await context.global.set('self', null);
+		const script = await isolate.compileScript(wrapCJS(file));
+		await script.run(context);
+	} finally {
+		context.release();
+	}
+})().catch(console.error);
+
+function wrapCJS(code) {
+	return `(function() {
+var module = { exports: {} };
+var exports = module.exports;
+${code}
+globalThis.__moduleExports = module.exports;
+})();`;
+}