diagram tab

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -53,6 +53,10 @@
         label: 'Query designer',
         isQueryDesigner: true,
       },
+      {
+        label: 'Show diagram',
+        isDiagram: true,
+      },
       {
         divider: true,
       },
@@ -531,6 +535,30 @@
                   },
                 }
               );
+            } else if (menu.isDiagram) {
+              openNewTab(
+                {
+                  title: 'Diagram #',
+                  icon: 'img diagram',
+                  tabComponent: 'DiagramTab',
+                  props: {
+                    conid: data.conid,
+                    database: data.database,
+                  },
+                },
+                {
+                  editor: {
+                    tables: [
+                      {
+                        ...data,
+                        designerId: uuidv1(),
+                        left: 50,
+                        top: 50,
+                      },
+                    ],
+                  },
+                }
+              );
             } else if (menu.sqlGeneratorProps) {
               showModal(SqlGeneratorModal, {
                 initialObjects: [data],

packages/web/src/icons/FontIcon.svelte

@@ -122,6 +122,7 @@
     'img preview': 'mdi mdi-file-find color-icon-red',
     'img favorite': 'mdi mdi-star color-icon-yellow',
     'img query-design': 'mdi mdi-vector-polyline-edit color-icon-red',
+    'img diagram': 'mdi mdi-graph color-icon-blue',
     'img yaml': 'mdi mdi-code-brackets color-icon-red',
     'img compare': 'mdi mdi-compare color-icon-red',
 

packages/web/src/tabs/DiagramTab.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" context="module">
+  const getCurrentEditor = () => getActiveComponent('DiagramTab');
+
+  registerFileCommands({
+    idPrefix: 'diagram',
+    category: 'Diagram',
+    getCurrentEditor,
+    folder: 'diagrams',
+    format: 'json',
+    fileExtension: 'diagram',
+
+    undoRedo: true,
+  });
+</script>
+
+<script lang="ts">
+  import useEditorData from '../query/useEditorData';
+  import { extensions } from '../stores';
+  import { useConnectionInfo } from '../utility/metadataLoaders';
+  import { registerFileCommands } from '../commands/stdCommands';
+  import createUndoReducer from '../utility/createUndoReducer';
+  import _ from 'lodash';
+  import { findEngineDriver } from 'dbgate-tools';
+  import createActivator, { getActiveComponent } from '../utility/createActivator';
+  import Designer from '../designer/Designer.svelte';
+
+  export let tabid;
+  export let conid;
+  export let database;
+  export let initialArgs;
+
+  export const activator = createActivator('DiagramTab', true);
+
+  $: connection = useConnectionInfo({ conid });
+  $: engine = findEngineDriver($connection, $extensions);
+
+  $: setEditorData($modelState.value);
+
+  export function getTabId() {
+    return tabid;
+  }
+
+  export function getData() {
+    return $editorState.value || '';
+  }
+
+  export function canUndo() {
+    return $modelState.canUndo;
+  }
+
+  export function undo() {
+    dispatchModel({ type: 'undo' });
+  }
+
+  export function canRedo() {
+    return $modelState.canRedo;
+  }
+
+  export function redo() {
+    dispatchModel({ type: 'redo' });
+  }
+
+  const handleChange = (value, skipUndoChain) =>
+    // @ts-ignore
+    dispatchModel({
+      type: 'compute',
+      useMerge: skipUndoChain,
+      compute: v => (_.isFunction(value) ? value(v) : value),
+    });
+
+  const { editorState, editorValue, setEditorData } = useEditorData({
+    tabid,
+    onInitialData: value => {
+      dispatchModel({ type: 'reset', value });
+    },
+  });
+
+  const [modelState, dispatchModel] = createUndoReducer({
+    tables: [],
+    references: [],
+    columns: [],
+  });
+
+  function createMenu() {
+    return [
+      { command: 'diagram.save' },
+      { command: 'diagram.saveAs' },
+      { divider: true },
+      { command: 'diagram.undo' },
+      { command: 'diagram.redo' },
+    ];
+  }
+</script>
+
+<Designer
+  value={$modelState.value || {}}
+  {conid}
+  {database}
+  onChange={handleChange}
+  menu={createMenu}
+/>

packages/web/src/tabs/index.js

@@ -18,6 +18,7 @@ import * as YamlEditorTab from './YamlEditorTab.svelte';
 import * as CompareModelTab from './CompareModelTab.svelte';
 import * as JsonTab from './JsonTab.svelte';
 import * as ChangelogTab from './ChangelogTab.svelte';
+import * as DiagramTab from './DiagramTab.svelte';
 
 export default {
   TableDataTab,
@@ -40,4 +41,5 @@ export default {
   CompareModelTab,
   JsonTab,
   ChangelogTab,
+  DiagramTab,
 };