Skip to content

Commit

Permalink
#427 Expandable Tools
Browse files Browse the repository at this point in the history
  • Loading branch information
@tariqksoliman
tariqksoliman committed Sep 27, 2023
1 parent 3bc3e94 commit bedd317
Show file tree
Hide file tree
Showing 8 changed files with 137 additions and 33 deletions.
38 changes: 26 additions & 12 deletions src/essence/Basics/ToolController_/ToolController_.js
View file
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -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)
}
}
Expand Down Expand Up @@ -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]
)
Expand Down Expand Up @@ -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 {
Expand Down
88 changes: 87 additions & 1 deletion src/essence/Basics/UserInterface_/UserInterface_.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ var UserInterface = {
toolsScreen: null,
toolsSplit: null,
toolbar: null,
toolPanel: null,
toolPanelDrag: null,
helpOn: true,
layerUpdatedControl: null,
init: function () {
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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)'
Expand All @@ -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 () {
Expand Down
5 changes: 3 additions & 2 deletions src/essence/Tools/Draw/DrawTool.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
#drawToolNav {
padding: 0px 10px;
height: 41px;
margin-right: 15px;
display: flex;
justify-content: space-between;
text-align: center;
Expand All @@ -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);
}
Expand Down Expand Up @@ -385,7 +386,7 @@
}
#drawToolDrawFilter {
border: none;
width: 230px;
width: 100%;
padding: 0px 4px;
height: 30px;
background: var(--color-a1);
Expand Down
3 changes: 2 additions & 1 deletion src/essence/Tools/Draw/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,5 +84,6 @@
},
"tests": {
"DrawToolTest": "essence/Tools/Draw/DrawTool.test"
}
},
"expandable": true
}
22 changes: 9 additions & 13 deletions src/essence/Tools/Info/InfoTool.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
#infoToolHeader > div {
display: flex;
}
#infoToolHeader > .right {
display: flex;
margin-right: 24px;
}

#infoToolTitle {
height: 40px;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -129,7 +125,7 @@
}
#infoToolFilter input {
background: var(--color-a1);
width: 266px;
width: calc(100% - 68px);
color: #ccc;
padding-left: 9px;
border: none;
Expand Down
3 changes: 2 additions & 1 deletion src/essence/Tools/Info/config.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@
"toolbarPriority": 3,
"paths": {
"InfoTool": "essence/Tools/Info/InfoTool"
}
},
"expandable": true
}
6 changes: 5 additions & 1 deletion src/essence/Tools/Layers/LayersTool.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@
#layersTool #filterLayers > div {
display: flex;
}
#layersTool #filterLayers > .right {
margin-right: 24px;
}
#layersTool #filterLayers > .right > div {
width: 24px;
height: 28px;
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions src/essence/Tools/Layers/config.json
View file
Original file line number Diff line number Diff line change
@@ -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]"
Expand All @@ -12,5 +12,6 @@
"toolbarPriority": 1,
"paths": {
"LayersTool": "essence/Tools/Layers/LayersTool"
}
},
"expandable": true
}

0 comments on commit bedd317

Please sign in to comment.