#9 - add back rect preset to asset drawing editor

ExamProCo · Feb 22, 2020 · b57df1e · b57df1e
1 parent 30d1c76
commit b57df1e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/draw.css b/draw.css
@@ -36,8 +36,21 @@ header {
   height: 15px;
   width: 20px;
   display: inline-block;
-
 }
+.rec.black span {
+  border: solid 2px rgb(0,0,0);
+  background: #000;
+  height: 15px;
+  width: 20px;
+  display: inline-block;
+}
+.rec.red span {
+  border: solid 2px rgb(255,0,0);
+  height: 15px;
+  width: 20px;
+  display: inline-block;
+}
+
 .marker span {
   display: inline-block;
   background: rgb(255,0,0);

diff --git a/draw.html b/draw.html
@@ -11,7 +11,8 @@
   </head>
   <body>
     <header>
-      <div class='btn rec'> <span></span> </div>
+      <div class='btn rec red'> <span></span> </div>
+      <div class='btn rec black'> <span></span> </div>
       <div class='btn marker mk1'><span>1</span></div>
       <div class='btn marker mk2'><span>2</span></div>
       <div class='btn marker mk3'><span>3</span></div>

diff --git a/draw.js b/draw.js
@@ -34,9 +34,12 @@ const rect_data = {
   height: null
 }
 
-const rect = function(ev){
-  ev.target.classList.add('selected')
-  mode = 'rect'
+const rect = function(model_alt){
+  return function(ev){
+    ev.target.classList.add('selected')
+    mode = 'rect'
+    mode_alt = model_alt
+  }
 }
 
 const marker = function(val){
@@ -73,13 +76,21 @@ const click_canvas = function(ev){
         ctx = ev.target.getContext("2d")
         ctx.beginPath()
         ctx.lineWidth = 3
-        ctx.strokeStyle = "#FF0000"
+        if (mode_alt === 'black'){
+          ctx.strokeStyle = "#000000"
+          ctx.fillStyle = "#000000"
+        } else if (mode_alt === 'red') {
+          ctx.strokeStyle = "#FF0000"
+        }
         ctx.rect(
           rect_data.x + 0.5,
           rect_data.y + 0.5,
           rect_data.width,
           rect_data.height
         )
+        if (mode_alt === 'black'){
+          ctx.fill()
+        }
         ctx.stroke()
         rect_data.state = 0
         document.querySelector('.btn.rec').classList.remove('selected')
@@ -121,7 +132,8 @@ HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords
 
 document.querySelector('canvas').addEventListener('click',click_canvas)
 
-document.querySelector('.btn.rec').addEventListener('click',rect)
+document.querySelector('.btn.rec.red').addEventListener('click',rect('red'))
+document.querySelector('.btn.rec.black').addEventListener('click',rect('black'))
 document.querySelector('.btn.mk1').addEventListener('click',marker(1))
 document.querySelector('.btn.mk2').addEventListener('click',marker(2))
 document.querySelector('.btn.mk3').addEventListener('click',marker(3))