feat: [vuerd-app] open file

ucodkr · Sep 23, 2021 · 0283b69 · 0283b69
1 parent 8858ee8
commit 0283b69
Show file tree

Hide file tree

Showing 12 changed files with 336 additions and 37 deletions.
diff --git a/packages/vuerd-app/src/components/Icon.vue b/packages/vuerd-app/src/components/Icon.vue
@@ -49,6 +49,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .svg-icon {
+  display: inline-flex;
   transition: fill 0.15s;
 }
 </style>
diff --git a/packages/vuerd-app/src/components/Sash.vue b/packages/vuerd-app/src/components/Sash.vue
@@ -1,4 +1,4 @@
-<script lang="tsx">
+<script lang="ts">
 import { defineComponent, computed } from 'vue';
 import { globalEvent, Move } from '@/helpers/event.helper';
 
@@ -29,7 +29,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const classMap = computed(() => ({
-      sash: true,
       vertical: props.vertical,
       horizontal: props.horizontal,
     }));
@@ -51,6 +50,11 @@ export default defineComponent({
       left: `${centerLeft.value}px`,
     }));
 
+    const lineStyleMap = computed(() => ({
+      top: `${Math.abs(centerTop.value)}px`,
+      left: `${Math.abs(centerLeft.value)}px`,
+    }));
+
     const onMousedown = (event: MouseEvent) => {
       emit('mousedownSash', event);
       globalEvent.drag$.subscribe(move => {
@@ -59,17 +63,22 @@ export default defineComponent({
       });
     };
 
-    return () => (
-      <div
-        class={classMap.value}
-        style={styleMap.value}
-        onMousedown={onMousedown}
-      />
-    );
+    return {
+      classMap,
+      styleMap,
+      lineStyleMap,
+      onMousedown,
+    };
   },
 });
 </script>
 
+<template lang="pug">
+.sash(:class="classMap" :style="styleMap" @mousedown="onMousedown")
+  .line-container(:class="classMap")
+    .line(:class="classMap" :style="lineStyleMap")
+</template>
+
 <style scoped lang="scss">
 $size-sash: 5px;
 
@@ -88,5 +97,41 @@ $size-sash: 5px;
     height: $size-sash;
     cursor: ns-resize;
   }
+
+  .line-container {
+    position: relative;
+    pointer-events: none;
+
+    &.vertical {
+      height: 100%;
+    }
+
+    &.horizontal {
+      width: 100%;
+    }
+
+    .line {
+      position: absolute;
+      background-color: var(--sash-background);
+
+      &.vertical {
+        width: 1px;
+        height: 100%;
+      }
+
+      &.horizontal {
+        width: 100%;
+        height: 1px;
+      }
+    }
+  }
+
+  &:hover {
+    background-color: var(--sash-foreground);
+
+    .line {
+      background-color: var(--sash-foreground);
+    }
+  }
 }
 </style>
diff --git a/packages/vuerd-app/src/components/editor/Editor.vue b/packages/vuerd-app/src/components/editor/Editor.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, computed, watch, onMounted } from 'vue';
+import { defineComponent, computed, watch, onMounted, ref } from 'vue';
 import { useViewportStore } from '@/store/ui/viewport.store';
 import { useViewStore, ViewNode } from '@/store/view';
 import SplitView from '@/components/editor/SplitView.vue';
@@ -8,6 +8,10 @@ import {
   resetHeightRatio,
   resetSize,
 } from '@/store/view/helper';
+import { Bus, eventBus } from '@/helpers/eventBus.helper';
+import { useUnsubscribe } from '@/hooks/useUnsubscribe';
+import { fromEvent, Subscription } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
 
 export default defineComponent({
   components: {
@@ -22,17 +26,41 @@ export default defineComponent({
   setup(props) {
     const [viewState] = useViewStore();
     const [viewportState] = useViewportStore();
+    const { push } = useUnsubscribe();
+    const elRef = ref<HTMLElement | null>(null);
+
+    const dragover$ = fromEvent<DragEvent>(window, 'dragover');
+    let subDragover: Subscription | null | undefined = null;
+
     const styleMap = computed(() => ({
       width: `${props.width}px`,
       height: `${viewportState.height}px`,
     }));
 
     const onDragover = (event: DragEvent) => {
-      if (event.dataTransfer) {
-        event.dataTransfer.dropEffect = 'move';
+      event.dataTransfer && (event.dataTransfer.dropEffect = 'move');
+    };
+
+    const onDragoverTrack = (event: MouseEvent) => {
+      if (!elRef.value) return;
+      const { x, y, width, height } = elRef.value.getBoundingClientRect();
+      const clientX = event.clientX - x;
+      const clientY = event.clientY - y;
+      if (clientX < 0 || clientY < 0 || clientX > width || clientY > height) {
+        eventBus.emit(Bus.EditorViewer.dropViewEnd);
       }
     };
 
+    const onEditorDragstart = () => {
+      subDragover = dragover$
+        .pipe(throttleTime(100))
+        .subscribe(onDragoverTrack);
+    };
+
+    const onEditorDragend = () => {
+      subDragover?.unsubscribe();
+    };
+
     watch(
       () => props.width,
       width => {
@@ -49,6 +77,11 @@ export default defineComponent({
       }
     );
 
+    push(
+      eventBus.on(Bus.Editor.dragstart).subscribe(onEditorDragstart),
+      eventBus.on(Bus.Editor.dragend).subscribe(onEditorDragend)
+    );
+
     onMounted(() => {
       viewState.root.width = props.width;
       viewState.root.height = viewportState.height;
@@ -57,6 +90,7 @@ export default defineComponent({
 
     return {
       root: viewState.root as ViewNode,
+      elRef,
       styleMap,
       onDragover,
     };
@@ -65,7 +99,12 @@ export default defineComponent({
 </script>
 
 <template lang="pug">
-.editor(:style="styleMap" @dragover.prevent="onDragover" @drop.prevent)
+.editor(
+  :style="styleMap"
+  ref="elRef"
+  @dragover.prevent="onDragover"
+  @drop.prevent
+)
   SplitView(:node="root")
 </template>
 

diff --git a/packages/vuerd-app/src/components/editor/SplitView.vue b/packages/vuerd-app/src/components/editor/SplitView.vue
@@ -28,10 +28,9 @@ export default defineComponent({
     let lastClientX = 0;
     let lastClientY = 0;
 
-    const getClassMap = (node: ViewNode, index: number) => ({
+    const getClassMap = (node: ViewNode) => ({
       vertical: node.vertical,
       horizontal: node.horizontal,
-      left: node.vertical && index,
     });
 
     const getStyleMap = (node: ViewNode) => ({
@@ -124,14 +123,12 @@ export default defineComponent({
 
       if (props.node.vertical) {
         if (movementX < 0) {
-          // left
           moveWidth(
             event,
             props.node.children[index - 1],
             props.node.children[index]
           );
         } else {
-          // right
           moveWidth(
             event,
             props.node.children[index],
@@ -140,14 +137,12 @@ export default defineComponent({
         }
       } else if (props.node.horizontal) {
         if (movementY < 0) {
-          // top
           moveHeight(
             event,
             props.node.children[index - 1],
             props.node.children[index]
           );
         } else {
-          // bottom
           moveHeight(
             event,
             props.node.children[index],
@@ -168,11 +163,10 @@ export default defineComponent({
 </script>
 
 <template lang="pug">
-.split-view(:class="getClassMap(node, 0)" :style="getStyleMap(node)")
+.split-view(:class="getClassMap(node)" :style="getStyleMap(node)")
   .view(
     v-for="(childNode, index) in node.children"
     :key="childNode.id"
-    :class="getClassMap(childNode, index)"
     :style="getStyleMap(childNode)"
   )
     Sash(
@@ -200,14 +194,6 @@ export default defineComponent({
 
   .view {
     position: relative;
-
-    &.left {
-      border-left: var(--sash-background) solid 1px;
-    }
-
-    &.top {
-      border-top: var(--sash-background) solid 1px;
-    }
   }
 }
 </style>
diff --git a/packages/vuerd-app/src/components/editor/ViewerTab.vue b/packages/vuerd-app/src/components/editor/ViewerTab.vue
@@ -42,9 +42,9 @@ export default defineComponent({
       height: `${SIZE_VIEW_TAB_HEIGHT}px`,
     }));
 
-    let draggableListener: Subscription[] = [];
+    const draggable$: Subject<DragEvent> = new Subject();
     let dragenter$: Observable<DragEvent> | null = null;
-    let draggable$: Subject<DragEvent> = new Subject();
+    let draggableListener: Subscription[] = [];
     let subDragenter: Subscription | null | undefined = null;
     let subDraggable: Subscription | null | undefined = null;
 
@@ -89,15 +89,15 @@ export default defineComponent({
       viewActions.tabDraggableStart(tab);
       emit('dragstart', event);
       eventBus.emit(Bus.EditorTab.draggableStart);
-      eventBus.emit(Bus.TreeNode.draggableStart);
+      eventBus.emit(Bus.OpenFile.draggableStart);
       eventBus.emit(Bus.Editor.dragstart);
       event.dataTransfer && event.dataTransfer.setData('text/plain', tab.id);
     };
 
     const onDragend = () => {
       eventBus.emit(Bus.EditorViewer.dropEnd, viewState.draggableTab);
       eventBus.emit(Bus.EditorTab.draggableEnd);
-      eventBus.emit(Bus.TreeNode.draggableEnd);
+      eventBus.emit(Bus.OpenFile.draggableEnd);
       eventBus.emit(Bus.Editor.dragend);
       viewActions.tabDraggableEnd();
     };
@@ -242,7 +242,7 @@ export default defineComponent({
 
       .name {
         padding-right: 7px;
-        font-size: 0.875rem;
+        @apply text-sm;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

diff --git a/packages/vuerd-app/src/components/sidebar/Sidebar.vue b/packages/vuerd-app/src/components/sidebar/Sidebar.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue';
-import Explorer from '@/components/sidebar/Explorer.vue';
+import Explorer from '@/components/sidebar/explorer/Explorer.vue';
 
 export default defineComponent({
   components: {

diff --git a/...d-app/src/components/sidebar/Explorer.vue → .../components/sidebar/explorer/Explorer.vue b/...d-app/src/components/sidebar/Explorer.vue → .../components/sidebar/explorer/Explorer.vue
@@ -2,18 +2,20 @@
 import { defineComponent, toRefs } from 'vue';
 
 import Title from '@/components/sidebar/Title.vue';
-import TreeNode from '@/components/sidebar/TreeNode.vue';
+import TreeNode from '@/components/sidebar/explorer/TreeNode.vue';
 import { useTreeStore } from '@/store/tree';
 import { fromEvent } from 'rxjs';
 import { useUnsubscribe } from '@/hooks/useUnsubscribe';
 import { useExplorerKeymap } from '@/hooks/useExplorerKeymap';
 import Contextmenu from '@/components/Contextmenu.vue';
 import { useExplorerContextmenu } from '@/hooks/useExplorerContextmenu';
+import OpenFile from '@/components/sidebar/explorer/OpenFile.vue';
 
 export default defineComponent({
   components: {
     Title,
     TreeNode,
+    OpenFile,
     Contextmenu,
   },
   setup() {
@@ -57,6 +59,7 @@ export default defineComponent({
 .explorer(:class="{focus}" @mousedown="onFocusin" @contextmenu="onContextmenu")
   Title(label="Explorer")
   Title(label="Open Files")
+  OpenFile
   Title(label="Workspace")
   TreeNode(:node="root")