dirkk0 · April 14, 2025 10:16
diff --git a/test.html b/test.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="google" content="notranslate" />
    <title>Dockview ESM Example</title>

    <style>
      body {
        margin: 0;
      }

      #dock-container {
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <button id="add-tab" style="position: absolute; top: 10px; right: 10px; z-index: 10">Add Tab</button>
    <div id="dock-container"></div>

    <!-- Include the JavaScript via ES Modules -->
    <script type="module">
      import { createDockview } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/dockview-core.esm.js"

      class PanelHello {
        constructor() {
          this.element = document.createElement("div")
          this.element.style.color = "yellow"
          this.element.style.backgroundColor = "green"
          this.element.style.height = "100%"
        }

        init(parameters) {
          this.element.textContent = "Hello World"
        }
      }

      class PanelOther {
        constructor() {
          this.element = document.createElement("div")
          this.element.style.color = "grey"
          this.element.style.height = "100%"
        }
        init(parameters) {
          this.element.innerHTML = `<p>other</p>`
        }
      }

      const dockview = createDockview(document.getElementById("dock-container"), {
        className: "dockview-theme-abyss",
        createComponent: (options) => {
          switch (options.name) {
            case "other":
              return new PanelOther()
            case "hello":
              return new PanelHello()
          }
        },
      })

      dockview.addPanel({
        id: "panel_1",
        component: "other",
        title: "Panel 1",
      })

      dockview.addPanel({
        id: "panel_2",
        component: "other",
        position: { referencePanel: "panel_1", direction: "right" },
        title: "Panel 2",
      })

      dockview.addPanel({
        id: "panel_3",
        component: "hello",
        position: { referencePanel: "panel_2", direction: "below" },
        title: "Panel 3",
      })

      dockview.addPanel({
        id: "panel_4",
        component: "other",
        position: { referencePanel: "panel_3", direction: "right" },
        title: "Panel 4",
      })

      // Add a new tab dynamically when the button is clicked
      document.getElementById("add-tab").addEventListener("click", () => {
        const id = `tab-${Date.now()}`
        dockview.addPanel({
          id,
          title: `Tab ${id}`,
          component: "hello",
          params: {}, // Optional parameters for the component
        })
      })

      // Save the layout to localStorage
      const saveState = () => {
        const state = dockview.toJSON()
        localStorage.setItem("dockview-layout", JSON.stringify(state))
      }

      // Listen for layout changes and save to localStorage
      // dockview.onDidLayoutChange(saveState)

      // Debug: Clear localStorage
      // localStorage.removeItem("dockview-layout")

      // Load the layout from localStorage when initializing
      const savedState = localStorage.getItem("dockview-layout")
      if (savedState) {
        dockview.fromJSON(JSON.parse(savedState))
      }

      setTimeout(() => {
        console.log(dockview)
        let panel = dockview.getPanel("panel_1")
        console.log(panel)
        panel.api.group.api.setSize({ width: 200, height: 200 })
      }, 10)
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="google" content="notranslate" />
	<title>Dockview ESM Example</title>

	<style>
	body {
	margin: 0;
	}

	#dock-container {
	height: 100vh;
	}
	</style>
	</head>
	<body>
	<button id="add-tab" style="position: absolute; top: 10px; right: 10px; z-index: 10">Add Tab</button>
	<div id="dock-container"></div>

	<!-- Include the JavaScript via ES Modules -->
	<script type="module">
	import { createDockview } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/dockview-core.esm.js"

	class PanelHello {
	constructor() {
	this.element = document.createElement("div")
	this.element.style.color = "yellow"
	this.element.style.backgroundColor = "green"
	this.element.style.height = "100%"
	}

	init(parameters) {
	this.element.textContent = "Hello World"
	}
	}

	class PanelOther {
	constructor() {
	this.element = document.createElement("div")
	this.element.style.color = "grey"
	this.element.style.height = "100%"
	}
	init(parameters) {
	this.element.innerHTML = `<p>other</p>`
	}
	}

	const dockview = createDockview(document.getElementById("dock-container"), {
	className: "dockview-theme-abyss",
	createComponent: (options) => {
	switch (options.name) {
	case "other":
	return new PanelOther()
	case "hello":
	return new PanelHello()
	}
	},
	})

	dockview.addPanel({
	id: "panel_1",
	component: "other",
	title: "Panel 1",
	})

	dockview.addPanel({
	id: "panel_2",
	component: "other",
	position: { referencePanel: "panel_1", direction: "right" },
	title: "Panel 2",
	})

	dockview.addPanel({
	id: "panel_3",
	component: "hello",
	position: { referencePanel: "panel_2", direction: "below" },
	title: "Panel 3",
	})

	dockview.addPanel({
	id: "panel_4",
	component: "other",
	position: { referencePanel: "panel_3", direction: "right" },
	title: "Panel 4",
	})

	// Add a new tab dynamically when the button is clicked
	document.getElementById("add-tab").addEventListener("click", () => {
	const id = `tab-${Date.now()}`
	dockview.addPanel({
	id,
	title: `Tab ${id}`,
	component: "hello",
	params: {}, // Optional parameters for the component
	})
	})

	// Save the layout to localStorage
	const saveState = () => {
	const state = dockview.toJSON()
	localStorage.setItem("dockview-layout", JSON.stringify(state))
	}

	// Listen for layout changes and save to localStorage
	// dockview.onDidLayoutChange(saveState)

	// Debug: Clear localStorage
	// localStorage.removeItem("dockview-layout")

	// Load the layout from localStorage when initializing
	const savedState = localStorage.getItem("dockview-layout")
	if (savedState) {
	dockview.fromJSON(JSON.parse(savedState))
	}

	setTimeout(() => {
	console.log(dockview)
	let panel = dockview.getPanel("panel_1")
	console.log(panel)
	panel.api.group.api.setSize({ width: 200, height: 200 })
	}, 10)
	</script>
	</body>
	</html>