#452 Updated Identifier tool to be a separated floating tool

src/essence/Tools/Identifier/IdentifierTool.js

@@ -26,9 +26,46 @@ var IdentifierTool = {
     MMWebGISInterface: null,
     mousemoveTimeout: null,
     mousemoveTimeoutMap: null,
+    targetId: null,
+    made: false,
+    justification: 'left',
     vars: {},
-    make: function () {
+    initialize: function () {
+        //Get tool variables and UI adjustments
+        this.justification = L_.getToolVars('identifier')['justification']
+        var toolContent = d3.select('#toolSeparated_Identifier')
+        toolContent.style('bottom', '2px')
+        if (this.justification == 'right') {
+            var toolController = d3.select('#toolcontroller_sepdiv')
+            toolController.style('top', '110px')
+            toolController.style('left', null)
+            toolController.style('right', '5px')
+            toolContent.style('left', null)
+            toolContent.style('right', '0px')
+        } else if (this.justification != L_.getToolVars('legend')['justification']) {
+            var toolController = d3.select('#toolcontroller_sepdiv').clone(false).attr('id', 'toolcontroller_sepdiv_left')
+            $('#toolSeparated_Identifier').appendTo('#toolcontroller_sepdiv_left')
+            toolController.style('top', '40px')
+            toolController.style('left', '5px')
+            toolController.style('right', null)
+        }
+    },   
+    make: function (targetId) {
         this.MMWebGISInterface = new interfaceWithMMWebGIS()
+        this.targetId = targetId
+        this.activeLayerNames = []
+
+        L_.subscribeOnLayerToggle('IdentifierTool', () => {
+            this.MMWebGISInterface = new interfaceWithMMWebGIS()
+        })
+
+        this.made = true
+
+        L_.subscribeOnLayerToggle('IdentifierTool', () => {
+            this.MMWebGISInterface = new interfaceWithMMWebGIS()
+        })
+
+        this.made = true
 
         //Get tool variables
         this.varsRaw = L_.getToolVars('identifier', true)
@@ -69,6 +106,9 @@ var IdentifierTool = {
     },
     destroy: function () {
         this.MMWebGISInterface.separateFromMMWebGIS()
+        this.targetId = null
+        L_.unsubscribeOnLayerToggle('IdentifierTool')
+        this.made = false
     },
     fillURLParameters: function (url, layerUUID) {
         if (IdentifierTool.vars.data?.[layerUUID]?.data?.[0]) {
@@ -456,11 +496,21 @@ function interfaceWithMMWebGIS() {
 
     //Share everything. Don't take things that aren't yours.
     // Put things back where you found them.
-    function separateFromMMWebGIS() {
-        CursorInfo.hide()
 
-        d3.select('#map').style('cursor', previousCursor)
+    var newActive = $(
+        '#toolcontroller_sepdiv #' +
+            'Identifier' +
+            'Tool'
+    )
+    newActive.addClass('active').css({
+        color: ToolController_.activeColor,
+    })
+    newActive.parent().css({
+        background: ToolController_.activeBG,
+    })
 
+    function separateFromMMWebGIS() {
+        CursorInfo.hide()
         Map_.map.off('mousemove', IdentifierTool.idPixelMap)
         //Globe_.shouldRaycastSprites = true
         if (L_.hasGlobe) {
@@ -469,6 +519,30 @@ function interfaceWithMMWebGIS() {
                 .getContainer()
                 .removeEventListener('mousemove', IdentifierTool.idPixelGlobe)
         }
+
+        if (IdentifierTool.targetId === 'toolContentSeparated_Identifier') {
+            d3.select('#map').style('cursor', 'grab')
+            let tools = d3.select(
+                IdentifierTool.targetId ? `#${IdentifierTool.targetId}` : '#toolPanel'
+            )
+            tools.style('background', 'var(--color-k)')
+            //Clear it
+            tools.selectAll('*').remove()
+            var prevActive = $(
+                '#toolcontroller_sepdiv #' +
+                    'Identifier' +
+                    'Tool'
+            )
+            prevActive.removeClass('active').css({
+                color: ToolController_.defaultColor,
+                background: 'none',
+            })
+            prevActive.parent().css({
+                background: 'none',
+            })
+        } else {
+            d3.select('#map').style('cursor', previousCursor)
+        }
     }
 }
 

src/essence/Tools/Identifier/config.json

@@ -16,6 +16,8 @@
     },
     "hasVars": true,
     "name": "Identifier",
+    "toolbarPriority": 1,
+    "separatedTool": true,
     "paths": {
         "IdentifierTool": "essence/Tools/Identifier/IdentifierTool"
     }

src/essence/Tools/Legend/LegendTool.js

@@ -27,7 +27,13 @@ var LegendTool = {
             toolController.style('right', '5px')
             toolContent.style('left', null)
             toolContent.style('right', '0px')
-        }        
+        } else if (this.justification != L_.getToolVars('identifier')['justification']) {
+            var toolController = d3.select('#toolcontroller_sepdiv').clone(false).attr('id', 'toolcontroller_sepdiv_left')
+            $('#toolSeparated_Legend').appendTo('#toolcontroller_sepdiv_left')
+            toolController.style('top', '40px')
+            toolController.style('left', '5px')
+            toolController.style('right', null)
+        }
     },
     make: function (targetId) {
         this.targetId = targetId