free drawing feature

mudin · Sep 14, 2019 · fd63707 · fd63707
1 parent 8bf38ff
commit fd63707
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 146 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -9,5 +9,6 @@ build
 build/
 lib
 lib/
-demo/index.html
-dev/index.html
+demo/
+dev/index.html
+dev/draw.html
diff --git a/demo/fp.jpeg b/demo/fp.jpeg
diff --git a/demo/fp.jpg b/demo/fp.jpg
diff --git a/demo/index.js b/demo/index.js
diff --git a/demo/main.js b/demo/main.js
diff --git a/dev/draw.html b/dev/draw.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- <link rel="stylesheet" href="index.css"> -->
+  </head>
+  <body>
+    <div class="toolbar">
+      Indoorjs Free Draw
+    </div>
+    <div class="context">
+      <div class="sidebar">
+        <div id="drawing-mode-options">
+          <label for="drawing-line-width">Line width:</label>
+          <span class="info">30</span
+          ><input type="range" value="30" min="0" max="150" id="drawing-line-width" /><br />
+
+          <label for="drawing-color">Line color:</label>
+          <input type="color" value="#005E7A" id="drawing-color" /><br />
+
+          <button id="clear-canvas" class="btn btn-info">Clear</button>
+        </div>
+      </div>
+      <div class="my-canvas"></div>
+    </div>
+  </body>
+</html>
diff --git a/dev/draw.js b/dev/draw.js
@@ -0,0 +1,27 @@
+/* eslint-disable no-undef */
+import * as Indoor from '../src/Indoor.js';
+
+import './index.css';
+
+const canvasEl = document.querySelector('.my-canvas');
+const drawingColorEl = document.querySelector('#drawing-color');
+const drawingLineWidthEl = document.querySelector('#drawing-line-width');
+const clearEl = document.querySelector('#clear-canvas');
+
+const canvas = new Indoor.Canvas(canvasEl, {});
+
+function oninput() {
+  canvas.setLineWidth(parseInt(this.value, 10) || 1);
+}
+
+drawingLineWidthEl.addEventListener('input', oninput, false);
+
+drawingColorEl.onchange = function onchange() {
+  canvas.setColor(this.value);
+};
+
+clearEl.onclick = function onclick() {
+  canvas.clear();
+};
+
+window.canv = canvas;
diff --git a/dev/index.css b/dev/index.css
@@ -32,6 +32,15 @@ body {
 	position: relative;
 }
 
+.context .my-canvas {
+	display: block;
+	overflow: hidden;
+	height: 100%;
+	min-height: 100%;
+	width: auto;
+	position: relative;
+}
+
 
 :host {
 	position: relative;

diff --git a/dev/index.html b/dev/index.html
@@ -4,18 +4,15 @@
     <!-- <link rel="stylesheet" href="index.css"> -->
   </head>
   <body>
-    <div class="toolbar" >
-      Indoorjs 
+    <div class="toolbar">
+      Indoorjs
     </div>
     <div class="context">
       <div class="sidebar">
-        hold Ctl/Cmd to pan,
-        wheel to zoom
+        hold Ctl/Cmd to pan, wheel to zoom
       </div>
       <div class="my-map"></div>
     </div>
   </body>
-  <!-- <script src="../node_modules/fabric/dist/fabric.js"></script>
-  <script src="../dist/indoor.js"></script> -->
   <script src="./main.js"></script>
-</html>
+</html>
diff --git a/src/Indoor.js b/src/Indoor.js
@@ -21,3 +21,6 @@ export * from './floorplan/index';
 
 // layer
 export * from './layer/index';
+
+// Free Drawing Canvas
+export * from './paint/index';
diff --git a/src/paint/Canvas.js b/src/paint/Canvas.js
@@ -0,0 +1,112 @@
+import Base from '../core/Base';
+
+export class Canvas extends Base {
+  constructor(container, options) {
+    super(options);
+
+    this.container = container;
+
+    const canvas = document.createElement('canvas');
+    this.container.appendChild(canvas);
+    canvas.setAttribute('id', 'indoorjs-canvas');
+
+    canvas.width = this.width || this.container.clientWidth;
+    canvas.height = this.height || this.container.clientHeight;
+
+    this.canvas = new fabric.Canvas(canvas, {
+      isDrawingMode: true,
+      freeDrawingCursor: 'none',
+      freeDrawingLineWidth: this.lineWidth
+    });
+
+    this.setLineWidth(this.lineWidth || 10);
+
+    this.addCursor();
+  }
+
+  addCursor() {
+    const canvas = this.canvas;
+    const cursorCanvas = document.createElement('canvas');
+    this.canvas.wrapperEl.appendChild(cursorCanvas);
+    cursorCanvas.setAttribute('id', 'indoorjs-cursor-canvas');
+    cursorCanvas.style.position = 'absolute';
+    cursorCanvas.style.top = '0';
+    cursorCanvas.style.pointerEvents = 'none';
+    cursorCanvas.width = this.width || this.container.clientWidth;
+    cursorCanvas.height = this.height || this.container.clientHeight;
+
+    this.cursor = new fabric.StaticCanvas(cursorCanvas);
+    const cursorOpacity = 0.5;
+    const mousecursor = new fabric.Circle({
+      left: -1000,
+      top: -1000,
+      radius: canvas.freeDrawingBrush.width / 2,
+      fill: `rgba(255,0,0,${cursorOpacity})`,
+      stroke: 'black',
+      originX: 'center',
+      originY: 'center'
+    });
+
+    this.cursor.add(mousecursor);
+    this.mousecursor = mousecursor;
+
+    canvas.on('mouse:move', evt => {
+      const mouse = canvas.getPointer(evt.e);
+      mousecursor
+        .set({
+          top: mouse.y,
+          left: mouse.x
+        })
+        .setCoords()
+        .canvas.renderAll();
+    });
+
+    canvas.on('mouse:out', () => {
+      // put circle off screen
+      mousecursor
+        .set({
+          left: -1000,
+          top: -1000
+        })
+        .setCoords()
+        .canvas.renderAll();
+    });
+  }
+
+  setColor(color) {
+    this.canvas.freeDrawingBrush.color = color;
+
+    if (!this.mousecursor) return;
+
+    this.mousecursor
+      .set({
+        left: 100,
+        top: 100,
+        fill: color
+      })
+      .setCoords()
+      .canvas.renderAll();
+  }
+
+  setLineWidth(width) {
+    this.lineWidth = width;
+    this.canvas.freeDrawingBrush.width = width;
+
+    if (!this.mousecursor) return;
+
+    this.mousecursor
+      .set({
+        left: 100,
+        top: 100,
+        radius: width / 2
+      })
+      .setCoords()
+      .canvas.renderAll();
+  }
+
+  clear() {
+    this.canvas.clear();
+  }
+}
+
+export const canvas = (container, options) => new Canvas(container, options);
diff --git a/src/paint/index.js b/src/paint/index.js
@@ -0,0 +1 @@
+export * from './Canvas.js';
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,14 +3,21 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   watch: true,
-  entry: './dev/index.js',
+  entry: {
+    main: './dev/index.js',
+    draw: './dev/draw.js'
+  },
+  output: {
+    path: path.join(__dirname, 'demo'),
+    filename: '[name].js'
+  },
+  devtool: 'eval',
   devServer: {
-    contentBase: path.join(__dirname, 'dev'),
-    port: 3300,
-    host: '0.0.0.0',
-    open: true,
-    overlay: true
-
+    contentBase: path.join(__dirname, 'demo'),
+    port: 3300
+    //   host: '0.0.0.0',
+    //   open: true,
+    //   overlay: true
   },
   module: {
     rules: [
@@ -27,20 +34,28 @@ module.exports = {
       }
     ]
   },
-  optimization: {
-    splitChunks: {
-      name: 'shared',
-      minChunks: 2
-    }
-  },
+  // optimization: {
+  //   splitChunks: {
+  //     name: 'shared',
+  //     minChunks: 2
+  //   }
+  // },
   plugins: [
     new HtmlWebpackPlugin({
       hash: true,
       title: 'Dev',
       template: './dev/index.html',
-      chunks: ['vendor', 'shared', 'app'],
-      path: path.join(__dirname, '../dev/'),
+      chunks: ['main'],
+      path: path.join(__dirname, '../demo/'),
       filename: 'index.html'
+    }),
+    new HtmlWebpackPlugin({
+      hash: true,
+      title: 'Demo drawing',
+      template: './dev/draw.html',
+      chunks: ['draw'],
+      path: path.join(__dirname, '../demo/'),
+      filename: 'draw.html'
     })
   ]
 };