HW 18-2 done

hw-js-18-2-canvas/index.js

@@ -10,7 +10,7 @@ let selection = []
 const tools = {
     graffity: {
         mousemove(e){ //e.buttons 0b00000x11 & 0b00000100 == x
-            (e.buttons & 0b001) && new Circle(e.layerX, e.layerY, +size.value, color.value)
+            (e.buttons & 0b001) && new Circle(e.layerX, e.layerY, +size.value, color.value, +size.value)
         }
     },
     circle: {
@@ -186,12 +186,13 @@ Drawable.forAll = function(callback){
 
 class Circle extends Drawable {
     //__proto__: Drawable.prototype
-    constructor(x,y,radius, color){
+    constructor(x,y,radius, color, lineWidth){
         super()
         this.x      = x;
         this.y      = y;
         this.radius = radius;
-        this.color  = color;
+        this.color = color;
+        this.lineWidth = lineWidth;
 
         this.draw(); 
     }
@@ -201,10 +202,11 @@ class Circle extends Drawable {
         ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
         ctx.closePath();
         ctx.fillStyle = this.color;
+         ctx.lineWidth = this.lineWidth;
         if (selected){
             ctx.lineWidth = 2
             ctx.stroke();
-        }
+                    }
         ctx.fill();
     }
 
@@ -353,11 +355,11 @@ class Rectangle extends Drawable { //смочь скопировать в Rectan
     inBounds(x, y, w, h) { 
         let areaX = false;
         let areaY = false;
-        if (this.width > 0) { areaX=(w > 0) ? (this.x >= x && this.x + this.width <= x + w):(this.x >= x + w && this.x + this.width <= x)}
+        if (this.width > 0) { areaX=(w > 0) ? (this.x >= x && this.x+ this.width  <= x + w):(this.x >= x + w && this.x + this.width <= x)}
         else { areaX= ((w > 0) ? (this.x+ this.width >= x && this.x <= x + w):(this.x + this.width>= x + w && this.x <= x)) }
-          if (this.height > 0) { areaY=(h > 0) ? (this.y >= y && this.y + this.height <= y + h):(this.y >= y + h && this.y + this.height <= y)}
+          if (this.height > 0) { areaY=(h > 0) ? (this.y >= y && this.y + this.height <= y + h):(this.y>= y + h && this.y + this.height <= y)}
         else { areaY= (h > 0) ? (this.y+ this.height >= y && this.y <= y + h):(this.y + this.height>= y + h && this.y <= y) }
-                    
+                  
         return areaX && areaY;
                    }
  

hw-js-18-2-canvas/js/form.js

@@ -1,95 +0,0 @@
-function dateToDateTimeLocal(date) {
-    let myDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000);
-    console.log(myDate.toISOString().slice(0, -1));
-return myDate.toISOString().slice(0, -1)
-}
-
-dateToDateTimeLocal(new Date);
-
-function Form(el, data, okCallback, cancelCallback) {
-    let formBody = document.createElement('div')
-    let okButton = document.createElement('button')
-    okButton.innerHTML = 'OK'
-
-    let cancelButton = document.createElement('button')
-    cancelButton.innerHTML = 'Cancel'
-let inputCreators = {
-    String(key, value, oninput){
-        let input = document.createElement('input')
-        input.type = 'text'
-        input.placeholder = key
-        input.value       = value
-        input.oninput     = () => oninput(input.value)
-        return input
-    },
-    Boolean(key, value, oninput) {
-       
-        //label for с input type='checkbox'  
-            let input = document.createElement('input')
-        input.type = 'checkbox'
-        input.placeholder = key
-        input.checked       = value
-        input.onchange     = () => oninput(input.checked)
-        return input
-    },
-    Date(key, value, oninput) {
-             let input = document.createElement('input')
-        input.type = 'datetime-local'
-        input.placeholder = key
-        input.value = dateToDateTimeLocal(value);
-        input.oninput     = () => oninput(new Date(input.value))
-        return input
-        //используйте datetime-local
-       
-    },
-    //и др. по вкусу, например textarea для длинных строк
-}
-    formBody.innerHTML = '<h1>тут будет форма после перервы</h1>'
-    for (const [key, value] of Object.entries(data)) {
-        let input = inputCreators[value.constructor.name](key, value, newValue => { data[key] = newValue });
-       
-        // let input = document.createElement('input');
-        formBody.append(input);
-        input.placeholder = key;
-        
-        // input.oninput = () => {
-        //    data[key] = input.value;
-        //         }
-            }
-     
-    if (typeof okCallback === 'function'){
-        formBody.appendChild(okButton);
-        okButton.onclick = (e) => {
-            console.log(this)
-            this.okCallback(e)
-        }
-    }
-
-    if (typeof cancelCallback === 'function'){
-        formBody.appendChild(cancelButton);
-        cancelButton.onclick = cancelCallback
-    }
-
-    el.appendChild(formBody)
-
-
-    this.okCallback     = okCallback
-    this.cancelCallback = cancelCallback
-
-    this.data           = data
-    this.validators     = {}
-}
-
-
-let form = new Form(formContainer, {
-    name: 'Anakin',
-    surname: 'Skywalker',
-    married: true,
-    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
-}, () => console.log('ok'),() => console.log('cancel') )
-form.okCallback = () => console.log('ok2')
-
-form.validators.surname = (value, key, data, input) => value.length > 2 && 
-                                                     value[0].toUpperCase() == value[0] &&
-                                                    !value.includes(' ') ? true : 'Wrong name'
-console.log(form)

hw-js-18-2-canvas/js/table.js

@@ -1,19 +0,0 @@
-// task-table
-let i;
-let j;
-
-const array = [i, j];
-
-let str = "<table>";
-for (i = 1; i <10; i++) {
-    str += "<tr>";
-    for (j = 1; j < 10; j++) {
-        str += "<td style='width:70px'>" + i +"*"+j+"="+ i * j + "</td>";
-    }
-    str += "</tr>";
-}
-str +="</table>";
-document.body.insertAdjacentHTML("afterbegin", str);
-
-
-

hw-js-18-2-canvas/js/task-sum-array.js

@@ -1,6 +0,0 @@
-// task-sum-array
-let arr = [1, 2, 3, 4,10];
-let sum = 0;
-for (let item of arr) { sum = sum+item };
-// console.log(arr.concat(sum));
-console.log([...arr,sum]);