Skip to content

Commit

Permalink
menu for magnets #248
Browse files Browse the repository at this point in the history
  • Loading branch information
Francois Schwarzentruber committed Jul 8, 2023
1 parent d8186ec commit c872247
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 31 deletions.
48 changes: 27 additions & 21 deletions src/GUIActions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export class GUIActions {

static previousColor(calledFromKeyBoard = false): void {
if (!UserManager.me.tool.isDrawing && (GUIActions.paletteShowOnKey || !calledFromKeyBoard))
GUIActions.palette.show({ x: UserManager.me.tool.x, y: UserManager.me.tool.y });
GUIActions.palette.show({ x: UserManager.me.tool.x, y: UserManager.me.tool.y });
GUIActions.palette.previous();
}

Expand Down Expand Up @@ -134,48 +134,54 @@ export class GUIActions {
static magnetDecreaseSize(): void { GUIActions.magnetChangeSize(0.9); }


/** get the magnet under the cursor for magnet that are in the background (cannot use the standard mousemove
* because these magnets are hidden by the canvas) */
static getMagnetBackgroundUnderCursor(x: number, y: number) {
const magnetGetRectangle = (m: HTMLElement) => {
const x1 = parseInt(m.style.left);
const y1 = parseInt(m.style.top);
return { x1: x1, y1: y1, x2: x1 + m.clientWidth, y2: y1 + m.clientHeight };
}

const magnets = MagnetManager.getMagnets();
for (let i = 0; i < magnets.length; i++) {
const m = magnets[i];
if (S.inRectangle({ x: x, y: y }, magnetGetRectangle(m))) {
return m;
}
}
return undefined;
}

/**
* switch the "background/foreground state" of the magnet under the cursor
* if the magnet is in the foreground, it moves that magnet background
* if the magnet is in the background, it moves that magnet foreground
*/
static magnetSwitchBackgroundForeground(): void {
const magnetGetRectangle = (m: HTMLElement) => {
const x1 = parseInt(m.style.left);
const y1 = parseInt(m.style.top);
return { x1: x1, y1: y1, x2: x1 + m.clientWidth, y2: y1 + m.clientHeight };
}



const switchBackgroundForegroundOfMagnet = (m: HTMLElement) => {
Share.execute("magnetSwitchBackgroundForeground", [UserManager.me.userID, m.id])
}

/** get the magnet under the cursor for magnet that are in the background (cannot use the standard mousemove
* because these magnets are hidden by the canvas) */
const getMagnetBackgroundUnderCursor = () => {
const magnets = MagnetManager.getMagnets();
for (let i = 0; i < magnets.length; i++) {
const m = magnets[i];
if (S.inRectangle({ x: x, y: y }, magnetGetRectangle(m))) {
return m;
}
}
return undefined;
}

const magnet = MagnetManager.getMagnetUnderCursor();
const x = UserManager.me.x;
const y = UserManager.me.y;
console.log(x, y);


if (magnet == undefined) {
const m = getMagnetBackgroundUnderCursor();
const m = GUIActions.getMagnetBackgroundUnderCursor(x, y);
if (m)
switchBackgroundForegroundOfMagnet(m);
}
else switchBackgroundForegroundOfMagnet(magnet);

else {
switchBackgroundForegroundOfMagnet(magnet);
MagnetManager.magnetUnderCursor = undefined;
}
}

}
2 changes: 2 additions & 0 deletions src/KeyBoardShortCuts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ export class KeyBoardShortCuts {
CircularMenu.hide();
else if (AnimationToolBar.isMenu())
AnimationToolBar.hideMenu();
else if (MagnetManager.isMenu())
MagnetManager.hideMenu();
else if (AnimationToolBar.is() && AnimationToolBar.isSelection())
AnimationToolBar.deselect();
else
Expand Down
12 changes: 12 additions & 0 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,18 @@
</div>


<div id="contextMenuMagnet" class="contextmenu" style="display: none">
<ul class="menu">
<li id="contextMenuMagnetBackground"
title="Move the magnet in the background (behind the board)"><img
src="img/icons/magnetbackground.svg">Move magnet to background (b)</li>
<li id="contextMenuMagnetForeground"
title="Move the magnet in the foreground (in front of the board)"><img
src="img/icons/magnetforeground.svg">Move magnet to foreground (b)</li>
<li id="contextMenuMagnetRemove" title="Remove the magnet"><img
src="img/icons/E262.svg">Remove the magnet</li>
</ul>
</div>

<div id="contextMenuTimeLine" class="contextmenu" style="display: none">
<ul class="menu">
Expand Down
79 changes: 77 additions & 2 deletions src/magnetManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { Layout } from './Layout';
import { Menu } from './Menu';
import { TouchScreen } from './TouchScreen';
import { ActionPrintMagnet } from './ActionPrintMagnet';
import { GUIActions } from './GUIActions';



Expand Down Expand Up @@ -621,6 +622,64 @@ export class MagnetManager {
return Array.from(content.children).map((e) => e.textContent).join('\n');
}


static hideMenu(): void { document.getElementById("contextMenuMagnet").style.display = "none" }
static isMenu(): boolean { return document.getElementById("contextMenuMagnet").style.display == "block"; }

static showMenu(x: number, y: number): void {
/*if (AnimationToolBar.menu == undefined)
AnimationToolBar.menu = new ActionTimeLineMenu();
AnimationToolBar.menu.show({ x: Layout.getXMiddle(), y: 800 });*/

const menu = document.getElementById("contextMenuMagnet")
menu.style.display = 'block';


if (y + menu.clientHeight > window.innerHeight)
y = window.innerHeight - menu.clientHeight;

menu.style.left = x + "px";
menu.style.top = y + "px";


const isCurrentMagnetForeground = MagnetManager.getMagnetUnderCursor() != undefined;

console.log(isCurrentMagnetForeground ? "currently in foreground" : "currently in background")
document.getElementById("contextMenuMagnetBackground").style.display =
(isCurrentMagnetForeground) ? null : "none";
document.getElementById("contextMenuMagnetForeground").style.display =
(!isCurrentMagnetForeground) ? null : "none";

document.getElementById("contextMenuMagnetBackground").onclick = () => {
GUIActions.magnetSwitchBackgroundForeground();
MagnetManager.hideMenu();
}

document.getElementById("contextMenuMagnetForeground").onclick = () => {
GUIActions.magnetSwitchBackgroundForeground();
MagnetManager.hideMenu();
}


if (isCurrentMagnetForeground) {
document.getElementById("contextMenuMagnetRemove").onclick = () => {
MagnetManager.removeCurrentMagnet();
MagnetManager.hideMenu();
}
}
else {
const magnetInBackground = GUIActions.getMagnetBackgroundUnderCursor(x, y);
console.log(magnetInBackground)
document.getElementById("contextMenuMagnetRemove").onclick = () => {
MagnetManager.magnetRemove(magnetInBackground.id);
MagnetManager.hideMenu();
}

}

}


/**
*
* @param element
Expand All @@ -633,9 +692,22 @@ export class MagnetManager {
MagnetManager.makeDraggableElement(element);
MagnetManager.setZIndex(element);

element.onmouseenter = () => { MagnetManager.magnetUnderCursor = element };
element.onmouseleave = () => { MagnetManager.magnetUnderCursor = undefined };
element.onmouseenter = () => {
if (!MagnetManager.isMenu())
MagnetManager.magnetUnderCursor = element
};
element.onmouseleave = () => {
if (!MagnetManager.isMenu())
MagnetManager.magnetUnderCursor = undefined;
};



element.oncontextmenu = (evt) => {
MagnetManager.showMenu(evt.pageX, evt.pageY);
evt.preventDefault();
return;
}
}


Expand All @@ -644,6 +716,9 @@ export class MagnetManager {






/**
* @description remove the current magnet
*/
Expand Down
32 changes: 24 additions & 8 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ function load() {

document.getElementById("buttonRight").onclick = BoardNavigation.rightNextPage;
document.getElementById("buttonMap").onclick = () => Layout.toggleMinimap();

document.getElementById("buttonCancel").onclick = () => BoardManager.cancel(UserManager.me.userID);//Share.execute("cancel", [UserManager.me.userID]);
document.getElementById("buttonRedo").onclick = () => BoardManager.redo(UserManager.me.userID);//Share.execute("redo", [UserManager.me.userID]);

Expand Down Expand Up @@ -144,7 +144,7 @@ function load() {
document.getElementById("previousFrame").onclick = () => Share.execute("timelinePreviousFrame", []);
document.getElementById("nextFrame").onclick = () => Share.execute("timelineNextFrame", []);

window.addEventListener("click", () => AnimationToolBar.hideMenu());
window.addEventListener("click", () => { AnimationToolBar.hideMenu(); MagnetManager.hideMenu() });

installMouseEventsCanvas();

Expand All @@ -171,17 +171,33 @@ function installMouseEventsCanvas() {
hasFocus = document.hasFocus()
}, minDurationMouseMove);

document.getElementById("canvas").oncontextmenu = (evt) => evt.preventDefault();
document.getElementById("canvas").oncontextmenu = (evt) => {
evt.preventDefault();
}

document.getElementById("canvas").onpointerdown = (evt) => {
evt.preventDefault();
if (hasFocus) {
ismousedown = true;
if (evt.button == 2 && UserManager.me.isToolDraw) {
changeToErase = true;
Share.execute("switchEraser", [UserManager.me.userID]);
const rightButton = (evt.button == 2);
changeToErase = false;

const magnetInBackground = GUIActions.getMagnetBackgroundUnderCursor(UserManager.me.x, UserManager.me.y);
console.log(magnetInBackground)
if (rightButton) {
if (magnetInBackground) {
MagnetManager.showMenu(evt.pageX+1, evt.pageY+1); //the +1 are here for evt.preventDefault() to work (not showing the ctx menu of the browser)
ismousedown = false;
return;
}
else if (UserManager.me.isToolDraw) {
changeToErase = true;
Share.execute("switchEraser", [UserManager.me.userID]);
}
else
changeToErase = false;
}
else
changeToErase = false;

window["ismousedown"] = true;
Share.execute("mousedown", [UserManager.me.userID, evt])
}
Expand Down

0 comments on commit c872247

Please sign in to comment.