implement divide svelte component

src/renderer/App.svelte

@@ -1,5 +1,6 @@
 <script>
 import Button from 'atoms/Button.svelte';
+import Divide from 'molecules/Divide.svelte';
 import api from 'services/api';
 
 let text = 'tach';
@@ -16,6 +17,7 @@
 
   --color-background: #242424;
   --color-foreground: #3a3a3a;
+  --color-foreground-light: #696969;
   --color-accent: #454585;
   --color-accent-light: #6969ac;
 
@@ -24,18 +26,36 @@
 
 :global(*) {
   box-sizing: border-box;
+  overflow: hidden;
+}
+
+:global(html) {
+  width: 100vw;
+  height: 100vh;
 }
 
 :global(body) {
+  width: 100%;
+  height: 100%;
   padding: 0;
   margin: 0;
   color: var(--color-text);
   background-color: var(--color-background);
 }
+
+main {
+  width: 100%;
+  height: 100%;
+}
 </style>
 
 <main>
+  <Divide mode="v">
+    <div slot="1">
       <h1>Hello World</h1>
       <p>{ text }</p>
-  <Button on:click={handleClick}>inhalt</Button>
+      <Button on:click="{ handleClick }">test-inhalt</Button>
+    </div>
+    <div slot="2">right side</div>
+  </Divide>
 </main>

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

@@ -0,0 +1,125 @@
+<script>
+import { c, s } from 'services/utils';
+
+export let mode = 'h';
+export let basisFirst = 0.5;
+export let basisSecond = 0.5;
+export let minSize = 100;
+
+let dragging = false;
+let size = 5;
+
+$: classes = c(['divide', mode === 'v' ? 'divide--vertical' : false]);
+
+$: style = s({
+  '--divide-size': `${size}px`,
+  '--divide-basis-first': `${basisFirst * 100}%`,
+  '--divide-basis-second': `${basisSecond * 100}%`,
+  '--divide-min-width': minSize > 0 && mode === 'h' ? `${minSize}px` : false,
+  '--divide-min-height': minSize > 0 && mode === 'v' ? `${minSize}px` : false,
+});
+
+$: total = getTotal();
+
+function getTotal() {
+  return mode === 'h'
+    ? document.documentElement.clientWidth
+    : document.documentElement.clientHeight;
+}
+
+function handleResize() {
+  total = getTotal();
+}
+
+function handleMousedown(event) {
+  if (event.button === 0) {
+    dragging = true;
+  }
+}
+
+function handleMousemove(event) {
+  if (dragging) {
+    const dragPos = mode === 'h' ? event.x : event.y;
+    basisFirst = dragPos / total;
+    basisSecond = 1 - basisFirst;
+  }
+}
+
+function handleMouseup() {
+  dragging = false;
+}
+
+function handleMouseenter(event) {
+  if (event.buttons !== 1) {
+    dragging = false;
+  }
+}
+
+window.onresize = handleResize;
+</script>
+
+<style>
+.divide {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+}
+
+.divide__divider {
+  cursor: ew-resize;
+  width: var(--divide-size);
+  height: 100%;
+  background-color: var(--color-foreground);
+}
+
+.divide__divider:hover {
+  background-color: var(--color-foreground-light);
+}
+
+.divide__elem {
+  flex: 0 0 50%;
+  min-width: var(--divide-min-width);
+  max-width: calc(100% - var(--divide-size) - var(--divide-min-width));
+  min-height: var(--divide-min-height);
+  max-height: calc(100% - var(--divide-size) - var(--divide-min-height));
+}
+
+.divide__elem--first {
+  flex-basis: calc(var(--divide-basis-first) - var(--divide-size) / 2);
+}
+
+.divide__elem--second {
+  flex-basis: calc(var(--divide-basis-second) - var(--divide-size) / 2);
+}
+
+.divide--vertical {
+  flex-direction: column;
+}
+
+.divide--vertical .divide__divider {
+  cursor: ns-resize;
+  width: 100%;
+  height: var(--divide-size);
+}
+</style>
+
+<div
+  class="{ classes }"
+  {style}
+  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"
+    draggable="true"
+    on:mousedown|preventDefault="{ handleMousedown }"
+  ></div>
+  <div class="divide__elem divide__elem--second">
+    <slot name="2"></slot>
+  </div>
+</div>

webpack.config.js

@@ -32,6 +32,7 @@ module.exports = {
     extensions: ['.js', '.ts'],
     alias: {
       atoms: path.resolve(__dirname, 'src/renderer/components/1-atoms'),
+      molecules: path.resolve(__dirname, 'src/renderer/components/2-molecules'),
       services: path.resolve(__dirname, 'src/renderer/services'),
     },
   },