Merge pull request #911 from CindyJS/pixelsize

new function pixelsize (compatibility with Cinderella Classic)
CindyJS · Feb 23, 2024 · 85add60 · 85add60
2 parents 3ab729a + b528749
commit 85add60
Show file tree

Hide file tree

Showing 2 changed files with 132 additions and 0 deletions.
diff --git a/examples/168_test-pixelsize.html b/examples/168_test-pixelsize.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+
+    <title>Test-Pixelsize.cdy</title>
+    <style type="text/css">
+        * {
+            margin: 0px;
+            padding: 0px;
+        }
+
+        #CSConsole {
+            background-color: #FAFAFA;
+            border-top: 1px solid #333333;
+            bottom: 0px;
+            height: 200px;
+            overflow-y: scroll;
+            position: fixed;
+            width: 100%;
+        }
+    </style>
+        <link rel="stylesheet" href="../build/js/CindyJS.css" />
+        <script type="text/javascript" src="../build/js/Cindy.js"></script>
+<script id="csdraw" type="text/x-cindyscript">
+//Script (CindyScript)
+string="Hello, how are you? $f(x)=\sum_1^{\infty}\frac{1}{x}$";
+ps = pixelsize(string,size->25,family->"Times New Roman");
+ps = ps/screenresolution();
+drawtext((0,0),string,size->25,family->"Times New Roman");
+drawpoly([(0,0), (0,ps_2),(ps_1,ps_2), (ps_1,-ps_3), (0,-ps_3),(0,0),(ps_1,0)]);
+;
+
+</script>
+    <script type="text/javascript">
+var cdy = CindyJS({
+  scripts: "cs*",
+  defaultAppearance: {
+    dimDependent: 0.7,
+    fontFamily: "sans-serif",
+    lineSize: 1,
+    pointSize: 5.0,
+    textsize: 12.0
+  },
+  angleUnit: "°",
+  ports: [{
+    width: 834,
+    height: 409,
+    id: "CSCanvas",
+    transform: [{visibleRect: [-9.06, 9.34, 24.3, -7.02]}],
+    background: "rgb(168,176,192)"
+  }],
+  use: ["katex"],
+  csconsole: false,
+  cinderella: {build: 2083, version: [3, 0, 2083]}
+});
+    </script>
+</head>
+<body>
+    <div id="CSCanvas"></div>
+</body>
+</html>
diff --git a/src/js/libcs/OpDrawing.js b/src/js/libcs/OpDrawing.js
@@ -919,6 +919,39 @@ function defaultTextRendererCanvas(ctx, text, x, y, align, size, lineHeight, ang
     };
 }
 
+function measureNoRendererCanvas(ctx, text, x, y, align, size, lineHeight, angle = 0) {
+    if (text.includes("\n")) {
+        let left = Infinity;
+        let right = -Infinity;
+        let top = Infinity;
+        let bottom = -Infinity;
+        text.split("\n").forEach(function (row) {
+            const box = measureNoRendererCanvas(ctx, row, x, y, align, size);
+            if (left > box.left) left = box.left;
+            if (right < box.right) right = box.right;
+            if (top > box.top) top = box.top;
+            if (bottom < box.bottom) bottom = box.bottom;
+            y += lineHeight;
+        });
+        return {
+            left,
+            right,
+            top,
+            bottom,
+        };
+    }
+    const m = ctx.measureText(text);
+
+    // We can't rely on advanced text metrics due to lack of browser support,
+    // so we have to guess sizes, the vertical ones in particular.
+    return {
+        left: x - m.width * align,
+        right: x + m.width * (1 - align),
+        top: y - 0.7 * 1.2 * size,
+        bottom: y + 0.3 * 1.2 * size,
+    };
+}
+
 // This is a hook: the following function may get replaced by a plugin.
 let textRendererCanvas = defaultTextRendererCanvas;
 
@@ -1001,6 +1034,43 @@ evaluator.drawtext$2 = function (args, modifs) {
     return List.turnIntoCSList([pt1, pt2, pt3, pt4]);
 };
 
+eval_helper.pixelsize = function (args, modifs) {
+    const v1 = evaluate(args[0]);
+
+    Render2D.handleModifs(modifs, Render2D.textModifs);
+    let size = csport.drawingstate.textsize;
+    if (size === null) size = defaultAppearance.textsize;
+    if (Render2D.size !== null) size = Render2D.size;
+    csctx.fillStyle = Render2D.textColor;
+
+    const m = csport.drawingstate.matrix;
+
+    const txt = niceprint(v1);
+
+    if (!CindyJS._pluginRegistry.katex && typeof txt === "string") {
+        // split string by "$", if we have latex $...$ then the length is >=3
+        if (txt.split("$").length >= 3) {
+            loadExtraPlugin("katex", "katex-plugin.js", true /*skipInit*/);
+        }
+    }
+
+    csctx.font = Render2D.bold + Render2D.italics + Math.round(size * 10) / 10 + "px " + Render2D.family;
+    return measureNoRendererCanvas(
+        csctx,
+        txt,
+        0,
+        0,
+        Render2D.align,
+        size,
+        size * defaultAppearance.lineHeight,
+        Render2D.angle
+    );
+};
+evaluator.pixelsize$1 = function (args, modifs) {
+    const box = eval_helper.pixelsize(args, modifs);
+    return List.realVector([box.right - box.left, -box.top, box.bottom]);
+};
+
 evaluator.drawtable$2 = function (args, modifs) {
     const v0 = evaluateAndVal(args[0]);
     const v1 = evaluateAndVal(args[1]);