Editor with basic text colour picker.

web/data/editor.html

@@ -1,11 +1,34 @@
 {{ define "content" }}
 
 <main role="main" class="" style="height:100%;" x-data="editor()" x-init="setup_canvas();">
-  <p>
+  <div id="tools-top" x-show="!toolbar">
     <button type="button" @click="add_some_text()" class="btn btn-primary">Add text</button>
-    <button type="button" @click="export_image()" class="btn btn-primary">Take a dump</button>
+    <button type="button" @click="crop()" class="btn btn-primary">Crop</button>
-  </p>
+    <button type="button" @click="crop()" class="btn btn-primary">Apply</button>
-  <canvas id="c"></canvas>
+  </div>
+  <div id="tools-colour" x-show="toolbar == 'text'">
+    <div>FG: 
+      <button type="button" @click="set_colour('#fff0', 'fg')" class="btn btn-primary" style="">-</button>
+
+      <template x-for="colour in colours">
+        <button type="button" @click="set_colour(colour, 'fg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
+      </template>
+    </div>
+    <div>BG: 
+      <button type="button" @click="set_colour('#fff0', 'bg')" class="btn btn-primary" style="">-</button>
+      <template x-for="colour in colours">
+        <button type="button" @click="set_colour(colour, 'bg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
+      </template>
+    </div>
+    <div>ST: 
+      <button type="button" @click="set_colour('#fff0', 'stroke')" class="btn btn-primary" style="">-</button>
+      <template x-for="colour in colours">
+        <button type="button" @click="set_colour(colour, 'stroke')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
+      </template>
+    </div>
+  </div>
+
+  <canvas id="c" width="600" height="600" x-bind:style="canvas_style"></canvas>
   <img :src="img_data">
 </main>
 
@@ -14,34 +37,75 @@
 {{ define "js" }}
 
 <script>
+// for some reason, canvas does not work correctly if the object 
+// is managed by alpine - see https://github.com/fabricjs/fabric.js/issues/7485
+var canvas = null;
 
 function editor() {
   return {
-    canvas: null, img_data: "", scaleFactor: 1.0,
+    img_data: "", scaleFactor: 1.0, 
+    toolbar: null,
+    colours: [ 'red', 'blue', 'green', 'white', 'yellow', 'black', 'purple'],
+
+    canvas_style: "",
+    // "position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; touch-action: none; -webkit-user-select: none;",
     setup_canvas() {
       // seriously javascript? just imagine, in 2021....
       var url = new URL(window.location);
       var id = url.searchParams.get("id");
       var self = this;
-      self.canvas = new fabric.Canvas('c');
+      canvas = new fabric.Canvas('c');
+
+      canvas.on('selection:cleared', function(options) {
+        self.toolbar = null;
+      });
       
       fabric.Image.fromURL('/rest/image/'+id, function(oImg) {
-        // self.canvas.setDimensions({width: oImg.width, height: oImg.height});
+        canvas.setDimensions({width: oImg.width, height: oImg.height});
         oImg.selectable = false;
-        
+        canvas.add(oImg);
-        self.canvas.add(oImg);
         // self.canvas.setHeight(self.canvas.getHeight() * (self.scaleFactor));
         // self.canvas.setWidth(self.canvas.getWidth() * (self.scaleFactor));
         // self.canvas.setZoom(self.scaleFactor);
       });
     },
     export_image() {
-      this.img_data = this.canvas.toDataURL({multiplier: 1/this.scaleFactor});
+      this.img_data = canvas.toDataURL({multiplier: 1/this.scaleFactor});
     },
     add_some_text() {
-      var text = new fabric.Textbox('hello world', { left: 100, top: 100, fontSize: 20 });
+      var text = new fabric.Textbox('double click to change', { left: 20, top: 20, width: 300, fontSize: 40 });
-      this.canvas.add(text);
+      canvas.add(text);
+      canvas.setActiveObject(text);
+      this.toolbar = 'text';
+      var self = this;
+      text.on('selected', function(options) {
+        self.toolbar = 'text';
+      });
     },
+    set_colour(colour, type) {
+      selected = canvas.getActiveObjects();
+      console.log();
+      selected.forEach(el => {
+        if (type === 'fg') {
+          el.set('fill', colour);
+        }
+        if (type === 'bg') {
+          el.set('textBackgroundColor', colour);
+        }
+        if (type === 'stroke') {
+          el.set('stroke', colour);
+        }
+
+//["stroke","strokeWidth","fill","fontFamily","fontSize","fontWeight","fontStyle","underline","overline","linethrough","deltaY","textBackgroundColor"]
+
+
+      });
+      canvas.renderAll();
+    }
+    
+//    selection:cleared
+
+
 
   }
 }

web/data/wrapper.tmpl

@@ -6,13 +6,9 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
-  <script   src="https://code.jquery.com/jquery-3.5.1.min.js"   integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="   crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
   <script src="//unpkg.com/alpinejs" defer></script>
-
+  <script src="https://cdn.jsdelivr.net/npm/fabric@4.6.0/dist/fabric.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/fabric@4.6.0/dist/fabric.min.js"></script>
 
   <style>
   .bd-placeholder-img {
@@ -37,7 +33,7 @@
 
 <body class="">
 
-<div class="DAU-container d-flex w-100 h-100 p-3 mx-auto flex-column">
+<div class="DAU-container-editor d-flex w-100 h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto">
    <div class="inner">
      <h3 class="masthead-brand">discord-auto-upload ({{.Version}})</h3>
@@ -62,6 +58,7 @@
 
 
 </body>
+
     {{ template "js" . }}
 </html>