# MSFG-frontEnd

**Repository Path**: fzy1999/msfg-front-end

## Basic Information

- **Project Name**: MSFG-frontEnd
- **Description**: 采用jsplumb+vue2，重新实现多信号流图建模
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2023-01-10
- **Last Updated**: 2023-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# modelproject

> A Vue.js project

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## 2023.01.13
任务一基本完成
 1、实现两种节点（test、fault）的实例化（创建一个数据体）、可以拖动（改数据体的position参数）、右键点击出下拉菜单，其中目前包括属性、删除。然后点击属性的弹出框具体内容由另一个任务完成，点击删除则是实现删除功能。（已实现）
 2、目前节点先只有形状、底色和显示name（已实现）
形状由type决定，底色由type和state一起决定，就是说它们决定的是class，然后通过css批量定颜色。具体的形状和底色是什么目前可以比较随便的设计，以后改起来不难（已经预留state type）
3、调整大小这个事以后得做，但目前可以暂时不做。但是如果发现实现连线的时候必须涉及到大小（边界的位置），那也要先做出来。（滚轮调整大小 也算已实现？）

## 2023.01.16 绘
- 调整原有的节点实例化数据结构，将样式部分的设定分离，整体效果不变，减少不必要的数据转换
- 主页面布局采用工具栏，标签页的上下布局，每个标签页内一个独立的流图编辑（设计是：有一个不可删除的主流图编辑 tab，根据需要添加的可删除的子系统编辑 tab，具体细节有待完善）
- 将之前写的 JsonExport 与 JsonImport 组件加入到工具栏中，已经调通（这个主要是可以为后面写新东西做验证是提供便利）

## 2023.01.17 s

看了灿辉上传的内容，对于上下布局以及多个tab的设计我认为挺好，之后就继续按这个做吧。

然后，是因为上传版本问题还是什么，虽然readme里说调通了，但下载功能下载的json是空的。
我检查了一下，是因为multiprocess的msfg子组件发生变化的时候，没有把数据传到multiprocess，于是toolbar以及他的子组件们都看不到数据，所以我在msfg.vue里加了监视只要它的figuredata变化就往父组件发送数据。
所以现在算是改好了，但是代码风格不一定和你们一样，所以你们如果想也可以重新修一遍。
（东西在新的压缩包文件里）

读取功能试了试，没发现啥问题。

最后那就是可以继续开发了，下一步让子系统能用吧。
能打开在一个新的tab里看子系统里是什么，能编辑，能单独保存和导入，能保存以影响主图。
然后还有相应的input、output节点得加上。

## 2023.01.17 绘

- 重构了一下 tab 与 MSFG 子组件的关系，现在只保留一个 MSFG 子组件， tabs 作为存储数据的标签页，通过点击事件传递数据给 MSFG 子组件，
- 数据绑定目前来看应该没啥问题，导入导出一切正常（JsPlumb 貌似有个 bug，如果不请空已有的线而直接导入新的数据重绘，绘图会爆炸）
- 新增清空画布功能
- 目前基本的连线功能应该是可以的（不考虑子系统多输入输出接口实现前），目前绘稍微测试了一下，应该没啥 bug

## 2023.01.19 绘
- 重构了一下绘图使用的数据的结构，以及整个绘图工具的数据更新方式
    - 原来的子系统内部自己维护一套子系统的绘图数据，现在改为全局绘图使用一个 nodeList 和 一个 lineList，所有节点与线条添加一个归属属性 subID 用于绘图时使用计算属性过滤用于绘图的数据，将寻找节点的深度遍历转变为列表遍历（后端转换也更便捷）
    - 原先数据的双向绑定比较混乱（虽然能通，但其实绘自己也没搞懂怎么通的），现在的数据更新方式为：所有操作都用来更新主数据，由计算属性自动计算绘图数据，取消双向，使数据绑定更清晰