add NodePreviewZone layout

src/components/layouts/NodePreviewZone.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    id="preview-zone"
+    class="preview-zone" :class="{ 'no-events-container': value === null }"
+    @mousedown="onZoneClick"
+  >
+    <b-popover
+      v-for="node in nodes" :key="'popover-' + node.id"
+      custom-class="popover-node-preview"
+      :target="'preview-node-' + node.id" container="preview-zone"
+      placement="auto"
+      triggers="manual" :boundary-padding="0"
+    >
+      <node-view
+        :node="node"
+        mode="card" preview
+        @open-node="$emit('open-node', $event)"
+        @open-child="$emit('open-node', { parentId: node.id, ...$event })"
+      />
+    </b-popover>
+  </div>
+</template>
+
+<script>
+import { NodeView } from '@/components/nodes'
+
+
+export default {
+  name: 'NodePreviewZone',
+
+  components: {
+    NodeView
+  },
+
+  props: {
+    value: { type: Object, default: null },
+    nodes: { type: Array, required: true }
+  },
+
+  methods: {
+    onZoneClick (e) {
+      if (this.value) {
+        if (e.target.id !== 'preview-zone') return
+        this.$root.$emit('bv::hide::popover', 'preview-node-' + this.value.id)
+        this.$emit('input', null)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.preview-zone {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.popover-node-preview {
+  max-width: 100%;
+
+  .popover-body {
+    padding: 0;
+  }
+}
+</style>

src/components/layouts/index.js

@@ -1,2 +1,3 @@
 export { default as MapZoom } from './MapZoom'
+export { default as NodePreviewZone } from './NodePreviewZone'
 export { default as NodeBook } from './NodeBook'