feat: make scenery decor draggable (#1634)

* make scenery decor draggable * test functionality, remove redundant code * debug test * debug test, fix some terminology * undo unnecessary changes * fix typo * adjust for size of canvas * address PR comments
ocadotechnology · Jun 5, 2024 · 09853af · 09853af
1 parent 1026039
commit 09853af
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 3 deletions.
diff --git a/game/end_to_end_tests/editor_page.py b/game/end_to_end_tests/editor_page.py
@@ -21,3 +21,6 @@ def dismiss_dialog(self, button_id):
 
     def go_to_code_tab(self):
         self.browser.find_element(By.ID, "blocks_tab").click()
+
+    def go_to_scenery_tab(self):
+        self.browser.find_element(By.ID, "scenery_tab").click()
diff --git a/game/end_to_end_tests/test_level_editor.py b/game/end_to_end_tests/test_level_editor.py
@@ -94,3 +94,16 @@ def test_cow_on_house(self):
         ActionChains(self.selenium).click_and_hold(draggable_cow).move_to_element(road_end).perform()
         allowed_space = self.selenium.find_elements(By.CSS_SELECTOR, "rect[fill='#87e34d']")
         assert len(allowed_space) == 0
+
+    def test_draggable_decor(self):
+        page = self.go_to_level_editor()
+        page.go_to_scenery_tab()
+
+        source_tree = self.selenium.find_element(By.ID, "tree2")
+        end_space = self.selenium.find_element(By.CSS_SELECTOR, "rect[x='130'][y='530']")
+        ActionChains(self.selenium).drag_and_drop(source_tree, end_space).perform()
+
+        decor_tree = self.selenium.find_elements(By.CSS_SELECTOR, "image[x='0'][y='0']")
+        cloned_source_tree = self.selenium.find_elements(By.ID, "tree2")
+        assert len(decor_tree) == 1
+        assert len(cloned_source_tree) == 1
diff --git a/game/static/game/css/game_screen.css b/game/static/game/css/game_screen.css
@@ -494,6 +494,13 @@ div.no-print div.tab label {
 
 #tab_panes_wrapper .tab_pane {
   padding: 20px 20px 0 30px;
+  overflow: scroll;
+  position: absolute;
+  width: 380px;
+}
+
+#scenery_pane {
+  overflow: visible !important;
 }
 
 .tab_break {

diff --git a/game/static/game/js/level_editor.js b/game/static/game/js/level_editor.js
@@ -8,6 +8,8 @@ ocargo.LevelEditor = function(levelId) {
     /* Constants */
     /*************/
 
+    const TAB_PANE_WIDTH = 500;
+
     var LIGHT_RED_URL = ocargo.Drawing.raphaelImageDir + 'trafficLight_red.svg';
     var LIGHT_GREEN_URL = ocargo.Drawing.raphaelImageDir + 'trafficLight_green.svg';
 
@@ -318,9 +320,7 @@ ocargo.LevelEditor = function(levelId) {
                 }
             });
 
-            $('.decor_button').click(function(e){
-                new InternalDecor(e.target.id);
-            });
+            $('.decor_button').mousedown(handleDraggableDecorMouseDown);
 
             $('#trafficLightRed').click(function() {
                 new InternalTrafficLight({"redDuration": 3, "greenDuration": 3, "startTime": 0,
@@ -1515,6 +1515,52 @@ ocargo.LevelEditor = function(levelId) {
         addReleaseListeners(image.node);
     }
 
+    function handleDraggableDecorMouseDown(e){
+        e.preventDefault();
+
+        window.dragged_decor = {};
+        dragged_decor.pageX0 = e.pageX;
+        dragged_decor.pageY0 = e.pageY;
+        dragged_decor.elem = this;
+        dragged_decor.offset0 = $(this).offset();
+        dragged_decor.width = parseInt(currentTheme.decor[this.id].width);
+        dragged_decor.height = parseInt(currentTheme.decor[this.id].height);
+        dragged_decor.parent = this.parentElement;
+
+        const clone = $(this).clone(true);
+
+        function handleDraggableDecorDragging(e){
+            const left = dragged_decor.offset0.left + (e.pageX - dragged_decor.pageX0);
+            const top = dragged_decor.offset0.top + (e.pageY - dragged_decor.pageY0);
+            $(dragged_decor.elem).offset({top: top, left: left});
+        }
+
+        function handleDraggableDecorMouseUp(e){
+            if (dragged_decor.elem.id !== null) {
+                // only create decor object if dropped within the grid canvas. 
+                // object location is relative to the whole page, so need to factor in paper and padding size, grid canvas scroll amount, width of toolbar, etc.
+                if (e.pageX >= (TAB_PANE_WIDTH + PAPER_PADDING) 
+                        && (e.pageY + paper.scrollTop() + dragged_decor.height / 2) <= (PAPER_HEIGHT + PAPER_PADDING) 
+                        && (e.pageX + paper.scrollLeft() + dragged_decor.width / 2) <= (TAB_PANE_WIDTH + PAPER_WIDTH + PAPER_PADDING)
+                    ) {
+                    let decorObject = new InternalDecor(dragged_decor.elem.id);
+                    decorObject.setPosition(e.pageX + paper.scrollLeft() - TAB_PANE_WIDTH - dragged_decor.width / 2, e.pageY + paper.scrollTop() - dragged_decor.height / 2);
+                }
+            }
+
+            $(document)
+            .off('mousemove', handleDraggableDecorDragging)
+            .off('mouseup mouseleave', handleDraggableDecorMouseUp);
+
+            $(dragged_decor.elem).remove();
+            $(clone).appendTo(dragged_decor.parent);
+        }
+
+        $(document)
+        .on('mouseup mouseleave', handleDraggableDecorMouseUp)
+        .on('mousemove', handleDraggableDecorDragging);
+    }
+
     function setupCowListeners(cow) {
         var image = cow.image;