Add crude text element and typewriter tool

This will probably feel difficult to use, and should be redesigned later.
Semphriss · Jul 4, 2024 · d3c7958 · d3c7958
1 parent 30fcd71
commit d3c7958
Show file tree

Hide file tree

Showing 12 changed files with 753 additions and 20 deletions.
diff --git a/www/index.html b/www/index.html
@@ -176,6 +176,13 @@
         margin: 0;
       }
 
+      .toolbar-button {
+        width: 36px;
+        height: 36px;
+        border: none;
+        background: none;
+      }
+
       #pdflist {
         color: white;
         position: fixed;
@@ -274,6 +281,10 @@
         background: #777;
       }
 
+      .button-like-active {
+        background: #777;
+      }
+
       #settings, #addempty {
         float: right;
         width: 32px;
@@ -361,6 +372,7 @@
         justify-content: center;
         align-items: center;
         color: #000a;
+        z-index: 5;
       }
 
       #doc-name {
@@ -375,6 +387,10 @@
       #doc-name:focus {
         background: #fff7;
       }
+
+      .text-edit {
+        position: absolute;
+      }
     </style>
   </head>
   <body>
@@ -394,6 +410,11 @@
           <button id="tool-highlighter">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M143.1 320V248.3C143.1 233 151.2 218.7 163.5 209.6L436.6 8.398C444 2.943 452.1 0 462.2 0C473.6 0 484.5 4.539 492.6 12.62L547.4 67.38C555.5 75.46 559.1 86.42 559.1 97.84C559.1 107 557.1 115.1 551.6 123.4L350.4 396.5C341.3 408.8 326.1 416 311.7 416H239.1L214.6 441.4C202.1 453.9 181.9 453.9 169.4 441.4L118.6 390.6C106.1 378.1 106.1 357.9 118.6 345.4L143.1 320zM489.4 99.92L460.1 70.59L245 229L330.1 314.1L489.4 99.92zM23.03 466.3L86.06 403.3L156.7 473.9L125.7 504.1C121.2 509.5 115.1 512 108.7 512H40C26.75 512 16 501.3 16 488V483.3C16 476.1 18.53 470.8 23.03 466.3V466.3z"/></svg>
           </button>
+          <button id="tool-typewriter">
+            <svg viewBox="0 0 135.46666 135.46667" xmlns="http://www.w3.org/2000/svg">
+              <path d="m 465.67895,345.58322 -4.096,-116.05339 H 76.558763 L 72.462761,345.58322 H 88.846769 C 105.23078,270.48985 120.93212,258.20184 197.39082,258.20184 h 36.86402 v 341.3335 c 0,58.02669 -7.50934,65.53603 -64.1707,68.94937 v 12.97067 H 369.4229 v -12.97067 c -55.97869,-2.73067 -65.53603,-11.60534 -65.53603,-61.44003 V 258.20184 h 36.86402 c 77.82404,0 92.84271,12.28801 108.54405,87.38138 z" transform="matrix(0.2645832,0,0,0.26458359,-3.4582966,-52.782538)" />
+            </svg>
+          </button>
           <button id="tool-eraser">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z"/></svg>
           </button>

diff --git a/www/js/document_page.mjs b/www/js/document_page.mjs
@@ -15,6 +15,7 @@
 
 import { ToolHandler } from './tool_handler.mjs';
 import { StrokeElement } from './elements/stroke.mjs';
+import { TextElement } from './elements/text.mjs';
 
 /**
  * A single page of a Document.
@@ -53,7 +54,9 @@ export class DocumentPage {
 
     for (const elementData of d.shift().split(';').filter(e => e.length)) {
       if (elementData.startsWith(StrokeElement.ID + ',')) {
-        doc.elements.push(StrokeElement.load(elementData));
+        doc.elements.push(StrokeElement.load(elementData, doc));
+      } else if (elementData.startsWith(TextElement.ID + ',')) {
+        doc.elements.push(TextElement.load(elementData, doc));
       } else {
         throw "Unrecognised element";
       }
@@ -196,6 +199,13 @@ export class DocumentPage {
     }
   }
 
+  /**
+   * Returns a list of elements on the page. Should be considered read-only.
+   */
+  getElements() {
+    return this.elements;
+  }
+
   /**
    * Add the given element to the page.
    */

diff --git a/www/js/elements/bbox.mjs b/www/js/elements/bbox.mjs
@@ -4,10 +4,21 @@
  * This will never be fixed on a canvas, only used as a temporary element.
  */
 export class BBoxElement {
+  /* DocumentPage */ page;
   /* [ minx, miny, maxx, maxy ] */ boundsBox = [];
+  /* in ['lasso', 'text'] */ style = null;
 
-  constructor(minx, miny, maxx, maxy) {
+  constructor(page, minx, miny, maxx, maxy, style) {
+    this.page = page;
     this.boundsBox = [minx, miny, maxx, maxy];
+    this.style = style;
+    if (!['lasso', 'text'].includes(this.style)) {
+      throw `BBox: '${this.style}' not in ['lasso', 'text']`;
+    }
+  }
+
+  getPage() {
+    return this.page;
   }
 
   draw(ctx, page) {
@@ -21,14 +32,26 @@ export class BBoxElement {
     const maxy = this.boundsBox[3];
 
     ctx.save();
-    ctx.globalAlpha *= 0.5;
-
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-    ctx.lineWidth = scaleW * 2;
-    ctx.strokeStyle = 'black';
-    ctx.setLineDash([scaleW * 16]);
-    ctx.fillStyle = '#0002';
+
+    switch(this.style) {
+      case 'lasso':
+        ctx.globalAlpha *= 0.5;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.lineWidth = scaleW * 2;
+        ctx.strokeStyle = 'black';
+        ctx.setLineDash([scaleW * 16]);
+        ctx.fillStyle = '#0002';
+        break;
+
+      case 'text':
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.lineWidth = scaleW * 2;
+        ctx.strokeStyle = 'black';
+        ctx.fillStyle = '#0000';
+        break;
+    }
 
     ctx.beginPath();
     ctx.moveTo(minx * scaleX, miny * scaleY);

diff --git a/www/js/elements/lasso.mjs b/www/js/elements/lasso.mjs
@@ -4,8 +4,17 @@
  * This will never be fixed on a canvas, only used as a temporary element.
  */
 export class LassoElement {
+  /* DocumentPage */ page;
   points = [];
 
+  constructor(page) {
+    this.page = page;
+  }
+
+  getPage() {
+    return this.page;
+  }
+
   draw(ctx, page) {
     if (this.points.length === 0)
       return;

diff --git a/www/js/elements/stroke.mjs b/www/js/elements/stroke.mjs
@@ -17,13 +17,22 @@ const colorToRGB = (colorKeyword) => {
 export class StrokeElement {
   static ID = 'stroke';
 
+  /* DocumentPage */ page;
   points = [];
   size = 3;
   color = 'hsl(0 0% 0%)';
   opacity = 1;
 
   erasing = false;
 
+  constructor(page) {
+    this.page = page;
+  }
+
+  getPage() {
+    return this.page;
+  }
+
   draw(ctx, page) {
     if (this.points.length === 0)
       return;
@@ -186,14 +195,18 @@ export class StrokeElement {
     this.points.push({ x, y });
   }
 
-  static load(data) {
+  static load(data, page) {
     const elemData = data.substring(StrokeElement.ID.length + 1);
-    return Object.assign(new StrokeElement(), JSON.parse(atob(elemData)));
+    return Object.assign(new StrokeElement(page), JSON.parse(atob(elemData)));
   }
 
   save() {
-    // FIXME: This saves things it shouldn't, like this.erasing
-    return StrokeElement.ID + ',' + btoa(JSON.stringify(this));
+    return StrokeElement.ID + ',' + btoa(JSON.stringify({
+      points: this.points,
+      size: this.size,
+      color: this.color,
+      opacity: this.opacity
+    }));
   }
 
   async exportPdf(page) {