axis v0

cnoelle · May 25, 2022 · b240424 · b240424
1 parent 10a39ba
commit b240424
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 79 deletions.
diff --git a/LineUtils.d.ts b/LineUtils.d.ts
@@ -74,6 +74,7 @@ export interface SingleAxisConfig {
      * See strokeStyle: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle
      */
     style?: string;
+    keepOffsetContent?: boolean;
 }
 export interface AxesConfig {
     x: boolean | Partial<SingleAxisConfig>;
@@ -84,6 +85,10 @@ export interface AxesConfig {
      */
     style?: string;
     grid?: boolean;
+    /**
+     * Default: false
+     */
+    keepOffsetContent?: boolean;
 }
 export declare class LineUtils {
     /**

diff --git a/index.html b/index.html
@@ -11,91 +11,84 @@ <h1>Canvas Zoom demo app</h1>
       <canvas2d-zoom width="640" height="480" min-zoom="0.25" max-zoom="8" double-click-mode="reset" circle-min-radius="3"></canvas2d-zoom>
       <div><input type="button" value="Reset" id="reset"></div>
     </div>
-    <script>
-
-      document.addEventListener("DOMContentLoaded", () => {
-        const canvas = document.querySelector("canvas2d-zoom");
-        // FIXME
-        //canvas.addEventListener("zoom", ev => console.log("ev", ev));
-
-        document.querySelector("#reset").addEventListener("click", _ => canvas.resetZoomPan());
-        const ctx = canvas.getContext("2d");
-
-        // draw figure
-        ctx.strokeStyle = "green";
-        ctx.beginPath();
-        ctx.arc(200, 100, 15, 0, 2 * Math.PI);
-        ctx.stroke();
-        ctx.strokeStyle = "blue";
-        ctx.beginPath();
-        ctx.moveTo(200, 115);
-        ctx.lineTo(200, 200);
-        ctx.stroke();
-
-        ctx.strokeStyle = "red";
-        ctx.beginPath();
-        ctx.moveTo(200, 200);
-        ctx.lineTo(165, 250);
-        ctx.moveTo(200, 200);
-        ctx.lineTo(235, 250);
-        ctx.moveTo(200, 115);
-        ctx.lineTo(165, 170);
-        ctx.moveTo(200, 115);
-        ctx.lineTo(235, 170);
-        ctx.stroke();
-
-        ctx.strokeStyle = "blue";
-        ctx.fillStyle = "orange";
-        ctx.beginPath();
-        ctx.arc(320, 0, 15, 0, 2 * Math.PI);
-        ctx.fill();
-
-        ctx.rotate(Math.PI/2);
-        ctx.beginPath();
-        ctx.arc(320, 0, 15, 0, 2 * Math.PI);
-        ctx.fill();
-
-        ctx.rotate(-Math.PI/2);
-        ctx.translate(320, 240);
-        ctx.rotate(Math.PI/2);
-        ctx.translate(-320, -240);
-        ctx.beginPath();
-        ctx.arc(320, 0, 15, 0, 2 * Math.PI);
-        ctx.fill();
-
-        ctx.fillStyle = "darkblue";
-        ctx.setTransform(2, 0, 0, 1, 200, 400);
-        ctx.beginPath();
-        ctx.arc(0, 0, 15, 0, 2 * Math.PI);
-        ctx.fill();
-
-        ctx.fillStyle = "lightblue";
-        ctx.resetTransform();
-        ctx.beginPath();
-        ctx.arc(20, 20, 15, 0, 2 * Math.PI);
-        ctx.fill();
-
-        // a small circle; when we zoom out this will hit the circle-min-radius limit and will
-        // not shrink any further
-        ctx.fillStyle = "darkred";
-        ctx.resetTransform();
-        ctx.beginPath();
-        ctx.arc(400, 200, 3, 0, 2 * Math.PI);
-        ctx.fill();
-      });
-    </script>
     <script type="module">
       // Here we use the latest published version from npmjs via unpkg"
       // For local development replace the url by "./bundle.js" and run `npm run start`. 
       // This will start a webpack dev server that generates the file bundle.js from src/canvas2d-zoom.ts
       import { Canvas2dZoom } from /* "https://unpkg.com/canvas2d-zoom@latest/dist/canvas2d-zoom.js" */ "./bundle.js";
-      Canvas2dZoom.register();
-    </script>
-    <script type="module">
       // Here we use the latest published version from npmjs via unpkg"
       // For local development replace the url by "./lineUtils.js" and run `npm run start` 
       // This will start a webpack dev server that generates the file lineUtils.js from src/LineUtils.ts
       import { LineUtils } from /* "https://unpkg.com/canvas2d-zoom@latest/dist/LineUtils.js" */ "./lineUtils.js";
+      Canvas2dZoom.register();
+      const canvas = document.querySelector("canvas2d-zoom");
+      // canvas.addEventListener("zoom", ev => console.log("ev", ev));
+
+      document.querySelector("#reset").addEventListener("click", _ => canvas.resetZoomPan());
+      const ctx = canvas.getContext("2d");
+
+      // draw figure
+      ctx.strokeStyle = "green";
+      ctx.beginPath();
+      ctx.arc(200, 100, 15, 0, 2 * Math.PI);
+      ctx.stroke();
+      ctx.strokeStyle = "blue";
+      ctx.beginPath();
+      ctx.moveTo(200, 115);
+      ctx.lineTo(200, 200);
+      ctx.stroke();
+
+      ctx.strokeStyle = "red";
+      ctx.beginPath();
+      ctx.moveTo(200, 200);
+      ctx.lineTo(165, 250);
+      ctx.moveTo(200, 200);
+      ctx.lineTo(235, 250);
+      ctx.moveTo(200, 115);
+      ctx.lineTo(165, 170);
+      ctx.moveTo(200, 115);
+      ctx.lineTo(235, 170);
+      ctx.stroke();
+
+      ctx.strokeStyle = "blue";
+      ctx.fillStyle = "orange";
+      ctx.beginPath();
+      ctx.arc(320, 0, 15, 0, 2 * Math.PI);
+      ctx.fill();
+
+      ctx.rotate(Math.PI/2);
+      ctx.beginPath();
+      ctx.arc(320, 0, 15, 0, 2 * Math.PI);
+      ctx.fill();
+
+      ctx.rotate(-Math.PI/2);
+      ctx.translate(320, 240);
+      ctx.rotate(Math.PI/2);
+      ctx.translate(-320, -240);
+      ctx.beginPath();
+      ctx.arc(320, 0, 15, 0, 2 * Math.PI);
+      ctx.fill();
+
+      ctx.fillStyle = "darkblue";
+      ctx.setTransform(2, 0, 0, 1, 200, 400);
+      ctx.beginPath();
+      ctx.arc(0, 0, 15, 0, 2 * Math.PI);
+      ctx.fill();
+
+      ctx.fillStyle = "lightblue";
+      ctx.resetTransform();
+      ctx.beginPath();
+      ctx.arc(20, 20, 15, 0, 2 * Math.PI);
+      ctx.fill();
+
+      // a small circle; when we zoom out this will hit the circle-min-radius limit and will
+      // not shrink any further
+      ctx.fillStyle = "darkred";
+      ctx.resetTransform();
+      ctx.beginPath();
+      ctx.arc(400, 200, 3, 0, 2 * Math.PI);
+      ctx.fill();
+
       LineUtils.drawAxes(document.querySelector("canvas2d-zoom"), {
         x: { 
           lineConfig: { label: { text: "x", style: "blue" }, style: "green", arrows: {end: true}},

diff --git a/src/LineUtils.ts b/src/LineUtils.ts
@@ -5,9 +5,6 @@ import { Canvas2dZoom, ZoomPan } from "./canvas2d-zoom.js";
         ~~ alternatively, respect original order => likely more difficult to implement
  *   - adapt ticks label font size to string length; maybe even rotate y-label if it becomes too long
  */
-
-// TODO generate types
-
 export enum LabelPosition {
     TOP_CENTER = "top-center",
     TOP_RIGHT = "top-right",
@@ -75,13 +72,15 @@ class AxesMgmt {
             let labelFont: FontConfig|undefined = _config.font, ticksFont: FontConfig|undefined = _config.font;
             let labelStyle: string|undefined = _config.style, axisStyle: string|undefined = _config.style, ticksStyle: string|undefined = _config.style;
             let grid: boolean = _config.grid || false;
+            let keepOffset: boolean|undefined = _config.keepOffsetContent;
             if (typeof config === "object") {
                 labelFont = config.lineConfig?.label?.font || config.font || labelFont;
                 ticksFont = config.ticks?.font || config.font || ticksFont;
                 axisStyle = config.lineConfig?.style || config.style || axisStyle;
                 labelStyle = config.lineConfig?.label?.style || axisStyle;
                 ticksStyle = config.ticks?.style || config.style || ticksStyle;
                 grid = config.ticks?.grid !== undefined ? config.ticks.grid : grid;
+                keepOffset = config.keepOffsetContent !== undefined ? config.keepOffsetContent : keepOffset;
             }
             if (axisStyle)
                 derivedSettings.lineConfig.style = axisStyle;
@@ -99,6 +98,8 @@ class AxesMgmt {
                 if (grid)
                     derivedSettings.ticks.grid = grid;
             }
+            if (keepOffset !== undefined)
+                derivedSettings.keepOffsetContent = keepOffset;
         };
         if (this.#x)
             setLabelAndTicksFonts(_config?.x, this.#xConfig);
@@ -117,6 +118,11 @@ class AxesMgmt {
             yOffset = Math.min(Math.round(height/10), 50);
         if (this.#x) {
             const c: SingleAxisConfig = this.#xConfig;
+            if (!c.keepOffsetContent) {
+                // draw a white rectangle
+                ctx.fillStyle = "white";
+                ctx.fillRect(0, height-yOffset, width, height);
+            }
             // @ts-ignore
             LineUtils._drawLine(ctx, c.offsetDrawn ? 0 : xOffset, height - yOffset, width, height - yOffset, c.lineConfig);
             // @ts-ignore
@@ -149,6 +155,11 @@ class AxesMgmt {
         }
         if (this.#y) {
             const c: SingleAxisConfig = this.#yConfig;
+            if (!c.keepOffsetContent) {
+                // draw a white rectangle
+                ctx.fillStyle = "white";
+                ctx.fillRect(0, 0, xOffset, height);
+            }
             // @ts-ignore
             LineUtils._drawLine(ctx, xOffset, c.offsetDrawn ? height : height - yOffset, xOffset, 0, c.lineConfig);
             // @ts-ignore
@@ -353,6 +364,7 @@ export interface SingleAxisConfig {
      * See strokeStyle: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle
      */
     style?: string;
+    keepOffsetContent?: boolean;
 }
 
 export interface AxesConfig {
@@ -364,6 +376,10 @@ export interface AxesConfig {
      */
     style?: string;
     grid?: boolean;
+    /**
+     * Default: false
+     */
+    keepOffsetContent?: boolean;
 }
 
 interface Tick {