Saner activation strategy

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,
   };
 }

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;

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();
+          },
+        },
       }}
     />;
   },

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 {

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"

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; }
+  }
 }

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