Move sidebar to subcontrols so that DungeonDraw will not conflict wit…

…h the camera views (#125) * Move sidebar to subcontrols. * Clean up some unnecessary changes. * Remove private method access. Remove unnecessary options merging. * Apply fixed position to not push scene controls. * Fix cursors. * Add button roles.
mcglincy · Mar 30, 2024 · 4e3b6da · 4e3b6da
1 parent e10fb9b
commit 4e3b6da
Show file tree

Hide file tree

Showing 9 changed files with 823 additions and 519 deletions.
diff --git a/modules/dungeondraw-bundle.min.js b/modules/dungeondraw-bundle.min.js
diff --git a/modules/dungeondraw-bundle.min.js.map b/modules/dungeondraw-bundle.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,22 +3,23 @@
   "description": "Dungeon Draw module for Foundry VTT",
   "license": "MIT",
   "author": "mcglintlock",
+  "type": "module",
   "dependencies": {
     "2d-dungeon": "0.0.7",
     "dungeoneer": "^2.1.5",
     "jsts": "^2.8.1",
     "rot-js": "^2.2.0"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@typhonjs-fvtt/eslint-config-foundry.js": "^0.8.0",
     "eslint": "^8.4.0",
     "husky": "^7.0.4",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
-    "rollup": "^2.60.2",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-terser": "^7.0.2"
+    "rollup": "^4.13.0",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-terser": "^0.4.4"
   },
   "scripts": {
     "build": "rollup --config",

diff --git a/rollup.config.js b/rollup.config.js
@@ -1,6 +1,6 @@
 import nodeResolve from "@rollup/plugin-node-resolve";
-import { terser } from "rollup-plugin-terser";
-import commonjs from "rollup-plugin-commonjs";
+import terser from "@rollup/plugin-terser";
+import commonjs from "@rollup/plugin-commonjs";
 
 export default () => {
   return [
@@ -9,7 +9,11 @@ export default () => {
       output: {
         file: "modules/dungeondraw-bundle.min.js",
         format: "es",
-        plugins: [terser()],
+        plugins: [
+          terser({
+            keep_classnames: true,
+          }),
+        ],
         preferConst: true,
         sourcemap: true,
       },

diff --git a/src/dungeondraw.js b/src/dungeondraw.js
@@ -4,9 +4,9 @@ import * as constants from "./constants.js";
 import { GeneratorSheet } from "./generatorsheet.js";
 import { Keybindings } from "./keybindings";
 import { Settings } from "./settings";
-import { Toolbar } from "./toolbar";
+import { DungeonDrawToolbar } from "./toolbar";
 
-const toolbar = new Toolbar();
+const toolbar = new DungeonDrawToolbar();
 
 export class DungeonDraw {
   static init() {
@@ -125,6 +125,11 @@ export class DungeonDraw {
     }
     toolbar.render(true);
   }
+
+  static async activateSceneControls() {
+    $("#controls").append(toolbar.element);
+    toolbar.element.addClass("active");
+  }
 }
 
 Hooks.on("init", DungeonDraw.init);
@@ -133,3 +138,4 @@ Hooks.on("getSceneControlButtons", DungeonDraw.getSceneControlButtons);
 Hooks.on("canvasReady", DungeonDraw.canvasReady);
 Hooks.on("updateJournalEntry", DungeonDraw.updateJournalEntry);
 Hooks.on("renderSceneControls", DungeonDraw.renderSceneControls);
+Hooks.on("renderDungeonDrawToolbar", DungeonDraw.activateSceneControls);
diff --git a/src/toolbar.js b/src/toolbar.js
@@ -5,7 +5,7 @@ import {
   themes,
 } from "./themes.js";
 
-export class Toolbar extends Application {
+export class DungeonDrawToolbar extends Application {
   static get defaultOptions() {
     return foundry.utils.mergeObject(super.defaultOptions, {
       id: "dd-toolbar",

diff --git a/styles/dungeondraw.css b/styles/dungeondraw.css
@@ -31,10 +31,19 @@
   border: 1px solid black;
   border-radius: 5px;
   color: white;
-  left: 107px;
+}
+#dd-control-tools .dd-control-wrapper {
+  padding: 10px;
+  width: auto !important;
+  height: auto !important;
+  position: fixed;
+  cursor: auto !important;
+}
+#dd-control-tools li.dd-control-wrapper:hover {
   padding: 10px;
-  position: absolute;
-  top: 84px;
+  box-shadow: 0 0 10px var(--color-shadow-dark) !important;
+  border: 1px solid var(--color-border-dark) !important;
+  border-radius: 5px !important;
 }
 #dd-control-tools .addremove-toggle-row {
   display: flex;
@@ -50,6 +59,9 @@
   text-align: center;
   width: 90px;
 }
+#dd-control-tools .addremove-toggle {
+  cursor: pointer;
+}
 #dd-control-tools .addremove-toggle-row .addremove-toggle:hover {
   box-shadow: 0 0 10px red;
 }
@@ -110,4 +122,5 @@
   color: white;
   font-family: Signika, sans-serif;
   font-size: 16px;
+  cursor: pointer;
 }
diff --git a/templates/toolbar.html b/templates/toolbar.html
@@ -3,35 +3,50 @@
   class="control-tool toggle {{#if isActive}}active{{/if}}"
   title="{{localize title}}"
   data-tool="{{name}}"
+  role="button"
 >
   <i class="{{icon}}"></i>
 </div>
 {{/inline}}
 
-<div id="dd-control-tools">
-  <div class="addremove-toggle-row">
-    <div class="addremove-toggle {{toggleAddClass}}" data-addremove="add">
-      {{localize "DD.Add"}}
+<ol id="dd-control-tools" class="sub-controls app control-tools flexcol">
+  <li class="dd-control-wrapper">
+    <div class="addremove-toggle-row">
+      <div
+        class="addremove-toggle {{toggleAddClass}}"
+        data-addremove="add"
+        role="button"
+      >
+        {{localize "DD.Add"}}
+      </div>
+      <div
+        class="addremove-toggle {{toggleRemoveClass}}"
+        data-addremove="remove"
+        role="button"
+      >
+        {{localize "DD.Remove"}}
+      </div>
     </div>
-    <div class="addremove-toggle {{toggleRemoveClass}}" data-addremove="remove">
-      {{localize "DD.Remove"}}
+    <div class="control-row-separator"></div>
+    <div class="control-tool-row">
+      {{#each row1}} {{> toolPartial}} {{/each}}
     </div>
-  </div>
-  <div class="control-row-separator"></div>
-  <div class="control-tool-row">{{#each row1}} {{> toolPartial}} {{/each}}</div>
-  <div class="control-row-separator"></div>
-  <div class="control-tool-row">{{#each row2}} {{> toolPartial}} {{/each}}</div>
-  <div class="control-row-separator"></div>
-  <div class="control-tool-row">
-    {{#each row3}} {{> toolPartial}} {{/each}}
-    <select name="themePainterThemeKey" data-dtype="string">
-      {{#select themePainterThemeKey}} {{#each customThemeKeys as |themeKey|}}
-      {{name}} {{#with (lookup ../customThemes themeKey)~}}
-      <option value="custom.{{themeKey}}">{{name}}</option>
-      {{/with}} {{/each}} {{#each themeKeys as |themeKey|}} {{name}} {{#with
-      (lookup ../themes themeKey)~}}
-      <option value="module.{{themeKey}}">{{name}}</option>
-      {{/with}} {{/each}} {{/select}}
-    </select>
-  </div>
-</div>
+    <div class="control-row-separator"></div>
+    <div class="control-tool-row">
+      {{#each row2}} {{> toolPartial}} {{/each}}
+    </div>
+    <div class="control-row-separator"></div>
+    <div class="control-tool-row">
+      {{#each row3}} {{> toolPartial}} {{/each}}
+      <select name="themePainterThemeKey" data-dtype="string">
+        {{#select themePainterThemeKey}} {{#each customThemeKeys as |themeKey|}}
+        {{name}} {{#with (lookup ../customThemes themeKey)~}}
+        <option value="custom.{{themeKey}}">{{name}}</option>
+        {{/with}} {{/each}} {{#each themeKeys as |themeKey|}} {{name}} {{#with
+        (lookup ../themes themeKey)~}}
+        <option value="module.{{themeKey}}">{{name}}</option>
+        {{/with}} {{/each}} {{/select}}
+      </select>
+    </div>
+  </li>
+</ol>