feature: mark table as "ghost" to exclude from schema output #410

Author: isosphere

packages/erd-editor-schema/src/v3/parser/table.entity.ts

@@ -1,4 +1,11 @@
-import { isArray, isNill, isNumber, isObject, isString } from '@dineug/shared';
+import {
+  isArray,
+  isBoolean,
+  isNill,
+  isNumber,
+  isObject,
+  isString,
+} from '@dineug/shared';
 
 import { assign, assignMeta, getDefaultEntityMeta } from '@/helper';
 import { DeepPartial } from '@/internal-types';
@@ -19,6 +26,7 @@ export const createTable = (): Table => ({
     color: '',
   },
   meta: getDefaultEntityMeta(),
+  ghost: false,
 });
 
 export function createAndMergeTableEntities(
@@ -32,6 +40,7 @@ export function createAndMergeTableEntities(
     const target = createTable();
     const assignString = assign(isString, target, value);
     const assignArray = assign(isArray, target, value);
+    const assignBoolean = assign(isBoolean, target, value);
     const uiAssignNumber = assign(isNumber, target.ui, value.ui);
     const uiAssignString = assign(isString, target.ui, value.ui);
 
@@ -40,6 +49,7 @@ export function createAndMergeTableEntities(
     assignString('comment');
     assignArray('columnIds');
     assignArray('seqColumnIds');
+    assignBoolean('ghost');
 
     uiAssignString('color');
     uiAssignNumber('x');

packages/erd-editor-schema/src/v3/schema/table.entity.ts

@@ -7,6 +7,7 @@ export type Table = EntityType<{
   columnIds: string[];
   seqColumnIds: string[];
   ui: TableUI;
+  ghost: boolean;
 }>;
 
 export type TableUI = {

packages/erd-editor/src/components/erd/canvas/table/Table.ts

@@ -248,6 +248,7 @@ const Table: FC<TableProps> = (props, ctx) => {
           'z-index': `${table.ui.zIndex}`,
           width: `${tableWidths.width}px`,
           height: `${height}px`,
+          opacity: `${table.ghost ? 0.33 : 1}`,
         }}
         ${ref(root)}
         ?data-selected=${selected}

packages/erd-editor/src/components/erd/erd-context-menu/ErdContextMenu.ts

@@ -9,6 +9,7 @@ import { Open } from '@/constants/open';
 import { changeOpenMapAction } from '@/engine/modules/editor/atom.actions';
 import { addMemoAction$ } from '@/engine/modules/memo/generator.actions';
 import { removeRelationshipAction } from '@/engine/modules/relationship/atom.actions';
+import { toggleGhostAction } from '@/engine/modules/table/atom.actions';
 import { addTableAction$ } from '@/engine/modules/table/generator.actions';
 import { changeColumnPrimaryKeyAction$ } from '@/engine/modules/table-column/generator.actions';
 import { useUnmounted } from '@/hooks/useUnmounted';
@@ -107,6 +108,15 @@ const ErdContextMenu: FC<ErdContextMenuProps> = (props, ctx) => {
     props.onClose();
   };
 
+  const handleToggleGhost = (event: MouseEvent) => {
+    if (!props.tableId) return;
+
+    const { store } = app.value;
+    store.dispatch(toggleGhostAction({ id: props.tableId }));
+
+    props.onClose();
+  };
+
   const handleOpenColorPicker = (event: MouseEvent) => {
     if (!props.tableId) return;
 
@@ -183,6 +193,15 @@ const ErdContextMenu: FC<ErdContextMenuProps> = (props, ctx) => {
                   />
                 `}
               />
+              <${ContextMenu.Item}
+                .onClick=${handleToggleGhost}
+                children=${html`
+                  <${ContextMenu.Menu}
+                    icon=${html`<${Icon} name="ghost" size=${14} />`}
+                    name="Toggle Ghost"
+                  />
+                `}
+              />
             `
           : props.type === ErdContextMenuType.relationship
             ? html`

packages/erd-editor/src/components/primitives/icon/icons.ts

@@ -12,6 +12,7 @@ import {
   faFileExport,
   faFileImage,
   faFileImport,
+  faGhost,
   faKey,
   faLocationDot,
   faMagnifyingGlass,
@@ -128,6 +129,7 @@ const icons = [
   faBars,
   faLocationDot,
   faCircleHalfStroke,
+  faGhost,
   createMDI('code-json', mdiCodeJson),
   createMDI('database', mdiDatabase),
   createMDI('database-import', mdiDatabaseImport),

packages/erd-editor/src/components/schema-sql/SchemaSQL.ts

@@ -43,7 +43,7 @@ const SchemaSQL: FC<SchemaSQLProps> = (props, ctx) => {
         .collection('tableEntities')
         .selectById(props.tableId);
 
-      if (table) {
+      if (table && !table.ghost) {
         state.sql = createSchemaSQLTable(store.state, table);
       }
     } else {

packages/erd-editor/src/engine/actions.ts

@@ -86,6 +86,7 @@ export const ChangeActionTypes: ReadonlyArray<ActionType> = [
   'table.changeComment',
   'table.changeColor',
   'table.sort',
+  'table.toggleGhost',
   // column
   'column.add',
   'column.remove',

packages/erd-editor/src/engine/modules/table/actions.ts

@@ -14,6 +14,7 @@ export const ActionType = {
   changeTableColor: 'table.changeColor',
   changeZIndex: 'table.changeZIndex',
   sortTable: 'table.sort',
+  toggleGhost: 'table.toggleGhost',
 } as const;
 export type ActionType = ValuesType<typeof ActionType>;
 
@@ -51,6 +52,9 @@ export type ActionMap = {
     zIndex: number;
   };
   [ActionType.sortTable]: void;
+  [ActionType.toggleGhost]: {
+    id: string;
+  };
 };
 
 export type ReducerType<T extends keyof ActionMap> = Reducer<

packages/erd-editor/src/engine/modules/table/atom.actions.ts

@@ -1,5 +1,5 @@
 import { query } from '@dineug/erd-editor-schema';
-import { createAction } from '@dineug/r-html';
+import { createAction, Reducer } from '@dineug/r-html';
 import { arrayHas } from '@dineug/shared';
 import { round } from 'lodash-es';
 
@@ -147,6 +147,23 @@ const changeTableColor: ReducerType<typeof ActionType.changeTableColor> = (
   });
 };
 
+export const toggleGhostAction = createAction<
+  ActionMap[typeof ActionType.toggleGhost]
+>(ActionType.toggleGhost);
+
+const toggleGhost: ReducerType<typeof ActionType.toggleGhost> = (
+  { collections, lww },
+  { payload: { id }, version },
+  { clock }
+) => {
+  const collection = query(collections).collection('tableEntities');
+  collection.getOrCreate(id, id => createTable({ id }));
+
+  collection.updateOne(id, table => {
+    table.ghost = !table.ghost;
+  });
+};
+
 export const changeZIndexAction = createAction<
   ActionMap[typeof ActionType.changeZIndex]
 >(ActionType.changeZIndex);
@@ -211,6 +228,7 @@ export const tableReducers = {
   [ActionType.changeTableColor]: changeTableColor,
   [ActionType.changeZIndex]: changeZIndex,
   [ActionType.sortTable]: sortTable,
+  [ActionType.toggleGhost]: toggleGhost,
 };
 
 export const actions = {
@@ -223,4 +241,5 @@ export const actions = {
   changeTableColorAction,
   changeZIndexAction,
   sortTableAction,
+  toggleGhostAction,
 };

packages/erd-editor/src/utils/collection/table.entity.ts

@@ -22,6 +22,7 @@ export const createTable = (value?: DeepPartial<Table>): Table =>
         color: '',
       },
       meta: getDefaultEntityMeta(),
+      ghost: false,
     },
     (value as Table) ?? {}
   );