@iteria-app/vuerd

v2.2.16-litel

Published

2 years ago

ERD editor

Downloads

0High
0Medium
0Low

jslezak

vuerd editor erd db database diagram

vuerd

Entity-Relationship Diagram Editor

ERD

vuerd

Document

interface ERDEditorElement

interface ERDEditorElement extends HTMLElement {
  width: number;
  height: number;
  value: string;
  automaticLayout: boolean;
  readonly: boolean;
  focus(): void;
  blur(): void;
  initLoadJson(json: string): void;
  loadSQLDDL(sql: string): void;
  clear(): void;
  setTheme(theme: Theme): void;
  setKeymap(keymap: Keymap): void;
  getSQLDDL(database?: Database): string;
  extension(config: Partial<ExtensionConfig>): void;
}

| Name | Type | Describe | | --------------- | -------- | ---------------------------------------------------------- | | width | Number | width | | height | Number | height | | value | String | editor data | | automaticLayout | Boolean | automatic layout | | readonly | Boolean | readonly | | change | Event | editor data | | focus | Function | focus | | blur | Function | blur | | initLoadJson | Function | Do not record and save undo | | loadSQLDDL | Function | import SQL DDL | | clear | Function | editor data clear | | setTheme | Function | custom theme | | setKeymap | Function | custom keymap | | getSQLDDL | Function | SQL DDL(MariaDB, MSSQL, MySQL, Oracle, PostgreSQL, SQLite) | | extension | Function | plugin API(scope instance) |

EditorElement Example

javascript

const container = document.querySelector('#app');
const editor = document.createElement('erd-editor');
container.appendChild(editor);

// editor data load
editor.initLoadJson('editor data...');
// or
// editor.value = "editor data...";

editor.addEventListener('change', event => {
  console.log(event.target.value);
});

// layout
window.addEventListener('resize', () => {
  editor.width = window.innerWidth;
  editor.height = window.innerHeight;
});
window.dispatchEvent(new Event('resize'));
// or
// editor.automaticLayout = true;

html

<erd-editor width="800" height="800"></erd-editor>
<!-- or -->
<!-- <erd-editor automatic-layout></erd-editor> -->

interface Custom Theme

interface Theme {
  canvas?: string;
  table?: string;
  tableActive?: string;
  focus?: string;
  keyPK?: string;
  keyFK?: string;
  keyPFK?: string;
  font?: string;
  fontActive?: string;
  fontPlaceholder?: string;
  contextmenu?: string;
  contextmenuActive?: string;
  edit?: string;
  columnSelect?: string;
  columnActive?: string;
  minimapShadow?: string;
  scrollbarThumb?: string;
  scrollbarThumbActive?: string;
  menubar?: string;
  visualization?: string;
}

Custom Theme Example

css

:root {
  --vuerd-theme-canvas: #282828;
  --vuerd-theme-table: #191919;
  --vuerd-theme-table-active: #14496d;
  --vuerd-theme-focus: #00a9ff;
  --vuerd-theme-key-pk: #b4b400;
  --vuerd-theme-key-fk: #dda8b1;
  --vuerd-theme-key-pfk: #60b9c4;
  --vuerd-theme-font: #a2a2a2;
  --vuerd-theme-font-active: white;
  --vuerd-theme-font-placeholder: #6d6d6d;
  --vuerd-theme-contextmenu: #191919;
  --vuerd-theme-contextmenu-active: #383d41;
  --vuerd-theme-edit: #ffc107;
  --vuerd-theme-column-select: #232a2f;
  --vuerd-theme-column-active: #372908;
  --vuerd-theme-minimap-shadow: black;
  --vuerd-theme-scrollbar-thumb: #6d6d6d;
  --vuerd-theme-scrollbar-thumb-active: #a2a2a2;
  --vuerd-theme-menubar: black;
  --vuerd-theme-visualization: #191919;
}

javascript

const editor = document.createElement('erd-editor');
editor.setTheme({
  canvas: '#282828',
  table: '#191919',
  tableActive: '#14496d',
  focus: '#00a9ff',
  keyPK: '#B4B400',
  keyFK: '#dda8b1',
  keyPFK: '#60b9c4',
  font: '#a2a2a2',
  fontActive: 'white',
  fontPlaceholder: '#6D6D6D',
  contextmenu: '#191919',
  contextmenuActive: '#383d41',
  edit: '#ffc107',
  columnSelect: '#232a2f',
  columnActive: '#372908',
  minimapShadow: 'black',
  scrollbarThumb: '#6D6D6D',
  scrollbarThumbActive: '#a2a2a2',
  menubar: 'black',
  visualization: '#191919',
});

interface Custom Keymap

| Name | Type | Describe | | ---- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | | key | event.key or event.code | Key, Code |

interface KeymapOption {
  metaKey?: boolean;
  ctrlKey?: boolean;
  altKey?: boolean;
  shiftKey?: boolean;
  key?: string;
  preventDefault?: boolean;
  stopPropagation?: boolean;
}
interface Keymap {
  edit?: KeymapOption[];
  stop?: KeymapOption[];
  find?: KeymapOption[];
  undo?: KeymapOption[];
  redo?: KeymapOption[];
  addTable?: KeymapOption[];
  addColumn?: KeymapOption[];
  addMemo?: KeymapOption[];
  removeTable?: KeymapOption[];
  removeColumn?: KeymapOption[];
  primaryKey?: KeymapOption[];
  selectAllTable?: KeymapOption[];
  selectAllColumn?: KeymapOption[];
  copyColumn?: KeymapOption[];
  pasteColumn?: KeymapOption[];
  relationshipZeroOne?: KeymapOption[];
  relationshipZeroN?: KeymapOption[];
  relationshipOneOnly?: KeymapOption[];
  relationshipOneN?: KeymapOption[];
  tableProperties?: KeymapOption[];
  zoomIn?: KeymapOption[];
  zoomOut?: KeymapOption[];
}

Custom Keymap Example

const editor = document.createElement('erd-editor');
editor.setKeymap({
  addTable: [
    {
      altKey: true,
      key: 'N',
    },
  ],
  addColumn: [
    {
      altKey: true,
      key: 'Enter',
    },
  ],
  addMemo: [], // remove keymap
});

Global API

function addIcon(...newIcons: IconDefinition[]): void;
function extension(config: Partial<ExtensionConfig>): void;

Install

$ yarn add vuerd
or
$ npm install vuerd

Usage

import 'vuerd';
// import "vuerd/theme/abyss.css";
// import "vuerd/theme/kimbie-dark.css";
// import "vuerd/theme/monokai.css";
// import "vuerd/theme/monokai-dimmed.css";
// import "vuerd/theme/one-dark-pro.css";
// import "vuerd/theme/red.css";
// import "vuerd/theme/solarized-dark.css";
// import "vuerd/theme/solarized-light.css";
// import "vuerd/theme/tomorrow-night-blue.css";
// import "vuerd/theme/vscode-dark.css";

const container = document.querySelector('#app');
const editor = document.createElement('erd-editor');
container.appendChild(editor);

CDN Quick Start

<!DOCTYPE html>
<html>
  <head>
    <title>vuerd demo</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
      }
    </style>
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/abyss.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/kimbie-dark.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/monokai.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/monokai-dimmed.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/one-dark-pro.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/red.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/solarized-dark.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/solarized-light.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/tomorrow-night-blue.css" rel="stylesheet" /> -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/vuerd/theme/vscode-dark.css" rel="stylesheet" /> -->
  </head>
  <body>
    <erd-editor></erd-editor>
    <script src="https://cdn.jsdelivr.net/npm/vuerd/dist/vuerd.min.js"></script>
    <!-- or module -->
    <!-- <script type="module" src="https://cdn.jsdelivr.net/npm/vuerd/dist/vuerd.esm.js"></script> -->
    <script>
      const editor = document.querySelector('erd-editor');
      window.addEventListener('resize', () => {
        editor.width = window.innerWidth;
        editor.height = window.innerHeight;
      });
      window.dispatchEvent(new Event('resize'));
    </script>
  </body>
</html>

Editor Keymap(default)

| Name | Keymap | | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------- | | Editing - ERD | dblclick, Enter | | Editing - Grid | dblclick, Enter | | All Stop | Escape | | Search - find, filter | Ctrl + F, Cmd + F | | Undo - ERD | Ctrl + Z, Cmd + Z | | Redo - ERD | Ctrl + Shift + Z, Cmd + Shift + Z | | Selection - table, memo | Ctrl + Drag, Click, Ctrl + Click, Ctrl + Alt + A, Cmd + Drag, Cmd + Click, Cmd + Alt + A | | Selection - column, filter | Click, Ctrl + Click, Cmd + Click, Shift + Click, Shift + Arrow key(up, down), Alt + A | | Movement - table, memo, column, filter | Drag, Ctrl + Drag, Cmd + Drag | | Copy - column | Ctrl + C, Cmd + C | | Paste - column | Ctrl + V, Cmd + V | | Contextmenu - ERD, Table, Relationship, SQL, GeneratorCode | Right-click | | Table Properties | Ctrl + Space, Alt + Space | | New Table | Alt + N | | New Memo | Alt + M | | New - column, filter | Alt + Enter | | Delete - table, memo | Ctrl + Delete, Ctrl + Backspace, Cmd + Delete, Cmd + Backspace | | Delete - column, filter | Alt + Delete, Alt + Backspace | | Select Hint - dataType, find | Arrow key(right), Click | | Move Hint - dataType, find | Arrow key(up, down) | | Primary Key | Alt + K | | checkbox - Grid, filter | Space, Click | | Move checkbox - Grid, filter | Arrow key(up, down, left, right) | | Relationship - Zero One | Ctrl + Alt + 1, Cmd + Alt + 1 | | Relationship - Zero N | Ctrl + Alt + 2, Cmd + Alt + 2 | | Relationship - One Only | Ctrl + Alt + 3, Cmd + Alt + 3 | | Relationship - One N | Ctrl + Alt + 4, Cmd + Alt + 4 | | Zoom In - ERD | Ctrl + Equal, Cmd + Equal | | Zoom Out - ERD | Ctrl + Minus, Cmd + Minus |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vuerd

ERD

Document

interface ERDEditorElement

EditorElement Example

javascript

html

interface Custom Theme

Custom Theme Example

css

javascript

interface Custom Keymap

Custom Keymap Example

Global API

Install

Usage

CDN Quick Start

Editor Keymap(default)