## DiagramViewer使用方法

### 1.安装包

本项目可以使用npm包安装，也可以使用url直接引入。

npm包地址：[@ggwork/diagramviewer](https://www.npmjs.com/package/@ggwork/diagramviewer)

cdn地址：[@ggwork/diagramviewer](https://www.jsdelivr.com/package/npm/@ggwork/diagramviewer)


使用案例：[diagramviewer-demo](https://github.com/ggwork/diagramviewer-demo)

使用案例：[solution首页地址](https://github.com/ggwork/vue3-ts-solution)

### 2.npm包使用方法

**安装**
```shell
npm i @ggwork/diagramviewer -S
```

**引入包** 

```shell
// @ts-ignore
import DiagramViewer from '@ggwork/diagramviewer'
```

因为diagramviewer并不是ts开发，直接引入会报ts错误，因此引入前要加`@ts-ignore`，忽略ts错误检查

**使用**

以vue3为例，在onMounted（vue2中为mounted）中调用。

```javascript
import {onMounted} from 'vue'

onMounted(()=>{
   let data_url='http://localhost:1337/api/diagrams/58'
   let container = document.querySelector('#container')
   new DiagramViewer(container,data_url);
})

```
如果是其他框架，请确保DiagramViewer调用的时候，container元素已经存在于真实的dom中。




### 3.url使用方法。

**引入包**

在jsdelivr上搜索`@ggwork/diagramviewer`包，然后获取dist文件下index.js 或者index.min.js的地址。

这里我以1.0.9版本的index.min.js为例说明。

```shell
https://cdn.jsdelivr.net/npm/@ggwork/diagramviewer@1.0.9/dist/index.min.js
```

在vue根目录的index.html文件中引入该js

```html
<script src="https://cdn.jsdelivr.net/npm/@ggwork/diagramviewer@1.0.9/dist/index.min.js"></script>
```

**使用包**

DiagramViewer作为全局变量挂载到了window上，如果要使用的话，就在对应页面的onMounted方法中调用即可

```javascript
import { onMounted } from "vue";

onMounted(() => {
  let data_url = "http://localhost:1337/api/diagrams/58";
  let container = document.querySelector("#container");
  // @ts-ignore
  new window.DiagramViewer(container, data_url);
});
```


## 4.如何更新npm包和url

@ggwork/diagramviewer包的github地址：[diagramviewer](https://github.com/ggwork/diagramviewer)

**1.将仓库克隆到本地**

```shell
git clone https://github.com/ggwork/diagramviewer.git
```

**2.修改代码**

代码主要存放在src下的index.js文件里。

**3.打包**

shell端执行以下命令打包代码，打包后的代码存放在dist文件夹下
```shell
npm run webpack:build
```

**4.修改包信息**

包信息存放在package.json文件里其中。
name 就是包的名称，你可以更换成自己的包名。
version 就是包的版本号，每次修改程序后都需要修改版本号才能发布包。
main是入口文件，既别人引入包时引入的文件。
可以根据自己的需要，添加description和keywords等字段

**5.发布包**

shell端执行
```shell
npm publish
```

如果没有登录过npm，这里还会涉及到npm包登录，npm包登录可以查看此教程[如何发布自己的NPM包](https://juejin.cn/post/6844903673684836365)



## 5.@ggwork/diagramviewer是如何制作的



@ggwork/diagramviewer包是在[flashoop/DiagramViewer](https://github.com/flashoop/DiagramViewer)仓库的基础上，删掉了vue代码，做了一些修改，制作而成的。


**1.修改DiagramViewer.js**

@ggwork/diagramviewer的入口文件为src下的index.js文件，index.js文件就是[flashoop/DiagramViewer](https://github.com/flashoop/DiagramViewer)项目中src文件夹下的DiagramViewer.js


index.js文件相较于DiagramViewer.js文件，修改了以下几点

- 修改了文件名，由DiagramViewer.js 改成了index.js
- 顶部包引入的路径由绝对路径（@开头）改成了相对路径（.开头）
- index.js底部，将DiagramViewer挂载到了window上

除了以上几个地方，index.js和DiagramViewer.js一模一样。


**3.其他文件改动**

其他文件夹下的文件，修改的也不少。但是修改的方法都比较统一。

- 凡是引入本地包的，引用路径统一由绝对路径（@开头）改成了相对路径
- 引入的资源（图片，splinecode文件），统一改成了线上地址，目前是存放在阿里云。

**4.删掉代码里的vue代码和配置**

略，这个对比两个仓库的内容就可以看出来了，我这里就不说了。

**5.配置webpack打包程序**

略，这个对比两个仓库的内容就可以看出来了，我这里就不说了。