Connect text tool and order tool with view model

monosketch-svelte/src/lib/mono/shape/extra/style.ts

@@ -219,13 +219,13 @@ export class TextAlign implements Comparable {
     ) {
     }
 
-    private static ALL_HORIZONTAL_ALIGNS: TextHorizontalAlign[] = [
+    static ALL_HORIZONTAL_ALIGNS: TextHorizontalAlign[] = [
         TextHorizontalAlign.LEFT,
         TextHorizontalAlign.MIDDLE,
         TextHorizontalAlign.RIGHT,
     ];
 
-    private static ALL_VERTICAL_ALIGNS: TextVerticalAlign[] = [
+    static ALL_VERTICAL_ALIGNS: TextVerticalAlign[] = [
         TextVerticalAlign.TOP,
         TextVerticalAlign.MIDDLE,
         TextVerticalAlign.BOTTOM,

monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/Icon.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
-import { buttonContent, type ReorderType } from './model';
-import TooltipTarget from '$ui/modal/tooltip/TooltipTarget.svelte';
-import { Direction } from '$ui/modal/tooltip/model';
+    import TooltipTarget from '$ui/modal/tooltip/TooltipTarget.svelte';
+    import { Direction } from '$ui/modal/tooltip/model';
 
-export let icon: ReorderType;
-export let onClick: (icon: ReorderType) => void;
+    export let title: string;
+export let iconPath: string;
+export let onClick: () => void;
 </script>
 
-<TooltipTarget text="{buttonContent[icon].title}" direction="{Direction.TOP}">
-    <button
-        on:click="{() => {
-            onClick(icon);
-        }}"
-    >
+<TooltipTarget text="{title}" direction="{Direction.TOP}">
+    <button on:click="{onClick}">
         <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-            <path d="{buttonContent[icon].icon}"></path>
+            <path d="{iconPath}"></path>
         </svg>
     </button>
 </TooltipTarget>

monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/ReorderTool.svelte

@@ -1,27 +1,34 @@
 <script lang="ts">
-import Section from '../../common/Section.svelte';
-import Icon from './Icon.svelte';
-import { ReorderType } from './model';
+    import Section from '../../common/Section.svelte';
+    import Icon from './Icon.svelte';
+    import { ButtonContent, ChangeOrderTypes } from './model';
+    import { getContext } from "svelte";
+    import { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
+    import type { ChangeOrderType } from "$mono/shape/command/shape-manager-commands";
 
-function onClick(icon: ReorderType) {
-    console.log(icon);
-}
+    let viewModel = getContext<ShapeToolViewModel>(SHAPE_TOOL_VIEWMODEL);
+
+    function onClick(icon: ChangeOrderType) {
+        viewModel.update(OneTimeAction.ReorderShape(icon));
+    }
 </script>
 
 <Section hasBorderTop="{false}">
     <div>
-        <Icon icon="{ReorderType.FRONT}" {onClick} />
-        <Icon icon="{ReorderType.UPWARD}" {onClick} />
-        <Icon icon="{ReorderType.BACKWARD}" {onClick} />
-        <Icon icon="{ReorderType.BACK}" {onClick} />
+        {#each ChangeOrderTypes as button}
+            <Icon iconPath="{ButtonContent[button].icon}" title="{ButtonContent[button].title}"
+                  onClick="{() => onClick(button)}"/>
+        {/each}
     </div>
 </Section>
 
 <style>
-div {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    align-items: center;
-}
+    div {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+    }
 </style>

monosketch-svelte/src/lib/ui/pannel/shapetool/reorder/model.ts

@@ -1,24 +1,31 @@
-export enum ReorderType {
-    FRONT,
-    UPWARD,
-    BACKWARD,
-    BACK,
+import { ChangeOrderType } from "$mono/shape/command/shape-manager-commands";
+
+export interface ButtonContentType {
+    title: string;
+    icon: string;
 }
 
-export const buttonContent = {
-    [ReorderType.FRONT]: {
+export const ChangeOrderTypes = [
+    ChangeOrderType.FRONT,
+    ChangeOrderType.FORWARD,
+    ChangeOrderType.BACKWARD,
+    ChangeOrderType.BACK,
+];
+
+export const ButtonContent: Record<ChangeOrderType, ButtonContentType> = {
+    [ChangeOrderType.FRONT]: {
         title: 'Bring to Front',
         icon: 'M18,18h-9V15h-6V9h-3V0h9V3h6V9h3v9h0Zm-4-4V4H4V14h10Z',
     },
-    [ReorderType.UPWARD]: {
+    [ChangeOrderType.FORWARD]: {
         title: 'Bring Forward',
         icon: 'M18,18h-12v-5h-6v-13h13v6h5v12h0Zm-17-6h11v-11h-11Z',
     },
-    [ReorderType.BACKWARD]: {
+    [ChangeOrderType.BACKWARD]: {
         title: 'Send Backward',
         icon: 'M6,18V13h-6V0h13V6h5V18Zm-5-6h5V6h6V1H1Z',
     },
-    [ReorderType.BACK]: {
+    [ChangeOrderType.BACK]: {
         title: 'Send to Back',
         icon: 'M9,18V15h-6V9h-3V0h9V3h6V9h3v9Zm-5-4h5V9h-5Zm10-5V4h-5V9Z',
     },

monosketch-svelte/src/lib/ui/pannel/shapetool/text/FormatIcon.svelte

@@ -1,18 +1,14 @@
 <script lang="ts">
-import { type TextAlignment, textAlignmentMap } from './model';
 
-export let type: TextAlignment;
 export let selected: boolean;
-export let onChange: (type: TextAlignment) => void;
+export let iconPath: string;
+export let onClick: () => void;
 
-function onClick() {
-    onChange(type);
-}
 </script>
 
 <button class:selected on:click="{onClick}">
     <svg width="20" height="14" viewBox="0 0 20 14" fill="currentColor">
-        <path d="{textAlignmentMap[type].iconPath}"></path>
+        <path d="{iconPath}"></path>
     </svg>
 </button>
 

monosketch-svelte/src/lib/ui/pannel/shapetool/text/TextTool.svelte

@@ -1,64 +1,98 @@
 <script lang="ts">
-import Section from '../../common/Section.svelte';
-import FormatIcon from './FormatIcon.svelte';
-import { horizontalAlignmentTypes, TextAlignment, verticalAlignmentTypes } from './model';
+    import Section from '../../common/Section.svelte';
+    import FormatIcon from './FormatIcon.svelte';
+    import { HorizontalAlignIconMap, VerticalAlignIconMap } from './model';
+    import { TextAlign, TextHorizontalAlign, TextVerticalAlign } from "$mono/shape/extra/style";
+    import { ShapeToolViewModel } from "$ui/pannel/shapetool/viewmodel/shape-tool-viewmodel";
+    import { SHAPE_TOOL_VIEWMODEL } from "$ui/pannel/shapetool/constants";
+    import { getContext, onDestroy, onMount } from "svelte";
+    import { LifecycleOwner } from "$libs/flow";
+    import { OneTimeAction } from "$mono/action-manager/one-time-actions";
 
-let selectedHorizontalAlignment: TextAlignment = TextAlignment.HORIZONTAL_LEFT;
-let selectedVerticalAlignment: TextAlignment = TextAlignment.VERTICAL_TOP;
+    let viewModel = getContext<ShapeToolViewModel>(SHAPE_TOOL_VIEWMODEL);
+    let lifecycleOwner = new LifecycleOwner();
 
-function onHorizontalChange(type: TextAlignment) {
-    selectedHorizontalAlignment = type;
-}
+    let horizontalAlign: TextHorizontalAlign | null | undefined = viewModel.textAlignFlow.value?.horizontalAlign;
+    let verticalAlign: TextVerticalAlign | null | undefined = viewModel.textAlignFlow.value?.verticalAlign;
 
-function onVerticalChange(type: TextAlignment) {
-    selectedVerticalAlignment = type;
-}
+    function onHorizontalChange(type: TextHorizontalAlign) {
+        horizontalAlign = type;
+        viewModel.update(OneTimeAction.TextAlignment({
+            newHorizontalAlign: horizontalAlign,
+            newVerticalAlign: verticalAlign
+        }));
+    }
+
+    function onVerticalChange(type: TextVerticalAlign) {
+        verticalAlign = type;
+        viewModel.update(OneTimeAction.TextAlignment({
+            newHorizontalAlign: horizontalAlign,
+            newVerticalAlign: verticalAlign
+        }));
+    }
+
+    onMount(() => {
+        lifecycleOwner.onStart();
+
+        viewModel.textAlignFlow.observe(lifecycleOwner, (value) => {
+            if (!value) {
+                return;
+            }
+            horizontalAlign = value.horizontalAlign;
+            verticalAlign = value.verticalAlign;
+        });
+    });
+
+    onDestroy(() => {
+        lifecycleOwner.onStop();
+    });
 </script>
 
-<Section title="TEXT">
-    <div class="row">
-        <span>Alignment</span>
-        <div class="container">
-            {#each horizontalAlignmentTypes as type}
-                <FormatIcon
-                    {type}
-                    onChange="{onHorizontalChange}"
-                    selected="{selectedHorizontalAlignment === type}"
-                />
-            {/each}
+{#if horizontalAlign !== null && verticalAlign !== null}
+    <Section title="TEXT">
+        <div class="row">
+            <span>Alignment</span>
+            <div class="container">
+                {#each TextAlign.ALL_HORIZONTAL_ALIGNS as type}
+                    <FormatIcon
+                            onClick="{() => onHorizontalChange(type)}"
+                            iconPath="{HorizontalAlignIconMap[type]}"
+                            selected="{horizontalAlign === type}"
+                    />
+                {/each}
+            </div>
         </div>
-    </div>
 
-    <div class="row">
-        <span>Position</span>
-        <div class="container">
-            {#each verticalAlignmentTypes as type}
-                <FormatIcon
-                    {type}
-                    onChange="{onVerticalChange}"
-                    selected="{selectedVerticalAlignment === type}"
-                />
-            {/each}
+        <div class="row">
+            <span>Position</span>
+            <div class="container">
+                {#each TextAlign.ALL_VERTICAL_ALIGNS as type}
+                    <FormatIcon
+                            onClick="{() => onVerticalChange(type)}"
+                            iconPath="{VerticalAlignIconMap[type]}"
+                            selected="{verticalAlign === type}"
+                    />
+                {/each}
+            </div>
         </div>
-    </div>
-</Section>
-
+    </Section>
+{/if}
 <style lang="scss">
-$gap: 8px;
-.row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: $gap;
-}
+    $gap: 8px;
+    .row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: $gap;
+    }
 
-.container {
-    display: flex;
-    flex-direction: row;
-    gap: $gap;
-}
+    .container {
+        display: flex;
+        flex-direction: row;
+        gap: $gap;
+    }
 
-span {
-    width: 66px;
-}
+    span {
+        width: 66px;
+    }
 </style>

monosketch-svelte/src/lib/ui/pannel/shapetool/text/model.ts

@@ -1,41 +1,13 @@
-export enum TextAlignment {
-    HORIZONTAL_LEFT,
-    HORIZONTAL_MIDDLE,
-    HORIZONTAL_RIGHT,
-    VERTICAL_TOP,
-    VERTICAL_MIDDLE,
-    VERTICAL_BOTTOM,
-}
+import { TextHorizontalAlign } from "$mono/shape/extra/style";
 
-export const horizontalAlignmentTypes = [
-    TextAlignment.HORIZONTAL_LEFT,
-    TextAlignment.HORIZONTAL_MIDDLE,
-    TextAlignment.HORIZONTAL_RIGHT,
-];
-
-export const verticalAlignmentTypes = [
-    TextAlignment.VERTICAL_TOP,
-    TextAlignment.VERTICAL_MIDDLE,
-    TextAlignment.VERTICAL_BOTTOM,
-];
+export const HorizontalAlignIconMap: Record<TextHorizontalAlign, string> = {
+    [TextHorizontalAlign.LEFT]: 'M3 2h14v2H3zM3 6h8v2H3zM3 10h10v2H3z',
+    [TextHorizontalAlign.MIDDLE]: 'M3 2h14v2H3zM6 6h8v2H6zM5 10h10v2H5z',
+    [TextHorizontalAlign.RIGHT]: 'M3 2h14v2H3zM9 6h8v2H9zM7 10h10v2H7z',
+};
 
-export const textAlignmentMap = {
-    [TextAlignment.HORIZONTAL_LEFT]: {
-        iconPath: 'M3 2h14v2H3zM3 6h8v2H3zM3 10h10v2H3z',
-    },
-    [TextAlignment.HORIZONTAL_MIDDLE]: {
-        iconPath: 'M3 2h14v2H3zM6 6h8v2H6zM5 10h10v2H5z',
-    },
-    [TextAlignment.HORIZONTAL_RIGHT]: {
-        iconPath: 'M3 2h14v2H3zM9 6h8v2H9zM7 10h10v2H7z',
-    },
-    [TextAlignment.VERTICAL_TOP]: {
-        iconPath: 'M3 0h14v2H3zM3 4h14v2H3z',
-    },
-    [TextAlignment.VERTICAL_MIDDLE]: {
-        iconPath: 'M3 4h14v2H3zM3 8h14v2H3z',
-    },
-    [TextAlignment.VERTICAL_BOTTOM]: {
-        iconPath: 'M3 8h14v2H3zM3 12h14v2H3z',
-    },
+export const VerticalAlignIconMap: Record<TextHorizontalAlign, string> = {
+    [TextHorizontalAlign.LEFT]: 'M3 0h14v2H3zM3 4h14v2H3z',
+    [TextHorizontalAlign.MIDDLE]: 'M3 4h14v2H3zM3 8h14v2H3z',
+    [TextHorizontalAlign.RIGHT]: 'M3 8h14v2H3zM3 12h14v2H3z',
 };