fix: #205

packages/lit-observable/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuerd/lit-observable",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "lit-html + reactive",
   "main": "dist/lit-observable.js",
   "module": "dist/lit-observable.esm.js",

packages/lit-observable/src/core/observable.ts

@@ -109,6 +109,10 @@ export function observable<T>(raw: T): T {
     get(target, p, receiver) {
       const value = Reflect.get(target, p, receiver);
 
+      if (value instanceof RegExp) {
+        return value;
+      }
+
       addObserver(raw);
       addTrigger(raw, p);
 

packages/vuerd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuerd",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "ERD editor",
   "main": "dist/vuerd.js",
   "module": "dist/vuerd.esm.js",
@@ -72,7 +72,7 @@
     "@types/lodash": "^4.14.169",
     "@types/ramda": "^0.27.40",
     "@types/uuid": "^8.3.0",
-    "@vuerd/lit-observable": "^0.2.1",
+    "@vuerd/lit-observable": "^0.2.2",
     "@vuerd/sql-ddl-parser": "^0.2.1",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",

packages/vuerd/src/components/menubar/Menubar.ts

@@ -14,7 +14,7 @@ import { useMenubarPanels } from '@/core/hooks/menubarPanels.hook';
 import { useTooltip } from '@/core/hooks/tooltip.hook';
 import { useUnmounted } from '@/core/hooks/unmounted.hook';
 import { keymapOptionsToString } from '@/core/keymap';
-import { panels } from '@/core/panel';
+import { contextPanelConfig } from '@/core/panel';
 import {
   changeDatabaseName,
   resizeCanvas,
@@ -128,7 +128,9 @@ const Menubar: FunctionalComponent<MenubarProps, MenubarElement> = (
 
     unmountedGroup.push(
       watch(editorState.panels, () => resetTooltip()),
-      watch(panels, () => resetTooltip()),
+      watch(editorState.excludePanel, () => resetTooltip()),
+      watch(contextPanelConfig.panels, () => resetTooltip()),
+      watch(contextPanelConfig.exclude, () => resetTooltip()),
       watch(canvasState, propName => {
         if (propName !== 'canvasType') return;
 

packages/vuerd/src/core/extension.ts

@@ -1,7 +1,8 @@
 import { ExtensionConfig } from '@@types/core/extension';
 
-import { addPanel } from './panel';
+import { addPanel, setExcludePanel } from './panel';
 
 export function extension(config: Partial<ExtensionConfig>) {
   config.panels && addPanel(...config.panels);
+  config.excludePanel && setExcludePanel(config.excludePanel);
 }

packages/vuerd/src/core/helper/index.ts

@@ -53,6 +53,10 @@ export const isNumber = isTypeof('number');
 export const isBoolean = isTypeof('boolean');
 export const isNull = (value: any) => value === null;
 
+export const isRegExp = R.curry((exclude: RegExp[], key: string) =>
+  exclude.some(regexp => regexp.test(key))
+);
+
 export const noop = () => {};
 
 export const getData = <T extends { id: string }>(list: Array<T>, id: string) =>

packages/vuerd/src/core/hooks/ERDEditorElement.hook.ts

@@ -98,6 +98,8 @@ export function useERDEditorElement(
   ctx.extension = (config: Partial<ExtensionConfig>) => {
     isArray(config.panels) &&
       editorState.panels.push(...(config.panels as PanelConfig[]));
+    isArray(config.excludePanel) &&
+      (editorState.excludePanel = config.excludePanel as RegExp[]);
   };
 
   eventBus.on(Bus.Liquibase.progress).subscribe(message =>

packages/vuerd/src/core/hooks/menubarPanels.hook.ts

@@ -1,7 +1,8 @@
 import { html } from '@vuerd/lit-observable';
 import { classMap } from 'lit-html/directives/class-map';
 
-import { panels } from '@/core/panel';
+import { isRegExp } from '@/core/helper';
+import { contextPanelConfig } from '@/core/panel';
 import { changeCanvasType } from '@/engine/command/canvas.cmd.helper';
 import { IIcon } from '@/internal-types/panel';
 import { PanelConfig } from '@@types/core/panel';
@@ -49,9 +50,13 @@ export function useMenubarPanels(ctx: HTMLElement) {
   const getMenus = () => {
     const { editorState } = contextRef.value.store;
     const menus: Menu[] = [ERD];
-    [...panels, ...editorState.panels].forEach(panel =>
-      menus.push(panelToMenu(panel))
-    );
+    [...contextPanelConfig.panels, ...editorState.panels]
+      .filter(
+        panel =>
+          !isRegExp(contextPanelConfig.exclude, panel.key) &&
+          !isRegExp(editorState.excludePanel, panel.key)
+      )
+      .forEach(panel => menus.push(panelToMenu(panel)));
 
     return menus;
   };

packages/vuerd/src/core/hooks/panelView.hook.ts

@@ -5,8 +5,9 @@ import {
   observable,
 } from '@vuerd/lit-observable';
 
+import { isRegExp } from '@/core/helper';
 import { SIZE_MENUBAR_HEIGHT } from '@/core/layout';
-import { panels as globalPanels } from '@/core/panel';
+import { contextPanelConfig } from '@/core/panel';
 import { IERDEditorContext } from '@/internal-types/ERDEditorContext';
 import { ERDEditorProps } from '@@types/components/ERDEditorElement';
 
@@ -22,7 +23,11 @@ export function usePanelView(
 
   const hasPanel = () => {
     const canvasType = canvasState.canvasType;
-    const panels = [...globalPanels, ...editorState.panels];
+    const panels = [...contextPanelConfig.panels, ...editorState.panels].filter(
+      panel =>
+        !isRegExp(contextPanelConfig.exclude, panel.key) &&
+        !isRegExp(editorState.excludePanel, panel.key)
+    );
     return (
       canvasType !== 'ERD' && panels.some(panel => panel.key === canvasType)
     );
@@ -43,7 +48,14 @@ export function usePanelView(
       const width = props.width;
       const height = props.height - SIZE_MENUBAR_HEIGHT;
       const canvasType = canvasState.canvasType;
-      const panels = [...globalPanels, ...editorState.panels];
+      const panels = [
+        ...contextPanelConfig.panels,
+        ...editorState.panels,
+      ].filter(
+        panel =>
+          !isRegExp(contextPanelConfig.exclude, panel.key) &&
+          !isRegExp(editorState.excludePanel, panel.key)
+      );
       const isPanel = hasPanel();
 
       data.isPanel = isPanel;

packages/vuerd/src/core/panel.ts

@@ -2,7 +2,13 @@ import { observable } from '@vuerd/lit-observable';
 
 import { PanelConfig } from '@@types/core/panel';
 
-export const panels: PanelConfig[] = observable([]);
+export const contextPanelConfig = observable({
+  panels: [] as PanelConfig[],
+  exclude: [] as RegExp[],
+});
 
 export const addPanel = (...newPanels: PanelConfig[]) =>
-  panels.push(...newPanels);
+  contextPanelConfig.panels.push(...newPanels);
+
+export const setExcludePanel = (exclude: RegExp[]) =>
+  (contextPanelConfig.exclude = exclude);

packages/vuerd/src/engine/command/editor.cmd.ts

@@ -1,5 +1,5 @@
-import { cloneDeep, getData, isEmpty, isObject } from '@/core/helper';
-import { panels as globalPanels } from '@/core/panel';
+import { cloneDeep, getData, isEmpty, isObject, isRegExp } from '@/core/helper';
+import { contextPanelConfig } from '@/core/panel';
 import {
   bracketTypes,
   databaseList,
@@ -240,9 +240,13 @@ export function executeDraggableColumnEnd({ editorState }: State) {
 // TODO: Refactoring
 export function executeLoadJson(state: State, data: LoadJson) {
   const { canvasState, editorState } = state;
-  const panelNames = [...globalPanels, ...editorState.panels].map(
-    panel => panel.key
-  );
+  const panelNames = [...contextPanelConfig.panels, ...editorState.panels]
+    .map(panel => panel.key)
+    .filter(
+      key =>
+        !isRegExp(contextPanelConfig.exclude, key) &&
+        !isRegExp(editorState.excludePanel, key)
+    );
   const json = JSON.parse(data.value) as ExportedStore;
   const canvasStateAny = canvasState as any;
   const canvasJson = json.canvas as any;

packages/vuerd/src/engine/store/editor.state.ts

@@ -9,6 +9,7 @@ import { createFilterState } from './editor/filter.state';
 
 export const createEditorState = (): EditorState => ({
   panels: [],
+  excludePanel: [],
   hasUndo: false,
   hasRedo: false,
   focusTable: null,

packages/vuerd/types/core/extension.d.ts

@@ -2,6 +2,7 @@ import { PanelConfig } from './panel';
 
 export interface ExtensionConfig {
   panels: PanelConfig[];
+  excludePanel: RegExp[];
 }
 
 export declare function extension(config: Partial<ExtensionConfig>): void;

packages/vuerd/types/engine/store/editor.state.d.ts

@@ -6,6 +6,7 @@ import { Column, Table } from './table.state';
 
 export interface EditorState {
   panels: PanelConfig[];
+  excludePanel: RegExp[];
   hasUndo: boolean;
   hasRedo: boolean;
   focusTable: FocusTable | null;