#427 Expandable Tools

src/essence/Basics/ToolController_/ToolController_.js

@@ -1,7 +1,7 @@
 import $ from 'jquery'
 import * as d3 from 'd3'
 import L_ from '../Layers_/Layers_'
-import { toolModules } from '../../../pre/tools'
+import { toolModules, toolConfigs } from '../../../pre/tools'
 
 import tippy from 'tippy.js'
 
@@ -98,12 +98,16 @@ let ToolController_ = {
                                     else tM.destroy()
 
                                     // Dispatch `toggleSeparatedTool` event
-                                    let _event = new CustomEvent('toggleSeparatedTool', {
-                                        detail: {
-                                            toggledToolName: ToolController_.tools[i].js,
-                                            visible: tM.made,
-                                        },
-                                    })
+                                    let _event = new CustomEvent(
+                                        'toggleSeparatedTool',
+                                        {
+                                            detail: {
+                                                toggledToolName:
+                                                    ToolController_.tools[i].js,
+                                                visible: tM.made,
+                                            },
+                                        }
+                                    )
                                     document.dispatchEvent(_event)
                                 }
                             }
@@ -165,6 +169,16 @@ let ToolController_ = {
                                         background: ToolController_.activeBG,
                                     })
                                 }
+
+                                // Toggle drag handle
+                                $('#toolPanelDrag').css(
+                                    'display',
+                                    toolConfigs[tools[i].name]?.expandable ===
+                                        true
+                                        ? 'block'
+                                        : 'none'
+                                )
+
                                 ToolController_.makeTool(
                                     ToolController_.toolModuleNames[i]
                                 )
@@ -256,11 +270,11 @@ let ToolController_ = {
                         this.UserInterface.closeToolPanel()
                     }
                     /*
-              if( this.prevHeight != this.activeTool.height && this.UserInterface != null ) {
-                this.UserInterface.setToolHeight( this.activeTool.height );
-              }
-              this.prevHeight = this.activeTool.height;
-              */
+                    if( this.prevHeight != this.activeTool.height && this.UserInterface != null ) {
+                        this.UserInterface.setToolHeight( this.activeTool.height );
+                    }
+                    this.prevHeight = this.activeTool.height;
+                    */
 
                     this.activeTool.make(this)
                 } else {

src/essence/Basics/UserInterface_/UserInterface_.js

@@ -49,6 +49,8 @@ var UserInterface = {
     toolsScreen: null,
     toolsSplit: null,
     toolbar: null,
+    toolPanel: null,
+    toolPanelDrag: null,
     helpOn: true,
     layerUpdatedControl: null,
     init: function () {
@@ -132,6 +134,66 @@ var UserInterface = {
             .style('transition', 'width 0.2s ease-out')
             .style('overflow', 'hidden')
             .style('z-index', '1400')
+        // Drag
+        this.toolPanelDrag = d3
+            .select('#main-container')
+            .append('div')
+            .attr('id', 'toolPanelDrag')
+            .style('position', 'absolute')
+            .style('width', '24px')
+            .style('height', `28px`)
+            .style('padding', '10px 2px')
+            .style('margin', '0px 3px')
+            .style('text-align', 'center')
+            .style('top', '1px')
+            .style('color', 'var(--color-a3)')
+            .style('overflow', 'hidden')
+            .style('cursor', 'col-resize')
+            .style('display', 'none')
+            .style('z-index', '1400')
+            .style('border-right', '1px solid transparent')
+        this.toolPanelDrag
+            .append('div')
+            .html("<i class='mdi mdi-drag-vertical mdi-18px'></i>")
+        UserInterface.handleToolDragDragging = function (e) {
+            UserInterface.toolDrags.left =
+                UserInterface.toolDrags.offset0.left +
+                (e.pageX - UserInterface.toolDrags.pageX0)
+
+            $('body').css('user-select', 'none')
+
+            UserInterface.toolPanelDrag
+                .style('left', UserInterface.toolDrags.left + 'px')
+                .style('height', '100%')
+                .style('border-right', '2px solid var(--color-a1)')
+        }
+
+        UserInterface.handleToolDragMouseup = function () {
+            $('body')
+                .off('mousemove', UserInterface.handleToolDragDragging)
+                .off('mouseup', UserInterface.handleToolDragMouseup)
+            if (UserInterface.toolDrags?.left != null)
+                UserInterface.resizeToolPanel(
+                    UserInterface.toolDrags.left - UserInterface.topSize + 24
+                )
+            $('body').css('user-select', 'auto')
+            UserInterface.toolPanelDrag
+                .style('color', 'var(--color-a3)')
+                .style('height', '28px')
+                .style('border-right', '1px solid transparent')
+        }
+        UserInterface.handleToolDragMousedown = function (e) {
+            UserInterface.toolDrags = {}
+            UserInterface.toolDrags.pageX0 = e.pageX
+            UserInterface.toolDrags.elem = this
+            UserInterface.toolDrags.offset0 = $(this).offset()
+            UserInterface.toolPanelDrag.style('color', 'var(--color-mmgis)')
+            $('body')
+                .on('mouseup', UserInterface.handleToolDragMouseup)
+                .on('mousemove', UserInterface.handleToolDragDragging)
+        }
+        $('#toolPanelDrag').on('mousedown', this.handleToolDragMousedown)
+
         //Main container div
         this.splitscreens = d3
             .select('#main-container')
@@ -610,6 +672,7 @@ var UserInterface = {
     openToolPanel: function (width) {
         UserInterface.toolPanel.selectAll('*').remove()
         UserInterface.toolPanel.style('width', width + 'px')
+        UserInterface.toolPanelDrag.style('left', width + 10 + 'px')
         UserInterface.splitscreens.style(
             'width',
             'calc(100% - ' + (width + 40) + 'px)'
@@ -622,7 +685,30 @@ var UserInterface = {
         UserInterface.splitscreens.style('left', width + 40 + 'px')
         UserInterface.mainWidth = $('#splitscreens').width()
         UserInterface.mainHeight = $('#splitscreens').height()
-        var pp = UserInterface.getPanelPercents()
+        const pp = UserInterface.getPanelPercents()
+        UserInterface.setPanelPercents(pp.viewer, pp.map, pp.globe)
+    },
+    resizeToolPanel: function (width) {
+        width = Math.max(
+            Math.min(width, window.innerWidth / 2),
+            ToolController_.getTool(ToolController_.activeToolName)?.width ||
+                300
+        )
+        UserInterface.toolPanel.style('width', width + 'px')
+        UserInterface.toolPanelDrag.style('left', width + 10 + 'px')
+        UserInterface.splitscreens.style(
+            'width',
+            'calc(100% - ' + (width + 40) + 'px)'
+        )
+        $('#topBar').css({
+            'padding-left': '0px',
+            'margin-left': `${width + 40}px`,
+            width: `calc(100% - ${width + 40}px)`,
+        })
+        UserInterface.splitscreens.style('left', width + 40 + 'px')
+        UserInterface.mainWidth = $('#splitscreens').width()
+        UserInterface.mainHeight = $('#splitscreens').height()
+        const pp = UserInterface.getPanelPercents()
         UserInterface.setPanelPercents(pp.viewer, pp.map, pp.globe)
     },
     closeToolPanel: function () {

src/essence/Tools/Draw/DrawTool.css

@@ -57,6 +57,7 @@
 #drawToolNav {
     padding: 0px 10px;
     height: 41px;
+    margin-right: 15px;
     display: flex;
     justify-content: space-between;
     text-align: center;
@@ -72,7 +73,7 @@
     line-height: 30px;
     vertical-align: middle;
     cursor: pointer;
-    padding: 6px 6px 5px 4px;
+    padding: 5px 6px 6px 4px;
     color: rgba(255, 255, 255, 0.5);
     transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
 }
@@ -385,7 +386,7 @@
 }
 #drawToolDrawFilter {
     border: none;
-    width: 230px;
+    width: 100%;
     padding: 0px 4px;
     height: 30px;
     background: var(--color-a1);

src/essence/Tools/Draw/config.json

@@ -84,5 +84,6 @@
     },
     "tests": {
         "DrawToolTest": "essence/Tools/Draw/DrawTool.test"
-    }
+    },
+    "expandable": true
 }

src/essence/Tools/Info/InfoTool.css

@@ -17,6 +17,10 @@
 #infoToolHeader > div {
     display: flex;
 }
+#infoToolHeader > .right {
+    display: flex;
+    margin-right: 24px;
+}
 
 #infoToolTitle {
     height: 40px;
@@ -43,11 +47,9 @@
 }
 
 #infoToolUnhideAll {
-    position: absolute;
-    right: 90px;
     cursor: pointer;
     transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
-    width: 40px;
+    width: 30px;
     height: 40px;
     line-height: 40px;
     text-align: center;
@@ -58,12 +60,10 @@
 }
 
 #infoToolHide {
-    position: absolute;
-    right: 60px;
     cursor: pointer;
     color: #999;
     transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
-    width: 40px;
+    width: 30px;
     height: 40px;
     line-height: 40px;
     text-align: center;
@@ -72,23 +72,19 @@
     color: var(--color-red2);
 }
 #infoToolDownload {
-    position: absolute;
-    right: 30px;
     cursor: pointer;
     color: #999;
     transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
-    width: 40px;
+    width: 30px;
     height: 40px;
     line-height: 40px;
     text-align: center;
 }
 #infoToolLocate {
-    position: absolute;
-    right: 00px;
     cursor: pointer;
     color: #999;
     transition: color 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
-    width: 40px;
+    width: 30px;
     height: 40px;
     line-height: 40px;
     text-align: center;
@@ -129,7 +125,7 @@
 }
 #infoToolFilter input {
     background: var(--color-a1);
-    width: 266px;
+    width: calc(100% - 68px);
     color: #ccc;
     padding-left: 9px;
     border: none;

src/essence/Tools/Info/config.json

@@ -12,5 +12,6 @@
     "toolbarPriority": 3,
     "paths": {
         "InfoTool": "essence/Tools/Info/InfoTool"
-    }
+    },
+    "expandable": true
 }

src/essence/Tools/Layers/LayersTool.css

@@ -45,6 +45,9 @@
 #layersTool #filterLayers > div {
     display: flex;
 }
+#layersTool #filterLayers > .right {
+    margin-right: 24px;
+}
 #layersTool #filterLayers > .right > div {
     width: 24px;
     height: 28px;
@@ -86,7 +89,8 @@
 }
 #layersTool #searchLayers input {
     background: var(--color-a1);
-    width: 279px;
+    flex: 1;
+    margin-right: 62px;
     color: #ccc;
     padding-left: 28px;
     border: none;

src/essence/Tools/Layers/config.json

@@ -1,7 +1,7 @@
 {
     "defaultIcon": "buffer",
     "description": "Hierarchically toggle layers on and off and alter their opacities.",
-    "descriptionFull":  {
+    "descriptionFull": {
         "title": "Hierarchically toggle layers on and off and alter their opacities.",
         "example": {
             "expanded": "(bool) is initial state expanded [default false]"
@@ -12,5 +12,6 @@
     "toolbarPriority": 1,
     "paths": {
         "LayersTool": "essence/Tools/Layers/LayersTool"
-    }
+    },
+    "expandable": true
 }