jessyan0913 / pictode

🎨 Pictode最方便集成的绘图工具

• 👋 Hi, I’m @JessYan0913
• 👀 I’m interested in ...
• 🌱 I’m currently learning ...
• 💞️ I’m looking to collaborate on ...
• 📫 How to reach me ...

pictode's Issues

[Feature]鼠标中键进行画布拖拽的功能有点局限

Feature Request / 功能请求

特性描述 / Feature Description

实际使用中的并不需要鼠标中键进行拖拽的功能

解决方案描述 / Solution Description

希望拖拽功能可以按需灵活使用或者禁止掉

[Feature]箭头工具

Feature Request / 功能请求

问题描述 / Problem Description

工具集中缺少箭头工具

解决方案描述 / Solution Description

实现Pictode的Tool接口，再结合Konva.js自带的箭头工具即可实现

参考 / References

Konva.js的基础图形中包含箭头图形

https://konvajs.org/docs/shapes/Arrow.html

[BUG]暗黑模式橡皮擦不太看得到

Bug Report / 缺陷报告

问题描述 / Describe the bug

暗黑模式橡皮擦不明显

复现步骤 / To Reproduce

切换暗黑模式，点击橡皮擦

期望行为 / Expected behavior

暗黑模式下橡皮擦颜色为白色比较合理
截图 / Screenshots

桌面设备信息 / Desktop (please complete the following information):

移动设备信息 / Smartphone (please complete the following information):

附加上下文 / Additional context

在vue2框架中 @pictode/core 引用报错

Bug Report / 缺陷报告

问题描述 / Describe the bug
在vue2框架中 @pictode/core 引用报错

复现步骤 / To Reproduce
1、安装@pictode/core
2、进行引用import { App } from "@pictode/core";
3. 出现错误 -->

期望行为 / Expected behavior

截图 / Screenshots

[BUG] 画布大小不为1时，图形修改会导致放大或缩小

Bug Report / 缺陷报告
问题描述 / Describe the bug
放大画布后，所有的图形在修改属性时会导致图形不断放大

复现步骤 / To Reproduce

期望行为 / Expected behavior
不会放大缩小
截图 / Screenshots

20240125_153546.mp4

应该是polyfill下node.ts的toObject改写了 attrs的属性转化为了绝对值，所以重新设置后位置大小变化。修改后恢复正常，但是我不确定你转化它们的意图是什么

[Feature]支持多图层功能

Feature Request / 功能请求

问题描述 / Problem Description

虽然Konva.js天然支持多图层管理，但是目前Pictode并没有封装改功能。在实现图片编辑类工具时，多图层管理必不可少。

例如：实现编辑图片工具，需要将图片置于一个底部图层，然后可以再新建一个图层来绘制画笔等形状（类似PS的图层）。

解决方案描述 / Solution Description

封装Konva.js的Layer，在app中支持Layer的管理，主要功能有：Layer的增、删、移动和可见性切换

备选方案 / Alternative Solutions

附加上下文 / Additional Context

演示环境要求 / Demo Environment Requirement

技术实现建议 / Technical Implementation Suggestions

其他信息 / Additional Information

截图/图片 / Screenshots/Images

参考 / References

备注 / Notes

[BUG] 添加本地图片后保存到本地，重新导入该文件渲染时报错

Bug Report / 缺陷报告

问题描述 / Describe the bug
画板中包含本地图片时，导出文件后，再次导入失败，报错

复现步骤 / To Reproduce
1、在空白画板中选择添加本地图片，然后点击 菜单 -> 保存到本地， 假设自动下载的文件名为 xxx.pictode
2、点击 菜单 -> 打开 重新加载刚才保存的 xxx.pictode 文件
3、你会发现报错了

期望行为 / Expected behavior
能正常导出、导入，可以在导出时过滤掉本地图片

截图 / Screenshots

[Feature]2D可视化组态软件

Feature Request / 功能请求

特性描述 / Feature Description
2D可视化组态软件，集动态数据显示和事件交互于一体的可视化工具

解决方案描述 / Solution Description

技术实现建议 / Technical Implementation Suggestions

截图/图片 / Screenshots/Images

参考 / References
https://2d.le5le.com/

备注 / Notes

 ERR_PNPM_RECURSIVE_RUN_FIRST_FAIL  [email protected] dev: `vite`

文本输入框，按下backspace不能够删除已经输入的文字

Bug Report / 缺陷报告

问题描述 / Describe the bug
文本输入框，按下backspace不能够删除已经输入的文字

复现步骤 / To Reproduce
点击文本框功能，输入几个文字，按下backspace发现不能删除文字
期望行为 / Expected behavior
点击文本框功能，输入几个文字，按下backspace可以删除已经输入的文字
截图 / Screenshots

桌面设备信息 / Desktop (please complete the following information):

移动设备信息 / Smartphone (please complete the following information):

附加上下文 / Additional context

[Feature]画布渲染HTML内容

Feature Request / 功能请求

问题描述 / Problem Description

添加HTML渲染，以实现tldraw的makereal的效果：https://github.com/tldraw/make-real-starter

@pictode/vue-aide安装错误

Bug Report / 缺陷报告

问题描述 / Describe the bug
[中文] 导入@pictode/vue-aide无法使用，找不到

复现步骤 / To Reproduce
[中文] 复现行为的步骤：

1. 使用pnpm安装@pictode/vue-aide
2. 在代码中import报错
3. 另外import的很多是type，git源代码中不是type，报错

期望行为 / Expected behavior
[English] A clear and concise description of what you expected to happen.
[中文] 请清晰简明地描述您期望发生的行为。

截图 / Screenshots
[中文] vue-aide的package信息错误

文本工具输入时看不到光标

Bug Report / 缺陷报告

问题描述 / Describe the bug
[中文] 文本编辑时看不到光标

[中文] 复现行为的步骤：

1. 打开一个弹窗进行绘画
2. 点击文本工具
3. 双击画板空白处，无任何效果。
4. 输入后，点击其他空白区域，显示出文字

期望行为 / Expected behavior
[中文] pictode创建输入框使用了一个absolute的textarea，但是没有设置zIndex，当在弹窗中打开pcitode时，弹窗的div挡住了textarea。希望配置增加个zindex，并有默认值

node在初次编辑缩放旋转时回退存在异常

Bug Report / 缺陷报告

问题描述 / Describe the bug

node在初次编辑缩放旋转时回退存在异常

复现步骤 / To Reproduce

1. 创建node
2. 编辑node
3. 撤销
4. nod没有恢复到编辑前的node

期望行为 / Expected behavior

nod正常恢复到编辑前的node

[BUG] 重新导入保存到本地的文件, 选中元素时的层级有问题

Bug Report / 缺陷报告

问题描述 / Describe the bug
正常情况，在新建画布中选中图形元素时，出现的矩形框层级是最高的，但是重新导入之前保存到本地的文件, 再选中元素时的矩形框层级出现问题

复现步骤 / To Reproduce
1、在空白花白中随便画几个图形元素，为了方便观察，几个元素最好有重叠，然后点击 菜单 -> 保存到本地， 假设自动下载的文件名为 xxx.pictode
2、点击 菜单 -> 打开 重新加载刚才保存的 xxx.pictode 文件
3、选中一个图形元素后，出现选中的矩形框
4、你会发现矩形框的层级不在最上层了
5、排查源码发现是导入时 optionLayer 层级初始化问题

期望行为 / Expected behavior
重新导入已保存的文件，重新渲染元素，选中元素后，矩形框层级正常展示

截图 / Screenshots
正常时的状态：

层级异常时的状态：

[Feature]连线工具

Feature Request / 功能请求

特性描述 / Feature Description

实现图形与图形之间绑定连线的功能,任意图形拖动时连线绑定关系不变

解决方案描述 / Solution Description

创建一个Line的自定义图形,该图形包含from和to两个属性,分别监听from和to的图形的拖拽事件,来更新line图形的形状.

从而实现视觉上图形连接的效果

技术实现建议 / Technical Implementation Suggestions

https://konvajs.org/docs/sandbox/Connected_Objects.html

截图/图片 / Screenshots/Images

参考 / References

备注 / Notes

[BUG]导出后.pictode文件，再次导入该文件画板空白

缺陷报告

**问题描述 **
导出后.pictode文件，再次导入该文件画板空白

复现步骤

1. 画板添加图片
2. 点击 保存本地
3. 导入保存的本地文件
4. 出现错误 画板空白

期望行为
可以正常回显文件内容

**桌面设备信息 **

• 操作系统: macOS 12.7.3
• 浏览器 chrome
• 版本 122.0.6261.94

[Feature] 无限背景，随着画布拖拽背景也会跟随

Feature Request / 功能请求

特性描述 / Feature Description

增加背景相关的设置，支持画布拖拽时背景跟随画布移动/缩放，视觉上像是画布无限

截图/图片 / Screenshots/Images

参考 / References

https://longviewcoder.com/2024/03/13/konva-infinite-background/

[Feature]Line图形关键点编辑

Feature Request / 功能请求

特性描述 / Feature Description

当用Line或者自由画笔绘制图形时,创建图形后,通过编辑关键点实现图形的二次编辑

解决方案描述 / Solution Description

line 图形中包含一个points属性,这个属性记录了line图形的关键点位置,通过修改points即可完成关键点编辑功能

技术实现建议 / Technical Implementation Suggestions

在@pictode/plugin-selector中支持该功能,将其作为默认功能实现

截图/图片 / Screenshots/Images

参考 / References

备注 / Notes

请问手机端怎么配置

似乎收到手机端不能使用

能支持导入/导出svg吗

Feature Request / 功能请求

问题描述 / Problem Description
需要导出svg，插入到富文本编辑器中展现。并且能从编辑器打开svg再次编辑

[Feature] 增加标尺功能

Feature Request / 功能请求

特性描述 / Feature Description

标尺功能是设计软件常见的一个功能，用于辅助图形定位等

截图/图片 / Screenshots/Images

参考 / References

https://longviewcoder.com/2024/03/13/konva-infinite-rulers/

[BUG]

Bug Report / 缺陷报告

问题描述 / Describe the bug
无法打开保存有图片的文件

复现步骤 / To Reproduce
视频附件很详细

期望行为 / Expected behavior
打开保存有图片的文件

截图 / Screenshots

桌面设备信息 / Desktop (please complete the following information):

移动设备信息 / Smartphone (please complete the following information):

附加上下文 / Additional context

20240122_175815.mp4

支持文本换行,即多行文本

Feature Request / 功能请求

特性描述 / Feature Description
目前输入文本只能单行， 无法换行。不知是否实现
解决方案描述 / Solution Description
换行效果，参考https://excalidraw.com/
技术实现建议 / Technical Implementation Suggestions
如果还是输入框实现的文本输入， 那么文本测量确实是个问题。 我目前采用的是用浏览器测量法。 比较简单粗暴。 demo

[BUG] 组移动后解除组合图形位置不符合预期

Bug Report / 缺陷报告

问题描述 / Describe the bug

图形成组后移动组，再解除成组后，成组图形恢复原位。理想情况应该是原地解除组合。

复现步骤 / To Reproduce

期望行为 / Expected behavior

截图 / Screenshots

桌面设备信息 / Desktop (please complete the following information):

• OS: MacBook
• Browser: Chrome
• Pictode Version: 1.0.1

移动设备信息 / Smartphone (please complete the following information):

附加上下文 / Additional context

[Feature]画布裁剪工具

Feature Request / 功能请求

问题描述 / Problem Description

鼠标移动的方式裁剪画布大小，类似于微信的PC端的截图功能

解决方案描述 / Solution Description

基于Konva的矩形图形，根据鼠标的移动改变裁剪的区域大小。点击确定后，将矩形的尺寸应用到画布即可。裁剪工具自带，确认和取消按钮，或提供确认和取消的方法

[BUG] 成组->撤销（解除组）->回退（创建组）->撤销(解除组【无效】)

Bug Report / 缺陷报告

问题描述 / Describe the bug

成组->撤销（解除组）->回退（创建组）->撤销(解除组【无效】)

复现步骤 / To Reproduce

1. 创建组

2. 撤销

3. 回退

4. 撤销

期望行为 / Expected behavior

创建组后无论被撤销回退多少次都应该正确的创建和解除组

桌面设备信息 / Desktop (please complete the following information):

• OS: MacBook
• Browser: chrome
• Version: 1.0.1

放大缩小不居中，记录一下

Bug Report / 缺陷报告

问题描述 / Describe the bug
放大缩小的时候是基于左上角，而不是中心

使用装饰器重构插件方法可用性判断

重构目标

plugin-selector

plugin-ruler

plugin-history

plugin-aliginment