Giter Site home page Giter Site logo

Converting edraw to svg about el-easydraw HOT 3 CLOSED

misohena avatar misohena commented on May 30, 2024
Converting edraw to svg

from el-easydraw.

Comments (3)

wn avatar wn commented on May 30, 2024 1

Oh [[edraw:file=natsoehunsthaoe.edraw.svg]] is beautiful. I can now do the following:

(defun org-mode-open-edraw(&optional filename)
    (interactive)
    (unless filename
      (setq filename (concat "./" (file-relative-name (read-file-name (edraw-msg "Write svg file: ") default-directory) default-directory))))
    (insert (concat "[[edraw:file=" filename "]]"))
    (backward-char)
    (org-return))

from el-easydraw.

wn avatar wn commented on May 30, 2024

I'll need 2 help.

  1. edraw-export-to-file filename don't work for me currently.
  2. I would like to add C-c C-s to call save-edraw-as-svg (most likely here: https://github.com/misohena/el-easydraw/blob/master/edraw.el#L5056)
;; helper function to open an edraw 
(defun open-edraw()
  (interactive)
  (insert "[[edraw:]]")
  (backward-char)
  (org-return))

(defun org-remove-link ()
  "Remove `org-mode' link at point and trash linked file."
  (interactive)
  (let* ((link (org-element-context))
         (path (org-element-property :path link)))
    (delete-region (org-element-property :begin link)
                   (org-element-property :end link))))

(defun save-edraw-as-svg()
  (interactive)
  (let (filename (read-file-name (edraw-msg "Write edraw file: ")))
    ;;(edraw-export-to-file filename) // THIS DONT WORK CURRENTLY
    (edraw-org-link-cancel-edit)
    (org-remove-link)
    (insert (concat "[[file:" filename "]]"))))

from el-easydraw.

misohena avatar misohena commented on May 30, 2024

As you may already know, there is also an edraw link format that outputs to a file. For example, type the following and C-c C-o will open the editor, edit it and C-c C-c will save it to a file.

[[edraw:file=natsoehunsthaoe.edraw.svg]]

Should you use the file link type?

The ability to edit regular file link types (such as those with the extension .edraw.svg) is planned but not yet implemented.

edraw-mode allows you to edit edraw-created SVG files in a single buffer (but not embedded).

(let ((auto-mode-alist (cons '("." . edraw-mode) auto-mode-alist))) ;;Temporarily ensure that all files are opened in edraw-mode
  (find-file "natsoehunsthaoe.edraw.svg")
  ;; Editor not visible when buffer is empty? Bug?
  (when (= (buffer-size) 0)
    (with-silent-modifications
      (insert " "))))

You can save it with C-x C-s (not C-c C-c).

If you want to edit the file link inline, there is also the following method.

(defun open-file-link-by-edraw ()
  (interactive)
  (let* ((link (org-element-context))
         (path (org-element-property :path link))
         (beg (org-element-property :begin link))
         (end (org-element-property :end link))
         (inline-image-p  (org--inline-image-overlays beg end)))
    ;;TODO: Check link type
    ;;TODO: Check file extension
    ;;TODO: Prevent double editing

    ;;Remove org-mode inline image
    (when inline-image-p
      (org-toggle-inline-images nil beg end))

    ;;(edraw-edit-svg is a function added a few days ago and the specifications may change)
    (edraw-edit-svg (when (file-exists-p path)
                      (edraw-svg-read-from-file path))
                    'edraw-svg
                    beg end
                    (lambda (_ok _svg)
                      ;; Restore org-mode inline image
                      (when inline-image-p
                        (org-display-inline-images nil t beg end)))
                    (lambda (svg)
                      (edraw-svg-write-to-file svg path nil)
                      t))))

If you just want to write the contents of the edraw link to a file, you can do it like this:

(when-let ((link (edraw-org-link-at-point))
           (props (car (edraw-org-link-element-link-properties link nil)))
           (data (edraw-org-link-prop-data props)))
  ;;(edraw-svg-write-to-file (edraw-svg-decode data t) (read-file-name "Write edraw file: ") nil)
  ;; Or simply decode base64 and gzip and write to file:
  (with-temp-file (read-file-name "Write edraw file: ")
    (set-buffer-file-coding-system 'utf-8)
    (insert data)
    (edraw-decode-buffer t)))

If you always use the file link type, the above should help, but perhaps you want to C-c C-s to toggle between the edraw and file link types?

(This comment is translated using Google Translate. I'm sorry if you don't understand the meaning)

(Original Message)
既に知っているかもしれませんがファイルへ出力されるedrawリンク形式もあります。例えば次のように入力してC-c C-oすれば、エディタが開き、編集してC-c C-cすればファイルへ保存されます。

[[edraw:file=natsoehunsthaoe.edraw.svg]]

あなたはfileリンクタイプを使わなければならないのでしょうか?

通常のfileリンクタイプ(拡張子が.edraw.svgであるような)を編集する機能は計画されていますがまだ実装していません。

edraw-modeを使用すればedrawが作成したSVGファイルを単独のバッファで編集できます(埋め込みではありませんが)。

#+begin_src elisp
(let ((auto-mode-alist (cons '("." . edraw-mode) auto-mode-alist))) ;;Temporarily ensure that all files are opened in edraw-mode
(find-file "natsoehunsthaoe.edraw.svg")
;; Editor not visible when buffer is empty? Bug?
(when (= (buffer-size) 0)
(with-silent-modifications
(insert " "))))
#+end_src

C-x C-s (not C-c C-c) で保存できます。

fileリンクをインラインで編集したいなら次のような方法もあります。

#+begin_src elisp
(defun open-file-link-by-edraw ()
(interactive)
(let* ((link (org-element-context))
(path (org-element-property :path link))
(beg (org-element-property :begin link))
(end (org-element-property :end link))
(inline-image-p (org--inline-image-overlays beg end)))
;;TODO: Check link type
;;TODO: Check file extension
;;TODO: Prevent double editing

;;Remove org-mode inline image
(when inline-image-p
  (org-toggle-inline-images nil beg end))

;;(edraw-edit-svg is a function added a few days ago and the specifications may change)
(edraw-edit-svg (when (file-exists-p path)
                  (edraw-svg-read-from-file path))
                'edraw-svg
                beg end
                (lambda (_ok _svg)
                  ;; Restore org-mode inline image
                  (when inline-image-p
                    (org-display-inline-images nil t beg end)))
                (lambda (svg)
                  (edraw-svg-write-to-file svg path nil)
                  t))))

#+end_src

単にedrawリンクの中身をファイルへ書き出したいのであれば次のように出来ます。

#+begin_src elisp
(when-let ((link (edraw-org-link-at-point))
(props (car (edraw-org-link-element-link-properties link nil)))
(data (edraw-org-link-prop-data props)))
;;(edraw-svg-write-to-file (edraw-svg-decode data t) (read-file-name "Write edraw file: ") nil)
;; Or simply decode base64 and gzip and write to file:
(with-temp-file (read-file-name "Write edraw file: ")
(set-buffer-file-coding-system 'utf-8)
(insert data)
(edraw-decode-buffer t)))
#+end_src

常にfileリンクタイプを使うのであれば上のことが助けになると思いますが、ひょっとしてedrawリンクタイプとfileリンクタイプをC-c C-sで切り替えたいという話ですか?

(このコメントはGoogle翻訳を使って翻訳しています。意味が分からなかったら申し訳ありません)

from el-easydraw.

Related Issues (19)

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.