All Projects → fangyang921017 → Vue Jsplumb Editor

fangyang921017 / Vue Jsplumb Editor

利用vue、jsPlumb参照阿里pai平台

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

Projects that are alternatives of or similar to Vue Jsplumb Editor

Vim Go Ide
Vim as the IDE for the go language 将 vim 打造成 go 语言的 ide
Stars: ✭ 129 (-5.84%)
Mutual labels:  editor
Flaxapi
Old repository with C# Editor and C# API for creating games in Flax Engine
Stars: ✭ 131 (-4.38%)
Mutual labels:  editor
Cadeditor
NES Universal Level Editor (Chip & Dale, Darkwing Duck, Duck Tales, Duck Tales 2, MegaMan 4, Chip & Dale 2, Tale Spin, Little Mermaid, Jungle Book, Flintstones and many others)
Stars: ✭ 134 (-2.19%)
Mutual labels:  editor
My Vue Editor
a rich text editor for Vue 2.x
Stars: ✭ 129 (-5.84%)
Mutual labels:  editor
Phaser3 Particle Editor
A flexible editor for building phaser particles.
Stars: ✭ 131 (-4.38%)
Mutual labels:  editor
Versatile
A simple 3D model editor based on simple quads and a sprite set.
Stars: ✭ 132 (-3.65%)
Mutual labels:  editor
Notepadqq
A simple, general-purpose editor for Linux
Stars: ✭ 1,738 (+1168.61%)
Mutual labels:  editor
Editor.md
The open source embeddable online markdown editor (component).
Stars: ✭ 11,741 (+8470.07%)
Mutual labels:  editor
Medium Draft
📝 A medium like Rich Text Editor built on draft-js with a focus on keyboard shortcuts.
Stars: ✭ 1,705 (+1144.53%)
Mutual labels:  editor
Hrcloud2
A full-featured home hosted Cloud Drive, Personal Assistant, App Launcher, File Converter, Streamer, Share Tool & More!
Stars: ✭ 134 (-2.19%)
Mutual labels:  editor
Node editor framework
A flexible and modular Node Editor Framework for creating node based displays and editors in Unity
Stars: ✭ 1,751 (+1178.1%)
Mutual labels:  editor
Goed
Terminal based code editor / development environment
Stars: ✭ 130 (-5.11%)
Mutual labels:  editor
Cells
Live coding environment. Use SuperCollider, Python, TidalCycles, Node.js etc. in the same project.
Stars: ✭ 133 (-2.92%)
Mutual labels:  editor
Tau
GTK frontend for the xi text editor, written in Rust
Stars: ✭ 129 (-5.84%)
Mutual labels:  editor
Notepanda
📃 A simple cross-platform notepad. Based on Qt and C++.
Stars: ✭ 134 (-2.19%)
Mutual labels:  editor
Simple Java Text Editor
📝 PHNotepad is a simple Java text/code editor (notepad) written in Java. It has also nice features such as Search tool, Find/Replace text/code, Auto completion, Nice Image Buttons for better UX, etc.
Stars: ✭ 128 (-6.57%)
Mutual labels:  editor
Komet
Cocoa editor for creating commit messages
Stars: ✭ 131 (-4.38%)
Mutual labels:  editor
Relax
Free clone of noisli.com - a multiple-file markdown editor, ambient sounds and uncluttered interface
Stars: ✭ 135 (-1.46%)
Mutual labels:  editor
Tagger
Zero Dependency, Vanilla JavaScript Tag Editor
Stars: ✭ 135 (-1.46%)
Mutual labels:  editor
Git Cola
git-cola: The highly caffeinated Git GUI
Stars: ✭ 1,787 (+1204.38%)
Mutual labels:  editor

vue-jsplumb-editor

在线预览

功能点

image

菜单节点区域

  • [x] 从菜单中拖动一个节点到主设计区域,可放置该节点
  • [x] 按节点类型组织节点

主设计区域

  • [x] 操作可撤销
  • [x] 背景的平移和缩放
  • [x] 可接收从菜单中拖入的节点
  • [x] 拖入的节点会根据当前的节点信息生成对应的端点(用于拖出连线)
  • [x] 生成的端点分两种类型:源端点和目标端点,应在样式上作区分
  • [x] 源端点放置在节点bottom位置,目标节点防止在节点的top位置(便于从上往下拖出连接线)
  • [x] 所有节点可通过拖拽移动位置
  • [x] 所有节点和连接线可删除
  • [x] 所有节点和端点在鼠标悬浮需要有tooltip框来提示节点或端点信息
  • [x] 所有节点、端点和连接线在鼠标悬浮时需要设置不同的样式
  • [x] 所有节点和连接线可被选中
  • [ ] 操作实时保存数据
  • [x] 导入数据生成流程图

节点配置区域

  • 在设计区域选中节点时,节点配置区域会显示一个对应的节点配置面板
  • 不同节点应拥有对应的节点配置面板
  • 节点面板用来展示和配置节点属性

右键菜单功能

  • 节点:
    • [x] 复制
    • [x] 删除
    • [x] 查看数据
    • [x] 重命名
  • 连接线:
    • [x] 删除
  • 背景:
    • [x] 粘贴

安装依赖

npm install

开发模式

npm run serve

编译生产代码

npm run build
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].