From 9db1a6bb0f8531596308156adb2e9d831bfd0bdf Mon Sep 17 00:00:00 2001
From: Quillot Mathias <mathias.quillot@alumni.univ-avignon.fr>
Date: Tue, 11 Jun 2019 16:16:01 +0200
Subject: [PATCH] First usable mockup GUI of triangle

---
 mockup/mockup1.html | 307 +++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 302 insertions(+), 5 deletions(-)
diff --git a/mockup/mockup1.html b/mockup/mockup1.html
index 0e05939..13bc615 100644
--- a/mockup/mockup1.html
+++ b/mockup/mockup1.html
@@ -1,13 +1,310 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        <title>Mockup Triangle Interface</title>
+        <title>Konva's test</title>
         <script src="https://unpkg.com/konva@3.3.2/konva.min.js"></script>   
     </head>
     <body>
-        <h1>Mockup Triangle Interface</h1>
-        <p>
-            First example of mockup.
-        </p>
+        <h1>Interface Mockup with Konda JS</h1>
+        <div id="container"></div>
+
+<script type="text/javascript">
+
+// -- FUNCTIONS -- 
+/**
+ * Check if an intersection exists between AB and CD. 
+ * Return : 
+ *  - false if it has no intersection
+ *  - true otherwise 
+ */
+function isThereIntersection(A, B, C, D) {
+    a = A.x;b = A.y;c = B.x;d = B.y
+    p = C.x;q = C.y;r = D.x;s = D.y
+    var det, gamma, lambda;
+    det = (c - a) * (s - q) - (r - p) * (d - b);
+    if (det === 0) {
+        return false;
+    } else {
+        lambda = ((s - q) * (r - a) + (p - r) * (s - b)) / det;
+        gamma = ((b - d) * (r - a) + (c - a) * (s - b)) / det;
+        return (0 < lambda && lambda < 1) && (0 < gamma && gamma < 1)
+    }
+};
+
+/**
+ * Compute intersection between two lines
+ * Please, check if an intersection exists between
+ * calling this function. (ref isThereIntersection)
+ * 
+ * Return:
+ * - Intersection point between two lines
+ */
+function intersection(A, B, C, D) {
+    a = A.x;b = A.y;c = B.x;d = B.y
+    p = C.x;q = C.y;r = D.x;s = D.y
+
+    l1_a = (B.y - A.y) / (B.x - A.x);
+    l1_b = A.y - l1_a * A.x;
+    l2_a = (D.y - C.y) / (D.x - C.x);
+    l2_b = C.y - l2_a * C.x;
+
+    // Compute intersection point
+    x = (l2_b - l1_b) / (l1_a - l2_a)        
+    y = l1_a * x + l1_b
+    return {
+        x: x,
+        y: y 
+    } 
+}
+
+/**
+ * Return the index of the closest point
+ * 
+ */
+function closestPoint(ref, points) {
+    var dist = 100000;
+    var closest_i = -1;
+    for(var i in points) {
+        cur = Math.sqrt(Math.pow(ref.x - points[i].x, 2) + Math.pow(ref.y - points[i].y, 2));
+        if(cur < dist) {
+            dist = cur;
+            closest_i = i;
+        }
+    }
+    return closest_i;
+}
+// -- DATA --
+data = {
+    triangle: {
+        A: {
+            x:170,
+            y: 80
+        },
+        B: {
+            x: 365,
+            y: 125
+        },
+        C: {
+            x: 215, 
+            y: 260
+        }
+    }
+}
+
+// -- Help functions --
+function writeMessage(message) {
+    text.text(message);
+    layer.draw();
+}
+
+// -- STAGE & LAYER--
+var stage = new Konva.Stage({
+  container: 'container',   // id of container <div>
+  width: 500,
+  height: 500
+});
+
+var layer = new Konva.Layer();
+
+// -- TEXT --
+var text = new Konva.Text({
+    x: 10,
+    y: 10,
+    fontFamily: 'Calibri',
+    fontSize: 24,
+    text: 'Test',
+    fill: 'black'
+});
+
+
+// -- RECTANGLE --
+// TODO: Ajouter un rectangle en fond qui serve à 
+// gérer l'événement de la souris.
+
+var rect = new Konva.Rect({
+    x: 0,
+    y: 0,
+    width: stage.attrs.width,
+    height: stage.attrs.height,
+    stroke: 'black',
+    strokeWidth: 0
+});
+
+
+// -- TRIANGLE --
+var triangle = new Konva.Shape({
+    stroke: 'black',
+    fill: '#00D2FF',
+    strokeWidth: 1,
+    sceneFunc: function(context) {
+        context.beginPath();
+        context.moveTo(data.triangle.A.x, data.triangle.A.y);
+        context.lineTo(data.triangle.B.x, data.triangle.B.y);
+        context.lineTo(data.triangle.C.x, data.triangle.C.y);
+        context.closePath();
+        context.fillStrokeShape(this);50
+    }
+});
+
+bar = {
+    x: (data.triangle.A.x + data.triangle.B.x + data.triangle.C.x) / 3,
+    y: (data.triangle.A.y + data.triangle.B.y + data.triangle.C.y) / 3
+}
+
+
+triangle.on("mousemove mousedown", function(event){
+    if(event.evt.buttons === 1) {
+        var mousePos = stage.getPointerPosition();
+        var x = mousePos.x;
+        var y = mousePos.y;
+        point.position({x: x, y: y});
+        layer.draw();
+    }
+})
+
+function eventOutTriangle(event) {
+    if(event.evt.buttons === 1) {
+        var mousePos = stage.getPointerPosition();
+        var pointout = {
+            x: mousePos.x,
+            y: mousePos.y
+        }
+        var lines_to_test = [
+            {
+                A: data.triangle.A, 
+                B: data.triangle.B
+            },
+            {
+                A: data.triangle.B,
+                B: data.triangle.C
+            },
+            {
+                A: data.triangle.C,
+                B: data.triangle.A
+            }
+        ]
+
+        var intersections = []
+        for(var ind in lines_to_test) {
+            line = lines_to_test[ind];
+            var inter = isThereIntersection(
+                line.A, line.B,
+                bar, pointout
+            )
+            if(inter !== false) {
+                intersections.push(
+                    intersection(
+                        line.A, line.B,
+                        bar, pointout
+                    )
+                );
+            }
+        }
+        i = closestPoint(pointout, intersections);
+        point.position({
+            x: intersections[i].x, 
+            y: intersections[i].y
+        });
+        layer.draw();
+    }
+}
+
+rect.on("mousemove", function(event) {
+    eventOutTriangle(event);
+})
+
+// -- POINT --
+// create our shape
+var point = new Konva.Circle({
+  x: bar.x,
+  y: bar.y,
+  radius: 5,
+  fill: 'red',
+  stroke: 'black',
+  strokeWidth: 1
+});
+
+point.listening(false);
+
+
+// -- IMAGE REFS --
+// 1rst ref
+var ref1Obj = new Image();
+ref1Obj.onload = function() {
+    var ref1 = new Konva.Image({
+        x: 50,
+        y: 50,
+        image: ref1Obj,
+        width: 100,
+        height: 100
+    });
+
+    ref1.on("mousemove", function(event) {
+        eventOutTriangle(event);
+    });
+
+    layer.add(ref1);
+    layer.draw();
+}
+ref1Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
+
+// 2nd ref
+var ref2Obj = new Image();
+ref2Obj.onload = function() {
+    var ref2 = new Konva.Image({
+        x: 150,
+        y: 300,
+        image: ref1Obj,
+        width: 100,
+        height: 100
+    });
+
+    ref2.on("mousemove", function(event) {
+        eventOutTriangle(event);
+    });
+
+    layer.add(ref2);
+    layer.draw();
+}
+ref2Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
+
+
+// 3rd ref
+var ref3Obj = new Image();
+ref3Obj.onload = function() {
+    var ref3 = new Konva.Image({
+        x: 390,
+        y: 50,
+        image: ref3Obj,
+        width: 100,
+        height: 100
+    });
+
+    ref3.on("mousemove", function(event) {
+        eventOutTriangle(event);
+    });
+
+    layer.add(ref3);
+    layer.draw();
+}
+ref3Obj.src="https://pixel.nymag.com/imgs/daily/vulture/2017/11/01/01-thor-ragnarok.w700.h700.jpg";
+
+
+// -- ADDING
+// add the shape to the layer
+layer.add(rect);
+layer.add(triangle);
+layer.add(point);
+layer.add(text);
+
+
+// add the layer to the stage
+stage.add(layer);
+
+
+// -- DRAWING
+layer.draw();
+</script>
+
     </body>
 </html>
\ No newline at end of file
-- 
1.8.2.3

