Coder Social home page Coder Social logo

yaozhuwa / attachflow Goto Github PK

View Code? Open in Web Editor NEW

This project forked from martinniee/obsidian-fast-image-cleaner

137.0 0.0 4.0 28.5 MB

This nifty plugin enables seamless management of attachments and referenced links directly from your documents. Taking advantage of an intuitive right-click menu, you can efficiently handle resources in both LIVE and READ modes. Additionally, the plugin offers intuitive resizing and click-to-expand features for images in the document.

License: GNU Affero General Public License v3.0

JavaScript 2.26% TypeScript 96.69% CSS 1.06%

attachflow's Introduction

AttachFlow

GitHub Downloads (specific asset, all releases)|150 GitHub Downloads (specific asset, latest release)

中文 / EN】

This is a plugin for Obsidian.

This nifty plugin enables seamless management of attachments and referenced links directly from your documents. Taking advantage of an intuitive right-click menu, you can efficiently handle resources in both LIVE and READ modes. Additionally, the plugin offers intuitive resizing and click-to-expand features for images in the document.

Showcase / Feature

(1) Handy Context Menu

For local images/attachments, the right-click menu includes:

  • Copy File (utilizes system API, allowing any file/image to be copied and pasted to any location/app, compatible with MacOS and Windows)
  • Open with Default Application
  • Show in Finder/File Explorer
  • Show in File List
  • Open with Default Application
  • Rename Attachment (only in Live Preview Mode)
  • Move File to Folder (only in Live Preview Mode)
  • Delete Link and Corresponding Attachment (only in Live Preview Mode)

Aside from these, any renaming or moving of files will automatically update all corresponding file links.

For online images, the right-click menu includes:

  • Copy Image to Clipboard
  • Copy Link
  • Copy Markdown Link
  • Open in External Browser
  • Remove Image Link (only in Live Preview Mode)

(2) Drag to Resize Images

Functional details:

  • Holding down the left mouse button on the edge of an image allows for drag-to-resize
  • Supports Markdown links, WIKI links, and all three types of internal links in Obsidian
  • Compatibility with Excalidraw plugin and PDF++ plugin's embeds for resizable rectangular areas.
  • Enables resizing of images within tables and Callouts.
  • Allows setting a minimum adjustment interval (default is 0); following a resize, the dimensions automatically align to the nearest marking. For example, if set to 10, the adjusted image size automatically aligns to the nearest multiple of ten.

(3) Click to View Images

Feature Description:

  • Clicking on the right half of an image allows for viewing the image in larger size
  • Displays at 100% of the image's size by default; if the original image size exceeds the screen size, it will display at 90% of the screen size (this ratio can be adjusted in the settings)
  • Holding down the left mouse button enables drag-and-move of the image
  • Using the mouse scroll wheel allows for resizing the image, with the scaling centered on the mouse position Right-clicking the image quickly resets it to 100% of its size
  • Double-clicking an image quickly resets it to its original size (either 100% or fit-to-screen)
  • Clicking outside of the image or pressing ESC exits the view mode

Details for clear file feature

Feature intro:

  1. Right-click image to delete attachment and links, and folder as appropriate.

  2. Right-click file list to delete notes and referenced attachments, and folder as appropriate.

Feature Details:

  1. Support markdown and wiki link style image link removal

  2. Supports three different formats of Internal link types (Details)

    1. Shortest path when possible
    2. Relative path to file
    3. Absolute path to vault
  3. Support processing approach after deleting image

    1. Move to system trash

    2. Move to Obsidian trash (.trash folder)

    3. Permanently delete

  4. In addition to supporting img type attachments, there are other types of attachment files such as images, videos, audio recordings, documents... (currently PDF attachments cannot be deleted by right-clicking).

    1. img type: img、gif、png、jpeg,svg, bmp...

    2. file type: docx、pptx、html、epub...

    3. media type: mp4、mkv...

Explanation of image attachment and reference link deletion:

  1. If the image/file is only referenced once in the current note, it will be deleted directly along with its link.
  2. If the image/file is referenced multiple times, only the link to the current image/file is removed, not the actual file.

Explanation of automatic deletion of referenced attachments when deleting a note:

  1. If the attachment is referenced by other notes, it will not be deleted.
  2. If the attachment is only referenced in the note to be deleted, it will be deleted.
  3. Deletion method: using the provided command of the plugin, or by right-clicking on the file list.

Explanation of automatic deletion of attachment folder depending on the situation:

  • The parent directory of an attachment (usually an attachment folder) will be deleted only if the attachment is referenced once in the note to be deleted, and the attachment folder is empty after the attachment is deleted.

Install

Install from BRAT

Add https://github.com/Yaozhuwa/AttachFlow to BRAT.

Manual installation

Go to the latest release page and download the main.js, manifest.json, style.css, and put them to <your_vault>/.obsidian/plugins/AttachFlow/.

Usage

  1. Install and enable this plug-in
  2. In LIVE MODE OR READ MODE ,right-click on image/media/file-embed will open context-menu, where you can delete file,copy file, open file with default app, open file in finder or reveal file in navigation.

Deleted File Destination

Please make sure that you select the destination for the deleted files under this plugin's setting tab. You have 3 options:

  1. Move to Obsidian Trash - Files are going to be moved to the .trash under the Obsidian Vault.
  2. Move to System Trash - Files are going to be moved to the Operating System trash.
  3. Permanently Delete - Files are going to be destroyed permanently. You won't beable to revert back.

Development

This plugin follows the structure of the Obsidian Sample Plugin plugin, please see further details there.

Credits

This plugin is a modification based on the Fast-Image-Clear plugin v0.8.1. I've added functionality to copy files to the clipboard. Furthermore, the features of opening in the default app, showing in finder, and listing in the file list were all inspired by the obsidian-copy-url-in-preview plugin. Feature of "Drag to Reesize" is modified from https://github.com/xRyul/obsidian-image-converter/.

References for these projects can be found at:

Support

If you like this plugin and want to say thanks, you can buy me a coffee here!

attachflow's People

Contributors

martinniee avatar yaozhuwa avatar lishid avatar edo78 avatar fyears avatar clemens-e avatar gitmurf avatar henrebotha avatar kostapc avatar taurelas avatar phibr0 avatar tfthacker avatar tokuhirom avatar reorx avatar aidenlx avatar chrisgrieser avatar

Stargazers

 avatar  avatar Light avatar Frank avatar njslyr1225 avatar 展翼飞 avatar  avatar jeffy102 avatar  avatar xixikitchen avatar  avatar MythC avatar Cynthia avatar 云在晴空下 avatar  avatar  avatar  avatar  avatar  avatar Hui Xie avatar  avatar 故罹ml avatar Mango avatar Gilbert Schimmel avatar  avatar  avatar  avatar dolan avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar 李永航 avatar  avatar  avatar  avatar Zijie Wu avatar  avatar Higgs.Yang avatar  avatar  avatar zengkaimin avatar Solo avatar  avatar  avatar  avatar yooboh avatar  avatar  avatar  avatar Hua avatar  avatar NowScott avatar  avatar  avatar xLiu avatar Pengji Du avatar  avatar  avatar  avatar  avatar  avatar Ellen Gu avatar  avatar biu avatar Qiu avatar uuXt avatar  avatar  avatar  avatar Chlorine avatar hyastar avatar leonecho avatar yanzongt avatar  avatar Xiaoyu avatar  avatar  avatar  avatar  avatar Ting Sun avatar  avatar dwzhang avatar  avatar  avatar  avatar Samuel Yi avatar YUAN avatar dong avatar Hikari avatar 勐萌 avatar Odyssey avatar Kristhinr avatar  avatar  avatar  avatar

attachflow's Issues

[feature] 给一个选项关闭全屏显示图片

很感谢作者最近更新了全屏显示图片功能。但我在使用过程遇到一些问题:

  • 在没有开启drag to resize的情况下,不能直接全屏显示图片
  • 即使开启 drag to resize,全屏显示的识别范围存在问题,即需要将鼠标移动到图片特定位置才能进行点击
  • 右键只能恢复全屏显示,不能进行复制;不能拖动图片位置。这使得功能没有 image toolkit 健全。此外,该功能和 image toolkit 会有点冲突,一般来说会优先使用 image toolkit 的图片悬浮功能,然后再点击图片会全屏显示。

鉴于此,一些小建议:

  • 增加一个选项关闭全屏显示图片
  • 或者完全借鉴 image toolkit 的功能

【FR】自定义重命名规则的预设选项

可以考虑给增加重命名预设的支持吗?

比如右键多一个「按指定格式重命名」选项,可以用设置好的命名格式(像是“文件名-img-当前时间-重复序号”)去重命名,而不用手动输入
image

image

(相当于是把隔壁 Paste Image Rename 的功能也吃进来)

能否提供一个转换为markdown链接的功能

图片在obsidian中可以使用![[链接|大小]]的方式来写,但如果需要把markdown文件连同附件一同放在其他地方就不太方便了,这时候使用markdown会更好一些![大小](链接),能否出一个转换的功能呢

部分情况下的图片附件右键上下文菜单操作失效

  • 当 图片附件链接 中插入诸如 minimal主题-图像滤镜Image filters#invert 字段后

    • 将会导致插件对该图片的右键上下文菜单操作失效
  • 举例

    • ![](image.jpeg) --- 右键上下文菜单操作正常
    • ![](image.jpeg#invert) --- 右键上下文菜单操作失效
  • 但obsidian本身依然支持识别这种加入#invert字段的链接, 能正常进行 文件重命名后的链接更新 / 反链提示...等功能

  • 猜测原因

    • obsidian能正确地忽略掉链接中无法识别的#字段, 从而正确识别维护链接
    • 而这种#字段会导致插件无法识别链接
  • ps:这种 #invert 字段在minimal主题中能控制图片的颜色反转, 在特定场景下起护眼等作用

最新的点击查看大图功能,默认大小100%会太大了

能否增加可选项,可选关闭这个功能呢

因为我之前一直用的是image toolkit插件来查看大图,它会在点击查看时自适应屏幕大小,把全图展示出来,而现在用这个插件,会直接显示100%大小,我很多图片都太大了,点开看显示不全

另外image toolkit插件功能很多,我也一直在用,而目前attachflow插件的功能没有image toolkit多,所以我仍旧希望用image toolkit插件来查看大图,所以希望能选择关闭这个功能,就和这个拖拽调节图片大小一样
(拖拽功能很厉害,不过我的笔记不排版,直接把图片全都用css设成20%大小,然后通过image toolkit插件点开查看,所以我用不上关掉了)

image

启用插件后和图片的居中显示有冲突

具体情况为,当启用插件后,原居中显示的图片只要鼠标移动上去就会变成左对齐,我尝试过关闭插件重启ob后能正常居中。

有个情况是个例外,当图片加了标题和尺寸后,就能正常居中了。

GIF 240423 173020

FR:阅读模式下右键菜单加一个在新标签页打开的功能

因为阅读模式下没有重命名功能,如果能在新标签页打开图片,然后进行重命名以及其他操作(比如我会看图片的反链面板,看看有什么笔记都引用了这个图片)会方便一些,在ob内部进行操作,也能更新链接

0.2.5 会与image toolkit 产生冲突

  • 当调节图片的大小之后,会自动调用image toolkit 打开图片。
  • 0.3最新版本 点击图片时图片显示的大小 太大了,每次必须手动缩小图片

【Bug】与Mousewheel imagezoom插件冲突,功能失效(详见描述)

bug

使用场景

平时有用Mousewheel imagezzoom插件 通过按ALT来 整数级来调整图片,同时能保证所有图片都是一样的。

bug复现

我发现只要先用AttchFlow拖拽后,Mousewheel就失效了。大佬能否修复一下

recording

功能请求

是否可以可以直接在Attchflow里面增加这个ALT+鼠标滚轮 来调整图片?

复制出现错误

在复制图片之后,右上角显示已复制到粘贴板,但是随后又显示下图,而且也粘贴不上。大佬帮忙看看咋回事情嘞
image

【Bug】除了清除文件和链接 其他功能无法使用

已关闭其他所有插件调试
图片链接:![[../../Apparatus/Attachments/Assets/UML-240124-1.png]]

控制台消息

复制到剪切板:
plugin:attachment-flow-plugin:237 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'vault')
at eval (plugin:attachment-flow-plugin:237:25)
at Generator.next ()
at eval (plugin:attachment-flow-plugin:40:61)
at new Promise ()
at __async (plugin:attachment-flow-plugin:24:10)
at handlerCopyFile (plugin:attachment-flow-plugin:235:60)
at AttachFlowPlugin.eval (plugin:attachment-flow-plugin:626:11)
at Generator.next ()
at eval (plugin:attachment-flow-plugin:40:61)
at new Promise ()
使用默认应用打开:
plugin:attachment-flow-plugin:631 Uncaught TypeError: Cannot read properties of undefined (reading 'path')
at eval (plugin:attachment-flow-plugin:631:140)
at e.handleEvent (app.js:1:1170549)
在系统文件管理器打开:
Uncaught TypeError: Cannot read properties of undefined (reading 'path')
at eval (plugin:attachment-flow-plugin:633:36)
at e.handleEvent (app.js:1:1170549)
在文件中显示:
Uncaught TypeError: Cannot read properties of undefined (reading 'path')
at eval (plugin:attachment-flow-plugin:636:76)
at e.handleEvent (app.js:1:1170549)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.