Add a quick-access button in the top toolbar #5

Closed
opened 2025-04-06 12:37:26 +00:00 by wenbocn · 9 comments

I’d actually prefer if you could add a button to the top bar. When an SVG image is selected, clicking the button opens to draw; if no SVG is selected, clicking the button creates a new one. Thank you!

I’d actually prefer if you could add a button to the top bar. When an SVG image is selected, clicking the button opens to draw; if no SVG is selected, clicking the button creates a new one. Thank you!
massivebox added this to the QoL project 2025-04-06 14:03:32 +00:00
Owner

Hello again!

I have started working on this feature in commit git.massive.box/massivebox/siyuan-jsdraw-plugin@d34258e6bf.

So far, I've added a top-bar button and a shortcut (ALT+SHIFT+D by default, but you can customize it in SiYuan settings) to directly open the editor when a whiteboard has been selected by left-clicking on it.
This saves the users from having to open and navigate the image menu, which can be cumbersome.

In the future, I will add a way to make it so that the same button or shortcut also creates a new image in the doc, if a whiteboard is not currently selected. Unfortunately, I'm very busy in this period, so it may take a bit.

If you want to try the feature as it is now, you can download the build from here. Its stability is not guaranteed, but it should be fine. If you try it, let me know if it works well!

Hello again! I have started working on this feature in commit https://git.massive.box/massivebox/siyuan-jsdraw-plugin/commit/d34258e6bf825d1f525a4c05d3067597661a3e9b. So far, I've added a top-bar button and a shortcut (ALT+SHIFT+D by default, but you can customize it in SiYuan settings) to directly open the editor when a whiteboard has been selected by left-clicking on it. This saves the users from having to open and navigate the image menu, which can be cumbersome. In the future, I will add a way to make it so that the same button or shortcut also creates a new image in the doc, if a whiteboard is not currently selected. Unfortunately, I'm very busy in this period, so it may take a bit. If you want to try the feature as it is now, you can download the build from [here](https://git.massive.box/massivebox/siyuan-jsdraw-plugin/actions/runs/13/artifacts/artifact). Its stability is not guaranteed, but it should be fine. If you try it, let me know if it works well!
Author

The current version works just fine for me, so I'll skip the beta testing for stability's sake. I'll wait for the official release before updating. Really appreciate all your hard work!

By the way (this is a bit embarrassing), I'm not entirely sure how to download this version.

The current version works just fine for me, so I'll skip the beta testing for stability's sake. I'll wait for the official release before updating. Really appreciate all your hard work! By the way (this is a bit embarrassing), I'm not entirely sure how to download this version.
Author

Could you please add a new feature to the button: if no content is selected with the mouse, clicking the button will create a blank SVG file and open it with js-draw for editing? Thank you!

Could you please add a new feature to the button: if no content is selected with the mouse, clicking the button will create a blank SVG file and open it with js-draw for editing? Thank you!
Owner

Working on it! I had this feature in my to-do for a while (I also need it) but was busy with other projects. I've already written the base implementation, I will be testing for edge cases and bugs and adding some polish before publishing a new version.

Working on it! I had this feature in my to-do for a while (I also need it) but was busy with other projects. I've already written the base implementation, I will be testing for edge cases and bugs and adding some polish before publishing a new version.
Author

image
It seems more logical to place the icon for creating and opening js-draw here. Since this button is designed to act on the content of the page which is currently editing. just for your consideration.

![image](/attachments/90c139db-7ed3-44d9-8fcf-e746aafbfd52) It seems more logical to place the icon for creating and opening js-draw here. Since this button is designed to act on the content of the page which is currently editing. just for your consideration.
Owner

Do you know of any other plugin, besides the KMind one, that uses a custom icon in that bar ("protyle breadcrumb bar")?

I'm asking because I suspect the KMind plugin is using an unstable workaround to put an icon there, and even though it probably works well for them, it might stop working every time SiYuan updates.
If that is the case, I would prefer to keep the icon where it is now, because the cost of maintaining the workaround would be higher than the benefit of moving the icon.

Since the KMind plugin is not open-source, I can not check whether I'm right, or whether they use an official method which I haven't found yet. If any open-source plugin uses an icon there, I can check it and know for sure.

As always, thank you for your feedback.

Do you know of any other plugin, besides the KMind one, that uses a custom icon in that bar ("protyle breadcrumb bar")? I'm asking because I suspect the KMind plugin is using an unstable workaround to put an icon there, and even though it probably works well for them, it might stop working every time SiYuan updates. If that is the case, I would prefer to keep the icon where it is now, because the cost of maintaining the workaround would be higher than the benefit of moving the icon. Since the KMind plugin is not open-source, I can not check whether I'm right, or whether they use an official method which I haven't found yet. If any open-source plugin uses an icon there, I can check it and know for sure. As always, thank you for your feedback.
Author

https://ld246.com/article/1731698559408?r=JeffreyChen
Please refer to the JavaScript code available at this link—it might offer you some useful insights.

https://ld246.com/article/1731698559408?r=JeffreyChen Please refer to the JavaScript code available at this link—it might offer you some useful insights.
Owner

Thank you. As suspected, it is a workaround, it does not use the official SiYuan API, it edits the page DOM to inject the icon where it shouldn't be. For this reason, I will not include it in this release, maybe I will add it into the next if I find it to be useful enough to justify it. The icon will remain where it is for now.

Thank you. As suspected, it is a workaround, it does not use the official SiYuan API, it edits the page DOM to inject the icon where it shouldn't be. For this reason, I will not include it in this release, maybe I will add it into the next if I find it to be useful enough to justify it. The icon will remain where it is for now.
Owner

I have published the changes to a new release, it will be live in the marketplace within a few hours.

I will now close this issue, feel free to open it again if there are more comments.

I have published the changes to a new release, it will be live in the marketplace within a few hours. I will now close this issue, feel free to open it again if there are more comments.
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
massivebox/siyuan-jsdraw-plugin#5
No description provided.