@wxn0brp/nya-dock 0.0.1 → 0.0.3

package/README.md

@@ -1,4 +1,4 @@
-# Nyadock
+# NyaDock
 
 A dock panel component library. Currently in early development stage.
 
@@ -14,12 +14,12 @@ A dock panel component library. Currently in early development stage.
 
 ## Demo
 
-[https://wxn0brp.github.io/Nyadock/demo](https://wxn0brp.github.io/Nyadock/demo)
+[https://wxn0brp.github.io/NyaDock/demo](https://wxn0brp.github.io/NyaDock/demo)
 
 ## Installation
 
 ```bash
-yarn add github:wxn0brP/Nyadock#dist
+npm i @wxn0brp/nya-dock
 ```
 
 ## Usage
@@ -34,14 +34,20 @@ First, you need a container element in your HTML to host the dock layout, and in
 <!-- The main container for the dock layout -->
 <div id="app"></div>
 
-<!-- Your panel content (can be hidden initially) -->
-<div id="panel1-content" style="display: none;">
-    <h2>Panel 1</h2>
-    <p>Content for the first panel.</p>
+<!-- Your panel content -->
+<div class="panel" id="panel1">
+    <div class="panel-header">Panel 1</div>
+    <div class="panel-content">
+        <h2>Panel 1</h2>
+        <p>Content for the first panel.</p>
+    </div>
 </div>
-<div id="panel2-content" style="display: none;">
-    <h2>Panel 2</h2>
-    <p>Content for the second panel.</p>
+<div class="panel" id="panel2">
+    <div class="panel-header">Panel 2</div>
+    <div class="panel-content">
+        <h2>Panel 2</h2>
+        <p>Content for the second panel.</p>
+    </div>
 </div>
 ```
 
@@ -51,21 +57,21 @@ Import the `controller` and use it to configure and initialize the layout. Note
 
 ```typescript
 import { controller } from "@wxn0brp/nya-dock/state";
-import "@wxn0brp/nya-dock/style.css";
+import "@wxn0brp/nya-dock/style.css"; // or in html: <link rel="stylesheet" href="node_modules/@wxn0brp/nya-dock/dist/style.css">
 
 // 1. Get the master container element
 const appContainer = document.querySelector("#app");
 
-// 2. Get your panel content elements
-const panel1 = document.querySelector("#panel1-content");
-const panel2 = document.querySelector("#panel2-content");
+// 2. Get your panel elements
+const panels = document.querySelectorAll(".panel");
 
 // 3. Assign the master container
 controller.master = appContainer;
 
-// 4. Register your panels with unique IDs
-controller.registerPanel("panel1", panel1);
-controller.registerPanel("panel2", panel2);
+// 4. Register your panels
+for (const panel of panels) {
+    controller.registerPanel(panel.id, panel);
+}
 
 // 5. Define the layout structure
 // A horizontal split between "panel1" and "panel2"
@@ -94,6 +100,31 @@ You can nest these structures to create complex layouts:
 const complexLayout = ["panelA", ["panelB", "panelC", 1]];
 ```
 
+### CSS Customization
+
+```css
+:root {
+  --nya-dock-border: silver;
+
+  --nya-dock-header: #2c2c2c;
+  --nya-dock-header-border: #444;
+  --nya-dock-header-color: #ddd;
+
+  --nya-dock-content-color: #aaa;
+  --nya-dock-content-border: #444;
+
+  --nya-dock-button-background: #444;
+  --nya-dock-button-color: white;
+  --nya-dock-button-hover-background: #555;
+
+  --nya-dock-info-box-background: #222;
+  --nya-dock-info-box-border: #666;
+
+  --nya-dock-dock-background: blueviolet;
+  --nya-dock-dock-opacity: 0.2;
+}
+```
+
 ## License
 
 MIT [LICENSE](./LICENSE)

package/dist/index.d.ts

@@ -1,2 +1,4 @@
-import "@wxn0brp/flanker-ui/html";
+import logger from "./logger.js";
 import "./mouse/index.js";
+import { controller } from "./state.js";
+export { controller, logger };

package/dist/index.js

@@ -1,103 +1,4 @@
-import "@wxn0brp/flanker-ui/html";
 import logger from "./logger.js";
 import "./mouse/index.js";
 import { controller } from "./state.js";
-logger.setLogLevel("DEBUG");
-window.logger = logger;
-window.controller = controller;
-const app = qs("#app");
-const panel1 = document.createElement("div");
-panel1.innerHTML = `
-    <div class="panel-header">Panel 1</div>
-    <div class="panel-content">
-        <h3>Welcome to Panel 1</h3>
-        <p>This is the first panel in the layout.</p>
-        <ul>
-            <li>Item 1</li>
-            <li>Item 2</li>
-            <li>Item 3</li>
-        </ul>
-        <div class="button-group">
-            <button onclick="controller.reset()">Reset Config</button>
-        </div>
-    </div>
-`;
-const panel2 = document.createElement("div");
-panel2.innerHTML = `
-    <div class="panel-header">Panel 2</div>
-    <div class="panel-content">
-        <h3>Content for Panel 2</h3>
-        <p>This is the second panel, split from the main container.</p>
-        <div class="button-group">
-            <button>Button 1</button>
-            <button>Button 2</button>
-        </div>
-    </div>
-`;
-const panel3 = document.createElement("div");
-panel3.innerHTML = `
-    <div class="panel-header">Panel 3</div>
-    <div class="panel-content">
-        <h3>Additional Panel</h3>
-        <p>This is the third panel in the layout.</p>
-        <div class="info-box">
-            <p>This panel was created by splitting with Panel 2.</p>
-        </div>
-    </div>
-`;
-const panel4 = document.createElement("div");
-panel4.innerHTML = `
-    <div class="panel-header">Panel 4</div>
-    <div class="panel-content">
-        <h3>Form Panel</h3>
-        <form>
-            <label for="name">Name:</label>
-            <input type="text" id="name" name="name"><br><br>
-            <label for="email">Email:</label>
-            <input type="email" id="email" name="email"><br><br>
-            <input type="submit" value="Submit">
-        </form>
-    </div>
-`;
-const panel5 = document.createElement("div");
-panel5.innerHTML = `
-    <div class="panel-header">Panel 5</div>
-    <div class="panel-content">
-        <h3>Table Panel</h3>
-        <table border="1">
-            <tr>
-                <th>First name</th>
-                <th>Last name</th>
-                <th>Age</th>
-            </tr>
-            <tr>
-                <td>Jill</td>
-                <td>Smith</td>
-                <td>50</td>
-            </tr>
-            <tr>
-                <td>Eve</td>
-                <td>Jackson</td>
-                <td>94</td>
-            </tr>
-        </table>
-    </div>
-`;
-controller.master = app;
-controller.setDefaultState([
-    "panel1",
-    [
-        "panel2",
-        [
-            ["panel3", "panel5", 1],
-            "panel4",
-        ],
-        1
-    ]
-]);
-controller.registerPanel("panel1", panel1);
-controller.registerPanel("panel2", panel2);
-controller.registerPanel("panel3", panel3);
-controller.registerPanel("panel4", panel4);
-controller.registerPanel("panel5", panel5);
-controller.init();
+export { controller, logger };

package/dist/mouse/movePanel.js

@@ -1,8 +1,17 @@
 import { DRAG } from "../const.js";
-import { controller } from "../state.js";
 import logger from "../logger.js";
-import { detectDockZone, getRelativePosition } from "../utils/detect.js";
+import { controller } from "../state.js";
 import { saveNyaState } from "../storage.js";
+import { detectDockZone, getRelativePosition } from "../utils/detect.js";
+function removePreviewClass(zone) {
+    document.querySelectorAll(`.dock-${zone}`).forEach(dock => dock.classList.remove("dock-" + zone));
+}
+function removePreviewClasses() {
+    removePreviewClass("left");
+    removePreviewClass("right");
+    removePreviewClass("top");
+    removePreviewClass("bottom");
+}
 let draggingPanel = null;
 document.addEventListener("mousedown", (e) => {
     const target = e.target;
@@ -19,56 +28,86 @@ document.addEventListener("mousedown", (e) => {
     logger.info("Dragging panel started", draggingPanel);
     document.body.style.cursor = "move";
 });
-document.addEventListener("mouseup", (e) => {
+function locatePanel(e, log = false) {
     if (!draggingPanel) {
-        logger.debug("Mouseup event ignored: no panel is being dragged");
+        if (log)
+            logger.debug("Mouse event ignored: no panel is being dragged");
         return;
     }
-    document.body.style.cursor = "";
-    function end() {
-        logger.info("Dragging finished");
-        draggingPanel = null;
-    }
     const allPanels = [...controller._panels.values()].filter(p => p !== draggingPanel);
-    logger.debug("All panels", allPanels);
+    if (log)
+        logger.debug("All panels", allPanels);
     const elemUnder = document.elementFromPoint(e.clientX, e.clientY);
     if (!elemUnder) {
-        logger.debug("Mouseup event ignored: no element under cursor");
-        return end();
+        if (log)
+            logger.debug("Mouse event ignored: no element under cursor");
+        return null;
     }
     const targetPanel = elemUnder.closest(".panel");
     if (!targetPanel) {
-        logger.debug("Mouseup event ignored: no target panel under cursor");
-        return end();
+        if (log)
+            logger.debug("Mouse event ignored: no target panel under cursor");
+        return null;
     }
-    logger.debug("Target panel", targetPanel);
+    if (log)
+        logger.debug("Target panel", targetPanel);
     if (!allPanels.includes(targetPanel)) {
-        logger.debug("Mouseup event ignored: target panel is not a valid drop target");
-        return end();
+        if (log)
+            logger.debug("Mouse event ignored: target panel is not a valid drop target");
+        return null;
     }
     const zone = detectDockZone(e, targetPanel);
-    logger.info(`Docking to ${zone}`);
+    if (log)
+        logger.info(`Docking to ${zone}`);
     if (zone === "center") {
-        logger.debug("Docking to center, no action taken");
-        return end();
+        if (log)
+            logger.debug("Docking to center, no action taken");
+        return null;
     }
     let sourceId = draggingPanel.dataset.nya_id;
     const targetId = targetPanel.dataset.nya_id;
     if (!sourceId)
-        sourceId = draggingPanel.qs(".panel[data-nya_id]")?.dataset.nya_id;
+        sourceId = draggingPanel.querySelector(".panel[data-nya_id]")?.dataset.nya_id;
     if (!sourceId || !targetId) {
-        logger.error("Panel ID not found");
-        logger.error("Source ID:", sourceId);
-        logger.error("Target ID:", targetId);
-        return end();
+        if (log)
+            logger.error("Panel ID not found");
+        if (log)
+            logger.error("Source ID:", sourceId);
+        if (log)
+            logger.error("Target ID:", targetId);
+        return null;
     }
     if (sourceId === targetId) {
-        logger.debug("Mouseup event ignored: source and target are the same");
-        return end();
+        if (log)
+            logger.debug("Mouse event ignored: source and target are the same");
+        return null;
     }
+    return { sourceId, targetId, zone, targetPanel, draggingPanel };
+}
+document.addEventListener("mouseup", (e) => {
+    function end() {
+        logger.info("Dragging finished");
+        draggingPanel = null;
+    }
+    const result = locatePanel(e, true);
+    document.body.style.cursor = "";
+    if (!result) {
+        end();
+        return;
+    }
+    const { sourceId, targetId, zone } = result;
     controller.movePanel(sourceId, targetId, zone);
     controller._render();
     controller._setDefaultSize();
     saveNyaState();
+    removePreviewClasses();
     end();
 });
+document.addEventListener("mousemove", (e) => {
+    const result = locatePanel(e);
+    if (!result)
+        return;
+    const { zone, targetPanel } = result;
+    removePreviewClasses();
+    targetPanel.querySelector(".panel-content").classList.add(`dock-${zone}`);
+});

package/dist/style.css

@@ -1,22 +1,3 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  --txt: #fff;
-  --back: #111;
-}
-
-body {
-  background: var(--back);
-  color: var(--txt);
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  width: 100vw;
-  height: 100vh;
-}
-
 .master {
   height: 100%;
   width: 100%;
@@ -48,7 +29,7 @@ body {
   width: 100%;
 }
 .split.column > :first-child {
-  border-bottom: 1px solid silver;
+  border-bottom: 1px solid var(--nya-dock-border, silver);
   height: var(--size) !important;
 }
 .split.column > :first-child::before {
@@ -68,7 +49,7 @@ body {
   height: 100%;
 }
 .split.row > :first-child {
-  border-right: 1px solid silver;
+  border-right: 1px solid var(--nya-dock-border, silver);
   width: var(--size) !important;
 }
 .split.row > :first-child::before {
@@ -90,21 +71,22 @@ body {
   flex-direction: column;
 }
 .split .panel .panel-header {
-  background-color: #2c2c2c;
+  background-color: var(--nya-dock-header, #2c2c2c);
   padding: 10px;
-  border-bottom: 1px solid #444;
+  border-bottom: 1px solid var(--nya-dock-header-border, #444);
   font-weight: bold;
-  color: #ddd;
+  color: var(--nya-dock-header-color, #ddd);
 }
 .split .panel .panel-content {
   padding: 15px;
   flex: 1;
   overflow-y: auto;
+  position: relative;
 }
 .split .panel .panel-content h3 {
   margin-top: 0;
-  color: #aaa;
-  border-bottom: 1px solid #444;
+  color: var(--nya-dock-content-color, #aaa);
+  border-bottom: 1px solid var(--nya-dock-content-border, #444);
   padding-bottom: 5px;
 }
 .split .panel .panel-content p {
@@ -121,8 +103,8 @@ body {
   margin-top: 15px;
 }
 .split .panel .panel-content .button-group button {
-  background: #444;
-  color: white;
+  background: var(--nya-dock-button-background, #444);
+  color: var(--nya-dock-button-color, white);
   border: none;
   padding: 8px 15px;
   margin-right: 10px;
@@ -130,13 +112,43 @@ body {
   cursor: pointer;
 }
 .split .panel .panel-content .button-group button:hover {
-  background: #555;
+  background: var(--nya-dock-button-hover-background, #555);
 }
 .split .panel .panel-content .info-box {
-  background: #222;
+  background: var(--nya-dock-info-box-background, #222);
   padding: 10px;
   border-radius: 4px;
-  border-left: 3px solid #666;
+  border-left: 3px solid var(--nya-dock-info-box-border, #666);
+}
+.split .panel .panel-content::before {
+  content: "";
+  position: absolute;
+  background-color: var(--nya-dock-dock-background, blueviolet);
+  opacity: var(--nya-dock-dock-opacity, 0.2);
+}
+.split .panel .panel-content.dock-left::before {
+  left: 0;
+  top: 0;
+  width: 40%;
+  height: 100%;
+}
+.split .panel .panel-content.dock-right::before {
+  right: 0;
+  top: 0;
+  width: 40%;
+  height: 100%;
+}
+.split .panel .panel-content.dock-top::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 40%;
+}
+.split .panel .panel-content.dock-bottom::before {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 40%;
 }
 
 /*# sourceMappingURL=style.css.map */

package/dist/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../src/style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKZ;EACI;;;AAIR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA","file":"style.css"}

package/package.json

@@ -1,41 +1,38 @@
 {
-	"name": "@wxn0brp/nya-dock",
-	"version": "0.0.1",
-	"main": "dist/index.js",
-	"types": "dist/index.d.ts",
-	"description": "",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/wxn0brP/Nyadock.git"
-	},
-	"homepage": "https://github.com/wxn0brP/Nyadock",
-	"author": "wxn0brP",
-	"license": "MIT",
-	"type": "module",
-	"scripts": {
-		"build": "tsc && tsc-alias && sass src:dist"
-	},
-	"devDependencies": {
-		"sass": "*",
-		"tsc-alias": "*",
-		"typescript": "*"
-	},
-	"files": [
-		"dist"
-	],
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./*": {
-			"types": "./dist/*.d.ts",
-			"import": "./dist/*.js",
-			"default": "./dist/*.js"
-		}
-	},
-	"dependencies": {
-		"@wxn0brp/flanker-ui": "^0.4.3"
-	}
+  "name": "@wxn0brp/nya-dock",
+  "version": "0.0.3",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wxn0brP/NyaDock.git"
+  },
+  "homepage": "https://github.com/wxn0brP/NyaDock",
+  "author": "wxn0brP",
+  "license": "MIT",
+  "type": "module",
+  "devDependencies": {
+    "sass": "*",
+    "tsc-alias": "*",
+    "typescript": "*"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    }
+  },
+  "dependencies": {
+    "@wxn0brp/flanker-ui": "^0.4.3"
+  }
 }