From bedd31722671dce6dec51c0dc8a10c8f286046d2 Mon Sep 17 00:00:00 2001 From: tariqksoliman Date: Wed, 27 Sep 2023 10:35:11 -0700 Subject: [PATCH] #427 Expandable Tools --- .../Basics/ToolController_/ToolController_.js | 38 +++++--- .../Basics/UserInterface_/UserInterface_.js | 88 ++++++++++++++++++- src/essence/Tools/Draw/DrawTool.css | 5 +- src/essence/Tools/Draw/config.json | 3 +- src/essence/Tools/Info/InfoTool.css | 22 ++--- src/essence/Tools/Info/config.json | 3 +- src/essence/Tools/Layers/LayersTool.css | 6 +- src/essence/Tools/Layers/config.json | 5 +- 8 files changed, 137 insertions(+), 33 deletions(-) diff --git a/src/essence/Basics/ToolController_/ToolController_.js b/src/essence/Basics/ToolController_/ToolController_.js index b0df9ba7..a335eac2 100644 --- a/src/essence/Basics/ToolController_/ToolController_.js +++ b/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 { diff --git a/src/essence/Basics/UserInterface_/UserInterface_.js b/src/essence/Basics/UserInterface_/UserInterface_.js index e1b38268..91a7c6db 100644 --- a/src/essence/Basics/UserInterface_/UserInterface_.js +++ b/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("") + 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 () { diff --git a/src/essence/Tools/Draw/DrawTool.css b/src/essence/Tools/Draw/DrawTool.css index fc3772a9..76e4b52f 100644 --- a/src/essence/Tools/Draw/DrawTool.css +++ b/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); diff --git a/src/essence/Tools/Draw/config.json b/src/essence/Tools/Draw/config.json index fc5f96c7..c68e7d06 100644 --- a/src/essence/Tools/Draw/config.json +++ b/src/essence/Tools/Draw/config.json @@ -84,5 +84,6 @@ }, "tests": { "DrawToolTest": "essence/Tools/Draw/DrawTool.test" - } + }, + "expandable": true } diff --git a/src/essence/Tools/Info/InfoTool.css b/src/essence/Tools/Info/InfoTool.css index de70927a..c45547aa 100644 --- a/src/essence/Tools/Info/InfoTool.css +++ b/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; diff --git a/src/essence/Tools/Info/config.json b/src/essence/Tools/Info/config.json index 9109a57a..53d09cbd 100644 --- a/src/essence/Tools/Info/config.json +++ b/src/essence/Tools/Info/config.json @@ -12,5 +12,6 @@ "toolbarPriority": 3, "paths": { "InfoTool": "essence/Tools/Info/InfoTool" - } + }, + "expandable": true } diff --git a/src/essence/Tools/Layers/LayersTool.css b/src/essence/Tools/Layers/LayersTool.css index c4e02d19..85f1fee7 100644 --- a/src/essence/Tools/Layers/LayersTool.css +++ b/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; diff --git a/src/essence/Tools/Layers/config.json b/src/essence/Tools/Layers/config.json index 4c161d83..3caff1db 100644 --- a/src/essence/Tools/Layers/config.json +++ b/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 }