asljs-rq-srv 0.1.2 → 0.1.3

package/README.md

@@ -22,7 +22,7 @@ rq-srv
 ```
 
 serves every project of the current folder, each folder with an `rq.json`, in
-one editor with a list box to switch between them, until stopped with Ctrl+C.
+one editor with a selector to switch between them, until stopped with Ctrl+C.
 
 ```bash
 rq-srv --working-dir ~/work --port 8080

package/dist/browser/plugin.d.ts

@@ -2,11 +2,11 @@ import { type EditorPluginFactory } from 'asljs-ui-editor';
 /**
  * The plugin of a project, the browser module of `asljs-ui-editor` the
  * server serves. It loads the graph from `_/data.json` of the project's
- * `base`. The graph is the first document, `rq:graph`, and stays open; a
- * double click on a node opens its document as another tab,
- * `rq:doc:<path>`. The diagram's selection is the editor's: a click on a node
- * selects it, and so does choosing it in the Nodes list, which also moves the
- * view to it. The graph's preview, on its right, views or edits the selected
+ * `base`. The graph is the first document, `rq:graph`; closed, it opens again
+ * from the Graph item at the top of the Nodes list. A double click on a node opens
+ * its document as another tab, `rq:doc:<path>`. The diagram's selection is
+ * the editor's: a click on a node selects it, and so does choosing it in the
+ * Nodes list, which also opens the graph and moves the view to it. The graph's preview, on its right, views or edits the selected
  * node, as the View and Edit tabs of its action bar choose. The diagram is
  * read-only: nodes move, but delete and resize do nothing. The search finds
  * the nodes by their titles, and opens their documents.

package/dist/browser/plugin.js

@@ -1,6 +1,7 @@
-import { createModelFromDocument, createPreviewModel, searchElements } from 'asljs-ui-diagram';
+import { createModelFromDocument, createPreviewModel, diagramSvg, searchElements } from 'asljs-ui-diagram';
 import { element, fetchJson, ICONS as EDITOR_ICONS, note, pathHref, projectPath, searchMatcher, trackActive } from 'asljs-ui-editor';
 import { markdownDocument } from 'asljs-ui-markdown';
+import { pdfOfSvg, showPdf } from 'asljs-ui-pdf';
 import { pathLine, renderText } from './document.js';
 import { ICONS } from './icons.js';
 import { buildOutline } from './outline.js';
@@ -15,11 +16,11 @@ const EDIT_NOTE = 'Implementation, Coverage and Status are kept as they are, aft
 /**
  * The plugin of a project, the browser module of `asljs-ui-editor` the
  * server serves. It loads the graph from `_/data.json` of the project's
- * `base`. The graph is the first document, `rq:graph`, and stays open; a
- * double click on a node opens its document as another tab,
- * `rq:doc:<path>`. The diagram's selection is the editor's: a click on a node
- * selects it, and so does choosing it in the Nodes list, which also moves the
- * view to it. The graph's preview, on its right, views or edits the selected
+ * `base`. The graph is the first document, `rq:graph`; closed, it opens again
+ * from the Graph item at the top of the Nodes list. A double click on a node opens
+ * its document as another tab, `rq:doc:<path>`. The diagram's selection is
+ * the editor's: a click on a node selects it, and so does choosing it in the
+ * Nodes list, which also opens the graph and moves the view to it. The graph's preview, on its right, views or edits the selected
  * node, as the View and Edit tabs of its action bar choose. The diagram is
  * read-only: nodes move, but delete and resize do nothing. The search finds
  * the nodes by their titles, and opens their documents.
@@ -32,7 +33,9 @@ const EDIT_NOTE = 'Implementation, Coverage and Status are kept as they are, aft
  */
 const createPlugin = async ({ id, base, model }) => {
     const { title, problems, diagram: { document: data, hrefs } } = await fetchJson(base, '_/data.json');
-    const graphId = `${id}:graph`;
+    const graphDocument = { id: `${id}:graph`,
+        title };
+    const graphId = graphDocument.id;
     const labels = new Map(data.nodes.map(node => [node.id,
         node.label]));
     // The path of each node's document, relative to the project; none for a
@@ -44,7 +47,8 @@ const createPlugin = async ({ id, base, model }) => {
         .map(([node, file]) => [file,
         labels.get(node) ?? file]));
     const graph = createModelFromDocument(data);
-    graph.deleteElements = () => { };
+    graph.deleteElements =
+        () => { };
     graph.resizeElement = () => false;
     const toDocument = (file) => ({ id: `${id}:doc:${file}`,
         title: titles.get(file)
@@ -60,7 +64,7 @@ const createPlugin = async ({ id, base, model }) => {
             : toDocument(file);
     };
     const selectNode = (node) => {
-        model.activate(graphId);
+        model.open(graphDocument, { preview: false });
         graph.select([node]);
         requestAnimationFrame(() => graph.reveal(node));
     };
@@ -120,6 +124,7 @@ const createPlugin = async ({ id, base, model }) => {
                 : undefined,
             note: EDIT_NOTE,
             editing: options.editing,
+            modes: options.modes,
             openLink: (url) => {
                 const target = projectPath(base, url);
                 if (target === null
@@ -142,6 +147,22 @@ const createPlugin = async ({ id, base, model }) => {
         button.addEventListener('dblclick', () => openNode(node));
         return button;
     };
+    // The Graph item, a list of its own above the nodes, titled as the graph's
+    // tab, whose title is also the first node's label: it opens the graph,
+    // or activates it, as an ordinary document, never the preview, which a node
+    // it opens would replace.
+    const graphItem = () => {
+        const button = element('button', 'asljs-plugin-item', 'Graph');
+        button.type = 'button';
+        button.dataset.document = graphId;
+        button.title = title;
+        button.addEventListener('click', () => model.open(graphDocument, { preview: false }));
+        const entry = element('li');
+        entry.append(button);
+        const list = element('ul', 'asljs-plugin-list');
+        list.append(entry);
+        return list;
+    };
     // The graph's preview: View shows the selected node's document, Edit
     // edits it; its state is kept in this browser.
     let stored = {};
@@ -176,7 +197,8 @@ const createPlugin = async ({ id, base, model }) => {
             title: 'Edit',
             isEnabled: selection => previewed(selection) !== null,
             render: selection => documentView(previewed(selection), { editing: true,
-                save: true }) }];
+                save: true,
+                modes: false }) }];
     const graphView = () => {
         const view = element('div', 'rq-graph');
         const diagram = document.createElement('asljs-diagram');
@@ -203,8 +225,16 @@ const createPlugin = async ({ id, base, model }) => {
         const tabs = document.createElement('asljs-diagram-preview-tabs');
         tabs.modes = previewModes;
         tabs.preview = preview;
+        // Print shows a PDF of the whole graph, as it is drawn, in a dialog.
+        const print = element('button', 'rq-print', 'Print');
+        print.type = 'button';
+        print.title =
+            'Print the graph as a PDF';
+        print.addEventListener('click', () => showPdf(pdfOfSvg(diagramSvg(document, graph.diagram.elements), { title }), { title }));
+        const end = element('div', 'rq-actionbar-end');
+        end.append(print, tabs);
         const bar = element('div', 'rq-actionbar');
-        bar.append(zoom, tabs);
+        bar.append(zoom, end);
         view.append(stage, bar);
         requestAnimationFrame(() => graph.viewport.fit());
         return view;
@@ -237,9 +267,7 @@ const createPlugin = async ({ id, base, model }) => {
     return { id,
         title: 'Requirements',
         icon: ICONS.graph,
-        documents: [{ id: graphId,
-                title,
-                closable: false }],
+        documents: [graphDocument],
         operations: [{ id: 'nodes',
                 title: 'Nodes',
                 icon: EDITOR_ICONS.list,
@@ -247,7 +275,10 @@ const createPlugin = async ({ id, base, model }) => {
                     const list = outline(buildOutline(data.nodes, data.links));
                     trackActive(model, list, { attribute: 'node',
                         current: () => model.selection?.id ?? null });
-                    return list;
+                    const panel = element('div');
+                    panel.append(graphItem(), list);
+                    trackActive(model, panel);
+                    return panel;
                 } },
             ...problems.length === 0
                 ? []
@@ -259,11 +290,16 @@ const createPlugin = async ({ id, base, model }) => {
                             list.append(...problems.map(note));
                             return list;
                         } }]],
-        renderDocument: (opened) => opened.id === graphId
+        renderDocument: opened => opened.id === graphId
             ? graphView()
             : documentView(opened.data.path, { head: true,
                 save: true,
                 keep: opened.id }),
+        documentOf: location => location === 'graph'
+            ? graphDocument
+            : location.startsWith('doc:')
+                ? toDocument(location.slice('doc:'.length))
+                : null,
         search: async (query) => matching(query)
             .filter(node => labels.has(node))
             .flatMap((node) => {
@@ -272,7 +308,6 @@ const createPlugin = async ({ id, base, model }) => {
                 ? []
                 : [{ document: found,
                         title: labels.get(node) }];
-        }),
-        dispose: () => model.select(null) };
+        }) };
 };
 export default createPlugin;

package/dist/view.d.ts

@@ -12,7 +12,7 @@ export interface RqAppOptions {
 }
 /**
  * The `rq` application of `asljs-ui-editor`, an `EditorApp` of
- * `createEditorApp`. Each `rq.json` that `findProjects` finds from the
+ * `createEditorApp`. Each `rq.json` that `findAppProjects` finds from the
  * context's `cwd` is a project, whose folders `resolveFolders` reads from
  * that file only. A project serves its documents folder, or the folder of its
  * graph when none is set, which must contain the graph's folder. It answers

package/dist/view.js

@@ -1,5 +1,5 @@
+import { createEditorApp, createHandler, findAppProjects, findBrowserModules, jsonReply, postProcess, takeWritten, toDisplayPath, versionConflict, writeMarkdown } from 'asljs-appbase';
 import { isInside } from 'asljs-locator';
-import { createEditorApp, createHandler, findBrowserModules, findProjects, jsonReply, postProcess, takeWritten, toDisplayPath, versionConflict, writeMarkdown } from 'asljs-appbase';
 import { CONFIG_FILE, findTarget, getLogger, getNodeKind, getRequirementsDir, getResults, getVersion, isFile, loadGraph, readEditable, readIds, readImplementation, resolveFolders, toGraphDiagram, writeEdited } from 'asljs-rq';
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
@@ -120,6 +120,9 @@ asljs-diagram-preview { width: min(40rem, 45vw); border-left: 1px solid #ddd; ba
 .asljs-diagram-preview-placeholder { margin: 1rem; color: #757575; }
 .rq-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 2px 8px; background: #f3f4f6; border-top: 1px solid #ddd; }
 .rq-actionbar .asljs-diagram-zoom { display: flex; gap: 0.25rem; align-items: center; }
+.rq-actionbar-end { display: flex; align-items: center; gap: 0.5rem; }
+.rq-print { border: 0; border-radius: 4px; background: none; padding: 3px 10px; font: inherit; color: #555; cursor: pointer; }
+.rq-print:hover { background: #e5e7eb; }
 .asljs-diagram-preview-tabs { gap: 2px; }
 .asljs-diagram-preview-tab { border: 0; border-radius: 4px; background: none; padding: 3px 10px; font: inherit; color: #555; cursor: pointer; }
 .asljs-diagram-preview-tab:hover:not(:disabled) { background: #e5e7eb; }
@@ -137,7 +140,7 @@ asljs-diagram-preview { width: min(40rem, 45vw); border-left: 1px solid #ddd; ba
 .rq-not-run { color: #757575; }`;
 /**
  * The `rq` application of `asljs-ui-editor`, an `EditorApp` of
- * `createEditorApp`. Each `rq.json` that `findProjects` finds from the
+ * `createEditorApp`. Each `rq.json` that `findAppProjects` finds from the
  * context's `cwd` is a project, whose folders `resolveFolders` reads from
  * that file only. A project serves its documents folder, or the folder of its
  * graph when none is set, which must contain the graph's folder. It answers
@@ -171,8 +174,9 @@ export async function createApp(context, options = {}) {
             target: found,
             folder };
     };
-    const projects = await findProjects(context.cwd, CONFIG_FILE, context.files);
-    return createEditorApp({ id: 'rq',
+    const projects = await findAppProjects(context, CONFIG_FILE);
+    return createEditorApp({
+        id: 'rq',
         title: 'Requirements',
         icon: ICONS.graph,
         base: context.base,
@@ -196,8 +200,10 @@ export async function createApp(context, options = {}) {
         // the server.
         modules: findBrowserModules(['asljs-ui-diagram',
             'asljs-ui-editor',
-            'asljs-ui-markdown'], path.dirname(fileURLToPath(import.meta.url))),
-        style: APP_STYLE });
+            'asljs-ui-markdown',
+            'asljs-ui-pdf'], path.dirname(fileURLToPath(import.meta.url))),
+        style: APP_STYLE
+    });
 }
 /**
  * What `_/data.json` of a project answers: the title of the graph, the root's

package/docs/rq-srv.md

@@ -51,20 +51,22 @@ documents.
   shows the panel, giving the documents the room. Dragging the panel's inner
   edge resizes it, and a double click on the edge resets it; the browser
   remembers the width for the next visit.
-  - Projects: with more than one, a list box heads the panels and switches the
-    project, closing the documents of the one before; the browser remembers the
-    choice.
-  - Documents: the first tab is the graph, which stays open. Double-clicking a
-    node, in the graph or in a list, opens its document as another tab, which
-    closes with its ×, a middle click, or Delete on the tab; the arrow keys,
-    Home and End move between tabs.
+  - Projects: with more than one, a selector heads the panels and switches the
+    project, its filter box finding a project by its title; the documents of the
+    project before stay open, each tab's tooltip naming its project, and the
+    browser remembers the choice.
+  - Documents: the first tab is the graph, which closes like any other; the
+    Graph item at the top of the Nodes list opens it again, and so does choosing
+    a node. Double-clicking a node, in the graph or in a list, opens its
+    document as another tab, which closes with its ×, a middle click, or Delete
+    on the tab; the arrow keys, Home and End move between tabs.
   - Operations: **Nodes**, every requirement and test as an outline, each under
     the requirement that reaches it first; when the graph has structure errors,
     **Problems**, listing them; and the editor's **Search**, the nodes whose
     title contains what is typed, or matches it as a regular expression, which
     open their documents. Choosing a node in the Nodes list selects it, shows
-    the graph and moves its view to the node; the selected node is marked in the
-    list.
+    the graph, opening it when it is closed, and moves its view to the node; the
+    selected node is marked in the list.
 - `/_/app.json` - the application: its id, title, icon, the URL of its plugin
   and its projects, each with the path it is served at.
 - `/_/plugin/plugin.js` - the plugin, a module of the browser, and the modules
@@ -122,10 +124,14 @@ state, from its `## Status` section:
 
 Clicking a node selects it. The mouse wheel zooms, dragging empty space pans,
 and the zoom controls in its action bar, along its bottom, zoom and fit it; it
-is fitted when the page opens. Nodes can be dragged aside, but nothing on the
-page changes the graph's files: Delete and resizing do nothing, and a reload
-lays the graph out again. All roots are in the one diagram; the graph's tab is
-titled with the root's heading when there is one root, `Requirements` otherwise.
+is fitted when the page opens. Print, at the right of the action bar, opens a
+dialog with a PDF of the whole graph, made in the browser, on one A4 page under
+the graph's title, to print or download: `diagramSvg` of `asljs-ui-diagram` and
+`pdfOfSvg` of `asljs-ui-pdf`. Its text is Latin-1 only. Nodes can be dragged
+aside, but nothing on the page changes the graph's files: Delete and resizing do
+nothing, and a reload lays the graph out again. All roots are in the one
+diagram; the graph's tab is titled with the root's heading when there is one
+root, `Requirements` otherwise.
 
 The server is for local use: it serves every file inside the served folder,
 including hidden ones, and the editor renders the documents' HTML as it is. It
@@ -136,36 +142,38 @@ Nodes outside the served folder are drawn but do not open.
 
 ## Editing
 
-A requirement or test has an Edit button, in a tab next to its path. It opens:
+A requirement or test opened as a tab has a bar docked at its bottom: View and
+Edit, then a toolbar. Edit shows, in a panel docked at the top:
 
 - the title, in a field after the id, which stays as it is; the file keeps its
   name, which [`rq move`][MV] changes;
-- the rest of the text in a [Milkdown][MK] editor, without `## Implementation`,
-  `## Coverage` and `## Status`, which the commands own. A link to a requirement
-  or test by its id shows as the id alone, e.g. `R2`, and any other reference
-  link as an inline link.
-
-Save, or Ctrl+S, writes the heading, the id and the title, then the text, then
-the definitions the owned sections use and the owned sections as they were. Each
-id of a requirement or test of the requirements folder in the text, outside
-code, becomes a reference link to it again, e.g. `[R2][]`, with its definition
-after the text. The document is then post-processed with
-`markdownPostProcessing` of `rq.json`, as after a command. A save is refused
-when the file changed since the editor opened it: reload the page and edit
-again. The save is a POST to `_/document.json`; Save and Cancel then show the
-document again. Milkdown, bundled with `asljs-ui-markdown`, is loaded from the
-server when Edit is pressed.
+- under it, filling the tab, the rest of the text in a [Milkdown][MK] editor,
+  without `## Implementation`, `## Coverage` and `## Status`, which the commands
+  own. A link to a requirement or test by its id shows as the id alone, e.g.
+  `R2`, and any other reference link as an inline link.
+
+Save, in the toolbar while editing, or Ctrl+S, writes the heading, the id and
+the title, then the text, then the definitions the owned sections use and the
+owned sections as they were. Each id of a requirement or test of the
+requirements folder in the text, outside code, becomes a reference link to it
+again, e.g. `[R2][]`, with its definition after the text. The document is then
+post-processed with `markdownPostProcessing` of `rq.json`, as after a command. A
+save is refused when the file changed since the editor opened it: reload the
+page and edit again. The save is a POST to `_/document.json`; the editing then
+goes on with the text as saved, and View shows it. Milkdown, bundled with
+`asljs-ui-markdown`, is loaded from the server when Edit is first chosen.
 
 The graph has a preview of the selected node on its right, an
 `asljs-diagram-preview` of `asljs-ui-diagram`. The View and Edit tabs at the
 right of its action bar choose what it shows, and the button after them shows
 and hides it; dragging its left edge resizes it, and the browser remembers its
 width, whether it is shown and its tab. View shows the document without its path
-and without its Edit button; a link in it opens its document as a tab. Edit
-shows it editing at once. A document opened as a tab, with a double click, has
-its Edit button; the tab is a preview, with its title in italics, which the next
-document opened replaces, until it is double clicked or the document is edited.
-A title changed while editing shows in the graph after a reload.
+and without a bar; a link in it opens its document as a tab. Edit shows it
+editing at once, its bar with Save only, as the preview's own tabs are its
+modes. A document opened as a tab, with a double click, has its bar; the tab is
+a preview, with its title in italics, which the next document opened replaces,
+until it is double clicked or the document is edited. A title changed while
+editing shows in the graph after a reload.
 
 ## Options
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asljs-rq-srv",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "The rq-srv web server: the requirements graph in an editor, and the documents rendered and edited in the browser.",
   "type": "module",
   "asljs": {
@@ -22,22 +22,37 @@
     "dist/**",
     "docs/**",
     "README.md",
-    "LICENSE.md"
+    "LICENSE.md",
+    "!dist/*.tsbuildinfo"
   ],
   "scripts": {
     "flint": "toolkit flint",
-    "clean": "toolkit clean",
-    "build": "npm run codegen --if-present && tsc -p tsconfig.build.json",
-    "build:dist": "npm run codegen --if-present && tsc -p tsconfig.dist.json",
+    "clean:build": "node ../../../scripts/cleanBuildOutDir.js",
+    "clean:dist": "node ../../../scripts/cleanDistOutDir.js",
+    "compile:build": "npm run codegen --if-present && tsc -p tsconfig.build.json",
+    "compile:dist": "npm run codegen --if-present && tsc -p tsconfig.dist.json",
+    "build:dist": "node ../../../scripts/buildDistDeps.js && npm run compile:dist",
     "typecheck": "npm run codegen --if-present && tsc -p tsconfig.build.json --noEmit",
     "guard:clean-git": "toolkit ensure-clean-working-directory",
-    "prepack": "npm run clean && npm run build:dist && npm run build && npm run test && npm run guard:clean-git",
+    "prepack": "npm run clean:build && npm run clean:dist && npm run build:dist && npm run compile:build && npm run test && npm run guard:clean-git",
     "postpublish": "toolkit tag-release-revision",
     "test": "node --test --enable-source-maps \"build/**/*.test.js\"",
     "test:watch": "node --watch --test \"build/**/*.test.js\"",
     "release:patch": "toolkit release-patch",
-    "all": "npm run clean && npm run build:dist && npm run flint && npm run typecheck && npm run build && npm run test"
+    "build": "npm run clean:build && npm run flint && npm run typecheck && npm run compile:build && npm run test"
   },
+  "distDependencies": [
+    "asljs-appbase",
+    "asljs-locator",
+    "asljs-logging",
+    "asljs-rq",
+    "asljs-testing",
+    "asljs-tmpdir",
+    "asljs-ui-diagram",
+    "asljs-ui-editor",
+    "asljs-ui-markdown",
+    "asljs-ui-pdf"
+  ],
   "keywords": [
     "requirements",
     "markdown",
@@ -60,7 +75,8 @@
     "asljs-rq": "^0.1.6",
     "asljs-ui-diagram": "^0.1.1",
     "asljs-ui-editor": "^0.1.1",
-    "asljs-ui-markdown": "^0.1.0",
+    "asljs-ui-markdown": "^0.1.1",
+    "asljs-ui-pdf": "^0.1.0",
     "commander": "^15.0.0"
   },
   "devDependencies": {