@linemap/core 0.1.0 → 0.2.0

package/README.md

@@ -15,10 +15,11 @@ const svg = render(layout(parseFlow(dotText)), { theme: 'dark' });
 - `parseFlow(text)` reads a linemap DOT file into a model; errors are thrown with one-line messages.
 - `layout(model, { hiddenLines, through, fixed })` places, routes and bundles it. Call it once
   per parsed model.
-- `render(model, { theme, css })` returns the SVG. Themes: `light`, `dark`, `minimal`, `neon`, `neond`.
+- `render(model, { theme, css })` returns the SVG. Themes: `minimal` (default),
+  `light`, `dark`, `neon`, `neond`, each also as `-fancy` (shadows, glows, moving arrows; costlier).
 - `positions(model)` gives the computed positions of unpinned nodes, ready to pin with `pos`.
 
-The command line is [`linemap`](https://www.npmjs.com/package/linemap): `npx linemap flow.dot out.svg`.
+The command line is [`@linemap/cli`](https://www.npmjs.com/package/@linemap/cli): `npx @linemap/cli flow.dot out.svg`.
 The DOT format, themes and the studio are described in the
 [project README](https://github.com/mergezalot/linemap#readme).
 

package/index.mjs

@@ -6,9 +6,9 @@ import { route } from './src/route.mjs';
 import { bundle, markColor } from './src/bundle.mjs';
 import { inside } from './src/inside.mjs';
 import { render } from './src/render.mjs';
-import { THEMES, THEME_NAMES, PALETTE, themeCss, paintLines } from './src/theme.mjs';
+import { THEMES, THEME_NAMES, DEFAULT_THEME, PALETTE, themeCss, paintLines } from './src/theme.mjs';
 
-export { parseFlow, crowding, render, canThrough, STYLE, markColor, THEMES, THEME_NAMES, PALETTE, themeCss, paintLines };
+export { parseFlow, crowding, render, canThrough, STYLE, markColor, THEMES, THEME_NAMES, DEFAULT_THEME, PALETTE, themeCss, paintLines };
 
 // Every stage between parsing and rendering, in order. Mutates and returns the model.
 // Route, bundle and inside do not move items, so `crowding` gives the same answer after this.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linemap/core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "DOT text -> model -> transit-map style SVG. No I/O, runs in node and the browser.",
   "keywords": [
     "flowchart",

package/src/render.mjs

@@ -2,7 +2,7 @@
 import { STYLE, groupRects, textWidth, edgeLabelSize } from './model.mjs';
 import { markColor } from './bundle.mjs';
 import { f } from './geom.mjs';
-import { getTheme, themeCss, accentStyle, shadowFilters, paintLines, tabText } from './theme.mjs';
+import { getTheme, DEFAULT_THEME, themeCss, accentStyle, shadowFilters, paintLines, tabText } from './theme.mjs';
 
 const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 // For attribute values: also keep newlines and tabs, which a parser would turn into spaces.
@@ -165,13 +165,13 @@ function legend(model, box, ctx = FLAT) {
 
 // Options:
 //   legend  false leaves out the legend and the room for it
-//   theme   a theme name (theme.mjs); default: the DOT file's `theme`, else light
+//   theme   a theme name (theme.mjs); default: the DOT file's `theme`, else minimal
 //   css     more CSS, after the theme's: restyle any lm-* class
 // Elements carry data-* attributes (line ids, labels, shapes) for scripts; they change nothing drawn.
 export function render(model, { legend: withLegend = true, theme, css = '' } = {}) {
   // the CSS goes inside <style>, so it must not be able to end that element
   if (/<\/style/i.test(css)) throw new Error('css: must not contain "</style"');
-  const themeName = theme ?? model.theme ?? 'light';
+  const themeName = theme ?? model.theme ?? DEFAULT_THEME;
   const T = getTheme(themeName);
   paintLines(model.lines, T);
   const fx = shadowFilters(T, themeName);

package/src/theme.mjs

@@ -51,7 +51,7 @@ const SOFT = (color, k = 1) => ({
   group: [{ dy: 2, blur: 8, color, opacity: 0.05 * k }],
   small: [{ dy: 1, blur: 2, color, opacity: 0.1 * k }],
 });
-export const THEMES = {
+const FANCY = {
   light: {
     label: 'Light',
     font: SANS,
@@ -161,9 +161,36 @@ export const THEMES = {
     },
   },
 };
+
+// The plain themes leave out what costs the most to draw: the shadows and glows done with SVG blur
+// filters (redrawn on every pan and zoom) and the travelling arrows (redrawn every frame, for as
+// long as the map is on screen). The `-fancy` themes keep them. `edits` replaces parts of the
+// fancy theme, for themes that lean on their shadows to set boxes apart.
+const plain = (t, edits = {}) => {
+  const { shadow, line, ...rest } = t;
+  const { flow, ...still } = line ?? {};
+  return { ...rest, ...(Object.keys(still).length ? { line: still } : {}), ...edits };
+};
+const M = FANCY.minimal;
+export const THEMES = {
+  // the default: minimal without its shadows, so its white cards get a faint outline instead
+  minimal: plain(M, {
+    node: { ...M.node, stroke: '#d5dbe3', width: 1.25 },
+    note: { ...M.note, stroke: '#e1e6ec' },
+    edgeLabel: { ...M.edgeLabel, stroke: '#d5dbe3' },
+    legend: { ...M.legend, stroke: '#d5dbe3' },
+  }),
+  light: plain(FANCY.light),
+  dark: plain(FANCY.dark),
+  neon: plain(FANCY.neon),
+  neond: plain(FANCY.neond),
+  ...Object.fromEntries(['minimal', 'light', 'dark', 'neon', 'neond'].map((n) =>
+    [`${n}-fancy`, { ...FANCY[n], label: `${FANCY[n].label} fancy` }])),
+};
 export const THEME_NAMES = Object.keys(THEMES);
+export const DEFAULT_THEME = 'minimal';
 
-export function getTheme(name = 'light') {
+export function getTheme(name = DEFAULT_THEME) {
   const t = THEMES[name];
   if (!t) throw new Error(`unknown theme "${name}" (known: ${THEME_NAMES.join(', ')})`);
   return t;