# typeorm-entity-designer

> An entity designer based on fabric.js.

Latest version **1.0.15** (published 2022-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install typeorm-entity-designer
pnpm add typeorm-entity-designer
yarn add typeorm-entity-designer
bun add typeorm-entity-designer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2022-03-06 |
| First published | 2022-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10.13.0 |
| Dependencies | 2 |
| Unpacked size | 659 KB |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| Author | 大漠穷秋 |
| Maintainers | damoqiongqiu |

## Links

- npm: https://www.npmjs.com/package/typeorm-entity-designer
- Repository: https://gitee.com/react-codeless-designer/typeorm-entity-designer
- npm.io page: https://npm.io/package/typeorm-entity-designer

## Dependencies (2)

- [uuid](https://npm.io/package/uuid.md) ^8.3.2
- [fabric](https://npm.io/package/fabric.md) ^4.4.0

## Recent versions

- 1.0.15 (latest) — 2022-03-06

## README

<h1 align="center">TypeORM Entity Designer</h1>

An entity designer for typeorm, based on fabric.js.

@see http://fabricjs.com/
@see https://typeorm.io/#/separating-entity-definition

## 1. Intro

TypeORM Entity Designer 是一个用来在页面上绘制 ER 图的小工具，底层基于 fabricjs ，这个小工具可以自动生成 typeorm 规定的 Schema 格式，方便与 typeorm 进行对接。

内部只有 2 个核心类：Entity & Relation ，分别对应“实体”和“关系”。

只依赖以下 3 个 node 模块：

- "fabric": "^4.4.0",
- "pluralize": "^8.0.0",
- "uuid": "^8.3.2"

其中 pluralize 和 uuid 已经被打包进去，fabric 需要使用 script 标签加载。（fabric 当前版本没有提供 ES 模块加载的方式。）

## 2. Usage

```javascript

<!DOCTYPE html>
<html>
  <head>
    <title>Group</title>
    <script src="../node_modules/fabric/dist/fabric.js"></script>
    <script src="../dist/index.umd.js"></script>
  </head>
  <body>
    <div><canvas id="container" style="border: 1px solid #ccc" width="1024" height="768"></canvas></div>
    <script>
      let canvas = new fabric.Canvas('container', {
        preserveObjectStacking: true,
      });

      let boEntity1 = new fabric.BoEntity([], {
        width: 200,
        height: 100,
        fill: '#fee',
        stroke: '#000',
        padding: 5,
        linkable: true,
        title: 'testtesttesttesttesttesttesttesttesttesttest',
        fields: [
          {
            name: 'userName',
            type: 'String',
          },
          {
            name: 'userName',
            type: 'String',
          },
          {
            name: 'userName',
            type: 'String',
          },
          {
            name: 'userName',
            type: 'String',
          },
          {
            name: 'userName',
            type: 'String',
          },
          {
            name: 'userName',
            type: 'String',
          },
        ],
      });
      canvas.add(boEntity1);

      let link1 = new fabric.Link([500, 500, 300, 300], {
        stroke: '#f00',
        fill: '#f00',
        arrowType: 'both',
      });
      canvas.add(link1);

      link1.setLinkTo(boEntity1);

      let boEntity2 = new fabric.BoEntity([], {
        width: 200,
        height: 100,
        fill: '#fee',
        stroke: '#000',
        padding: 5,
        linkable: true,
        title: '2222',
        fields: [
          {
            name: 'userName',
            type: 'String',
          },
        ],
      });
      canvas.add(boEntity2);

      link1.setLinkFrom(boEntity2);

      console.log(canvas.toJSON());
      console.log(JSON.stringify(canvas));
    </script>
  </body>
</html>

```

**注意：由于 fabric.js 是采用 ES5 语法编写的，没有支持 ES6 模块，ted 也采用了相同的技术栈来扩展功能，所以目前只能使用 &lt;script&gt; 标签的方式进行引入。**

## 3. License

[MIT licensed](./LICENSE).

---
_Source: https://npm.io/package/typeorm-entity-designer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
