# dspBuildingDesigner

**Repository Path**: cying314/dsp-building-designer

## Basic Information

- **Project Name**: dspBuildingDesigner
- **Description**: vue2开发的单页静态网页，用以戴森球计划游戏内超距电路蓝图的构建。 项目基于d3js实现拖拉拽编辑，对建筑组件进行创建、连接，并可通过组件封装实现对内部细节的隐藏，将戴森球建筑组合封装为数字电路模块，以网表方式连接电路模块构建大型电路，最终生成戴森球计划游戏蓝图数据在游戏内摆放电路。
- **Primary Language**: Unknown
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 16
- **Forks**: 2
- **Created**: 2024-01-12
- **Last Updated**: 2025-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 戴森球计划 数字电路自动化工具

### -  DSP物流电路设计器

用于戴森球计划（Dyson Sphere Program）游戏内数字电路蓝图的可视化编辑及自动化构建。

项目将游戏建筑、传送带抽象化为有向图的节点与连接，基于Web端节点编辑器，实现以拖拉拽方式编辑游戏建筑、封装逻辑门组件，并实现基于有向图点边数据解析为游戏建筑对象，序列化为蓝图文件的过程。

项目旨在以嵌套封装的形式，隐藏模块内部复杂逻辑，支持物流级、逻辑门级封装，使戴森球计划相关物流建筑（如四向分流器、传送带、流速器等）的逻辑透明化——用户无需关注游戏内如何构建逻辑门，只需关注数字电路的逻辑实现，由工具自动化构建游戏建筑蓝图。

- 项目框架：Vue、d3.js

> 本项目为Vue2开发的单页静态网页，基于d3.js实现Web端节点编辑器。

- 在线访问地址：

> https://cying.xyz/DSP/dspBuildingDesigner

- b站演示视频：

> https://www.bilibili.com/video/BV1Gc411x7Xx/

<img src="https://gitee.com/cying314/dsp-building-designer/raw/master/README.assets/image-20240416204441.jpg" alt="image-20240416204441" style="zoom: 25%;" />

- 页面截图：

![页面截图1](https://gitee.com/cying314/dsp-building-designer/raw/master/README.assets/image-20240416201038.png)

![页面截图2](https://gitee.com/cying314/dsp-building-designer/raw/master/README.assets/image-20240416202518.png)

![页面截图3](https://gitee.com/cying314/dsp-building-designer/raw/master/README.assets/image-20240416201954.png)


- 工具说明：

>**基础操作**
>
>- **创建节点：**
>  方式1、拖拽左侧栏组件到画布中；
>   方式2、在左侧栏开启双击创建，并勾选要创建的组件，在画布中双击创建
>- **连接：**
>  从一个节点的 插槽 长按左键拖拽到其他节点的 插槽 即可创建连接
>   *同一个插槽只可连接一次，在右键插槽菜单中可断开连接
>- **选择节点：**
>  左键点击可单选节点，按住Ctrl点击可实现增选、减选；
>   长按右键可拖拽框选，按住Ctrl框选可实现增选
>- **组件菜单：**
>  右键节点打开节点菜单，可操作切换图标、切换标记数、切换生成物品、封装、展开封装等
>   右键插槽打开插槽菜单，可操作断开连接、切换插槽方向、设置四向优先接口等
>
>**快捷操作**
>
>- **Ctrl+A：** 全选节点
>- **Ctrl+C：** 复制选中节点
>- **Ctrl+V：** 鼠标处粘贴
>- **Ctrl+X：** 剪切选中节点
>- **Delete：** 删除选中节点
>- **Ctrl+Z：** 撤回（限50次）
>- **Ctrl+Shift+Z：** 重做（取消撤回）
>- **Ctrl+S：** 保存到浏览器缓存
>- **Ctrl+D：** 导出工程为JSON文件
>- **Ctrl+B：** 导出蓝图
>- **方向键↑↓←→：** 移动选中节点
>- **双击插槽：** 切换插槽方向（封装模块无法切换，为断开连接）
>- **双击文本：** 可修改节点名称、传送带标记数等
>- **拖拽连接+Ctrl：** 从插槽拖出连接线时，长按Ctrl可进入“批量连接”模式——鼠标经过可连接的插槽时会立即建立连接，并自动从节点的下一个插槽处拉出连接线到鼠标位置
>
>**封装模块**
>
>- **封装与展开：**
>  框选节点后，可通过右键菜单创建封装，已封装的组件也可以通过右键展开封装；
>   模块封装后将展示在左侧栏的当前封装模块中，封装模块将随着项目保存，引入其他组件时将同时引入组件依赖的封装模块
>- **连接封装模块：**
>  实际使用中，模块插槽无需全部连接，未连接的输入口将默认置1（即“悬空置1”），输出口将作为普通流速器回收
>- **封装组件插槽：**
>  封装中必须至少包含各一个输入输出口，封装后输入输出口将作为模块的节点插槽，插槽顺序将按照输入输出口的传送带标记数升序排列
>- **修改封装组件：**
>  若只想修改封装组件的非结构性数据（如插槽名、图标、标记数字、内部文本描述等），可展开封装修改后重新进行封装，工具将在封装时提示“是否覆盖更新封装数据”，确认后将覆盖原有封装内容；
>   如发生结构变化，则需另行封装并替换模块
>- **批量替换模块：**
>  右键选中封装模块，可选择替换为其他模块，将选中的模块更换为当前工程引用的其他封装模块；
>   替换时，原模块的插槽连接将根据从左往右的顺序接入到新模块中，若新模块插槽数量小于原模块，则溢出部分将断开链接；
>   若画布上存在与选中模块相同的结构，将弹窗提示“是否更改到所有相似节点”，确认后可一键替换所有相似模块为指定的新模块（仅替换同层模块，封装内部的模块不会被替换）



### 安装依赖

```shell
cnpm install
```

### 运行测试服务

```shell
npm run serve
```

### 构建打包

```shell
npm run build
# 打包后可删除dist文件夹中的css及js文件夹(打包流冗余文件，所有代码已打包进html)，仅保留index.html
```