Improve Draw: add figures schema, colors and settings for tooling

dist/index.html

@@ -127,6 +127,28 @@
         <canvas id="canvas-area"></canvas>
         <button type="button" class="btn btn-primary">Previous</button>
         <button type="button" class="btn btn-primary">Next</button>
+
+        <!-- Modal -->
+        <div class="modal fade" id="drawing-form" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                ...
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary">Understood</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        
       </div>
     </div>
     <footer class="text-center text-small">

src/draw.js

@@ -4,21 +4,74 @@ import paper from 'paper';
 paper.setup('canvas-area');
 
 const Tool = new paper.Tool();
+const colors = [
+  '#FFC6BC',
+  '#FEDEA2',
+  '#FFF9B8',
+  '#D3DBB2',
+  '#A7D3D2',
+  '#EFE3F3',
+  '#C4D0F5',
+];
 
-let path;
+const form = document.getElementById('drawing-form');
+
+const showForm = () => {
+  form.classList.add('show');
+}
+
+const mkPathStyle = (color) => {
+  const mkBgColor = (color) => {
+    const x = new paper.Color(color);
+    x.alpha = 0.5;
+    return x;
+  }
+  let style = {
+    strokeColor: color,
+    strokeWidth: 5,
+    fillColor: mkBgColor(color)
+  }
+  return style;
+}
+
+let figures = colors.map(color => ({
+  data: {
+    name: '',
+    soundSample: '',
+    associations: [''],
+    identity: ''
+  },
+  path: undefined
+}));
+
+const mkPath = (idx) => {
+  return new paper.Path(mkPathStyle(colors[idx]));
+}
+
+const turnOffTool = () => {
+  Tool.remove();
+}
+let current = 0;
+
+let path = mkPath(current);
 
 Tool.onMouseDown = (event) => {
-  path = new paper.Path();
-  path.strokeColor = 'black';
   path.add(event.point);
 }
 
 Tool.onMouseDrag = (event) => {
-	path.add(event.point);
+  path.add(event.point)
 }
 
 Tool.onMouseUp = (event) => {
-    path.add(path.firstSegment);
+    path.add(path.firstSegment)
     path.close = true;
-    console.log(path.segments);
+    figures[current].path = path;
+    if (current < 6) {
+      current++
+      path = mkPath(current);
+    } else {
+      turnOffTool();
+    }
+    console.log(current);
 }