Dottie 0.11.1

Drawings people drill into, on the web

• Export every page as a web page. File ▸ Export Pages as Web Page makes one HTML file holding every page, or
  a folder with index.html for the first page and a file for each other page. A shape that links to a shape on
  another page opens that page when clicked, so an overview can lead into its details.
• Back works. In the single file each page has its own address (site.html#Billing), so the browser's Back
  and Forward go between pages and a link can open any of them. In the folder, links are ordinary pages.
• Drill in. For agents, drill_in makes a shape lead to a page of its own: it adds the page (or uses the one
  named), a title the link lands on, and a "← Overview" shape that leads back.
• simulate follows links to other pages and takes a back step, and a recording follows along, so a drill-in
  path can be checked before exporting. dottie simulate takes --back.
• For agents and scripts: export_animation takes pages: all or split, and dottie render takes
  --all-pages and --split. Neither needs an animation.

dottie.js

• <dottie-player> takes history (each page shown gets its own address) and links (where a page exported on
  its own finds the others), and fires page when the page shown changes.
• dottie-compile --all-pages puts every page in the compiled script.

Dottie 0.11.0

Counters, expressions and logic for interactive pages

• Variables can be numbers. A page can keep a count, a step or a score as well as true-or-false switches.
• Conditions are expressions. Show an element when count >= 3, stage % 2 == 0 or
  min(count * 2, 5) == 5: numbers, arithmetic, comparisons, && and ||, parentheses, and min, max, abs,
  floor, ceil, round and clamp. Existing conditions work as they did.
• Clicks can compute. A click can set count to count + 1 or cycle a stage with (stage + 1) % 3, worked out
  from the state before the click.
• Labels show values. Text like Clicked {count} times fills in as the page plays.
• Click logic. For what expressions can't say, a page can carry JavaScript handlers that its clicks run. Each
  handler gets the variables and the click, and returns new values. It runs only on a click, in a sealed sandbox:
  no access to the page, the network, timers, the clock or randomness, and limits on time and memory, so the same
  click always gives the same result. A web page runs logic only when allowed (<dottie-player allow-logic>, or
  Allow when exporting HTML). Elsewhere, a click does its own Set and Toggle instead.
• For agents: set_variable takes numbers, click_set takes numbers and expressions, set_logic and
  update_element click_run add logic, and simulate runs it. export_animation takes allow_logic. Scripts
  have dottie.logic() and click: {run}.

Compatibility

• A drawing that uses number variables or computed clicks can't be opened by Dottie 0.10.0 or earlier.
• dottie.js: <dottie-player> takes allow-logic and fires logicerror. The engine, dottie-logic.min.js (about
  850 KB), loads from beside the player only when a page with logic is clicked. dottie-compile --allow-logic
  puts it in the compiled script instead.

Dottie 0.10.0

Containers and swimlanes

• Boxes that hold things. Select some shapes and choose Arrange ▸ Put in Container (⌥⌘K) to put a titled box
  round them: a VPC, a subsystem, a team. It fits round what it holds, moving it moves them, and connectors attach
  to it like any shape. Drop a shape in to add it, drag one out to take it out, and resize the box to keep it at
  that size. Containers nest, and the Layers panel shows what each one holds.
• Swimlanes. A container can stack containers inside it as rows or columns, one per lane, each with its title.
• Mermaid subgraphs come in as containers, nested as you wrote them, and go back out as subgraphs when you
  export to Mermaid. draw.io swimlanes and containers, and Excalidraw frames, import as containers too.
• For agents: add_container, parent on add_shape and update_element, and clusters on build_diagram, which
  lays out each cluster as one block. Scripts have dottie.container, and a parent option on shapes, updates and
  dottie.build.

Themes of your own

• Palettes. Every theme now has named colors: accent, muted, danger, warning, success and info, lighter on dark
  pages. Click one of the swatches under Stroke or Fill to use a palette color, and it changes when the theme does.
• Make a theme of the drawing's own on the Page tab, with its own page color, ink and palette colors, and add
  colors of your own. Changing a palette color recolors everything that uses it.
• For agents: set_theme, and every color argument also takes a palette name. Scripts have dottie.theme().

Arrows go round shapes

• New elbow connectors route round the shapes in their way instead of cutting through them, and keep their plain
  Z or L when nothing is in the way. Turn it off for a connector with Go Round Shapes in the inspector. Existing
  drawings don't change.

For agents

• export_png takes max_width for a small preview, include_image: false to save the image without sending it
  back, and elements: "compact" for a short element list.
• simulate has a {"routes": true} step: each flow's destination, the connectors it takes, its share and cost,
  and why a flow reaches nothing, so you can check traffic in each state.
• dottie.connect and add_connector take stroke.
• Script type checks no longer report TypeScript 7's strict-mode noise in plain JavaScript. They group problems by
  kind and show mistakes in dottie calls first.

Fixes

• dottie.js: ***bold italic*** and **bold *italic*** in notes no longer leave stray asterisks.

Dottie 0.9.0

dottie.js: big drawings play without holding up the page

• Long, busy animations no longer freeze the page while they load. Before showing an animation without a
  camera, <dottie-player> works out the view of every frame. For a big one that now happens in a worker, and the
  drawing appears when it's done, looking exactly as it would have. setFile() returns at once and load fires once
  the drawing is showing. Small drawings, stills and camera animations show straight away as before. Where a worker
  can't start, such as under a worker-src policy, the player works it out in place.
• If you host the module player yourself, serve dottie-player.min.js beside dottie-player.js: the worker loads
  it from there. The classic script, compiled drawings and the HTML export need nothing extra.
• Faster everywhere. On a 400-shape drawing with about 1,100 hopping connectors and traffic flows, getting
  ready to play is about nine times faster and each frame about fourteen times faster. Routing traffic, connector
  hops, notes, buttons' over and down looks, and labels with very long unbroken words all got quicker; a
  5,000-character word used to take minutes to wrap. Everything draws exactly as before.

dottie.js fixes

• A compiled drawing whose text contains DOTTIE_OPTIONS or DOTTIE_FONTS no longer comes out broken.
• setFile() while a src is still loading: the file you gave stays, instead of being replaced when the load
  finishes.
• When a drawing fails to load, the one that was showing stops, and its controls go away.
• currentTime on a still (at="5") reports the moment it shows, not 0.

Dottie 0.8.0

What's Changed

• Interactive pages: states, overrides, traffic flows and simulate by @sam-phinizy in #6

Full Changelog: v0.7.0...v0.8.0

Dottie 0.7.0

Diagrams people poke while they keep playing

• Page variables. A page can have named on/off variables. A click can toggle or set them, and any shape,
  connector or packet can be shown only while a condition holds, like down or !down && east. The animation
  never stops: click a region to take it down, and its traffic reroutes while the dots keep flowing. Connectors go
  with a shape that is hidden.
• Looping scenes. A scene can loop: playing doesn't stop when it gets there, and it goes round from its end to
  its start until a click or Next leaves it. Turn it on with Loop This Scene on the scene's menu in the timeline.
• In the app, the Click section has Toggles and Shown when. The editor shows every element so each state
  stays editable; exports and previews show the starting values. The web page export and <dottie-player> change
  them on click.

Layout

• Auto-layout and diagrams built from a list of nodes and edges keep connector labels off the shapes. Long
  edges get a lane of their own, and the gaps between rows grow to fit their labels.

Command line, MCP and dottie.js

• dottie render and dottie inspect read the app's open copy of a drawing, unsaved edits included, and say so
  when it differs from the file. --disk reads the saved file.
• dottie <command> --help prints the usage instead of making a folder called --help.
• MCP: set_variable; when on add_shape, add_connector, update_element and send_packet; click_set and
  click_toggle on update_element; loop on add_scene and update_scene. build_diagram edges take look
  fields (dash, width, arrowheads, …), a stroke color and when. export_animation writes a .png of the poster
  frame. list_elements shows variables and conditions.
• Scripts: dottie.scene() returns the scene's name, which is what click: {scene} takes, and takes {loop}.
  New: dottie.variable, dottie.variables and dottie.loopScene; when on everything; click: {set, toggle}.
  A lookup that found nothing explains that elements a script gets back are snapshots: look them up again after
  an update.
• dottie.js 0.7.0 plays page variables and looping scenes. <dottie-player> has variables and setState(), and
  fires a state event when a click changes them.
• Files that use variables or looping scenes open in earlier versions with every element shown and scenes that stop.

Dottie 0.6.3

Full Changelog: v0.6.2...v0.6.3

Dottie 0.6.2

Handwriting fonts

• Three handwriting fonts. Caveat (a quick pen), Patrick Hand (neat print) and Architects Daughter (draftsman's
  lettering) come with Dottie, free under the SIL Open Font License. Pick one for any shape, connector label, text
  box or note, in the Style tab's new Text section or the bar over the canvas. Caveat has a bold; the other two
  draw bold and italic as regular.
• Text size, in the same places: the bar's menu, or the Style tab's slider for any size.
• Your own fonts. The font menu lists every font on your Mac too. Dottie draws it, and exports name it but don't
  carry it, so someone without it sees Helvetica Neue.
• They travel. SVG and web page exports carry the handwriting fonts a drawing uses, so they look the same
  anywhere. PNG, PDF, GIF, MP4 and Lottie draw them as they look in Dottie.
• Files that set a font open in earlier versions in Helvetica Neue.

Command line, MCP and dottie.js

• MCP: font and font_size on add_shape, add_connector and update_element, and font on build_diagram
  and import_mermaid for a whole diagram. A packet's label takes its connector's font.
• Scripts: font and fontSize with the other look fields, font on dottie.build, and both on the elements calls return.
• dottie.js 0.6.2 lays out and draws the handwriting fonts exactly as Dottie does. <dottie-player> loads the ones a
  drawing uses from fonts/ beside its script (dist/fonts on npm); dottie-compile and dottie render -f js put
  them in the compiled file. A connector label's box is no longer a point short at some text sizes.
• Skills for agents: npx skills add phin-tech/dottie installs dottie (MCP, the command line and scripting) and
  dottie-extension.

Dottie 0.6.1

Full Changelog: v0.6.0...v0.6.1

Dottie 0.6.0

Full Changelog: v0.5.4...v0.6.0