Add hover cover

packages/core/lib/components/Block.scss

@@ -13,15 +13,13 @@
     pointer-events: none;
   }
 
-  &__edit-cover {
-  }
-
   > .sb-block-ordering {
     opacity: 0;
     pointer-events: none;
   }
 
-  &_active {
+  &_active,
+  &_active:hover {
     outline: 4px solid var(--interact);
 
     > * > .sb-toolbar {

packages/core/lib/components/Block.tsx

@@ -12,6 +12,7 @@ import { useResizeObserver, SymBlockDimensions } from '../use-resize-observer';
 import { useActivation } from '../use-activation';
 import { useBlockTree } from '../use-block-tree';
 import { useDynamicBlocks } from '../use-dynamic-blocks';
+import hoverCover from '../directives/hover-cover';
 
 import SbMissingBlock from './MissingBlock';
 
@@ -20,6 +21,10 @@ import './Block.scss';
 export const SbBlock = defineComponent({
   name: 'sb-block',
 
+  directives: {
+    hoverCover,
+  },
+
   props: {
     block: {
       type: (null as unknown) as PropType<IBlockData<any>>,
@@ -87,8 +92,8 @@ export const SbBlock = defineComponent({
       return <div
         ref={el}
         class={classes.value}
+        v-hover-cover
       >
-        <div class="sb-block__edit-cover"></div>
         {context.slots['context-toolbar'] ? context.slots['context-toolbar']() : null}
         <BlockComponent
           data={props.block.data}

packages/core/lib/components/Schlechtenburg.scss

@@ -1,5 +1,4 @@
 .sb-main {
   position: relative;
   background-color: var(--bg);
-  padding: 50px 40px;
 }

packages/core/lib/directives/activation-cover.js

@@ -1,3 +0,0 @@
-export default {
-
-};

packages/core/lib/directives/hover-cover.scss

@@ -0,0 +1,9 @@
+.sb-hover-cover {
+  &:hover {
+    outline: 1px dashed var(--interact);
+  }
+
+  &_child-hovered:hover {
+    outline: none;
+  }
+}

packages/core/lib/directives/hover-cover.ts

@@ -0,0 +1,66 @@
+import './hover-cover.scss';
+
+const findParents = (el: HTMLElement, foundParents: HTMLElement[] = []): HTMLElement[] => {
+  const parent = el.parentElement as HTMLElement|null;
+  if (!parent) {
+    return foundParents;
+  }
+
+  if (parent.classList.contains('sb-hover-cover')) {
+    return findParents(
+      parent,
+      [
+        ...foundParents,
+        parent,
+      ],
+    );
+  }
+
+  return findParents(
+    parent,
+    foundParents,
+  );
+}
+
+const parentData = new WeakMap();
+
+const onMouseEnter = (event: MouseEvent) => {
+  const parents = parentData.get(event.target as HTMLElement);
+  for (const parent of parents) {
+    parent.classList.add('sb-hover-cover_child-hovered');
+  }
+};
+
+const onMouseLeave = (event: MouseEvent) => {
+  const parents = parentData.get(event.target as HTMLElement);
+  if (parents && parents.length) {
+    parents[0].classList.remove('sb-hover-cover_child-hovered');
+  }
+};
+
+export default {
+  updated(el: HTMLElement) {
+    el.classList.add('sb-hover-cover');
+  },
+
+  beforeMount(el: HTMLElement) {
+    el.classList.add('sb-hover-cover');
+  },
+
+  mounted(el: HTMLElement) {
+    el.classList.add('sb-hover-cover');
+
+    const parents = findParents(el);
+    parentData.set(el, parents);
+
+    console.log('got parents', el, parents);
+
+    el.addEventListener('mouseenter', onMouseEnter)
+    el.addEventListener('mouseleave', onMouseLeave)
+  },
+
+  unmounted(el:HTMLElement) {
+    el.removeEventListener('mouseenter', onMouseEnter)
+    el.removeEventListener('mouseleave', onMouseLeave)
+  },
+};

packages/core/lib/index.ts

@@ -7,8 +7,6 @@ export * from './use-activation';
 export * from './use-dynamic-blocks';
 export * from './use-resize-observer';
 
-export * from './directives/activation-cover.js';
-
 export * from './components/Schlechtenburg';
 export * from './components/Block';
 export * from './components/BlockPicker';

packages/docs/lib/App.scss

@@ -1,6 +1,11 @@
-#app {
+.app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
+  padding: 3rem 4rem;
+
+  &--mode {
+    margin-bottom: 2rem;
+  }
 }

packages/docs/lib/App.tsx

@@ -69,8 +69,9 @@ export default defineComponent({
     });
 
     return () => {
-      return <div id="app">
+      return <div class="app" id="app">
         <select
+          class="app--mode"
           value={activeTab.value}
           onChange={($event: Event) => {
             activeTab.value = ($event.target as HTMLSelectElement).value;