prvi

ZpcBulletinBoard/wwwroot/js/index/main.js

@@ -0,0 +1,63 @@
+$(function () {
+  $(document).on('keydown', function (event) {
+    if (event.which == 17) { 
+      ctrl = true; 
+      //$('#divCanvas').css('cursor', 'all-scroll');
+    }
+  });
+  $(document).on('keyup', function (event) {
+    if (event.which == 17) { 
+      ctrl = false; 
+      //$('#divCanvas').css('cursor', 'default');
+    }
+  });
+});
+
+const ratio = '16:9'
+
+let notes = [];
+let ctrl = false;
+let canWidth;
+let canHeight;
+
+function setup() {
+    let tmpSplit = ratio.split(':');
+    canWidth = $('#divCanvas').width();
+    canHeight = canWidth / (parseFloat(tmpSplit[0]) / parseFloat(tmpSplit[1]));
+    let canvas = createCanvas(canWidth, canHeight, SVG); // Create SVG Canvas
+    canvas.parent('divCanvas');
+    
+    notes.push(new Note(100, 100, 150, 150));
+    notes.push(new Note(400, 400, 150, 150));
+    //strokeWeight(1); // do 0.1 for laser
+    //background(255);
+    //stroke(255, 0, 0); // red is good for laser
+    //noFill(); // better not to have a fill for laser
+  }
+
+
+
+function draw() {
+    background(255);
+
+    notes.forEach(note => {
+      note.over();
+      note.update();
+      note.show();
+    });
+}
+
+function mousePressed() {
+  for(i = notes.length-1; i >= 0; i--){
+    let note = notes[i];
+    if (note.pressed()){
+      return;
+    }
+  }
+}
+
+function mouseReleased() {
+  notes.forEach(note => {
+    note.released();
+  });
+}

ZpcBulletinBoard/wwwroot/js/index/note.js

@@ -0,0 +1,131 @@
+class Note {
+    constructor(x, y, w, h) {
+        this.active = false; 
+        this.dragging = false; 
+        this.rollover = false;
+        this.resizing = false;
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.startMouseX = 0;
+        this.startMouseY = 0;
+        this.startW = w;
+        this.startH = h;
+        this.text = "test123";
+        this.fontSize = 32;
+        this.clickedAt = 0;
+    }
+
+    over() {
+        // Is mouse over object
+        if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
+            this.rollover = true;
+        } else {
+            this.rollover = false;
+        }
+    }
+
+    update() {
+        if (!this.active){
+            return;
+        }
+        // Adjust location if being dragged
+        if (this.resizing){
+            this.w = this.startW + (mouseX - this.startMouseX);
+            this.h = this.startH + (mouseY - this.startMouseY);
+            if (this.w < 10){
+                this.w = 10;
+            } else if (this.x + this.w > canWidth) {
+                this.w = canWidth - this.x;
+            }
+
+            if (this.h < 10){
+                this.h = 10;
+            } else if (this.y + this.h > canHeight) {
+                this.h = canHeight - this.y;
+            }
+
+        } else if (this.dragging) {
+            this.x = mouseX + this.offsetX;
+            this.y = mouseY + this.offsetY;
+
+            if (this.x < 0){
+                this.x = 0;
+            } else if (this.x + this.w > canWidth) {
+                this.x = canWidth - this.w;
+            }
+
+            if (this.y < 0){
+                this.y = 0;
+            } else if (this.y + this.h > canHeight) {
+                this.y = canHeight - this.h;
+            }
+        }
+
+    }
+
+    show() {
+        fill(255);
+        
+        strokeWeight(1);
+        // Different fill based on state
+        if (this.resizing){
+            stroke(0, 255, 0);    
+        } else if (this.dragging) {
+            stroke(0, 0, 255);    
+        } else {
+            stroke(150);
+        }
+        
+        rect(this.x, this.y, this.w, this.h, 5);
+        line(this.x, this.y + this.fontSize + 10, this.x + this.w, this.y + this.fontSize + 10);
+
+        strokeWeight(0);
+        stroke(0);
+        fill(0);
+        textSize(this.fontSize);
+        textFont('Verdana')
+        let w = textWidth(this.text);
+
+        text(this.text, this.x + (this.w / 2) - (w / 2), this.y + 2, this.w - 4, this.h - 4);
+
+    }
+
+    pressed() {
+        if (this.active){
+            return;
+        }
+        // Did I click on the rectangle?
+        if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {
+            //console.log(mouseButton === RIGHT);
+            let newTime = moment().valueOf();
+            
+            if (!ctrl && newTime - this.clickedAt <= 500){
+                console.log(newTime - this.clickedAt);
+                console.log('double');
+                return;
+            }
+            this.clickedAt = newTime;
+            this.active = true;
+            this.dragging = !ctrl;
+            this.resizing = ctrl;
+            
+            this.startMouseX = mouseX;
+            this.startMouseY = mouseY;
+            this.offsetX = this.x - mouseX;
+            this.offsetY = this.y - mouseY;
+            this.startW = this.w;
+            this.startH = this.h;
+            return true;
+        }
+    }
+
+    released() {
+        this.active = false;
+        this.dragging = false;
+        this.resizing = false;
+    }
+}