Merge pull request #666 from SVG-Edit/text-edition-canvas-without-editor

demos/canvas.html

@@ -16,13 +16,15 @@
     <div>
       [<button onclick="canvas.setMode('select')">Select</button>
       <button onclick="canvas.setMode('circle')">Circle</button>
-      <button onclick="canvas.setMode('rect')">Rect</button>]
+      <button onclick="canvas.setMode('rect')">Rect</button>
+      <button onclick="canvas.setMode('text')">Text</button>]
       <button onclick="fill('#ff0000')">Fill Red</button>
       <button onclick="canvas.deleteSelectedElements()">Delete Selected</button>
       <button onclick="canvas.clear(); canvas.updateCanvas(width, height);">Clear All</button>
       <button onclick="alert(canvas.getSvgString())">Get SVG</button>
     </div>
-
+    <!-- Not visible, but useful -->
+    <input id="text" style="width:0;height:0;opacity: 0"/>
     <script type="module">
 /* globals canvas */
 import SvgCanvas from '../src/svgcanvas/svgcanvas.js';
@@ -32,6 +34,8 @@ const { width, height } = { width: 500, height: 300 };
 window.width = width;
 window.height = height;
 
+const hiddenTextTagId = "text";
+
 const config = {
   initFill: { color: 'FFFFFF', opacity: 1 },
   initStroke: { color: '000000', opacity: 1, width: 1 },
@@ -50,6 +54,18 @@ window.fill = function (colour) {
     el.setAttribute('fill', colour);
   });
 };
+
+const hiddenTextTag = window.canvas.$id(hiddenTextTagId);
+window.canvas.textActions.setInputElem(hiddenTextTag);
+
+const addListenerMulti = (element, eventNames, listener)=> {
+  eventNames.split(' ').forEach((eventName)=> element.addEventListener(eventName, listener, false));
+};
+
+addListenerMulti(hiddenTextTag, 'keyup input', (evt) => {
+  window.canvas.setTextContent(evt.currentTarget.value);
+});
+
     </script>
   </body>
 </html>