yaroslav
/
SequenceDiagram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use consistent monospace font, re-order SVG layers to work around PhantomJS rendering glitch, replace screenshots with commandline-generated versions [#52]

This commit is contained in:
David Evans 2018-04-22 22:44:26 +01:00
parent dbb6b70676
commit 5e47790efd
42 changed files with 104 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/sequence-diagram-web.js
View File

@ -352,7 +352,7 @@
/* eslint-disable sort-keys */ // Maybe later
const FONT = 'Helvetica,Arial,sans-serif';
const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
const LINE_HEIGHT = 1.3;
const WAVE = new WavePattern(6, 0.5);
@ -753,7 +753,7 @@
/* eslint-disable sort-keys */ // Maybe later
const FONT$1 = 'Helvetica,Arial,sans-serif';
const FONT$1 = 'Helvetica,Arial,Liberation Sans,sans-serif';
const LINE_HEIGHT$1 = 1.3;
const WAVE$1 = new WavePattern(10, 1);
@ -2593,7 +2593,7 @@
/* eslint-disable sort-keys */ // Maybe later
const FONT$2 = 'monospace';
const FONT$2 = 'Courier New,Liberation Mono,monospace';
const LINE_HEIGHT$2 = 1.3;
const WAVE$2 = new WavePattern(6, [
@ -3980,7 +3980,7 @@
begin: /[\s_*`]~(?=\S)/g,
end: /\S~(?=[\s_*`])/g,
}, {
attrs: {'font-family': 'monospace'},
attrs: {'font-family': 'Courier New,Liberation Mono,monospace'},
begin: /[\s_*~.]`(?=\S)/g,
end: /\S`(?=[\s_*~.])/g,
},
@ -7410,15 +7410,15 @@
this.themeDefs,
this.defs,
this.backgroundFills,
this.title,
this.unmaskedShapes,
el('g')
.attr('mask', 'url(#' + this.namespace + 'FullMask)')
.add(
this.agentLines,
this.blocks,
this.shapes
),
this.unmaskedShapes,
this.title
)
);
}

2
lib/sequence-diagram-web.min.js vendored
View File

File diff suppressed because one or more lines are too long

14
lib/sequence-diagram.js
View File

@ -352,7 +352,7 @@
/* eslint-disable sort-keys */ // Maybe later
const FONT = 'Helvetica,Arial,sans-serif';
const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
const LINE_HEIGHT = 1.3;
const WAVE = new WavePattern(6, 0.5);
@ -753,7 +753,7 @@
/* eslint-disable sort-keys */ // Maybe later
const FONT$1 = 'Helvetica,Arial,sans-serif';
const FONT$1 = 'Helvetica,Arial,Liberation Sans,sans-serif';
const LINE_HEIGHT$1 = 1.3;
const WAVE$1 = new WavePattern(10, 1);
@ -2593,7 +2593,7 @@
/* eslint-disable sort-keys */ // Maybe later
const FONT$2 = 'monospace';
const FONT$2 = 'Courier New,Liberation Mono,monospace';
const LINE_HEIGHT$2 = 1.3;
const WAVE$2 = new WavePattern(6, [
@ -3980,7 +3980,7 @@
begin: /[\s_*`]~(?=\S)/g,
end: /\S~(?=[\s_*`])/g,
}, {
attrs: {'font-family': 'monospace'},
attrs: {'font-family': 'Courier New,Liberation Mono,monospace'},
begin: /[\s_*~.]`(?=\S)/g,
end: /\S`(?=[\s_*~.])/g,
},
@ -7410,15 +7410,15 @@
this.themeDefs,
this.defs,
this.backgroundFills,
this.title,
this.unmaskedShapes,
el('g')
.attr('mask', 'url(#' + this.namespace + 'FullMask)')
.add(
this.agentLines,
this.blocks,
this.shapes
),
this.unmaskedShapes,
this.title
)
);
}

3
package.json
View File

@ -33,7 +33,8 @@
"start": "http-server",
"test": "npm run unit-test && npm run web-test && npm run lint && echo 'PASSED :)'",
"unit-test": "rollup --config spec/support/rollup.config.js && node -r source-map-support/register node_modules/.bin/jasmine --config=spec/support/jasmine.json",
"web-test": "karma start spec/support/karma.conf.js --single-run"
"web-test": "karma start spec/support/karma.conf.js --single-run",
"web-test:manual": "MANUAL=1 karma start spec/support/karma.conf.js"
},
"devDependencies": {
"buffer-to-stream": "^1.0.0",

BIN
screenshots/AgentAliases.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
screenshots/AlternativeAgentOrdering.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
screenshots/AsynchronousCommunication.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
screenshots/ConnectionTypes.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 84 KiB

BIN
screenshots/Dividers.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
screenshots/LabelTemplates.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
screenshots/Logic.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 73 KiB

BIN
screenshots/Markdown.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
screenshots/MultilineText.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
screenshots/NotesAndState.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
screenshots/ShortLivedAgents.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
screenshots/SimpleUsage.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 68 KiB

BIN
screenshots/SimultaneousActions.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.6 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
screenshots/Themes.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 49 KiB

8
scripts/sequence/SequenceDiagram_spec.mjs
View File

@ -72,19 +72,19 @@ describe('SequenceDiagram', () => {
'</rect>' +
'</mask>' +
'</defs>' +
'<g mask="url(#FullMask)">' +
'<g mask="url(#LineMask)"></g>' +
'</g>' +
'<g>' +
'<text' +
' x="0"' +
' font-family="Helvetica,Arial,sans-serif"' +
' font-family="Helvetica,Arial,Liberation Sans,sans-serif"' +
' font-size="20"' +
' line-height="1.3"' +
' text-anchor="middle"' +
' class="title"' +
' y="-10">My title here</text>' +
'</g>' +
'<g mask="url(#FullMask)">' +
'<g mask="url(#LineMask)"></g>' +
'</g>' +
'</svg>'
);
});

2
scripts/sequence/parser/MarkdownParser.mjs
View File

@ -20,7 +20,7 @@ const STYLES = [
begin: /[\s_*`]~(?=\S)/g,
end: /\S~(?=[\s_*`])/g,
}, {
attrs: {'font-family': 'monospace'},
attrs: {'font-family': 'Courier New,Liberation Mono,monospace'},
begin: /[\s_*~.]`(?=\S)/g,
end: /\S`(?=[\s_*~.])/g,
},

6
scripts/sequence/parser/MarkdownParser_spec.mjs
View File

@ -2,6 +2,8 @@ import {dom, textSizerFactory} from '../../../spec/stubs/TestDOM.mjs';
import SVG from '../../svg/SVG.mjs';
import parser from './MarkdownParser.mjs';
const MONO_FONT = 'Courier New,Liberation Mono,monospace';
describe('Markdown Parser', () => {
it('converts simple text', () => {
const formatted = parser('hello everybody');
@ -110,7 +112,7 @@ describe('Markdown Parser', () => {
expect(formatted).toEqual([[
{attrs: null, text: 'a '},
{attrs: {'font-family': 'monospace'}, text: 'b'},
{attrs: {'font-family': MONO_FONT}, text: 'b'},
{attrs: null, text: ' c'},
]]);
});
@ -120,7 +122,7 @@ describe('Markdown Parser', () => {
expect(formatted).toEqual([[
{attrs: null, text: 'a.'},
{attrs: {'font-family': 'monospace'}, text: 'b'},
{attrs: {'font-family': MONO_FONT}, text: 'b'},
{attrs: null, text: '.c'},
]]);
});

6
scripts/sequence/renderer/Renderer.mjs
View File

@ -129,15 +129,15 @@ export default class Renderer extends EventObject {
this.themeDefs,
this.defs,
this.backgroundFills,
this.title,
this.unmaskedShapes,
el('g')
.attr('mask', 'url(#' + this.namespace + 'FullMask)')
.add(
this.agentLines,
this.blocks,
this.shapes
),
this.unmaskedShapes,
this.title
)
);
}

2
scripts/sequence/themes/Basic.mjs
View File

@ -2,7 +2,7 @@
import BaseTheme, {WavePattern} from './BaseTheme.mjs';
const FONT = 'Helvetica,Arial,sans-serif';
const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
const LINE_HEIGHT = 1.3;
const WAVE = new WavePattern(6, 0.5);

2
scripts/sequence/themes/Chunky.mjs
View File

@ -2,7 +2,7 @@
import BaseTheme, {WavePattern} from './BaseTheme.mjs';
const FONT = 'Helvetica,Arial,sans-serif';
const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
const LINE_HEIGHT = 1.3;
const WAVE = new WavePattern(10, 1);

2
scripts/sequence/themes/Monospace.mjs
View File

@ -2,7 +2,7 @@
import BaseTheme, {WavePattern} from './BaseTheme.mjs';
const FONT = 'monospace';
const FONT = 'Courier New,Liberation Mono,monospace';
const LINE_HEIGHT = 1.3;
const WAVE = new WavePattern(6, [

6
scripts/svg/TextSizer_webspec.mjs
View File

@ -2,6 +2,8 @@ import {SVGTextBlock, TextSizer} from './SVGTextBlock.mjs';
import {DOMWrapper} from '../../spec/stubs/TestDOM.mjs';
import SVG from './SVG.mjs';
const MONO_FONT = 'Courier New,Liberation Mono,monospace';
describe('TextSizer', () => {
const attrs = {'font-size': 10, 'line-height': 1.5};
let svg = null;
@ -64,13 +66,13 @@ describe('TextSizer', () => {
const sizeMono = safeMeasure(attrs, [[
{text: 'foo'},
{attrs: {'font-family': 'monospace'}, text: 'bar'},
{attrs: {'font-family': MONO_FONT}, text: 'bar'},
]]);
const sizeMonoBold = safeMeasure(attrs, [[
{text: 'foo'},
{attrs: {
'font-family': 'monospace',
'font-family': MONO_FONT,
'font-weight': 'bolder',
}, text: 'bar'},
]]);

6
scripts/svg/VirtualTextSizer_nodespec.mjs
View File

@ -3,6 +3,8 @@ import {SVGTextBlock} from './SVGTextBlock.mjs';
import VirtualTextSizer from './VirtualTextSizer.mjs';
import {dom} from '../../spec/stubs/TestDOM.mjs';
const MONO_FONT = 'Courier New,Liberation Mono,monospace';
describe('VirtualTextSizer', () => {
const attrs = {'font-size': 10, 'line-height': 1.5};
let svg = null;
@ -57,13 +59,13 @@ describe('VirtualTextSizer', () => {
const sizeMono = safeMeasure(attrs, [[
{text: 'foo'},
{attrs: {'font-family': 'monospace'}, text: 'bar'},
{attrs: {'font-family': MONO_FONT}, text: 'bar'},
]]);
const sizeMonoBold = safeMeasure(attrs, [[
{text: 'foo'},
{attrs: {
'font-family': 'monospace',
'font-family': MONO_FONT,
'font-weight': 'bolder',
}, text: 'bar'},
]]);

4
spec/images/AgentOptions.svg
View File

@ -1,4 +1,4 @@
<svg width="134.67226123809814" height="60.6" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 134.67226123809814 60.6"><metadata>begin A, B, C
<svg width="134.67335319519043" height="60.6" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 134.67335319519043 60.6"><metadata>begin A, B, C
A is a database
B is red
C is a red database</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-5" y="-5" width="134.67226123809814" height="60.6"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-5" y="-5" width="134.67226123809814" height="60.6"></rect></mask></defs><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"><line x1="24.001698970794678" y1="30.6" x2="24.001698970794678" y2="50.6" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></line><line x1="62.00509691238403" y1="30.6" x2="62.00509691238403" y2="50.6" class="agent-2-line" fill="none" stroke="#CC0000" stroke-width="1"></line><line x1="100.33952856063843" y1="30.6" x2="100.33952856063843" y2="50.6" class="agent-3-line" fill="none" stroke="#CC0000" stroke-width="1"></line></g><g></g><g><g class="region"><g><rect x="10" y="0" width="28.003397941589355" height="30.6" rx="14.001698970794678" ry="5" fill="#FFFFFF" stroke="#000000" stroke-width="1" db-z="5"></rect><path d="M10 5a14.001698970794678 5 0 0 0 28.003397941589355 0" fill="none" stroke="#000000" stroke-width="1" db-z="5"></path></g><rect x="10" y="0" width="28.003397941589355" height="30.6" fill="transparent" class="outline"></rect><text x="24.001698970794678" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="24">A</text></g><g class="region"><rect x="48.003397941589355" y="5" width="28.003397941589355" height="25.6" fill="#FFFFFF" stroke="#000000" stroke-width="1"></rect><rect x="48.003397941589355" y="5" width="28.003397941589355" height="25.6" fill="transparent" class="outline"></rect><text x="62.00509691238403" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="22">B</text></g><g class="region"><g><rect x="86.00679588317871" y="0" width="28.665465354919434" height="30.6" rx="14.332732677459717" ry="5" fill="#FFFFFF" stroke="#000000" stroke-width="1" db-z="5"></rect><path d="M86.00679588317871 5a14.332732677459717 5 0 0 0 28.665465354919434 0" fill="none" stroke="#000000" stroke-width="1" db-z="5"></path></g><rect x="86.00679588317871" y="0" width="28.665465354919434" height="30.6" fill="transparent" class="outline"></rect><text x="100.33952856063843" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="24">C</text></g><g class="region"><rect x="19.001698970794678" y="40.6" width="10" height="10" fill="transparent" class="outline"></rect></g><g class="region"><rect x="57.00509691238403" y="40.6" width="10" height="10" fill="transparent" class="outline"></rect></g><g class="region"><rect x="95.33952856063843" y="40.6" width="10" height="10" fill="transparent" class="outline"></rect></g></g></g><g></g></svg>
C is a red database</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="60.6" width="134.67335319519043" x="-5" y="-5"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="60.6" width="134.67335319519043" x="-5" y="-5"></rect></mask></defs><g></g><g></g><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"><line fill="none" stroke="#000000" stroke-width="1" x1="24.001875400543213" x2="24.001875400543213" y1="30.6" y2="50.6" class="agent-1-line"></line><line fill="none" stroke="#CC0000" stroke-width="1" x1="62.00562620162964" x2="62.00562620162964" y1="30.6" y2="50.6" class="agent-2-line"></line><line fill="none" stroke="#CC0000" stroke-width="1" x1="100.34042739868164" x2="100.34042739868164" y1="30.6" y2="50.6" class="agent-3-line"></line></g><g></g><g><g class="region"><g><g><rect rx="14.001875400543213" ry="5" height="30.6" width="28.003750801086426" x="10" y="0" fill="#FFFFFF" stroke="#000000" stroke-width="1" db-z="5"></rect><path d="M10 5a14.001875400543213 5 0 0 0 28.003750801086426 0" fill="none" stroke="#000000" stroke-width="1" db-z="5"></path></g><g><text x="24.001875400543213" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="24">A</text></g></g><rect class="outline" fill="transparent" height="30.6" width="28.003750801086426" x="10" y="0"></rect></g><g class="region"><g><rect fill="#FFFFFF" stroke="#000000" stroke-width="1" height="25.6" width="28.003750801086426" x="48.003750801086426" y="5"></rect><g><text x="62.00562620162964" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="22">B</text></g></g><rect class="outline" fill="transparent" height="25.6" width="28.003750801086426" x="48.003750801086426" y="5"></rect></g><g class="region"><g><g><rect rx="14.332925796508789" ry="5" height="30.6" width="28.665851593017578" x="86.00750160217285" y="0" fill="#FFFFFF" stroke="#000000" stroke-width="1" db-z="5"></rect><path d="M86.00750160217285 5a14.332925796508789 5 0 0 0 28.665851593017578 0" fill="none" stroke="#000000" stroke-width="1" db-z="5"></path></g><g><text x="100.34042739868164" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="24">C</text></g></g><rect class="outline" fill="transparent" height="30.6" width="28.665851593017578" x="86.00750160217285" y="0"></rect></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="19.001875400543213" y="40.6"></rect></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="57.00562620162964" y="40.6"></rect></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="95.34042739868164" y="40.6"></rect></g></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

4
spec/images/Asynchronous.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 5.6 KiB

4
spec/images/Block.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

4
spec/images/CollapsedBlocks.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.1 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

4
spec/images/Connect.svg
View File

@ -1,2 +1,2 @@
<svg width="96.00716400146484" height="70.6" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 96.00716400146484 70.6"><metadata>A -&gt; B
</metadata><defs></defs><defs><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-5" y="-5" width="96.00716400146484" height="70.6"></rect></mask></defs><g mask="url(#R0LineMask)"><line x1="24.00179100036621" y1="25.6" x2="24.00179100036621" y2="60.6" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></line><line x1="62.00537300109863" y1="25.6" x2="62.00537300109863" y2="60.6" class="agent-2-line" fill="none" stroke="#000000" stroke-width="1"></line></g><g></g><g><rect x="10" y="0" width="28.003582000732422" height="25.6" fill="#FFFFFF" stroke="#000000" stroke-width="1"></rect><rect x="48.00358200073242" y="0" width="28.003582000732422" height="25.6" fill="#FFFFFF" stroke="#000000" stroke-width="1"></rect><path d="M24.00179100036621 40.6L59.00537300109863 40.6" fill="none" stroke="#000000" stroke-width="1"></path><polygon points="56.50537300109863 45.6 61.50537300109863 40.6 56.50537300109863 35.6" fill="#000000" stroke-width="0" stroke-linejoin="miter"></polygon></g><g><g class="region"><rect x="10" y="0" width="28.003582000732422" height="25.6" fill="transparent" class="outline"></rect><text x="24.00179100036621" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">A</text></g><g class="region"><rect x="48.00358200073242" y="0" width="28.003582000732422" height="25.6" fill="transparent" class="outline"></rect><text x="62.00537300109863" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">B</text></g><g class="region"><path d="M24.00179100036621,35.6L62.00537300109863,35.6L62.00537300109863,45.6L24.00179100036621,45.6Z" fill="transparent" class="outline"></path></g><g class="region"><rect x="19.00179100036621" y="50.6" width="10" height="10" fill="transparent" class="outline"></rect></g><g class="region"><rect x="57.00537300109863" y="50.6" width="10" height="10" fill="transparent" class="outline"></rect></g></g></svg>
<svg width="96.00749397277832" height="70.6" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 96.00749397277832 70.6"><metadata>A -&gt; B
</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="70.6" width="96.00749397277832" x="-5" y="-5"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="70.6" width="96.00749397277832" x="-5" y="-5"></rect></mask></defs><g></g><g></g><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"><line fill="none" stroke="#000000" stroke-width="1" x1="24.00187349319458" x2="24.00187349319458" y1="25.6" y2="60.6" class="agent-1-line"></line><line fill="none" stroke="#000000" stroke-width="1" x1="62.00562047958374" x2="62.00562047958374" y1="25.6" y2="60.6" class="agent-2-line"></line></g><g></g><g><g class="region"><g><rect fill="#FFFFFF" stroke="#000000" stroke-width="1" height="25.6" width="28.00374698638916" x="10" y="0"></rect><g><text x="24.00187349319458" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">A</text></g></g><rect class="outline" fill="transparent" height="25.6" width="28.00374698638916" x="10" y="0"></rect></g><g class="region"><g><rect fill="#FFFFFF" stroke="#000000" stroke-width="1" height="25.6" width="28.00374698638916" x="48.00374698638916" y="0"></rect><g><text x="62.00562047958374" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">B</text></g></g><rect class="outline" fill="transparent" height="25.6" width="28.00374698638916" x="48.00374698638916" y="0"></rect></g><g class="region"><path d="M24.00187349319458 40.6L59.00562047958374 40.6" fill="none" stroke="#000000" stroke-width="1"></path><polygon points="56.50562047958374 45.6 61.50562047958374 40.6 56.50562047958374 35.6" fill="#000000" stroke-width="0" stroke-linejoin="miter"></polygon><path class="outline" fill="transparent" d="M24.00187349319458,35.6L62.00562047958374,35.6L62.00562047958374,45.6L24.00187349319458,45.6Z"></path></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="19.00187349319458" y="50.6"></rect></g><g class="region"><rect class="outline" fill="transparent" height="10" width="10" x="57.00562047958374" y="50.6"></rect></g></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

4
spec/images/Divider.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

4
spec/images/DividerMasking.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

4
spec/images/Markdown.svg
View File

@ -1,3 +1,3 @@
<svg width="86.025390625" height="98" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-43.0126953125 -93 86.025390625 98"><metadata>title "Foo **Bar**
<svg width="86.02510070800781" height="98" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-43.012550354003906 -93 86.02510070800781 98"><metadata>title "Foo **Bar**
_Baz_ `Zig`
**_`Zag`_**"</metadata><defs></defs><defs><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-43.0126953125" y="-93" width="86.025390625" height="98"></rect></mask></defs><g mask="url(#R0LineMask)"></g><g></g><g></g><g></g><text x="0" font-family="sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-68">Foo <tspan font-weight="bolder">Bar</tspan></text><text x="0" font-family="sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-42"><tspan font-style="italic">Baz</tspan> <tspan font-family="monospace">Zig</tspan></text><text x="0" font-family="sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-16"><tspan font-style="italic" font-weight="bolder" font-family="monospace">Zag</tspan></text></svg>
**_`Zag`_**"</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="98" width="86.02510070800781" x="-43.012550354003906" y="-93"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="98" width="86.02510070800781" x="-43.012550354003906" y="-93"></rect></mask></defs><g></g><g><text x="0" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-68">Foo <tspan font-weight="bolder">Bar</tspan></text><text x="0" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-42"><tspan font-style="italic">Baz</tspan> <tspan font-family="Courier New,Liberation Mono,monospace">Zig</tspan></text><text x="0" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="20" line-height="1.3" text-anchor="middle" class="title" y="-16"><tspan font-style="italic" font-weight="bolder" font-family="Courier New,Liberation Mono,monospace">Zag</tspan></text></g><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"></g><g></g><g></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 992 B

After

Width:  |  Height:  |  Size: 1.3 KiB

4
spec/images/Reference.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 15 KiB

4
spec/images/ReferenceLayering.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

4
spec/images/SelfConnect.svg
View File

@ -1,5 +1,5 @@
<svg width="69.3370221455892" height="147.6" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 69.3370221455892 147.6"><metadata>*A &lt;&lt;-&gt;&gt; A
<svg width="69.33674081166586" height="147.6" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-5 -5 69.33674081166586 147.6"><metadata>*A &lt;&lt;-&gt;&gt; A
A &lt;&lt;-&gt;&gt; +A
-A &lt;&lt;-&gt;&gt; A
A &lt;&lt;-&gt;&gt; !A
</metadata><defs></defs><defs><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" x="-5" y="-5" width="69.3370221455892" height="147.6"></rect></mask></defs><g mask="url(#R0LineMask)"><line x1="24.00184440612793" y1="25.6" x2="24.00184440612793" y2="63.6" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></line><rect x="20.00184440612793" y="63.6" width="8" height="15.999999999999993" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></rect><line x1="24.00184440612793" y1="79.6" x2="24.00184440612793" y2="127.6" class="agent-1-line" fill="none" stroke="#000000" stroke-width="1"></line></g><g></g><g><rect x="10" y="0" width="28.00368881225586" height="25.6" fill="#FFFFFF" stroke="#000000" stroke-width="1"></rect><path d="M39.670355478922524 12.8L49.337022145589195 12.8A6 6 0 0 1 55.337022145589195 18.8L55.337022145589195 29.6A6 6 0 0 1 49.337022145589195 35.6L25.668511072794598 35.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="43.337022145589195 9.8 39.337022145589195 12.8 43.337022145589195 15.8" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335177739461262 32.6 25.335177739461262 35.6 29.335177739461262 38.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><path d="M25.668511072794598 51.6L35.335177739461265 51.6A6 6 0 1 1 35.335177739461265 63.6L29.668511072794598 63.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="29.335177739461262 48.6 25.335177739461262 51.6 29.335177739461262 54.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="33.33517773946126 60.6 29.335177739461262 63.6 33.33517773946126 66.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><path d="M29.668511072794598 79.6L39.335177739461265 79.6A6 6 0 1 1 39.335177739461265 91.6L25.668511072794598 91.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="33.33517773946126 76.6 29.335177739461262 79.6 33.33517773946126 82.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335177739461262 88.6 25.335177739461262 91.6 29.335177739461262 94.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><path d="M25.668511072794598 107.6L35.335177739461265 107.6A6 6 0 0 1 41.335177739461265 113.6L41.335177739461265 121.6A6 6 0 0 1 35.335177739461265 127.6L25.668511072794598 127.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="29.335177739461262 104.6 25.335177739461262 107.6 29.335177739461262 110.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335177739461262 124.6 25.335177739461262 127.6 29.335177739461262 130.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><path d="M14.00184440612793 117.6l20 20m0 -20l-20 20" fill="none" stroke="#000000" stroke-width="1"></path></g><g><g class="region"><rect x="10" y="0" width="28.00368881225586" height="25.6" fill="transparent" class="outline"></rect><text x="24.00184440612793" font-family="sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">A</text></g><g class="region"><rect x="24.00184440612793" y="9.8" width="31.335177739461265" height="28.8" fill="transparent" class="outline"></rect></g><g class="region"><rect x="24.00184440612793" y="48.6" width="17.333333333333336" height="17.999999999999993" fill="transparent" class="outline"></rect></g><g class="region"><rect x="24.00184440612793" y="76.6" width="21.333333333333336" height="18" fill="transparent" class="outline"></rect></g><g class="region"><rect x="24.00184440612793" y="104.6" width="17.333333333333336" height="26" fill="transparent" class="outline"></rect></g><g class="region"><rect x="14.00184440612793" y="117.6" width="20" height="20" fill="transparent" class="outline"></rect></g></g></svg>
</metadata><defs></defs><defs><mask id="R0FullMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="147.6" width="69.33674081166586" x="-5" y="-5"></rect></mask><mask id="R0LineMask" maskUnits="userSpaceOnUse"><rect fill="#FFFFFF" height="147.6" width="69.33674081166586" x="-5" y="-5"></rect></mask></defs><g></g><g></g><g></g><g mask="url(#R0FullMask)"><g mask="url(#R0LineMask)"><line fill="none" stroke="#000000" stroke-width="1" x1="24.00170373916626" x2="24.00170373916626" y1="25.6" y2="63.6" class="agent-1-line"></line><rect fill="none" stroke="#000000" stroke-width="1" height="15.999999999999993" width="8" x="20.00170373916626" y="63.6" class="agent-1-line"></rect><line fill="none" stroke="#000000" stroke-width="1" x1="24.00170373916626" x2="24.00170373916626" y1="79.6" y2="127.6" class="agent-1-line"></line></g><g></g><g><g class="region"><g><rect fill="#FFFFFF" stroke="#000000" stroke-width="1" height="25.6" width="28.00340747833252" x="10" y="0"></rect><g><text x="24.00170373916626" font-family="Helvetica,Arial,Liberation Sans,sans-serif" font-size="12" line-height="1.3" text-anchor="middle" y="17">A</text></g></g><rect class="outline" fill="transparent" height="25.6" width="28.00340747833252" x="10" y="0"></rect></g><g class="region"><rect class="outline" fill="transparent" height="28.8" width="31.335037072499595" x="24.00170373916626" y="9.8"></rect><path d="M39.670074144999184 12.8L49.336740811665855 12.8A6 6 0 0 1 55.336740811665855 18.8L55.336740811665855 29.6A6 6 0 0 1 49.336740811665855 35.6L25.668370405832928 35.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="43.336740811665855 9.8 39.336740811665855 12.8 43.336740811665855 15.8" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335037072499592 32.6 25.335037072499592 35.6 29.335037072499592 38.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline></g><g class="region"><rect class="outline" fill="transparent" height="17.999999999999993" width="17.333333333333336" x="24.00170373916626" y="48.6"></rect><path d="M25.668370405832928 51.6L35.335037072499595 51.6A6 6 0 1 1 35.335037072499595 63.6L29.668370405832928 63.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="29.335037072499592 48.6 25.335037072499592 51.6 29.335037072499592 54.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="33.33503707249959 60.6 29.335037072499592 63.6 33.33503707249959 66.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline></g><g class="region"><rect class="outline" fill="transparent" height="18" width="21.333333333333336" x="24.00170373916626" y="76.6"></rect><path d="M29.668370405832928 79.6L39.335037072499595 79.6A6 6 0 1 1 39.335037072499595 91.6L25.668370405832928 91.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="33.33503707249959 76.6 29.335037072499592 79.6 33.33503707249959 82.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335037072499592 88.6 25.335037072499592 91.6 29.335037072499592 94.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline></g><g class="region"><rect class="outline" fill="transparent" height="26" width="17.333333333333336" x="24.00170373916626" y="104.6"></rect><path d="M25.668370405832928 107.6L35.335037072499595 107.6A6 6 0 0 1 41.335037072499595 113.6L41.335037072499595 121.6A6 6 0 0 1 35.335037072499595 127.6L25.668370405832928 127.6" fill="none" stroke="#000000" stroke-width="1"></path><polyline points="29.335037072499592 104.6 25.335037072499592 107.6 29.335037072499592 110.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline><polyline points="29.335037072499592 124.6 25.335037072499592 127.6 29.335037072499592 130.6" fill="none" stroke="#000000" stroke-width="1" stroke-linejoin="miter"></polyline></g><g class="region"><path d="M14.00170373916626 117.6l20 20m0 -20l-20 20" fill="none" stroke="#000000" stroke-width="1"></path><rect class="outline" fill="transparent" height="20" width="20" x="14.00170373916626" y="117.6"></rect></g></g></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

4
spec/images/Sketch.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 28 KiB

3
spec/readme_webspec.mjs
View File

@ -10,9 +10,6 @@ const SAMPLE_REGEX = new RegExp(
const SCREENSHOT_BLACKLIST = [
// Renders differently but correctly in different browsers
'screenshots/Themes.png',
// For some reason this one breaks in headless Chrome
'screenshots/Markdown.png',
];
function readError(err) {

27
spec/support/karma-hang.mjs Normal file
View File

@ -0,0 +1,27 @@
/*
* This file is used when running npm run web-test:manual
* It causes the Karma runner to keep the results page open for 1 minute to
* help with debugging test issues.
*/
const delay = 60000;
let originalTimeout = 0;
afterAll((done) => {
window.console.log(
'Waiting ' + delay / 1000 +
' seconds before clearing (see karma-hang.mjs)...'
);
setTimeout(() => {
jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
done();
}, delay);
});
// Appears to be called in reverse order
afterAll(() => {
// Set timeout high for only this occurrence
originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
jasmine.DEFAULT_TIMEOUT_INTERVAL = delay + 1000;
});

13
spec/support/karma.conf.js
View File

@ -1,3 +1,7 @@
/* eslint-disable no-process-env */ // Configuration section
const manual = Boolean(process.env.MANUAL);
/* eslint-enable no-process-env */
/*
* Firefox is supported, but tests will fail until version 60 is out
* due to the use of es6 modules, so exclude it for now.
@ -8,6 +12,10 @@ const SUPPORTED_BROWSERS = [
'safari',
];
if(manual) {
SUPPORTED_BROWSERS.length = 0;
}
function is_supported_browser(name) {
const lcName = name.toLowerCase();
for(const fragment of SUPPORTED_BROWSERS) {
@ -34,6 +42,11 @@ module.exports = (config) => {
exclude: ['node_modules/**/*_spec.*', 'lib/**', 'weblib/**'],
files: [
'node_modules/codemirror/lib/codemirror.js',
{
included: manual,
pattern: 'spec/support/karma-hang.mjs',
type: 'module',
},
{pattern: 'spec/helpers/**/*.mjs', type: 'module'},
{pattern: '**/*_spec.mjs', type: 'module'},
{pattern: '**/*_webspec.mjs', type: 'module'},