implement divide svelte component

src/renderer/App.svelte

@@ -1,41 +1,61 @@
 <script>
-  import Button from 'atoms/Button.svelte';
-  import api from 'services/api';
+import Button from 'atoms/Button.svelte';
+import Divide from 'molecules/Divide.svelte';
+import api from 'services/api';
 
-  let text = 'tach';
+let text = 'tach';
 
-  function handleClick() {
-    api.sendCredentials({name: '1', password: '2'});
-  }
+function handleClick() {
+  api.sendCredentials({ name: '1', password: '2' });
+}
 </script>
 
 <style>
-  :root {
-    --color-white: #fff;
-    --color-black: #000;
+:root {
+  --color-white: #fff;
+  --color-black: #000;
 
-    --color-background: #242424;
-    --color-foreground: #3a3a3a;
-    --color-accent: #454585;
-    --color-accent-light: #6969ac;
+  --color-background: #242424;
+  --color-foreground: #3a3a3a;
+  --color-foreground-light: #696969;
+  --color-accent: #454585;
+  --color-accent-light: #6969ac;
 
-    --color-text: var(--color-white);
-  }
+  --color-text: var(--color-white);
+}
 
-  :global(*) {
-    box-sizing: border-box;
-  }
+:global(*) {
+  box-sizing: border-box;
+  overflow: hidden;
+}
 
-  :global(body) {
-    padding: 0;
-    margin: 0;
-    color: var(--color-text);
-    background-color: var(--color-background);
-  }
+: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>
-  <h1>Hello World</h1>
-  <p>{ text }</p>
-  <Button on:click={handleClick}>inhalt</Button>
+  <Divide mode="v">
+    <div slot="1">
+      <h1>Hello World</h1>
+      <p>{ text }</p>
+      <Button on:click="{ handleClick }">test-inhalt</Button>
+    </div>
+    <div slot="2">right side</div>
+  </Divide>
 </main>

src/renderer/components/1-atoms/Button.svelte

@@ -3,13 +3,13 @@
 </button>
 
 <style>
-  .button {
-    border: none;
-    color: var(--color-text);
-    background: var(--color-accent);
-  }
+.button {
+  border: none;
+  color: var(--color-text);
+  background: var(--color-accent);
+}
 
-  .button:focus {
-    outline-color: var(--color-accent-light);
-  }
+.button:focus {
+  outline-color: var(--color-accent-light);
+}
 </style>

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'),
     },
   },