https://github.com/misohena/el-easydraw
Embedded drawing tool for Emacs
https://github.com/misohena/el-easydraw
drawing emacs graphics org-mode svg
Last synced: 9 days ago
JSON representation
Embedded drawing tool for Emacs
- Host: GitHub
- URL: https://github.com/misohena/el-easydraw
- Owner: misohena
- License: gpl-3.0
- Created: 2021-09-01T10:53:40.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2025-03-04T12:13:41.000Z (about 2 months ago)
- Last Synced: 2025-04-07T03:09:21.848Z (16 days ago)
- Topics: drawing, emacs, graphics, org-mode, svg
- Language: Emacs Lisp
- Homepage: https://misohena.jp/blog/2021-09-21-emacs-easy-draw.html
- Size: 10.1 MB
- Stars: 813
- Watchers: 16
- Forks: 21
- Open Issues: 2
-
Metadata Files:
- Readme: README.org
- License: LICENSE
Awesome Lists containing this project
README
#+TITLE: Emacs Easy Draw
Emacs Easy Draw is a drawing tool that runs inside Emacs.
[[file:./screenshot/edraw-screenshot.gif]]
* Requirements
- Emacs 27.2
- Image support
- SVG support
- gzip and gunzip(or zlib support)
- libxml support
* Screenshots
[[https://github.com/misohena/el-easydraw/wiki/Screenshots]]
* Use In Org-Mode - edraw-org.el
** Config
#+begin_src emacs-lisp
(with-eval-after-load 'org
(require 'edraw-org)
(edraw-org-setup-default))
;; When using the org-export-in-background option (when using the
;; asynchronous export function), the following settings are
;; required. This is because Emacs started in a separate process does
;; not load org.el but only ox.el.
(with-eval-after-load "ox"
(require 'edraw-org)
(edraw-org-setup-exporter))
#+end_src
** Usage
To start drawing, type ~[[edraw:]]~ and type =C-c C-o= on the link.
Draw something and type =C-c C-c= and the data will be saved in the buffer.
** Link Notation
#+begin_src org
Bracket Links:
[[edraw:file=./example.edraw.svg]]
[[edraw:data=]]
[[*Example][edraw:file=./example.edraw.svg]]
[[*Example][edraw:data=]]
Angle Links:
>
Plain Links:
edraw:file=./example.edraw.svg
edraw:data=
#+end_src
Path Syntax:
: edraw:=;=;...;=
Note: If Base64 data is included in a plain link, the trailing symbol (= or +) may not be included in the range of the plain link. In that case, by specifying a dummy property at the end, you can include the entire thing in a plain link.
#+begin_src org
edraw:data=H4sIAGAXVWYAA22O0Q7CIAxFf4X0XcpmYsIC+5cpCEQEA2Swvxed0RcfmtvbnttU5NWQdvchS7ClPCbEWiutRxqTwZExhp2AHZmad+H2Dxw45/jeAqlOFSthYAyI1c7Y8jGrTtnF0B0dYBaGOCVBq7TUwzmqrY+SvhRydd5LSFr94if2PftqNwljl7YLzgJNr/7n/AQMbuxHzwAAAA==;eop=1 is a red rectangle.
# `eop' means end of path
#+end_src
** Inline Images
To toggle the inline display mode, type =M-x edraw-org-link-image-mode=
** Edit Image
To edit the image, do one of the following on the link:
- =M-x edraw-org-edit-link=
- =C-c C-o=
- Right click on image (The right-click menu also provides some other useful functions for links)
** Export
*** As HTML
Customization Variables:
- edraw-org-export-html-data-tag :: HTML tag used to export data links. (svg or img)
- edraw-org-export-html-file-tag :: HTML tag used to export file links. (svg or img)
- edraw-org-export-html-use-viewbox :: Add viewBox= attribute to svg root elements when SVG export.
Link Properties:
- html-tag ::
HTML tag used to export the link. (svg or img)
Example:
#+begin_src org
[[edraw:html-tag=img;data=]]
#+end_src
*** As LaTeX
I have a minimal implementation, but I don't use LaTeX usually, so there may be some problems.
=[[edraw:data=]]= format creates a temporary file when exporting as LaTeX. Please let me know if there is a better way in LaTeX.
*** As ODT
As with the LaTeX export, the =[[edraw:data=]]= format creates a temporary SVG file.
** Regular File Link Support
You can also edit regular file links inline.
For example, create a link like this:
#+begin_src org
[[file:example.edraw.svg]]
#+end_src
Then do =M-x edraw-org-edit-regular-file-link= on this link and the drawing editor will appear in its place.
Inline display after editing is possible with org-toggle-inline-images. You can also use [[https://github.com/misohena/org-inline-image-fix#automatic-image-update][org-flyimage]] if you want to display images automatically.
The normal file link has the following drawbacks compared to the edraw link format.
- No detailed settings for HTML export.
- SVG data cannot be embedded inside org files.
Data URI links are technically [[https://github.com/misohena/org-inline-image-fix#data-uri-supportorg-datauri-imageel][possible]], but inline editing of Data URI links is not implemented.
On the other hand, regular file links have the advantage that they can be exported in many formats.
* Edit a Single Edraw File - edraw-mode.el
The data that Emacs Easy Draw handles is a small subset of the SVG specification. The recommended file extension is .edraw.svg.
Emacs Easy Draw cannot edit general SVG data, but the data it outputs can be viewed by web browsers and other software that can handle SVG.
** Open .edraw.svg files using edraw-mode
To open a file with the extension .edraw.svg using edraw-mode, add the following setting to init.el.
#+begin_src emacs-lisp
(autoload 'edraw-mode "edraw-mode")
(add-to-list 'auto-mode-alist '("\\.edraw\\.svg$" . edraw-mode))
#+end_src
NOTE: Setup later than other modes for .svg such as image-mode.
If you don't like the long .edraw.svg extension, you can put a comment specifying the mode at the top of the file.
:
: ]*-->[\n\t ]*\\)*:10px, C-u :Numerical input) |
| M-left, M-up, M-right, M-down | Duplicate selected objects and move (M-S-:10px, C-u M-:Numerical input) |
| mouse-3 on shapes, anchor points, background, shape picker, or edraw links | Show context menu |
| C-u mouse-3 | Show context menu (Ignore invisible/unpickable states) |
| (Select Tool) C-down-mouse-1 | Add/Remove clicked shape to selection list |
| (Select Tool) M-drag-mouse-1 | Duplicate dragged shape |
| (Path Tool) C-u down-mouse-1 | Ignore existing points (Avoid connecting or moving existing points) |
| S-drag-mouse-1 | 45 degree unit movement or square specification |
| Middle-drag | Scroll |
| C-wheel-up, C-wheel-down | Zoom |
| (In Property Editor) Middle-click | Close window |
| (In Shape Picker) Middle-click | Close window |
* Emacs Lisp
The following code is an example of inserting an editor into a buffer from Emacs Lisp.
#+begin_src emacs-lisp
(require 'edraw)
(progn
(insert " ")
(let ((editor (edraw-editor
;; Make an overlay that covers " "
;; 'evaporate means automatic deletion
:overlay (let ((overlay (make-overlay (1- (point)) (point))))
(overlay-put overlay 'evaporate t)
overlay)
;; Initial SVG
:svg (edraw-svg-create
400 300
(edraw-svg-group
:id "edraw-body" ;; g#edraw-body is the edit target area
(edraw-svg-rect 100 100 200 100 :fill "blue")))
;; Function called when saving
:document-writer (lambda (svg &rest _)
(pop-to-buffer "*svg output*")
(erase-buffer)
(edraw-svg-print svg nil nil 0))
;; Add one item to the main menu
:menu-filter (lambda (menu-type items &rest _)
(pcase menu-type
('main-menu
(append
items
`(((edraw-msg "Close") (lambda (editor) (edraw-close editor))))))
(_ items)))
;; Add key binding
:keymap (let ((km (make-sparse-keymap)))
(set-keymap-parent km edraw-editor-map)
(define-key km (kbd "C-c C-c") (lambda () (interactive) (edraw-close (edraw-editor-at))))
km)
)))
;; Manipulate the editor object if necessary
;; Set user extra data
(edraw-set-extra-prop editor 'my-extra-data 12345)
editor
nil))
#+end_src
* Color Picker
edraw-color-picker.el provides a color picker library and several commands.
Commands to replace or insert the selected color in the buffer:
- edraw-color-picker-replace-or-insert-color-at
- edraw-color-picker-replace-color-at
- edraw-color-picker-insert-color-at
edraw-color-picker-mode.el defines two minor modes, edraw-color-picker-mode and edraw-color-picker-global-mode, which make it easy to use these commands in any buffer.
edraw-color-picker-mode adds key bindings for these commands in the buffer. You can customize the bindings flexibly with:
M-x customize-variable edraw-color-picker-mode-custom-bindings
You can also bind specific keys for specific major modes. This mode also provides a context menu.
edraw-color-picker-global-mode enables edraw-color-picker-mode in all buffers. If you want to enable it only for specific major modes, you can configure it with:
M-x customize-variable edraw-color-picker-global-modes
To use edraw-color-picker-global-mode, add the following to your init.el:
#+begin_src elisp
(require 'edraw-color-picker-mode)
(edraw-color-picker-global-mode)
#+end_src
You can also manually bind each command without using these minor modes. For example, to open the color picker with mouse-1 and C-c C-o in css-mode and mhtml-mode, configure it as follows.
#+begin_src elisp
(autoload 'edraw-color-picker-replace-color-at "edraw-color-picker" nil t)
(autoload 'edraw-color-picker-replace-or-insert-color-at "edraw-color-picker" nil t)
(defun my-edraw-color-picker-add-keys (map)
;; Replaces the color of the clicked location
(define-key map [mouse-1] #'edraw-color-picker-replace-color-at)
;; C-c C-o replaces the color in place or adds color
(define-key map (kbd "C-c C-o")
#'edraw-color-picker-replace-or-insert-color-at))
(defun my-edraw-color-picker-enable ()
(my-edraw-color-picker-add-keys (current-local-map)))
(add-hook 'css-mode-hook 'my-edraw-color-picker-enable)
(add-hook 'mhtml-mode-hook 'my-edraw-color-picker-enable)
#+end_src
Settings for use with Customize buffer:
#+begin_src elisp
(with-eval-after-load "cus-edit"
;; Add keys to the field key map
(my-edraw-color-picker-add-keys custom-field-keymap))
#+end_src
#+CAPTION: Show color picker inline
[[file:./screenshot/color-picker-inline.png]]
edraw-color-picker.el also provides the following functions for use from Emacs Lisp.
Show color picker in minibuffer:
- (edraw-color-picker-read-color)
#+CAPTION: Show color picker in minibuffer
[[file:./screenshot/color-picker-minibuffer.png]]
A function that opens a color picker near the point:
- edraw-color-picker-open-near-point
A function that displays a color picker using an overlay:
- edraw-color-picker-overlay
The core class of the color picker:
- edraw-color-picker
* License
This software is licensed under GPLv3. You are free to use, modify and distribute this software.
If you wish to register this software in any package archive, please fork this repository, make the necessary modifications to fit the package archive's requirements, and submit the registration on your own. Also continue with the necessary maintenance. You don't need my permission.
I also welcome you to publish your improved version. If that works better than mine, I might start using it too. I may suddenly be unable to develop, and I cannot guarantee any continued development. This software is the result of what I want, so please add what you want yourself.
I am not proficient in English, so please do not expect continuous communication in English. I have spent a long time using translation software to write this text, but I am not confident that the intended meaning is accurately conveyed. I don't think it has ended up with the opposite meaning, but subtle nuances may be missing.