feat: Automatic Table Placement

ucodkr · Sep 15, 2021 · 7364ef2 · 7364ef2
1 parent fc0dde2
commit 7364ef2
Show file tree

Hide file tree

Showing 16 changed files with 446 additions and 46 deletions.
diff --git a/packages/vuerd-app/package.json b/packages/vuerd-app/package.json
@@ -15,7 +15,8 @@
   "license": "MIT",
   "scripts": {
     "serve": "vite",
-    "build": "cross-env NODE_ENV=production vite build"
+    "build": "cross-env NODE_ENV=production vite build",
+    "tsc": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
     "@vuerd/plugin-generate-template": "^0.1.2",

diff --git a/packages/vuerd-app/src/components/sidebar/Title.vue b/packages/vuerd-app/src/components/sidebar/Title.vue
@@ -10,7 +10,10 @@ export default defineComponent({
   },
   setup: props => () =>
     (
-      <div class="flex items-center overflow-hidden box-border pl-2 pr-2 h-8">
+      <div
+        class="flex items-center overflow-hidden box-border pl-2 pr-2 h-8"
+        style="background-color: var(--sidebar-title-background);"
+      >
         <div class="overflow-hidden overflow-ellipsis pl-3 whitespace-nowrap">
           <span class="overflow-hidden text-sm">{props.label}</span>
         </div>

diff --git a/packages/vuerd-app/src/components/sidebar/TreeNode.vue b/packages/vuerd-app/src/components/sidebar/TreeNode.vue
@@ -24,7 +24,7 @@ export default defineComponent({
   setup(props) {
     const isRoot = computed(() => props.depth === 0);
     const isChildren = computed(
-      () => props.node.type === 'folder' && props.node.children.length
+      () => props.node.type === 'folder' && !!props.node.children.length
     );
 
     const styleMap = computed(() => ({
@@ -56,7 +56,7 @@ div(
   div {{ node.name }}
 
 TreeNode(
-  v-if="node.open && node.children.length"
+  v-if="isChildren && node.open"
   v-for="childNode in node.children"
   :key="childNode.id"
   :node="childNode"

diff --git a/packages/vuerd/src/components/ERDEditor.ts b/packages/vuerd/src/components/ERDEditor.ts
@@ -10,6 +10,7 @@ import './drawer/HelpDrawer';
 import './drawer/SettingDrawer';
 import './drawer/TreeDrawer';
 import './drawer/tablePropertiesDrawer/TablePropertiesDrawer';
+import './ToastBar';
 
 import {
   defineComponent,
@@ -175,6 +176,7 @@ const ERDEditor: FunctionalComponent<ERDEditorProps, ERDEditorElement> = (
               : null
           )}
           ${panelTpl()} ${drawerTpl()} ${ghostTpl} ${promptTpl()} ${alertTpl()}
+          <vuerd-toast-bar></vuerd-toast-bar>
         </div>
       </vuerd-provider>
     `;

diff --git a/packages/vuerd/src/components/ToastBar.style.ts b/packages/vuerd/src/components/ToastBar.style.ts
@@ -0,0 +1,68 @@
+import { css } from '@/core/tagged';
+
+export const ToastBarStyle = css`
+  .vuerd-toast-bar {
+    position: absolute;
+    z-index: 9999999;
+    right: 50px;
+    bottom: 50px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .vuerd-toast-bar-container {
+    padding: 8px 16px 16px 16px;
+    margin-top: 20px;
+    width: 200px;
+    box-shadow: 0 0 6px 0 black;
+    background-color: var(--vuerd-color-contextmenu);
+    color: var(--vuerd-color-font);
+    fill: var(--vuerd-color-font);
+    animation: showMove 0.3s ease;
+  }
+
+  .vuerd-toast-bar-header {
+    display: flex;
+    margin-bottom: 10px;
+  }
+
+  .vuerd-toast-bar-body {
+  }
+
+  .vuerd-btn {
+    color: var(--vuerd-color-font-active);
+    background-color: var(--vuerd-color-contextmenu);
+    cursor: pointer;
+    padding: 5px;
+    display: inline-block;
+  }
+
+  .vuerd-btn:hover {
+    background-color: var(--vuerd-color-contextmenu-active);
+  }
+
+  .vuerd-button {
+    cursor: pointer;
+    margin-left: auto;
+  }
+
+  .vuerd-button:hover {
+    fill: var(--vuerd-color-font-active);
+  }
+
+  /* animation flip */
+  .vuerd-toast-bar-container-move {
+    transition: transform 0.3s;
+  }
+
+  @keyframes showMove {
+    0% {
+      transform: translateY(30px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+`;
diff --git a/packages/vuerd/src/components/ToastBar.ts b/packages/vuerd/src/components/ToastBar.ts
@@ -0,0 +1,102 @@
+import {
+  beforeMount,
+  defineComponent,
+  FunctionalComponent,
+  html,
+  observable,
+  TemplateResult,
+} from '@vuerd/lit-observable';
+import { repeat } from 'lit-html/directives/repeat';
+
+import { ToastBarStyle } from '@/components/ToastBar.style';
+import { getIndex, uuid } from '@/core/helper';
+import { Bus } from '@/core/helper/eventBus.helper';
+import { useContext } from '@/core/hooks/context.hook';
+import { useFlipAnimation } from '@/core/hooks/flipAnimation.hook';
+import { useUnmounted } from '@/core/hooks/unmounted.hook';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vuerd-toast-bar': ToastBarElement;
+  }
+}
+
+export interface ToastBarOptions {
+  id: string;
+  close: Promise<any>;
+  headerTpl?: TemplateResult | null;
+  bodyTpl?: TemplateResult | null;
+}
+
+export interface ToastBarProps {}
+
+export interface ToastBarElement extends ToastBarProps, HTMLElement {}
+
+const DEFAULT_TIME = 1000 * 5;
+
+const ToastBar: FunctionalComponent<ToastBarProps, ToastBarElement> = (
+  props,
+  ctx
+) => {
+  const contextRef = useContext(ctx);
+  const { unmountedGroup } = useUnmounted();
+  const state = observable({
+    toastBars: [] as ToastBarOptions[],
+  });
+  useFlipAnimation(
+    ctx,
+    '.vuerd-toast-bar-container',
+    'vuerd-toast-bar-container-move'
+  );
+
+  const onClose = (toastBar: ToastBarOptions) => {
+    const index = getIndex(state.toastBars, toastBar.id);
+    index !== -1 && state.toastBars.splice(index, 1);
+  };
+
+  const addToastBar = (options: ToastBarOptions) => {
+    const toastBar = Object.assign(
+      {
+        close: new Promise(resolve => setTimeout(resolve, DEFAULT_TIME)),
+      },
+      options,
+      { id: uuid() }
+    );
+    state.toastBars.push(toastBar);
+    toastBar.close.finally(() => onClose(toastBar));
+  };
+
+  beforeMount(() => {
+    const { eventBus } = contextRef.value;
+
+    unmountedGroup.push(eventBus.on(Bus.ToastBar.add).subscribe(addToastBar));
+  });
+
+  return () => html`
+    <div class="vuerd-toast-bar">
+      ${repeat(
+        state.toastBars,
+        toastBar => toastBar.id,
+        toastBar => html`
+          <div class="vuerd-toast-bar-container">
+            <div class="vuerd-toast-bar-header">
+              ${toastBar.headerTpl}
+              <vuerd-icon
+                class="vuerd-button"
+                name="times"
+                size="12"
+                @click=${() => onClose(toastBar)}
+              ></vuerd-icon>
+            </div>
+            <div class="vuerd-toast-bar-body">${toastBar.bodyTpl}</div>
+          </div>
+        `
+      )}
+    </div>
+  `;
+};
+
+defineComponent('vuerd-toast-bar', {
+  style: ToastBarStyle,
+  render: ToastBar,
+});
diff --git a/packages/vuerd/src/components/editor/ERD.ts b/packages/vuerd/src/components/editor/ERD.ts
@@ -211,7 +211,7 @@ const ERD: FunctionalComponent<ERDProps, ERDElement> = (props, ctx) => {
   return () => {
     const {
       store: {
-        editorState: { drawRelationship, findActive },
+        editorState: { drawRelationship, findActive, erdUiEventNone },
       },
     } = contextRef.value;
 
@@ -226,6 +226,8 @@ const ERD: FunctionalComponent<ERDProps, ERDElement> = (props, ctx) => {
                 drawRelationship.relationshipType
               )}") 16 16, auto`
             : '',
+          pointerEvents: erdUiEventNone ? 'none' : '',
+          touchAction: erdUiEventNone ? 'none' : '',
         })}
         @mousedown=${onDragSelect}
         @touchstart=${onDragSelect}

diff --git a/packages/vuerd/src/components/editor/table/HighLevelTable.ts b/packages/vuerd/src/components/editor/table/HighLevelTable.ts
@@ -168,6 +168,7 @@ const HighLevelTable: FunctionalComponent<
           width: `${table.width()}px`,
           height: `${table.height()}px`,
         })}
+        data-id=${table.id}
         @mousedown=${onMoveStart}
         @touchstart=${onMoveStart}
       >