From 6ef1a3b172f5d34a301c934fa850a2289ed9a43f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= <hello@benjaminbaedorf.eu>
Date: Sun, 24 May 2020 22:39:14 +0200
Subject: [PATCH] Saner activation strategy

---
 src/components/TreeElement.ts            |  8 ++++++++
 src/components/internal/Block.scss       |  5 +----
 src/components/internal/Block.tsx        | 13 ++++++++++---
 src/components/user/Layout/edit.tsx      |  5 ++---
 src/components/user/Paragraph/edit.tsx   | 24 ++++++++++++++++++------
 src/components/user/Paragraph/style.scss |  6 ++++++
 src/components/user/Paragraph/util.ts    |  6 +++++-
 7 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/components/TreeElement.ts b/src/components/TreeElement.ts
index f02ee55..256fd51 100644
--- a/src/components/TreeElement.ts
+++ b/src/components/TreeElement.ts
@@ -54,9 +54,17 @@ export function useActivation(currentBlockId: string|number) {
   const activate = (blockId?: string|number|null) => {
     activeBlockId.value = blockId !== undefined ? blockId : currentBlockId;
   };
+  const requestActivation = () => {
+    if (activeBlockId.value) {
+      return;
+    }
+
+    activate();
+  };
 
   return {
     isActive,
     activate,
+    requestActivation,
   };
 }
diff --git a/src/components/internal/Block.scss b/src/components/internal/Block.scss
index 81d4972..1349d1e 100644
--- a/src/components/internal/Block.scss
+++ b/src/components/internal/Block.scss
@@ -10,12 +10,9 @@
     pointer-events: none;
   }
 
-  &:focus,
-  &:hover {
+  &_active {
     outline: 1px solid var(--grey-2);
-  }
 
-  &:focus {
     > .sb-toolbar {
       opacity: 1;
       pointer-events: all;
diff --git a/src/components/internal/Block.tsx b/src/components/internal/Block.tsx
index 586cfff..d8096f3 100644
--- a/src/components/internal/Block.tsx
+++ b/src/components/internal/Block.tsx
@@ -20,11 +20,11 @@ export default defineComponent({
   },
 
   setup(props, context) {
-    const { isActive, activate } = useActivation(props.block.blockId);
+    const { isActive, activate, requestActivation } = useActivation(props.block.blockId);
     const { getBlock } = useDynamicBlocks();
     const classes = computed(() => ({
       'sb-block': true,
-      'sb-block_active': isActive,
+      'sb-block_active': isActive.value,
     }));
 
     const onChildUpdate = (updated: {[key: string]: any}) => {
@@ -41,8 +41,8 @@ export default defineComponent({
     return {
       getBlock,
       classes,
-      activate,
       onChildUpdate,
+      activate,
     };
   },
 
@@ -50,6 +50,7 @@ export default defineComponent({
     console.log('render block', this.block);
     const Block = this.getBlock(this.block.name).edit;
     return <Block
+      class={this.classes}
       data={this.block.data}
       block-id={this.block.blockId}
       {...{
@@ -60,6 +61,12 @@ export default defineComponent({
           'insert-block': (block: BlockDefinition) => this.$emit('insert-block', block),
           'append-block': (block: BlockDefinition) => this.$emit('append-block', block),
         },
+        nativeOn: {
+          click: ($event) => {
+            $event.stopPropagation();
+            this.activate();
+          },
+        },
       }}
     />;
   },
diff --git a/src/components/user/Layout/edit.tsx b/src/components/user/Layout/edit.tsx
index 40e5ddb..69bd2ee 100644
--- a/src/components/user/Layout/edit.tsx
+++ b/src/components/user/Layout/edit.tsx
@@ -55,7 +55,6 @@ export default defineComponent({
 
     const classes = computed(() => ({
       'sb-layout': true,
-      'sb-layout_active': isActive,
       [`sb-layout_${localData.orientation}`]: true,
     }));
 
@@ -80,17 +79,16 @@ export default defineComponent({
     };
 
     const appendBlock = (block: BlockData) => {
-      console.log('append block', block);
       context.emit('update', {
         children: [
           ...localData.children,
           block,
         ],
       });
+      activate(block.blockId);
     };
 
     const insertBlock = (index: number, block: BlockData) => {
-      console.log('insert block', index, block);
       context.emit('update', {
         children: [
           ...localData.children.slice(0, index + 1),
@@ -98,6 +96,7 @@ export default defineComponent({
           ...localData.children.slice(index + 1),
         ],
       });
+      activate(block.blockId);
     };
 
     return {
diff --git a/src/components/user/Paragraph/edit.tsx b/src/components/user/Paragraph/edit.tsx
index ee169dd..da7ec8f 100644
--- a/src/components/user/Paragraph/edit.tsx
+++ b/src/components/user/Paragraph/edit.tsx
@@ -1,6 +1,7 @@
 import {
   defineComponent,
   reactive,
+  computed,
   ref,
   Ref,
   onMounted,
@@ -17,7 +18,7 @@ import {
   getDefaultData,
   ParagraphData,
   ParagraphProps,
-} from './util.ts';
+} from './util';
 
 import SbToolbar from '@internal/Toolbar';
 
@@ -39,9 +40,12 @@ export default defineComponent({
   setup(props: ParagraphProps, context) {
     const localData = reactive({
       value: props.data.value,
+      align: props.data.align,
       focused: false,
     });
 
+    console.log(localData);
+
     const inputEl: Ref<null|HTMLElement> = ref(null);
 
     const { isActive, activate } = useActivation(props.blockId);
@@ -50,14 +54,16 @@ export default defineComponent({
       if (inputEl.value) {
         inputEl.value.innerHTML = localData.value;
 
-        if (isActive) {
+        if (isActive.value) {
           inputEl.value.focus();
         }
       }
     });
 
     watch(() => props.data, () => {
+      console.log('props update paragraph');
       localData.value = props.data.value;
+      localData.align = props.data.align;
       if (inputEl.value) {
         inputEl.value.innerHTML = localData.value;
       }
@@ -67,10 +73,11 @@ export default defineComponent({
       localData.value = $event.target.innerHTML;
     };
 
-    const classes = reactive({
+    const classes = computed(() => ({
       'sb-paragraph': true,
       'sb-paragraph_focused': localData.focused,
-    });
+      [`sb-paragraph_align-${localData.align}`]: true,
+    }));
 
     const onFocus = () => {
       localData.focused = true;
@@ -111,10 +118,15 @@ export default defineComponent({
   },
 
   render() {
-    console.log('render paragraph');
     return (
       <div class="sb-paragraph">
-        <SbToolbar>Paragraph editing</SbToolbar>
+        <SbToolbar>
+          <select vModel={this.localData.align}>
+            <option>left</option>
+            <option>center</option>
+            <option>right</option>
+          </select>
+        </SbToolbar>
         <p
           class={this.classes}
           ref="inputEl"
diff --git a/src/components/user/Paragraph/style.scss b/src/components/user/Paragraph/style.scss
index 60c8730..a6123b3 100644
--- a/src/components/user/Paragraph/style.scss
+++ b/src/components/user/Paragraph/style.scss
@@ -1,4 +1,10 @@
 .sb-paragraph {
   display: block;
   width: 100%;
+
+  &_align {
+    &-left { text-align: left; }
+    &-right { text-align: right; }
+    &-center { text-align: center; }
+  }
 }
diff --git a/src/components/user/Paragraph/util.ts b/src/components/user/Paragraph/util.ts
index 2e9f16f..5cd0719 100644
--- a/src/components/user/Paragraph/util.ts
+++ b/src/components/user/Paragraph/util.ts
@@ -2,10 +2,14 @@ import { BlockProps } from '@components/TreeElement';
 
 export interface ParagraphData {
   value: string;
+  align: string;
 }
 
 export interface ParagraphProps extends BlockProps {
   data: ParagraphData;
 }
 
-export const getDefaultData: () => ParagraphData = () => ({ value: '' });
+export const getDefaultData: () => ParagraphData = () => ({
+  value: '',
+  align: 'left',
+});