feat: init gojs-designer

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules
+package-lock.json
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+dist
+lib

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 BoBoooooo
+Copyright (c) 2020 BoBoooooo
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,2 +1,69 @@
 # GoJsDesigner
-GoJs流程图设计器
+
+[在线 demo](https://codepen.io/boboooooo/pen/VwKgNqM)
+
+## 开始使用
+
+- npm 引入
+
+```javascript
+import GoJsDesigner from 'gojs-designer'
+import 'gojs-designer/lib/gojs-designer.css';
+
+<GoJsDesigner
+  :preview="preview"
+  @nodeOnClick="nodeOnClick"
+  :data="data"
+  ref="designer"
+>
+</GoJsDesigner>
+```
+
+- 浏览器引入
+
+```html
+<script src="https://unpkg.com/gojs-designer"></script>
+<link href="https://unpkg.com/gojs-designer/lib/gojs-designer.css" />
+
+<go-js-designer
+  :preview="preview"
+  @nodeOnClick="nodeOnClick"
+  :data="data"
+  ref="designer"
+>
+</go-js-designer>
+```
+
+## 效果展示
+
+- 编辑模式
+  ![](./assets/demo1.png)
+
+- 预览模式
+  ![](./assets/demo2.png)
+
+## Props
+
+- data: Object // 流程图 json
+
+- preview: boolean // 是否为预览模式
+
+## Event
+
+- nodeOnClick: (node) => {} // 返回 node 节点信息
+
+## Methods
+
+- getJSON
+
+```javascript
+// 获取流程json
+this.$refs.designer.getJSON();
+```
+
+- redraw
+
+```javascript
+// 重新渲染
+this.$refs.designer.redraw();
+```

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

crack.js

@@ -0,0 +1,37 @@
+/*
+ * @file: gojs水印破解
+ * @author: BoBo
+ * @copyright: BoBo
+ * @Date: 2020-11-19 09:52:15
+ */
+
+
+const fs = require('fs');
+const path = require('path');
+
+class Crack {
+  constructor() {
+    this.parent = path.resolve(__dirname)
+  }
+
+  start() {
+    // 如果已经拉取过依赖包
+    const gojs = `${this.parent}/node_modules/gojs/release/go.js`;
+    // 破解gojs
+    if (fs.existsSync(gojs)) {
+      const states = fs.statSync(gojs);
+      if (states.size === 869655) {
+        fs.readFile(gojs, 'utf8', (err1, files) => {
+          const result = files.replace(
+            'b.V[Za("7eba17a4ca3b1a8346")][Za("78a118b7")](b.V,xk,4,4)',
+            '()=>{return true;}',
+          );
+          // eslint-disable-next-line no-console
+          fs.writeFile(gojs, result, 'utf8', err2 => console.log(err2));
+        });
+      }
+    }
+  }
+}
+
+new Crack().start();

examples/App.vue

@@ -0,0 +1,240 @@
+<template>
+  <div id="app">
+    <div class="left-container">
+      <GoJsDesigner
+        v-if="renderComponent"
+        :preview="preview"
+        @nodeOnClick="nodeOnClick"
+        :data="data"
+        ref="designer"
+      >
+      </GoJsDesigner>
+    </div>
+    <div class="right-container">
+      <el-button size="small" @click="getJson" type="primary"
+        >获取json</el-button
+      >
+      <br />
+      <el-button
+        size="small"
+        @click="forceRerender(false)"
+        style="margin: 0"
+        type="primary"
+        >编辑模式</el-button
+      >
+      <el-button
+        size="small"
+        @click="forceRerender(true)"
+        style="margin: 0"
+        type="success"
+        >预览模式</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "app",
+  data() {
+    return {
+      renderComponent: true,
+      preview: false,
+      data: {
+        class: "GraphLinksModel",
+        copiesKey: false,
+        linkFromPortIdProperty: "fromPort",
+        linkToPortIdProperty: "toPort",
+        modelData: { position: "-731.943603515625 -528.6967468261719" },
+        nodeDataArray: [
+          {
+            text: "开始",
+            figure: "Circle",
+            fill: "#4fba4f",
+            key: -1,
+            loc: "-630 -300",
+          },
+          { text: "步骤1", key: -2, loc: "-450 -300" },
+          { text: "步骤2", key: -3, loc: "-330 -380" },
+          { text: "步骤3", key: -4, loc: "-330 -220" },
+          { text: "步骤", key: -5, loc: "-210 -300" },
+          {
+            text: "结束",
+            figure: "Circle",
+            fill: "#4fba4f",
+            key: -6,
+            loc: "-70 -300",
+          },
+        ],
+        linkDataArray: [
+          {
+            from: -1,
+            to: -2,
+            fromPort: "R",
+            toPort: "L",
+            points: [
+              -594.1162790697674,
+              -299.99999999999994,
+              -584.1162790697674,
+              -299.99999999999994,
+              -536.5171239098837,
+              -299.99999999999994,
+              -536.5171239098837,
+              -300,
+              -488.91796875,
+              -300,
+              -478.91796875,
+              -300,
+            ],
+          },
+          {
+            from: -2,
+            to: -3,
+            fromPort: "R",
+            toPort: "L",
+            points: [
+              -421.08203125,
+              -300,
+              -411.08203125,
+              -300,
+              -390.546875,
+              -300,
+              -390.546875,
+              -380,
+              -370.01171875,
+              -380,
+              -360.01171875,
+              -380,
+            ],
+          },
+          {
+            from: -2,
+            to: -4,
+            fromPort: "",
+            toPort: "L",
+            points: [
+              -421.08203125,
+              -300,
+              -411.08203125,
+              -300,
+              -390.5390625,
+              -300,
+              -390.5390625,
+              -220,
+              -369.99609375,
+              -220,
+              -359.99609375,
+              -220,
+            ],
+          },
+          {
+            from: -3,
+            to: -5,
+            fromPort: "",
+            toPort: "L",
+            points: [
+              -299.98828125,
+              -380,
+              -289.98828125,
+              -380,
+              -267.494140625,
+              -380,
+              -267.494140625,
+              -300,
+              -245,
+              -300,
+              -235,
+              -300,
+            ],
+          },
+          {
+            from: -4,
+            to: -5,
+            fromPort: "R",
+            toPort: "L",
+            points: [
+              -300.00390625,
+              -220,
+              -290.00390625,
+              -220,
+              -267.501953125,
+              -220,
+              -267.501953125,
+              -300,
+              -245,
+              -300,
+              -235,
+              -300,
+            ],
+          },
+          {
+            from: -5,
+            to: -6,
+            fromPort: "R",
+            toPort: "L",
+            points: [
+              -185,
+              -300,
+              -175,
+              -300,
+              -145.4418604651163,
+              -300,
+              -145.4418604651163,
+              -300,
+              -115.88372093023256,
+              -300,
+              -105.88372093023256,
+              -300,
+            ],
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    getJson() {
+      // eslint-disable-next-line no-console
+      console.log(this.$refs.designer.getJSON());
+      alert(this.$refs.designer.getJSON());
+    },
+    nodeOnClick(node) {
+      // eslint-disable-next-line no-console
+      console.log(node);
+      alert(JSON.stringify(node))
+    },
+    forceRerender(preview) {
+      this.preview = preview;
+      // 从 DOM 中删除 my-component 组件
+      this.renderComponent = false;
+
+      this.$nextTick(() => {
+        // 在 DOM 中添加 my-component 组件
+        this.renderComponent = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+body,
+html {
+  max-width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+#app {
+  display: flex;
+  height: 100%;
+  .left-container {
+    flex: 1;
+    height: 100%;
+  }
+  .right-container {
+    flex-basis: 150px;
+    height: 100%;
+    text-align: center;
+  }
+}
+</style>