From 56444627146431135bfa926d45947885b21c587f Mon Sep 17 00:00:00 2001 From: AnushaTiwari5 Date: Sat, 21 Oct 2023 20:42:33 -0400 Subject: [PATCH 1/4] no highlight while dragging out of canvas --- src/index.html | 16 ++++++++-------- src/index.ts | 17 +++++++++++++++++ 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index c3e3ab4d..9e6bae48 100644 --- a/src/index.html +++ b/src/index.html @@ -20,7 +20,7 @@ diff --git a/src/index.ts b/src/index.ts index 52ad9bb1..ab16ff45 100644 --- a/src/index.ts +++ b/src/index.ts @@ -32,6 +32,10 @@ ctx.font = "35pt arial"; const cutDisplay = document.getElementById("graphString"); const cutTools = document.getElementById("cutTools"); const atomTools = document.getElementById("atomTools"); +const header = document.getElementById("header"); +const sideBar = document.getElementById("sidebar"); +const toolBar = document.getElementById("toolbar"); +const subBar = document.getElementById("subBar"); window.addEventListener("keydown", keyDownHandler); canvas.addEventListener("mousedown", mouseDownHandler); canvas.addEventListener("mousemove", mouseMoveHandler); @@ -188,6 +192,13 @@ function keyDownHandler(event: KeyboardEvent) { * @param event The mouse down event */ function mouseDownHandler(event: MouseEvent) { + //Add no-highlight class so that mouse moving out from canvas while being pressed down does not + //highlight elements on other areas + header?.classList.add("no-highlight"); + toolBar?.classList.add("no-highlight"); + subBar?.classList.add("no-highlight"); + sideBar?.classList.add("no-highlight"); + switch (modeState) { case "cutMode": cutMouseDown(event); @@ -228,6 +239,12 @@ function mouseMoveHandler(event: MouseEvent) { * @param event The mouse up event */ function mouseUpHandler(event: MouseEvent) { + //Remove no highlight class because mouse is no longer pressed down on canvas + header?.classList.remove("no-highlight"); + toolBar?.classList.remove("no-highlight"); + subBar?.classList.remove("no-highlight"); + sideBar?.classList.remove("no-highlight"); + switch (modeState) { case "cutMode": cutMouseUp(event); From a32612da85aa1c47024fb6f34aeb5326fafcdecb Mon Sep 17 00:00:00 2001 From: AnushaTiwari5 Date: Sat, 21 Oct 2023 20:58:01 -0400 Subject: [PATCH 2/4] highlights only when mousedown in specific div --- src/index.html | 8 ++++---- src/index.ts | 44 +++++++++++++++++++++++++++++++------------- 2 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/index.html b/src/index.html index 9e6bae48..8f9c3843 100644 --- a/src/index.html +++ b/src/index.html @@ -19,10 +19,10 @@ -