From e108d0a2d0e4b1144fb8273e06a943ded23c53e3 Mon Sep 17 00:00:00 2001
From: Bob Fanger <b.fanger@wearetriple.com>
Date: Sun, 16 Apr 2023 17:58:52 +0200
Subject: [PATCH] feat: SelectMenu component

---
 .../src/SelectMenu/Option.svelte              |  42 ++++
 .../src/SelectMenu/SelectMenu.story.svelte    |  24 ++
 .../src/SelectMenu/SelectMenu.svelte          | 221 ++++++++++++++++++
 packages/blender-elements/src/icons.ts        |  12 +
 packages/pixi-panel/src/PropertiesArea.svelte |   1 +
 packages/pixi-panel/src/TextProperties.svelte |  66 +++++-
 6 files changed, 363 insertions(+), 3 deletions(-)
 create mode 100644 packages/blender-elements/src/SelectMenu/Option.svelte
 create mode 100644 packages/blender-elements/src/SelectMenu/SelectMenu.story.svelte
 create mode 100644 packages/blender-elements/src/SelectMenu/SelectMenu.svelte

diff --git a/packages/blender-elements/src/SelectMenu/Option.svelte b/packages/blender-elements/src/SelectMenu/Option.svelte
new file mode 100644
index 0000000..a8d9e6c
--- /dev/null
+++ b/packages/blender-elements/src/SelectMenu/Option.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  export let value: string;
+  export let icon: string | undefined = undefined;
+  export let label: string | undefined = undefined;
+</script>
+
+<button class="option" on:click>
+  {#if icon}
+    <span class="icon" style="background-image: var(--icon-{icon})" />
+  {/if}
+  <span>{label ?? value}</span>
+</button>
+
+<style lang="scss">
+  .option {
+    font: 12px system-ui, sans-serif;
+    color: #dddddd;
+    padding: 0 6px 0 6px;
+    user-select: none;
+    background: transparent;
+    border: 0;
+    border-radius: 3px;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 18px;
+    cursor: pointer;
+
+    &:hover {
+      background: #4772b3;
+      color: #ffffff;
+    }
+  }
+  .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background: no-repeat center center;
+    background-size: contain;
+  }
+</style>
diff --git a/packages/blender-elements/src/SelectMenu/SelectMenu.story.svelte b/packages/blender-elements/src/SelectMenu/SelectMenu.story.svelte
new file mode 100644
index 0000000..16aea81
--- /dev/null
+++ b/packages/blender-elements/src/SelectMenu/SelectMenu.story.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import Base from "../Base.svelte";
+  import SelectMenu from "./SelectMenu.svelte";
+
+  export let Hst: any;
+
+  let value = "Both";
+  const options = ["None", "Back", "Front", "Both"];
+</script>
+
+<Hst.Story>
+  <Base>
+    <div style="max-width: 200px">
+      <SelectMenu legend="Fill Mode" bind:value {options} />
+    </div>
+  </Base>
+  <svelte:fragment slot="controls">
+    <Hst.Select
+      bind:value
+      title="value"
+      options={["None", "Back", "Front", "Both"]}
+    />
+  </svelte:fragment>
+</Hst.Story>
diff --git a/packages/blender-elements/src/SelectMenu/SelectMenu.svelte b/packages/blender-elements/src/SelectMenu/SelectMenu.svelte
new file mode 100644
index 0000000..de0c0f3
--- /dev/null
+++ b/packages/blender-elements/src/SelectMenu/SelectMenu.svelte
@@ -0,0 +1,221 @@
+<script lang="ts">
+  import { createEventDispatcher, getContext, setContext, tick } from "svelte";
+  import Option from "./Option.svelte";
+
+  type OptionType = string | { value: string; label?: string; icon?: string };
+
+  export let value: string;
+  export let options: OptionType[];
+  export let legend = "";
+
+  $: option = options.find((entry) => {
+    if (typeof entry === "string") {
+      return entry === value;
+    }
+    return entry.value === value;
+  });
+
+  const dispatch = createEventDispatcher();
+
+  let el: HTMLDivElement;
+  let expanded: undefined | { x: "LEFT" | "RIGHT"; y: "UP" | "DOWN" };
+  let timer: number | undefined;
+
+  function select(next: OptionType) {
+    value = typeof next === "string" ? next : next.value;
+    dispatch("change", value);
+    collapse();
+  }
+
+  function expand() {
+    expanded = {
+      x: "LEFT",
+      y: "DOWN",
+    };
+    tick().then(() => {
+      if (!expanded) {
+        return;
+      }
+      const bounds = el.getBoundingClientRect();
+      const { x, y, width, height } = bounds;
+      const { innerWidth, innerHeight } = window;
+      if (x < 0) {
+        expanded.x = "RIGHT";
+      }
+      if (y + height > innerHeight) {
+        expanded.y = "UP";
+      }
+    });
+  }
+
+  function collapse() {
+    expanded = undefined;
+  }
+
+  function onLeave() {
+    timer = window.setTimeout(collapse, 0);
+  }
+  function onEnter() {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+</script>
+
+<div
+  class="search-field"
+  class:expanded
+  class:up={expanded?.y === "UP"}
+  class:right={expanded?.x === "RIGHT"}
+  class:down={expanded?.y === "DOWN"}
+  class:left={expanded?.x === "LEFT"}
+>
+  <button class="value" on:click={expand}>
+    {#if typeof option === "string"}
+      <span>{option}</span>
+    {:else if option}
+      {#if option.icon}
+        <span
+          class="icon"
+          style="background-image: var(--icon-{option.icon})"
+        />
+      {/if}
+      <span>{option.label ?? option.value}</span>
+    {/if}
+  </button>
+  {#if expanded}
+    <div class="popout" bind:this={el}>
+      <button class="detector" on:mouseleave={onLeave} on:click={collapse} />
+      <div class="options" on:mouseenter={onEnter}>
+        {#each options as option}
+          {#if typeof option === "string"}
+            <Option value={option} on:click={() => select(option)} />
+          {:else}
+            <Option
+              value={option.value}
+              icon={option.icon}
+              label={option.label}
+              on:click={() => select(option)}
+            />
+          {/if}
+        {/each}
+      </div>
+      {#if legend}
+        <div class="legend" on:mouseenter={onEnter}>{legend}</div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .search-field {
+    position: relative;
+  }
+  .value {
+    font: 12px system-ui, sans-serif;
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    box-sizing: border-box;
+    width: 100%;
+    color: #fdfdfd;
+    outline: none;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0 20px 0 4px;
+    background: #1d1d1d;
+    border: 1px solid #3d3d3d;
+    box-shadow: 0 1px 3px rgba(black, 0.3);
+    border-radius: 4px;
+    text-align: left;
+    min-height: 18px;
+    cursor: pointer;
+
+    &:hover {
+      background: #232323;
+      border-color: #414141;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 1px;
+      right: 3px;
+      width: 16px;
+      height: 16px;
+      background: var(--icon-chevron-down) center center no-repeat;
+      opacity: 0.5;
+    }
+    .expanded & {
+      background: #446290;
+      color: #ffffff;
+    }
+    .expanded.up & {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top-color: #446290;
+    }
+    .expanded.down & {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-color: #446290;
+    }
+  }
+  .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background: no-repeat center center;
+    background-size: contain;
+  }
+  .popout {
+    position: absolute;
+    z-index: 1;
+    box-sizing: border-box;
+    min-width: 100%;
+    background: #181818;
+    border: 1px solid #242424;
+    border-radius: 4px;
+
+    .up & {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      bottom: 100%;
+    }
+    .right & {
+      left: 0;
+    }
+    .down & {
+      top: 100%;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    .left & {
+      right: 0;
+    }
+  }
+  .detector {
+    position: absolute;
+    top: -32px;
+    right: -32px;
+    bottom: -32px;
+    left: -32px;
+    background-color: transparent;
+    border: none;
+  }
+  .options {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 2px;
+  }
+  .legend {
+    position: relative;
+    color: #989898;
+    padding: 5px 8px 4px 8px;
+    .down & {
+      border-top: 1px solid #2f2f2f;
+    }
+  }
+</style>
diff --git a/packages/blender-elements/src/icons.ts b/packages/blender-elements/src/icons.ts
index 2c20ed4..ddf8155 100644
--- a/packages/blender-elements/src/icons.ts
+++ b/packages/blender-elements/src/icons.ts
@@ -69,6 +69,18 @@ const svg = {
 </svg>`,
   "small-caps": `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1.49218 1C1.35957 1.00001 1.23241 1.05269 1.13865 1.14645C1.04488 1.24022 0.99219 1.3674 0.992176 1.5V3.5C0.991239 3.56626 1.00348 3.63203 1.02819 3.69351C1.05289 3.755 1.08958 3.81097 1.1361 3.85815C1.18262 3.90534 1.23805 3.94281 1.29918 3.96838C1.36031 3.99396 1.42591 4.00711 1.49218 4.00711C1.55844 4.00711 1.62404 3.99396 1.68517 3.96838C1.7463 3.94281 1.80173 3.90534 1.84826 3.85815C1.89478 3.81097 1.93146 3.755 1.95617 3.69351C1.98087 3.63203 1.99311 3.56626 1.99218 3.5V2H4.99218V14H3.49218C3.42592 13.9991 3.36015 14.0113 3.29866 14.036C3.23718 14.0607 3.18121 14.0974 3.13402 14.1439C3.08684 14.1904 3.04938 14.2459 3.02381 14.307C2.99823 14.3681 2.98505 14.4337 2.98505 14.5C2.98505 14.5663 2.99823 14.6319 3.02381 14.693C3.04938 14.7541 3.08684 14.8096 3.13402 14.8561C3.18121 14.9026 3.23718 14.9393 3.29866 14.964C3.36015 14.9887 3.42592 15.0009 3.49218 15H7.49218C7.55843 15.0009 7.62422 14.9887 7.6857 14.964C7.74719 14.9393 7.80315 14.9026 7.85033 14.8561C7.89752 14.8096 7.93499 14.7541 7.96056 14.693C7.98613 14.6319 7.9993 14.5663 7.9993 14.5C7.9993 14.4337 7.98613 14.3681 7.96056 14.307C7.93499 14.2459 7.89752 14.1904 7.85033 14.1439C7.80315 14.0974 7.74719 14.0607 7.6857 14.036C7.62422 14.0113 7.55843 13.9991 7.49218 14H5.99218V2H8.99218V3.5C8.99124 3.56626 9.00348 3.63203 9.02819 3.69351C9.05289 3.755 9.08957 3.81097 9.1361 3.85815C9.18262 3.90534 9.23805 3.94281 9.29918 3.96838C9.36031 3.99396 9.42591 4.00711 9.49218 4.00711C9.55844 4.00711 9.62404 3.99396 9.68517 3.96838C9.7463 3.94281 9.80173 3.90534 9.84826 3.85815C9.89478 3.81097 9.93146 3.755 9.95617 3.69351C9.98087 3.63203 9.99311 3.56626 9.99218 3.5V1.5C9.99216 1.3674 9.93949 1.24022 9.84572 1.14645C9.75196 1.05269 9.62478 1.00001 9.49218 1H1.49218ZM8.49218 7C8.35957 7.00001 8.23241 7.05269 8.13865 7.14645C8.04488 7.24022 7.99219 7.3674 7.99218 7.5V8.5C7.99124 8.56626 8.00348 8.63203 8.02819 8.69351C8.05289 8.755 8.08958 8.81097 8.1361 8.85815C8.18262 8.90534 8.23805 8.94281 8.29918 8.96838C8.36031 8.99396 8.42591 9.00711 8.49218 9.00711C8.55844 9.00711 8.62404 8.99396 8.68517 8.96838C8.7463 8.94281 8.80173 8.90534 8.84826 8.85815C8.89478 8.81097 8.93146 8.755 8.95617 8.69351C8.98087 8.63203 8.99311 8.56626 8.99218 8.5V8H10.9922V14H10.4922C10.4259 13.9991 10.3601 14.0113 10.2987 14.036C10.2372 14.0607 10.1812 14.0974 10.134 14.1439C10.0868 14.1904 10.0494 14.2459 10.0238 14.307C9.99823 14.3681 9.98505 14.4337 9.98505 14.5C9.98505 14.5663 9.99823 14.6319 10.0238 14.693C10.0494 14.7541 10.0868 14.8096 10.134 14.8561C10.1812 14.9026 10.2372 14.9393 10.2987 14.964C10.3601 14.9887 10.4259 15.0009 10.4922 15H12.4922C12.5584 15.0009 12.6242 14.9887 12.6857 14.964C12.7472 14.9393 12.8031 14.9026 12.8503 14.8561C12.8975 14.8096 12.935 14.7541 12.9606 14.693C12.9861 14.6319 12.9993 14.5663 12.9993 14.5C12.9993 14.4337 12.9861 14.3681 12.9606 14.307C12.935 14.2459 12.8975 14.1904 12.8503 14.1439C12.8031 14.0974 12.7472 14.0607 12.6857 14.036C12.6242 14.0113 12.5584 13.9991 12.4922 14H11.9922V8H13.9922V8.5C13.9912 8.56626 14.0035 8.63203 14.0282 8.69351C14.0529 8.755 14.0896 8.81097 14.1361 8.85815C14.1826 8.90534 14.2381 8.94281 14.2992 8.96838C14.3603 8.99396 14.4259 9.00711 14.4922 9.00711C14.5584 9.00711 14.624 8.99396 14.6852 8.96838C14.7463 8.94281 14.8017 8.90534 14.8483 8.85815C14.8948 8.81097 14.9315 8.755 14.9562 8.69351C14.9809 8.63203 14.9931 8.56626 14.9922 8.5V7.5C14.9922 7.3674 14.9395 7.24022 14.8457 7.14645C14.752 7.05269 14.6248 7.00001 14.4922 7H8.49218Z" fill="white"/>
+</svg>`,
+  "text-left": `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.50001 1.99999C1.43375 1.99905 1.36797 2.01129 1.30649 2.036C1.245 2.06071 1.18904 2.09739 1.14186 2.14391C1.09467 2.19043 1.05721 2.24587 1.03163 2.307C1.00606 2.36812 0.992889 2.43373 0.992889 2.49999C0.992889 2.56625 1.00606 2.63185 1.03163 2.69298C1.05721 2.75411 1.09467 2.80955 1.14186 2.85607C1.18904 2.90259 1.245 2.93927 1.30649 2.96398C1.36797 2.98869 1.43375 3.00093 1.50001 2.99999H14.4922C14.5585 3.00093 14.6242 2.98869 14.6857 2.96398C14.7472 2.93927 14.8032 2.90259 14.8504 2.85607C14.8975 2.80955 14.935 2.75411 14.9606 2.69298C14.9861 2.63185 14.9993 2.56625 14.9993 2.49999C14.9993 2.43373 14.9861 2.36812 14.9606 2.307C14.935 2.24587 14.8975 2.19043 14.8504 2.14391C14.8032 2.09739 14.7472 2.06071 14.6857 2.036C14.6242 2.01129 14.5585 1.99905 14.4922 1.99999H1.50001ZM1.50001 4.99999C1.43375 4.99905 1.36797 5.01129 1.30649 5.036C1.245 5.06071 1.18904 5.09739 1.14186 5.14391C1.09467 5.19043 1.05721 5.24587 1.03163 5.307C1.00606 5.36812 0.992889 5.43373 0.992889 5.49999C0.992889 5.56625 1.00606 5.63185 1.03163 5.69298C1.05721 5.75411 1.09467 5.80955 1.14186 5.85607C1.18904 5.90259 1.245 5.93927 1.30649 5.96398C1.36797 5.98869 1.43375 6.00093 1.50001 5.99999H7.4922C7.55845 6.00093 7.62424 5.98869 7.68572 5.96398C7.7472 5.93927 7.80316 5.90259 7.85035 5.85607C7.89753 5.80955 7.935 5.75411 7.96058 5.69298C7.98615 5.63185 7.99932 5.56625 7.99932 5.49999C7.99932 5.43373 7.98615 5.36812 7.96058 5.307C7.935 5.24587 7.89753 5.19043 7.85035 5.14391C7.80316 5.09739 7.7472 5.06071 7.68572 5.036C7.62424 5.01129 7.55845 4.99905 7.4922 4.99999H1.50001ZM1.50001 7.99999C1.43375 7.99905 1.36797 8.01129 1.30649 8.036C1.245 8.06071 1.18904 8.09739 1.14186 8.14391C1.09467 8.19043 1.05721 8.24587 1.03163 8.307C1.00606 8.36812 0.992889 8.43373 0.992889 8.49999C0.992889 8.56625 1.00606 8.63185 1.03163 8.69298C1.05721 8.75411 1.09467 8.80955 1.14186 8.85607C1.18904 8.90259 1.245 8.93927 1.30649 8.96398C1.36797 8.98869 1.43375 9.00093 1.50001 8.99999H14.4922C14.5585 9.00093 14.6242 8.98869 14.6857 8.96398C14.7472 8.93927 14.8032 8.90259 14.8504 8.85607C14.8975 8.80955 14.935 8.75411 14.9606 8.69298C14.9861 8.63185 14.9993 8.56625 14.9993 8.49999C14.9993 8.43373 14.9861 8.36812 14.9606 8.307C14.935 8.24587 14.8975 8.19043 14.8504 8.14391C14.8032 8.09739 14.7472 8.06071 14.6857 8.036C14.6242 8.01129 14.5585 7.99905 14.4922 7.99999H1.50001ZM1.50001 11C1.43375 10.9991 1.36797 11.0113 1.30649 11.036C1.245 11.0607 1.18904 11.0974 1.14186 11.1439C1.09467 11.1904 1.05721 11.2459 1.03163 11.307C1.00606 11.3681 0.992889 11.4337 0.992889 11.5C0.992889 11.5663 1.00606 11.6319 1.03163 11.693C1.05721 11.7541 1.09467 11.8095 1.14186 11.8561C1.18904 11.9026 1.245 11.9393 1.30649 11.964C1.36797 11.9887 1.43375 12.0009 1.50001 12H7.4922C7.55845 12.0009 7.62424 11.9887 7.68572 11.964C7.7472 11.9393 7.80316 11.9026 7.85035 11.8561C7.89753 11.8095 7.935 11.7541 7.96058 11.693C7.98615 11.6319 7.99932 11.5663 7.99932 11.5C7.99932 11.4337 7.98615 11.3681 7.96058 11.307C7.935 11.2459 7.89753 11.1904 7.85035 11.1439C7.80316 11.0974 7.7472 11.0607 7.68572 11.036C7.62424 11.0113 7.55845 10.9991 7.4922 11H1.50001ZM1.50001 14C1.43375 13.9991 1.36797 14.0113 1.30649 14.036C1.245 14.0607 1.18904 14.0974 1.14186 14.1439C1.09467 14.1904 1.05721 14.2459 1.03163 14.307C1.00606 14.3681 0.992889 14.4337 0.992889 14.5C0.992889 14.5663 1.00606 14.6319 1.03163 14.693C1.05721 14.7541 1.09467 14.8095 1.14186 14.8561C1.18904 14.9026 1.245 14.9393 1.30649 14.964C1.36797 14.9887 1.43375 15.0009 1.50001 15H14.4922C14.5585 15.0009 14.6242 14.9887 14.6857 14.964C14.7472 14.9393 14.8032 14.9026 14.8504 14.8561C14.8975 14.8095 14.935 14.7541 14.9606 14.693C14.9861 14.6319 14.9993 14.5663 14.9993 14.5C14.9993 14.4337 14.9861 14.3681 14.9606 14.307C14.935 14.2459 14.8975 14.1904 14.8504 14.1439C14.8032 14.0974 14.7472 14.0607 14.6857 14.036C14.6242 14.0113 14.5585 13.9991 14.4922 14H1.50001Z" fill="white"/>
+</svg>`,
+  "text-center": `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.4922 1.99999C1.42594 1.99905 1.36016 2.01129 1.29868 2.036C1.23719 2.06071 1.18123 2.09739 1.13405 2.14391C1.08686 2.19043 1.04939 2.24587 1.02382 2.307C0.998245 2.36812 0.985077 2.43373 0.985077 2.49999C0.985077 2.56625 0.998245 2.63185 1.02382 2.69298C1.04939 2.75411 1.08686 2.80955 1.13405 2.85607C1.18123 2.90259 1.23719 2.93927 1.29868 2.96398C1.36016 2.98869 1.42594 3.00093 1.4922 2.99999H14.4863C14.5526 3.00093 14.6184 2.98869 14.6799 2.96398C14.7413 2.93927 14.7973 2.90259 14.8445 2.85607C14.8917 2.80955 14.9291 2.75411 14.9547 2.69298C14.9803 2.63185 14.9935 2.56625 14.9935 2.49999C14.9935 2.43373 14.9803 2.36812 14.9547 2.307C14.9291 2.24587 14.8917 2.19043 14.8445 2.14391C14.7973 2.09739 14.7413 2.06071 14.6799 2.036C14.6184 2.01129 14.5526 1.99905 14.4863 1.99999H1.4922ZM5.4922 4.99999C5.42594 4.99905 5.36016 5.01129 5.29868 5.036C5.23719 5.06071 5.18123 5.09739 5.13405 5.14391C5.08686 5.19043 5.04939 5.24587 5.02382 5.307C4.99825 5.36812 4.98508 5.43373 4.98508 5.49999C4.98508 5.56625 4.99825 5.63185 5.02382 5.69298C5.04939 5.75411 5.08686 5.80955 5.13405 5.85607C5.18123 5.90259 5.23719 5.93927 5.29868 5.96398C5.36016 5.98869 5.42594 6.00093 5.4922 5.99999H10.4863C10.5526 6.00093 10.6184 5.98869 10.6799 5.96398C10.7413 5.93927 10.7973 5.90259 10.8445 5.85607C10.8917 5.80955 10.9291 5.75411 10.9547 5.69298C10.9803 5.63185 10.9935 5.56625 10.9935 5.49999C10.9935 5.43373 10.9803 5.36812 10.9547 5.307C10.9291 5.24587 10.8917 5.19043 10.8445 5.14391C10.7973 5.09739 10.7413 5.06071 10.6799 5.036C10.6184 5.01129 10.5526 4.99905 10.4863 4.99999H5.4922ZM1.4922 7.99999C1.42594 7.99905 1.36016 8.01129 1.29868 8.036C1.23719 8.06071 1.18123 8.09739 1.13405 8.14391C1.08686 8.19043 1.04939 8.24587 1.02382 8.307C0.998245 8.36812 0.985077 8.43373 0.985077 8.49999C0.985077 8.56625 0.998245 8.63185 1.02382 8.69298C1.04939 8.75411 1.08686 8.80955 1.13405 8.85607C1.18123 8.90259 1.23719 8.93927 1.29868 8.96398C1.36016 8.98869 1.42594 9.00093 1.4922 8.99999H14.4863C14.5526 9.00093 14.6184 8.98869 14.6799 8.96398C14.7413 8.93927 14.7973 8.90259 14.8445 8.85607C14.8917 8.80955 14.9291 8.75411 14.9547 8.69298C14.9803 8.63185 14.9935 8.56625 14.9935 8.49999C14.9935 8.43373 14.9803 8.36812 14.9547 8.307C14.9291 8.24587 14.8917 8.19043 14.8445 8.14391C14.7973 8.09739 14.7413 8.06071 14.6799 8.036C14.6184 8.01129 14.5526 7.99905 14.4863 7.99999H1.4922ZM5.4922 11C5.42594 10.9991 5.36016 11.0113 5.29868 11.036C5.23719 11.0607 5.18123 11.0974 5.13405 11.1439C5.08686 11.1904 5.04939 11.2459 5.02382 11.307C4.99825 11.3681 4.98508 11.4337 4.98508 11.5C4.98508 11.5663 4.99825 11.6319 5.02382 11.693C5.04939 11.7541 5.08686 11.8095 5.13405 11.8561C5.18123 11.9026 5.23719 11.9393 5.29868 11.964C5.36016 11.9887 5.42594 12.0009 5.4922 12H10.4863C10.5526 12.0009 10.6184 11.9887 10.6799 11.964C10.7413 11.9393 10.7973 11.9026 10.8445 11.8561C10.8917 11.8095 10.9291 11.7541 10.9547 11.693C10.9803 11.6319 10.9935 11.5663 10.9935 11.5C10.9935 11.4337 10.9803 11.3681 10.9547 11.307C10.9291 11.2459 10.8917 11.1904 10.8445 11.1439C10.7973 11.0974 10.7413 11.0607 10.6799 11.036C10.6184 11.0113 10.5526 10.9991 10.4863 11H5.4922ZM1.4922 14C1.42594 13.9991 1.36016 14.0113 1.29868 14.036C1.23719 14.0607 1.18123 14.0974 1.13405 14.1439C1.08686 14.1904 1.04939 14.2459 1.02382 14.307C0.998245 14.3681 0.985077 14.4337 0.985077 14.5C0.985077 14.5663 0.998245 14.6319 1.02382 14.693C1.04939 14.7541 1.08686 14.8095 1.13405 14.8561C1.18123 14.9026 1.23719 14.9393 1.29868 14.964C1.36016 14.9887 1.42594 15.0009 1.4922 15H14.4863C14.5526 15.0009 14.6184 14.9887 14.6799 14.964C14.7413 14.9393 14.7973 14.9026 14.8445 14.8561C14.8917 14.8095 14.9291 14.7541 14.9547 14.693C14.9803 14.6319 14.9935 14.5663 14.9935 14.5C14.9935 14.4337 14.9803 14.3681 14.9547 14.307C14.9291 14.2459 14.8917 14.1904 14.8445 14.1439C14.7973 14.0974 14.7413 14.0607 14.6799 14.036C14.6184 14.0113 14.5526 13.9991 14.4863 14H1.4922Z" fill="white"/>
+</svg>`,
+  "text-right": `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.4922 1.99999C1.42594 1.99905 1.36016 2.01129 1.29868 2.036C1.2372 2.06071 1.18123 2.09739 1.13405 2.14391C1.08686 2.19043 1.0494 2.24587 1.02382 2.307C0.998249 2.36812 0.985077 2.43373 0.985077 2.49999C0.985077 2.56625 0.998249 2.63185 1.02382 2.69298C1.0494 2.75411 1.08686 2.80955 1.13405 2.85607C1.18123 2.90259 1.2372 2.93927 1.29868 2.96398C1.36016 2.98869 1.42594 3.00093 1.4922 2.99999H14.4863C14.5526 3.00093 14.6184 2.98869 14.6799 2.96398C14.7413 2.93927 14.7973 2.90259 14.8445 2.85607C14.8917 2.80955 14.9291 2.75411 14.9547 2.69298C14.9803 2.63185 14.9935 2.56625 14.9935 2.49999C14.9935 2.43373 14.9803 2.36812 14.9547 2.307C14.9291 2.24587 14.8917 2.19043 14.8445 2.14391C14.7973 2.09739 14.7413 2.06071 14.6799 2.036C14.6184 2.01129 14.5526 1.99905 14.4863 1.99999H1.4922ZM8.4922 4.99999C8.42594 4.99905 8.36016 5.01129 8.29868 5.036C8.2372 5.06071 8.18123 5.09739 8.13405 5.14391C8.08686 5.19043 8.0494 5.24587 8.02382 5.307C7.99825 5.36812 7.98508 5.43373 7.98508 5.49999C7.98508 5.56625 7.99825 5.63185 8.02382 5.69298C8.0494 5.75411 8.08686 5.80955 8.13405 5.85607C8.18123 5.90259 8.2372 5.93927 8.29868 5.96398C8.36016 5.98869 8.42594 6.00093 8.4922 5.99999H14.4863C14.5526 6.00093 14.6184 5.98869 14.6799 5.96398C14.7413 5.93927 14.7973 5.90259 14.8445 5.85607C14.8917 5.80955 14.9291 5.75411 14.9547 5.69298C14.9803 5.63185 14.9935 5.56625 14.9935 5.49999C14.9935 5.43373 14.9803 5.36812 14.9547 5.307C14.9291 5.24587 14.8917 5.19043 14.8445 5.14391C14.7973 5.09739 14.7413 5.06071 14.6799 5.036C14.6184 5.01129 14.5526 4.99905 14.4863 4.99999H8.4922ZM1.4922 7.99999C1.42594 7.99905 1.36016 8.01129 1.29868 8.036C1.2372 8.06071 1.18123 8.09739 1.13405 8.14391C1.08686 8.19043 1.0494 8.24587 1.02382 8.307C0.998249 8.36812 0.985077 8.43373 0.985077 8.49999C0.985077 8.56625 0.998249 8.63185 1.02382 8.69298C1.0494 8.75411 1.08686 8.80955 1.13405 8.85607C1.18123 8.90259 1.2372 8.93927 1.29868 8.96398C1.36016 8.98869 1.42594 9.00093 1.4922 8.99999H14.4863C14.5526 9.00093 14.6184 8.98869 14.6799 8.96398C14.7413 8.93927 14.7973 8.90259 14.8445 8.85607C14.8917 8.80955 14.9291 8.75411 14.9547 8.69298C14.9803 8.63185 14.9935 8.56625 14.9935 8.49999C14.9935 8.43373 14.9803 8.36812 14.9547 8.307C14.9291 8.24587 14.8917 8.19043 14.8445 8.14391C14.7973 8.09739 14.7413 8.06071 14.6799 8.036C14.6184 8.01129 14.5526 7.99905 14.4863 7.99999H1.4922ZM8.4922 11C8.42594 10.9991 8.36016 11.0113 8.29868 11.036C8.2372 11.0607 8.18123 11.0974 8.13405 11.1439C8.08686 11.1904 8.0494 11.2459 8.02382 11.307C7.99825 11.3681 7.98508 11.4337 7.98508 11.5C7.98508 11.5663 7.99825 11.6319 8.02382 11.693C8.0494 11.7541 8.08686 11.8095 8.13405 11.8561C8.18123 11.9026 8.2372 11.9393 8.29868 11.964C8.36016 11.9887 8.42594 12.0009 8.4922 12H14.4863C14.5526 12.0009 14.6184 11.9887 14.6799 11.964C14.7413 11.9393 14.7973 11.9026 14.8445 11.8561C14.8917 11.8095 14.9291 11.7541 14.9547 11.693C14.9803 11.6319 14.9935 11.5663 14.9935 11.5C14.9935 11.4337 14.9803 11.3681 14.9547 11.307C14.9291 11.2459 14.8917 11.1904 14.8445 11.1439C14.7973 11.0974 14.7413 11.0607 14.6799 11.036C14.6184 11.0113 14.5526 10.9991 14.4863 11H8.4922ZM1.4922 14C1.42594 13.9991 1.36016 14.0113 1.29868 14.036C1.2372 14.0607 1.18123 14.0974 1.13405 14.1439C1.08686 14.1904 1.0494 14.2459 1.02382 14.307C0.998249 14.3681 0.985077 14.4337 0.985077 14.5C0.985077 14.5663 0.998249 14.6319 1.02382 14.693C1.0494 14.7541 1.08686 14.8095 1.13405 14.8561C1.18123 14.9026 1.2372 14.9393 1.29868 14.964C1.36016 14.9887 1.42594 15.0009 1.4922 15H14.4863C14.5526 15.0009 14.6184 14.9887 14.6799 14.964C14.7413 14.9393 14.7973 14.9026 14.8445 14.8561C14.8917 14.8095 14.9291 14.7541 14.9547 14.693C14.9803 14.6319 14.9935 14.5663 14.9935 14.5C14.9935 14.4337 14.9803 14.3681 14.9547 14.307C14.9291 14.2459 14.8917 14.1904 14.8445 14.1439C14.7973 14.0974 14.7413 14.0607 14.6799 14.036C14.6184 14.0113 14.5526 13.9991 14.4863 14H1.4922Z" fill="white"/>
+</svg>`,
+  "text-justify": `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.4922 1.99999C1.42594 1.99905 1.36016 2.01129 1.29868 2.036C1.23719 2.06071 1.18123 2.09739 1.13404 2.14391C1.08686 2.19043 1.04939 2.24587 1.02382 2.307C0.998245 2.36812 0.985077 2.43373 0.985077 2.49999C0.985077 2.56625 0.998245 2.63185 1.02382 2.69298C1.04939 2.75411 1.08686 2.80955 1.13404 2.85607C1.18123 2.90259 1.23719 2.93927 1.29868 2.96398C1.36016 2.98869 1.42594 3.00093 1.4922 2.99999H14.4863C14.5526 3.00093 14.6184 2.98869 14.6799 2.96398C14.7413 2.93927 14.7973 2.90259 14.8445 2.85607C14.8917 2.80955 14.9291 2.75411 14.9547 2.69298C14.9803 2.63185 14.9935 2.56625 14.9935 2.49999C14.9935 2.43373 14.9803 2.36812 14.9547 2.307C14.9291 2.24587 14.8917 2.19043 14.8445 2.14391C14.7973 2.09739 14.7413 2.06071 14.6799 2.036C14.6184 2.01129 14.5526 1.99905 14.4863 1.99999H1.4922ZM1.4922 4.99999C1.42594 4.99905 1.36016 5.01129 1.29868 5.036C1.23719 5.06071 1.18123 5.09739 1.13404 5.14391C1.08686 5.19043 1.04939 5.24587 1.02382 5.307C0.998245 5.36812 0.985077 5.43373 0.985077 5.49999C0.985077 5.56625 0.998245 5.63185 1.02382 5.69298C1.04939 5.75411 1.08686 5.80955 1.13404 5.85607C1.18123 5.90259 1.23719 5.93927 1.29868 5.96398C1.36016 5.98869 1.42594 6.00093 1.4922 5.99999H14.4863C14.5526 6.00093 14.6184 5.98869 14.6799 5.96398C14.7413 5.93927 14.7973 5.90259 14.8445 5.85607C14.8917 5.80955 14.9291 5.75411 14.9547 5.69298C14.9803 5.63185 14.9935 5.56625 14.9935 5.49999C14.9935 5.43373 14.9803 5.36812 14.9547 5.307C14.9291 5.24587 14.8917 5.19043 14.8445 5.14391C14.7973 5.09739 14.7413 5.06071 14.6799 5.036C14.6184 5.01129 14.5526 4.99905 14.4863 4.99999H1.4922ZM1.4922 7.99999C1.42594 7.99905 1.36016 8.01129 1.29868 8.036C1.23719 8.06071 1.18123 8.09739 1.13404 8.14391C1.08686 8.19043 1.04939 8.24587 1.02382 8.307C0.998245 8.36812 0.985077 8.43373 0.985077 8.49999C0.985077 8.56625 0.998245 8.63185 1.02382 8.69298C1.04939 8.75411 1.08686 8.80955 1.13404 8.85607C1.18123 8.90259 1.23719 8.93927 1.29868 8.96398C1.36016 8.98869 1.42594 9.00093 1.4922 8.99999H14.4863C14.5526 9.00093 14.6184 8.98869 14.6799 8.96398C14.7413 8.93927 14.7973 8.90259 14.8445 8.85607C14.8917 8.80955 14.9291 8.75411 14.9547 8.69298C14.9803 8.63185 14.9935 8.56625 14.9935 8.49999C14.9935 8.43373 14.9803 8.36812 14.9547 8.307C14.9291 8.24587 14.8917 8.19043 14.8445 8.14391C14.7973 8.09739 14.7413 8.06071 14.6799 8.036C14.6184 8.01129 14.5526 7.99905 14.4863 7.99999H1.4922ZM1.4922 11C1.42594 10.9991 1.36016 11.0113 1.29868 11.036C1.23719 11.0607 1.18123 11.0974 1.13404 11.1439C1.08686 11.1904 1.04939 11.2459 1.02382 11.307C0.998245 11.3681 0.985077 11.4337 0.985077 11.5C0.985077 11.5663 0.998245 11.6319 1.02382 11.693C1.04939 11.7541 1.08686 11.8095 1.13404 11.8561C1.18123 11.9026 1.23719 11.9393 1.29868 11.964C1.36016 11.9887 1.42594 12.0009 1.4922 12H14.4863C14.5526 12.0009 14.6184 11.9887 14.6799 11.964C14.7413 11.9393 14.7973 11.9026 14.8445 11.8561C14.8917 11.8095 14.9291 11.7541 14.9547 11.693C14.9803 11.6319 14.9935 11.5663 14.9935 11.5C14.9935 11.4337 14.9803 11.3681 14.9547 11.307C14.9291 11.2459 14.8917 11.1904 14.8445 11.1439C14.7973 11.0974 14.7413 11.0607 14.6799 11.036C14.6184 11.0113 14.5526 10.9991 14.4863 11H1.4922ZM1.4922 14C1.42594 13.9991 1.36016 14.0113 1.29868 14.036C1.23719 14.0607 1.18123 14.0974 1.13404 14.1439C1.08686 14.1904 1.04939 14.2459 1.02382 14.307C0.998245 14.3681 0.985077 14.4337 0.985077 14.5C0.985077 14.5663 0.998245 14.6319 1.02382 14.693C1.04939 14.7541 1.08686 14.8095 1.13404 14.8561C1.18123 14.9026 1.23719 14.9393 1.29868 14.964C1.36016 14.9887 1.42594 15.0009 1.4922 15H14.4863C14.5526 15.0009 14.6184 14.9887 14.6799 14.964C14.7413 14.9393 14.7973 14.9026 14.8445 14.8561C14.8917 14.8095 14.9291 14.7541 14.9547 14.693C14.9803 14.6319 14.9935 14.5663 14.9935 14.5C14.9935 14.4337 14.9803 14.3681 14.9547 14.307C14.9291 14.2459 14.8917 14.1904 14.8445 14.1439C14.7973 14.0974 14.7413 14.0607 14.6799 14.036C14.6184 14.0113 14.5526 13.9991 14.4863 14H1.4922Z" fill="white"/>
 </svg>`,
 };
 export type Icon = keyof typeof svg;
diff --git a/packages/pixi-panel/src/PropertiesArea.svelte b/packages/pixi-panel/src/PropertiesArea.svelte
index 23549ea..0c1b5b6 100644
--- a/packages/pixi-panel/src/PropertiesArea.svelte
+++ b/packages/pixi-panel/src/PropertiesArea.svelte
@@ -39,6 +39,7 @@
     skewDimensions: true,
     visibility: true,
     font: true,
+    alignment: true,
     spacer: true,
     wordWrap: true,
     dropShadow: true,
diff --git a/packages/pixi-panel/src/TextProperties.svelte b/packages/pixi-panel/src/TextProperties.svelte
index 8153f9d..244bdee 100644
--- a/packages/pixi-panel/src/TextProperties.svelte
+++ b/packages/pixi-panel/src/TextProperties.svelte
@@ -7,6 +7,7 @@
   import Property from "blender-elements/src/Property/Property.svelte";
   import TextField from "blender-elements/src/TextField/TextField.svelte";
   import Toggle from "blender-elements/src/Toggle/Toggle.svelte";
+  import SelectMenu from "blender-elements/src/SelectMenu/SelectMenu.svelte";
 
   export let props: NodeProperties;
   export let expanded: Record<string, boolean>;
@@ -18,9 +19,18 @@
     typeof props.fontSize === "number" ||
     typeof props.fontStyle === "string" ||
     typeof props.fontVariant === "string";
+  $: alignmentPanel =
+    typeof props.align === "string" || typeof props.textBaseline === "string";
   $: spacingPanel = typeof props.letterSpacing === "number";
   $: dropShadowPanel = typeof props.dropShadow === "boolean";
   $: strokePanel = typeof props.stroke === "string";
+
+  const alignOptions = [
+    { value: "left", label: "Left", icon: "text-left" },
+    { value: "center", label: "Center", icon: "text-center" },
+    { value: "right", label: "Right", icon: "text-right" },
+    { value: "justify", label: "Justify", icon: "text-justify" },
+  ];
 </script>
 
 {#if typeof props.text === "string"}
@@ -118,8 +128,23 @@
     {/if}
     {#if typeof props.fontWeight === "string"}
       <Property label="Weight" hint="The font weight">
-        <TextField
+        <SelectMenu
           value={props.fontWeight}
+          options={[
+            "normal",
+            "bold",
+            "bolder",
+            "lighter",
+            "100",
+            "200",
+            "300",
+            "400",
+            "500",
+            "600",
+            "700",
+            "800",
+            "900",
+          ]}
           on:change={(e) =>
             dispatch("change", { property: "fontWeight", value: e.detail })}
         />
@@ -127,6 +152,43 @@
     {/if}
   </Panel>
 {/if}
+{#if alignmentPanel}
+  <Panel title="Alignment" bind:expanded={expanded.alignment}>
+    {#if typeof props.align === "string"}
+      <Property
+        label="Align"
+        hint="Alignment for multiline text, does not affect single line text"
+      >
+        <SelectMenu
+          value={props.align}
+          options={alignOptions}
+          on:change={(e) =>
+            dispatch("change", { property: "align", value: e.detail })}
+        />
+      </Property>
+    {/if}
+    {#if typeof props.textBaseline === "string"}
+      <Property
+        label="Baseline"
+        hint="The baseline of the text that is rendered."
+      >
+        <SelectMenu
+          value={props.textBaseline}
+          options={[
+            "alphabetic",
+            "top",
+            "hanging",
+            "middle",
+            "ideographic",
+            "bottom",
+          ]}
+          on:change={(e) =>
+            dispatch("change", { property: "textBaseline", value: e.detail })}
+        />
+      </Property>
+    {/if}
+  </Panel>
+{/if}
 {#if spacingPanel}
   <Panel title="Spacing" bind:expanded={expanded.spacing}>
     {#if typeof props.leading === "number"}
@@ -383,8 +445,6 @@
 {/if}
 
 <!-- 
-    align: string
-    textBaseline: string
     lineJoin: string
     miterLimit: number
 -->