====== What is new — a walk-through ======

This page only covers what changed in this round. The full regression protocol
is on [[drawio|the drawio page]].

Log in as **admin / admin**.

===== 1. A diagram now keeps its source =====

Until now a diagram's draw.io XML lived **inside** the image. Any tool that
rewrote that image destroyed it and the diagram became a flat picture nobody
could edit again.

  - Click the placeholder below, draw a box or two, **Save**, close the editor.
  - Open the [[?do=media&ns=new|media manager]] and look in the ''new'' namespace.
    You should see **two** files: ''plan.png'' and ''plan.drawio''.
  - Click the diagram again: it opens **from the source**, not from the image.

{{drawio>new:plan}}

===== 2. An old diagram gains a source when you save it =====

''wiki:sample.png'' was planted here the old way: XML embedded in the image,
no source file. This is what every diagram on a real wiki looks like today.

  - Click it, change something, save.
  - In the media manager, ''wiki:sample.drawio'' has appeared next to it.

{{drawio>wiki:sample.png}}

===== 3. Or convert everything at once =====

  - **Admin → Draw.io: convert old diagrams**.
  - It scans first and shows you what it found. Nothing is written yet.
  - Press convert. It never overwrites a source that already exists, and it
    never touches your images.

===== 4. Diagram text is searchable =====

The text inside a diagram used to be invisible to search.

The word to try is **''Repesentation''** (misspelled on purpose by whoever drew
''wiki:sample.png''; it appears nowhere else on this wiki).

  - Search for it **before** you have saved or converted ''wiki:sample.png''
    (sections 2 and 3). Nothing is found — an old diagram's text only becomes
    searchable once it has a source.
  - Now do section 2 or 3, then search again. This page comes up. No manual
    reindex, no waiting.
  - The very same diagram also sits in ''secret:hidden.png'', a namespace only
    admin may read, and it is embedded at the bottom of section 10. Log out and
    search again: still only this page, found through the public copy — the
    protected one is never indexed, so its text cannot leak through search.

===== 5. Two people editing one diagram =====

  - Open ''new:plan'' above and leave the editor open.
  - In a private/incognito window, open this page and click the same diagram.
  - You are told who has it open and how long ago — and you can continue anyway.
    The warning informs, it never blocks.

===== 6. The source follows its image =====

  - **Delete** a diagram in the media manager. Its source goes too — no
    orphans left behind. What lands in the attic is the image with the diagram
    embedded in it, so a restore brings back an editable diagram.
    (This dev wiki has ''refcheck'' off so you may delete a diagram this page
    still embeds; a production wiki would refuse with "still in use".)
  - Renaming is not part of this walkthrough: DokuWiki itself cannot rename
    media, that needs the third-party move plugin, which the dev image does not
    carry. The plugin's move handling is covered by the test suite instead.

===== 7. Sized diagrams download a smaller image =====

The one below is served resized by the server, not shrunk with CSS in your
browser. Open it in a new tab and compare its size with the full one in
section 1.

{{drawio>new:plan?200}}

===== 8. The editor's interface is configurable =====

  - **Admin → Configuration Settings → drawio**.
  - ''ui'' — pick ''sketch'' or ''min'' and reopen a diagram. The editor looks
    different.
  - ''toolbar_possible_extension'' is now a pair of checkboxes rather than a
    free-text list.

===== 9. Edit from the media manager =====

A diagram no page references used to be uneditable — nothing could open it.
The button now works on **either half of the pair**, not just the rendering.

  - Media manager → pick ''new:plan.png'' → **Edit with draw.io** in the file
    details, next to Delete and Upload new version.
  - Now pick ''new:plan.drawio'' instead — the same button is there too, and
    opens the very same diagram, not a blank one.
  - Give the diagram a second rendering: open {{drawio>new:plan.svg}} below,
    save without changing anything, close the editor. The media manager now
    shows ''plan.png'', ''plan.svg'' and ''plan.drawio'' — the png and svg
    are two renderings of the same diagram and share that one source.
  - Delete ''new:plan.svg''. ''new:plan.drawio'' and ''new:plan.png'' both
    survive: the png is still a rendering that needs the source, so the
    "delete means delete" cascade from section 6 does not reach it. Select
    ''new:plan.drawio'' and click **Edit with draw.io** — it opens the same
    diagram, loaded from the source.
  - There is no way to reach "only the source is left, no rendering at all"
    through the UI: deleting the *last* rendering always takes the source
    with it (section 6) — that state cannot exist, so there is nothing to
    click through here for it.

{{drawio>new:plan.svg}}

===== 10. ODT export =====

  - [[?do=export_odt&id=whatsnew|Export this page to ODT]] and open it.
    The diagrams are in the document.
  - Below is ''secret:hidden.png'', which only admin may read. Logged in as
    admin you see it here and in the export. **Log out**, reload, and export
    again: the placeholder shows, and the exported document does **not**
    contain that diagram. That was a real hole, found and closed in the audit.

{{drawio>secret:hidden.png}}

===== 11. An empty diagram stays reachable (issue #62) =====

draw.io itself, not this plugin, is what causes this one: saving a diagram
with nothing drawn on it produces a valid PNG that is exactly 1 pixel by 1
pixel. A browser loads that image fine - there is no error, so the old
"onerror falls back to the placeholder" trick never fires - it is just
completely invisible, and before this fix that meant nothing to click and no
way back into the diagram, ever.

  - Click the placeholder below to create a brand new diagram.
  - In the draw.io editor, **without drawing anything**, save (the disk icon,
    or Ctrl+S) and close the editor straight away.
  - The diagram is now invisible. Every diagram image has a minimum
    clickable size now, though - move your mouse around roughly where the
    (invisible) picture should be; a small area right there is still
    clickable and reopens the editor.
  - For a fix you don't have to hunt for: **Admin → Configuration Settings →
    drawio**, tick **edit_button**, save, then reload this page. An
    "Edit with draw.io" button now appears under every diagram on the page,
    this empty one included - click it to reopen the same diagram.

{{drawio>new:empty_diagram}}

===== 12. Interactive viewer (issue #30) =====

A diagram can render with draw.io's own **interactive viewer** instead of a
static picture: links inside it are clickable, and it comes with its own
zoom/pan/layers/lightbox toolbar - no click needed to open the editor just to
follow a link.

  - Click the placeholder below to create a brand new diagram with the
    editor.
  - Draw a shape, select it, then add a link to it (the link icon in the
    format panel on the right, or right-click → **Edit Link**) - e.g.
    ''https://dokuwiki.org''. Save and close the editor.
  - No reload needed: the diagram below re-renders with draw.io's viewer
    script as soon as the save completes. Click the shape's link: it opens
    directly, without opening the editor first.
  - The **Edit with draw.io** button underneath still opens the same editor
    as before - an interactive diagram has no image to click on, so that
    button is always there for one, regardless of the site-wide
    ''edit_button'' setting.
  - **Admin → Configuration Settings → drawio** has two new settings:
    ''interactive'' (make every diagram interactive by default; a single
    diagram can still opt out with ''{{drawio>...?static}}'') and
    ''viewer_url'' (which draw.io viewer script to load - defaults to
    diagrams.net's own hosted one; a self-hosted draw.io serves the same
    file at ''<host>/js/viewer-static.min.js'').

{{drawio>new:interactive?interactive}}
