From 7fa20c9b4e78518d9edd9a526ad4f02bf52a370c Mon Sep 17 00:00:00 2001 From: pisouvigne Date: Tue, 2 Jun 2020 15:49:23 +0200 Subject: [PATCH] hover --- site/js/createElement.js | 278 +++++++++++++++++++-------------------- site/js/init.js | 6 + 2 files changed, 145 insertions(+), 139 deletions(-) diff --git a/site/js/createElement.js b/site/js/createElement.js index f8a2afc..62b09d3 100644 --- a/site/js/createElement.js +++ b/site/js/createElement.js @@ -1,158 +1,158 @@ function createEnd(x, y) { - var imageObj2 = new Image(); - imageObj2.onload = function () { - var end = new Konva.Image({ - x: x, - y: y, - image: imageObj2, - width: 50, - height: 50, - id: "end", - }); + var imageObj2 = new Image(); + imageObj2.onload = function () { + var end = new Konva.Image({ + x: x, + y: y, + image: imageObj2, + width: 50, + height: 50, + id: "end", + }); - layer.add(end); - layer.batchDraw(); - }; - imageObj2.src = pathImg + imageEnd; + layer.add(end); + layer.batchDraw(); + }; + imageObj2.src = pathImg + imageEnd; } function createSwitch(id, x, y) { - switchs.push(id); - var num = lineCount.length; - lineCount.push(1); - var rect1 = new Konva.Rect({ - x: x, - y: y, - width: 100, - height: 50, - stroke: colorSwitchBorder, - fill: colorSwitchInnactiveBackground, - strokeWidth: 4, - id: id, - id3: null, - }); - - - layer.add(rect1); + switchs.push(id); + var num = lineCount.length; + lineCount.push(1); + var rect1 = new Konva.Rect({ + x: x, + y: y, + width: 100, + height: 50, + stroke: colorSwitchBorder, + fill: colorSwitchInnactiveBackground, + strokeWidth: 4, + id: id, + id3: null, + }); + + + layer.add(rect1); } function createLine(points, id) { - let line = new Konva.Line({ - points: points, - stroke: colorLineInnactive, - strokeWidth: 3, - lineCap: 'round', - lineJoin: 'round', - id: id, - }); - layer.add(line); + let line = new Konva.Line({ + points: points, + stroke: colorLineInnactive, + strokeWidth: 3, + lineCap: 'round', + lineJoin: 'round', + id: id, + }); + layer.add(line); } function createLink(entre, sortie, lineId) { - //entre est une porte logique - switch (whatIsElement(entre)) { - case "switch": - switch (whatIsElement(sortie)) { - case "logique": - switch (giveLineId(sortie.name)) { - case "id1": - let switchMidX = entre.getX() + entre.getWidth(); - let switchMidY = entre.getY() + entre.getHeight() / 2; - - let logiqueMidX = sortie.x; - let logiqueMidY = sortie.y + (imageHeight / 3); - createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId); - setLine(sortie, "id1", "line" + lineId); - entre.id3 = "line" + lineId; - break; - case "id2": - createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId); - setLine(sortie, "id2", "line" + lineId); - entre.id3 = "line" + lineId; - break; - } - } - break; + //entre est une porte logique + switch (whatIsElement(entre)) { + case "switch": + switch (whatIsElement(sortie)) { + case "logique": + switch (giveLineId(sortie.name)) { + case "id1": + let switchMidX = entre.getX() + entre.getWidth(); + let switchMidY = entre.getY() + entre.getHeight() / 2; + + let logiqueMidX = sortie.x; + let logiqueMidY = sortie.y + (imageHeight / 3); + createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId); + setLine(sortie, "id1", "line" + lineId); + entre.id3 = "line" + lineId; + break; + case "id2": + createLine([entre.getX() + entre.getWidth(), entre.getY() + entre.getHeight() / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId); + setLine(sortie, "id2", "line" + lineId); + entre.id3 = "line" + lineId; + break; + } + } + break; + case "logique": + switch (whatIsElement(sortie)) { case "logique": - switch (whatIsElement(sortie)) { - case "logique": - switch (giveLineId(sortie.name)) { - case "id1": - let switchMidX = entre.x + imageWidth; - let switchMidY = entre.y + imageHeight / 2; - - let logiqueMidX = sortie.x; - let logiqueMidY = sortie.y + (imageHeight / 3); - createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId); - setLine(sortie, "id1", "line" + lineId); - setLine(entre, "id3", "line" + lineId); - break; - case "id2": - createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId); - setLine(sortie, "id2", "line" + lineId); - setLine(entre, "id3", "line" + lineId); - break; - } - } - break; - } + switch (giveLineId(sortie.name)) { + case "id1": + let switchMidX = entre.x + imageWidth; + let switchMidY = entre.y + imageHeight / 2; + + let logiqueMidX = sortie.x; + let logiqueMidY = sortie.y + (imageHeight / 3); + createLine([switchMidX, switchMidY, logiqueMidX, logiqueMidY], "line" + lineId); + setLine(sortie, "id1", "line" + lineId); + setLine(entre, "id3", "line" + lineId); + break; + case "id2": + createLine([entre.x + imageWidth, entre.y + imageHeight / 2, sortie.x, sortie.y + (imageHeight / 3) * 2], "line" + lineId); + setLine(sortie, "id2", "line" + lineId); + setLine(entre, "id3", "line" + lineId); + break; + } + } + break; + } } function createLogique(x, y, id, type) { - switch (type) { - case "et": - var imageObj = new Image(); - imageObj.onload = function () { - var et = new Konva.Image({ - x: x, - y: y, - image: imageObj, - width: imageWidth, - height: imageHeight, - id: id, - }); - - - layer.add(et); - layer.batchDraw(); - }; - imageObj.src = pathImg + imageLogiqueEt; - imageObj.id = id; - break; - case "ou": - var imageObj = new Image(); - imageObj.onload = function () { - var et = new Konva.Image({ - x: x, - y: y, - image: imageObj, - width: imageWidth, - height: imageHeight, - id: id, - }); - - - layer.add(et); - layer.batchDraw(); - }; - imageObj.src = pathImg + imageLogiqueOu; - imageObj.id = id; - break; - } - - - - var logique = { - name: id, - x: x, - y: y, - type: type, - id1: null, - id2: null, - id3: null, - } - logiques.push(logique); + switch (type) { + case "et": + var imageObj = new Image(); + imageObj.onload = function () { + var et = new Konva.Image({ + x: x, + y: y, + image: imageObj, + width: imageWidth, + height: imageHeight, + id: id, + }); + + + layer.add(et); + layer.batchDraw(); + }; + imageObj.src = pathImg + imageLogiqueEt; + imageObj.id = id; + break; + case "ou": + var imageObj = new Image(); + imageObj.onload = function () { + var et = new Konva.Image({ + x: x, + y: y, + image: imageObj, + width: imageWidth, + height: imageHeight, + id: id, + }); + + + layer.add(et); + layer.batchDraw(); + }; + imageObj.src = pathImg + imageLogiqueOu; + imageObj.id = id; + break; + } + + + + var logique = { + name: id, + x: x, + y: y, + type: type, + id1: null, + id2: null, + id3: null, + } + logiques.push(logique); } diff --git a/site/js/init.js b/site/js/init.js index 149f9a6..9a6e20e 100644 --- a/site/js/init.js +++ b/site/js/init.js @@ -8,6 +8,12 @@ function initAllSwitch(){ checkAllSortieLogique(); layer.draw(); }); + switche.on('mouseover', function () { + document.body.style.cursor = "pointer"; + }); + switche.on('mouseout', function () { + document.body.style.cursor = "default"; + }); }); }