From 3ca88d2b78902cbf2ae144f5a78124d93f226d0c Mon Sep 17 00:00:00 2001 From: therealharshit Date: Mon, 18 Nov 2024 00:39:31 +0530 Subject: [PATCH 1/6] Fixes #4063 Canvas is scrolling on drag and select --- js/activity.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/activity.js b/js/activity.js index 1fa535ab5..cd9e0351a 100644 --- a/js/activity.js +++ b/js/activity.js @@ -1961,7 +1961,7 @@ class Activity { that.stageX = event.stageX; that.stageY = event.stageY; - if (!that.moving) return; + if (!moving) return; // if we are moving the block container, deselect the active block. // Deselect active block if moving the block container From fc6eaac9ee1f8ae0a1fbfcbcec34e6a8b3437b78 Mon Sep 17 00:00:00 2001 From: therealharshit Date: Thu, 21 Nov 2024 20:47:16 +0530 Subject: [PATCH 2/6] add left-click to scroll and right-click to select --- js/activity.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/js/activity.js b/js/activity.js index cd9e0351a..14178c212 100644 --- a/js/activity.js +++ b/js/activity.js @@ -1961,7 +1961,7 @@ class Activity { that.stageX = event.stageX; that.stageY = event.stageY; - if (!moving) return; + if (!that.moving) return; // if we are moving the block container, deselect the active block. // Deselect active block if moving the block container @@ -6062,6 +6062,8 @@ class Activity { document.addEventListener( "mousedown", (event) => { + if (event.button !==2) return; + this.moving = false; // event.preventDefault(); // event.stopPropagation(); if (event.target.id === "myCanvas") { @@ -6114,6 +6116,8 @@ class Activity { document.addEventListener("mouseup", (event) => { // event.preventDefault(); + if (event.button !== 2) return; + this.moving = true; this.isDragging = false; this.selectionArea.style.display = "none"; this.startX = 0; From 75f615ad09340beae6c2e851b4c1c8c76770fd63 Mon Sep 17 00:00:00 2001 From: therealharshit Date: Mon, 25 Nov 2024 00:13:59 +0530 Subject: [PATCH 3/6] add select button --- js/activity.js | 7 +++++-- js/artwork.js | 3 +++ js/turtles.js | 22 ++++++++++++++++++++++ 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/js/activity.js b/js/activity.js index 14178c212..9964d1537 100644 --- a/js/activity.js +++ b/js/activity.js @@ -260,6 +260,9 @@ class Activity { // Flag to indicate whether the user is performing a 2D drag operation. this.isDragging = false; + // Flag to indicate whether user is selecting + this.isSelecting = false; + // Flag to indicate the selection mode is on this.selectionModeOn = false; @@ -492,7 +495,7 @@ class Activity { (event) => { event.preventDefault(); event.stopPropagation(); - if (!this.beginnerMode) { + if (!this.beginnerMode && !this.isSelecting) { if (event.target.id === "myCanvas") { this._displayHelpfulWheel(event); } @@ -6101,7 +6104,7 @@ class Activity { this.hasMouseMoved = true; // event.preventDefault(); // this.selectedBlocks = []; - if (this.isDragging){ + if (this.isDragging && this.isSelecting){ this.currentX = event.clientX; this.currentY = event.clientY; if (!this.blocks.isBlockMoving && !this.turtles.running()) { diff --git a/js/artwork.js b/js/artwork.js index 04f8367e4..cc85d3db1 100644 --- a/js/artwork.js +++ b/js/artwork.js @@ -359,6 +359,9 @@ const BLOCKSPALETTEICON = BOXESPALETTEICON; const CARTESIANBUTTON = 'アセット 33'; +const SELECTBUTTON = + '' + const CARTESIANPOLARBUTTON = 'アセット 30'; diff --git a/js/turtles.js b/js/turtles.js index 3fd2161e0..d47d7f2a4 100644 --- a/js/turtles.js +++ b/js/turtles.js @@ -577,6 +577,7 @@ Turtles.TurtlesView = class { this._collapseButton = null; // used by add method this._clearButton = null; // used by add method this.gridButton = null; // used by add method + this.selectButton = null; // used to enable select mode this.collapse = null; this.expand = null; @@ -871,6 +872,26 @@ Turtles.TurtlesView = class { this.activity.refreshCanvas(); }; + /** + * Makes 'select' button by initailising 'SELECTBUTTON' SVG. + * Toggles isSelecting on click. + */ + const __makeSelectButton = () => { + this.selectButton = _makeButton( + SELECTBUTTON, + { + "name":"Select", + "label":_("Select") + }, + this._w - 10 - 4 * 55, + 70 + LEADING + 6 + ); + const that = this; + this.selectButton.onclick = () => { + this.activity.isSelecting = !this.activity.isSelecting; + }; + }; + /** * Makes 'cartesian' button by initailising 'CARTESIANBUTTON' SVG. * Assigns click listener function to doGrid() method. @@ -1170,6 +1191,7 @@ Turtles.TurtlesView = class { __makeExpandButton(); __makeClearButton(); __makeGridButton(); + __makeSelectButton(); jQuery.noConflict()(".tooltipped").each(function(){ jQuery.noConflict()(this).tooltip( { From c8ac9c6cf3d665c6ca7f436a880bc4b166dd50d9 Mon Sep 17 00:00:00 2001 From: therealharshit Date: Tue, 26 Nov 2024 23:51:29 +0530 Subject: [PATCH 4/6] add select to right-hand menu --- js/activity.js | 15 +++++++++++---- js/turtles.js | 22 ---------------------- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/js/activity.js b/js/activity.js index 9964d1537..a72a9e21b 100644 --- a/js/activity.js +++ b/js/activity.js @@ -495,7 +495,7 @@ class Activity { (event) => { event.preventDefault(); event.stopPropagation(); - if (!this.beginnerMode && !this.isSelecting) { + if (!this.beginnerMode) { if (event.target.id === "myCanvas") { this._displayHelpfulWheel(event); } @@ -5719,6 +5719,9 @@ class Activity { if (!this.helpfulWheelItems.find(ele => ele.label === "Grid")) this.helpfulWheelItems.push({label: "Grid", icon: "imgsrc:data:image/svg+xml;base64," + window.btoa(base64Encode(CARTESIANBUTTON)), display: true, fn: piemenuGrid}); + + if (!this.helpfulWheelItems.find(ele => ele.label === "Select")) + this.helpfulWheelItems.push({label: "Select", icon: "imgsrc:data:image/svg+xml;base64," + window.btoa(base64Encode(SELECTBUTTON)), display: true, fn: this.selectMode }); if (!this.helpfulWheelItems.find(ele => ele.label === "Clean")) this.helpfulWheelItems.push({label: "Clean", icon: "imgsrc:data:image/svg+xml;base64," + window.btoa(base64Encode(CLEARBUTTON)), display: true, fn: () => this._allClear(false)}); @@ -6065,7 +6068,7 @@ class Activity { document.addEventListener( "mousedown", (event) => { - if (event.button !==2) return; + if (!this.isSelecting) return; this.moving = false; // event.preventDefault(); // event.stopPropagation(); @@ -6087,6 +6090,11 @@ class Activity { // end the drag on navbar document.getElementById("toolbars").addEventListener("mouseover", () => {this.isDragging = false;}); + this.selectMode = () => { + this.isSelecting = !this.isSelecting;; + if (this.moving) this.moving = false; + } + this._create2Ddrag = () => { this.dragArea = {}; this.selectedBlocks = []; @@ -6119,8 +6127,7 @@ class Activity { document.addEventListener("mouseup", (event) => { // event.preventDefault(); - if (event.button !== 2) return; - this.moving = true; + if (!this.isSelecting) return; this.isDragging = false; this.selectionArea.style.display = "none"; this.startX = 0; diff --git a/js/turtles.js b/js/turtles.js index d47d7f2a4..3fd2161e0 100644 --- a/js/turtles.js +++ b/js/turtles.js @@ -577,7 +577,6 @@ Turtles.TurtlesView = class { this._collapseButton = null; // used by add method this._clearButton = null; // used by add method this.gridButton = null; // used by add method - this.selectButton = null; // used to enable select mode this.collapse = null; this.expand = null; @@ -872,26 +871,6 @@ Turtles.TurtlesView = class { this.activity.refreshCanvas(); }; - /** - * Makes 'select' button by initailising 'SELECTBUTTON' SVG. - * Toggles isSelecting on click. - */ - const __makeSelectButton = () => { - this.selectButton = _makeButton( - SELECTBUTTON, - { - "name":"Select", - "label":_("Select") - }, - this._w - 10 - 4 * 55, - 70 + LEADING + 6 - ); - const that = this; - this.selectButton.onclick = () => { - this.activity.isSelecting = !this.activity.isSelecting; - }; - }; - /** * Makes 'cartesian' button by initailising 'CARTESIANBUTTON' SVG. * Assigns click listener function to doGrid() method. @@ -1191,7 +1170,6 @@ Turtles.TurtlesView = class { __makeExpandButton(); __makeClearButton(); __makeGridButton(); - __makeSelectButton(); jQuery.noConflict()(".tooltipped").each(function(){ jQuery.noConflict()(this).tooltip( { From fd72e2e0e45e74bbd84a15c91bd70b58e871846b Mon Sep 17 00:00:00 2001 From: therealharshit Date: Wed, 27 Nov 2024 00:01:32 +0530 Subject: [PATCH 5/6] change the color of select button --- js/artwork.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/artwork.js b/js/artwork.js index cc85d3db1..f92c53962 100644 --- a/js/artwork.js +++ b/js/artwork.js @@ -360,7 +360,7 @@ const CARTESIANBUTTON = 'アセット 33'; const SELECTBUTTON = - '' + '' const CARTESIANPOLARBUTTON = 'アセット 30'; From 3f7385052d3c540b6ed82a0e04e86c7584555bef Mon Sep 17 00:00:00 2001 From: therealharshit Date: Wed, 27 Nov 2024 20:01:10 +0530 Subject: [PATCH 6/6] add textMsg --- js/activity.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/js/activity.js b/js/activity.js index a72a9e21b..5465e6e5b 100644 --- a/js/activity.js +++ b/js/activity.js @@ -6091,8 +6091,9 @@ class Activity { document.getElementById("toolbars").addEventListener("mouseover", () => {this.isDragging = false;}); this.selectMode = () => { - this.isSelecting = !this.isSelecting;; - if (this.moving) this.moving = false; + this.moving = false; + this.isSelecting = !this.isSelecting; + (this.isSelecting) ? this.textMsg(_("Select is enabled")) : this.textMsg(_("Select is disabled")); } this._create2Ddrag = () => {