inline-style-editor 1.0.0

package/src/util/boxesContour.js

@@ -0,0 +1,82 @@
+import { contours } from 'd3-contour';
+import { geoPath, geoIdentity } from 'd3-geo';
+import { simplifyLinesPath } from './path';
+
+function pointInBox(p, box) {
+    return !(p.x < box.left || p.x > box.right || p.y > box.bottom || p.y < box.top)
+}
+
+function pointInBoxes(point, boxes) {
+    for (const box of boxes){
+        if (pointInBox(point, box)) return true;
+    }
+    return false;
+}
+
+function defineRectangleClockWise({width, height, top = 0, left = 0}) {
+    return `M${left} ${top} h${width} v${height} h-${width}z`
+}
+
+function defineRectangleAntiClockWise({width, height, top = 0, left = 0}) {
+    return `M${left} ${top} v${height} h${width} v-${height}z`
+}
+
+function boxOverlap(box1, box2) {
+    return (box1.right >= box2.left && box2.right >= box1.left) 
+        && (box1.bottom >= box2.top && box2.bottom >= box1.top)
+}
+
+function boxesHaveOverlap(boundingBoxes) {
+    for (let i = 0; i < boundingBoxes.length - 1; ++i) {
+        const ref = boundingBoxes[i];
+        for (let j = i + 1; j < boundingBoxes.length; ++j) {
+            if (boxOverlap(ref, boundingBoxes[j])) return true;
+        }
+    }
+    return false;
+}
+
+function computeContours(boundingBoxes, pageDimensions) {
+    let _pathWithHoles = defineRectangleAntiClockWise({width: pageDimensions.width, height: pageDimensions.height});
+    if (boundingBoxes.length < 10 && !boxesHaveOverlap(boundingBoxes)) {
+        for (const bbox of boundingBoxes) {
+            _pathWithHoles = `${_pathWithHoles} ${defineRectangleClockWise(bbox)}`;
+        }
+        return _pathWithHoles;
+    }
+    const minX = Math.min(...boundingBoxes.map(rect => rect.left));
+    const minY = Math.min(...boundingBoxes.map(rect => rect.top));
+    const offsetBoxes = boundingBoxes.map(rect => {
+        rect.left = rect.left - minX;
+        rect.right = rect.right - minX;
+        rect.top = rect.top - minY;
+        rect.bottom = rect.bottom - minY;
+        return rect;
+    });
+    offsetBoxes.sort((a, b) => {
+        if (a.left > b.left) return 1;
+        if (a.left < b.left) return -1;
+        return 0;
+    });
+    const maxX = Math.ceil(Math.max(...offsetBoxes.map(rect => rect.right)));
+    const maxY = Math.ceil(Math.max(...offsetBoxes.map(rect => rect.bottom)));
+    const maxNbPixels = 20000;
+    const downscaleFactor = (maxX * maxY) / maxNbPixels;
+    const resX = Math.ceil(maxX / downscaleFactor);
+    const resY = Math.ceil(maxY / downscaleFactor);
+    // console.log(resX, resY);
+    const values = new Array(resX * resY); // one coordinate per pixel
+    for (let j = 0, k = 0; j < resY; ++j) {
+        for (let i = 0; i < resX; ++i, ++k) {
+            values[k] = pointInBoxes({x: i * downscaleFactor, y: j * downscaleFactor}, offsetBoxes) ? 1 : 0;
+        }
+    }
+    const computedContours = contours().size([resX, resY]).thresholds([1])(values);
+    const projection = geoIdentity().fitExtent([[minX, minY], [minX + maxX, minY + maxY]], computedContours[0]);
+    const path = geoPath().projection(projection);
+    
+    
+    return `${_pathWithHoles} ${simplifyLinesPath(path(computedContours[0]))}`;
+}
+
+export { computeContours };

package/src/util/fonts.js

@@ -0,0 +1,20 @@
+const fontCheck = new Set([
+    // Windows 10
+    'Arial', 'Arial Black', 'Bahnschrift', 'Calibri', 'Cambria', 'Cambria Math', 'Candara', 'Comic Sans MS', 'Consolas', 'Constantia', 'Corbel', 'Courier New', 'Ebrima', 'Franklin Gothic Medium', 'Gabriola', 'Gadugi', 'Georgia', 'HoloLens MDL2 Assets', 'Impact', 'Ink Free', 'Javanese Text', 'Leelawadee UI', 'Lucida Console', 'Lucida Sans Unicode', 'Malgun Gothic', 'Marlett', 'Microsoft Himalaya', 'Microsoft JhengHei', 'Microsoft New Tai Lue', 'Microsoft PhagsPa', 'Microsoft Sans Serif', 'Microsoft Tai Le', 'Microsoft YaHei', 'Microsoft Yi Baiti', 'MingLiU-ExtB', 'Mongolian Baiti', 'MS Gothic', 'MV Boli', 'Myanmar Text', 'Nirmala UI', 'Palatino Linotype', 'Segoe MDL2 Assets', 'Segoe Print', 'Segoe Script', 'Segoe UI', 'Segoe UI Historic', 'Segoe UI Emoji', 'Segoe UI Symbol', 'SimSun', 'Sitka', 'Sylfaen', 'Symbol', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana', 'Webdings', 'Wingdings', 'Yu Gothic',
+    // macOS
+    'American Typewriter', 'Andale Mono', 'Arial', 'Arial Black', 'Arial Narrow', 'Arial Rounded MT Bold', 'Arial Unicode MS', 'Avenir', 'Avenir Next', 'Avenir Next Condensed', 'Baskerville', 'Big Caslon', 'Bodoni 72', 'Bodoni 72 Oldstyle', 'Bodoni 72 Smallcaps', 'Bradley Hand', 'Brush Script MT', 'Chalkboard', 'Chalkboard SE', 'Chalkduster', 'Charter', 'Cochin', 'Comic Sans MS', 'Copperplate', 'Courier', 'Courier New', 'Didot', 'DIN Alternate', 'DIN Condensed', 'Futura', 'Geneva', 'Georgia', 'Gill Sans', 'Helvetica', 'Helvetica Neue', 'Herculanum', 'Hoefler Text', 'Impact', 'Lucida Grande', 'Luminari', 'Marker Felt', 'Menlo', 'Microsoft Sans Serif', 'Monaco', 'Noteworthy', 'Optima', 'Palatino', 'Papyrus', 'Phosphate', 'Rockwell', 'Savoye LET', 'SignPainter', 'Skia', 'Snell Roundhand', 'Tahoma', 'Times', 'Times New Roman', 'Trattatello', 'Trebuchet MS', 'Verdana', 'Zapfino',
+].sort());
+
+function getFonts() {
+    const availableFonts = new Set();
+
+    for (const font of fontCheck.values()) {
+        if (document.fonts.check(`12px "${font}"`)) {
+            availableFonts.add(font);
+        }
+    }
+
+    return [...availableFonts.values()]
+}
+
+export { getFonts };

package/src/util/path.js

@@ -0,0 +1,47 @@
+
+import parsePath from 'parse-svg-path';
+
+export function simplifyLinesPath(path) {
+    const parsed = parsePath(path).map(values => values.map((v, i) => {
+        if (i > 0) return Math.round(v);
+        return v;
+    }));
+    const simplifiedPath = [];
+    for (let i = 0; i < parsed.length - 1; ++i) {
+        const current = parsed[i];
+        let next = parsed[i + 1];
+        simplifiedPath.push(current);
+        let sameX = current[1] === next[1];
+        let sameY = current[2] === next[2];
+        if (sameX) {
+            while(sameX) {
+                i += 1;
+                next = parsed[i + 1];
+                sameX = next[0] === "L" && current[1] === next[1];
+            }
+            i -= 1;
+        }
+        if (sameY) {
+            while(sameY) {
+                i += 1;
+                next = parsed[i + 1];
+                sameY = next[0] === "L" && current[2] === next[2];
+            }
+            i -= 1;
+        }
+    }
+    simplifiedPath.push(parsed[parsed.length - 1]);
+    return instructionsToPath(simplifiedPath);
+}
+
+function instructionsToPath(data) {
+    let str = '';
+    data.forEach(ins => {
+        for (let i = 0; i < ins.length; ++i) {
+            let val = ins[i];
+            if (i > 0) val = Math.round(val);
+            str += val + (i === ins.length - 1 ? '' : ' ');
+        }
+    });
+    return str;
+}