extend divide component to be nestable

src/renderer/App.svelte

@@ -54,8 +54,17 @@ main {
     <div slot="1">
       <h1>Hello World</h1>
       <p>{ text }</p>
-      <Button on:click="{ handleClick }">test-inhalt</Button>
+      <Button on:click="{handleClick}">test-inhalt</Button>
+    </div>
+    <div slot="2">
+      <Divide mode="v">
+        <div slot="1">
+          <Divide></Divide>
+        </div>
+        <div slot="2">
+          <Divide></Divide>
+        </div>
+      </Divide>
     </div>
-    <div slot="2">right side</div>
   </Divide>
 </main>

src/renderer/components/2-molecules/Divide.svelte

@@ -1,4 +1,5 @@
 <script>
+import { onMount } from 'svelte/internal';
 import { c, s } from 'services/utils';
 
 export let mode = 'h';
@@ -6,10 +7,20 @@ export let basisFirst = 0.5;
 export let basisSecond = 0.5;
 export let minSize = 100;
 
+let divide;
 let dragging = false;
 let size = 5;
+let total = 0;
 
-$: classes = c(['divide', mode === 'v' ? 'divide--vertical' : false]);
+$: classes = c({
+  divide: true,
+  'divide--vertical': mode === 'v',
+});
+
+$: classesDivider = c({
+  divide__divider: true,
+  'divide__divider--vertical': mode === 'v',
+});
 
 $: style = s({
   '--divide-size': `${size}px`,
@@ -19,12 +30,12 @@ $: style = s({
   '--divide-min-height': minSize > 0 && mode === 'v' ? `${minSize}px` : '0',
 });
 
-$: total = getTotal();
+onMount(() => {
+  total = getTotal();
+});
 
 function getTotal() {
-  return mode === 'h'
-    ? document.documentElement.clientWidth
-    : document.documentElement.clientHeight;
+  return mode === 'h' ? divide.clientWidth : divide.clientHeight;
 }
 
 function handleResize() {
@@ -39,7 +50,10 @@ function handleMousedown(event) {
 
 function handleMousemove(event) {
   if (dragging) {
-    const dragPos = mode === 'h' ? event.x : event.y;
+    const dragPos =
+      mode === 'h'
+        ? event.x - divide.getBoundingClientRect().x
+        : event.y - divide.getBoundingClientRect().y;
     basisFirst = dragPos / total;
     basisSecond = 1 - basisFirst;
   }
@@ -54,8 +68,6 @@ function handleMouseenter(event) {
     dragging = false;
   }
 }
-
-window.onresize = handleResize;
 </script>
 
 <style>
@@ -85,6 +97,11 @@ window.onresize = handleResize;
   max-height: calc(100% - var(--divide-size) - var(--divide-min-height));
 }
 
+.divide__elem > :global(*) {
+  width: 100%;
+  height: 100%;
+}
+
 .divide__elem--first {
   flex-basis: calc(var(--divide-basis-first) - var(--divide-size) / 2);
 }
@@ -97,27 +114,30 @@ window.onresize = handleResize;
   flex-direction: column;
 }
 
-.divide--vertical .divide__divider {
+.divide__divider--vertical {
   cursor: ns-resize;
   width: 100%;
   height: var(--divide-size);
 }
 </style>
 
+<svelte:window on:resize="{handleResize}" />
+
 <div
-  class="{ classes }"
+  class="{classes}"
   {style}
-  on:mousemove|preventDefault="{ handleMousemove }"
-  on:mouseup|preventDefault="{ handleMouseup }"
-  on:mouseenter|preventDefault="{ handleMouseenter }"
+  bind:this="{divide}"
+  on:mousemove|preventDefault="{handleMousemove}"
+  on:mouseup|preventDefault="{handleMouseup}"
+  on:mouseenter|preventDefault="{handleMouseenter}"
 >
   <div class="divide__elem divide__elem--first">
     <slot name="1"></slot>
   </div>
   <div
-    class="divide__divider"
+    class="{classesDivider}"
     draggable="true"
-    on:mousedown|preventDefault="{ handleMousedown }"
+    on:mousedown|preventDefault="{handleMousedown}"
   ></div>
   <div class="divide__elem divide__elem--second">
     <slot name="2"></slot>