From dcad48ec90c45bacb731ef9c740fbbba603318b4 Mon Sep 17 00:00:00 2001 From: David Evans Date: Sat, 5 May 2018 15:04:57 +0100 Subject: [PATCH] Improve printing of editor and library page [#53] --- README.md | 6 +- library.htm | 42 ++++++++++++-- web/styles/editor.css | 33 +++++++++++ web/styles/library.css | 125 ++++++++++++++++++++++++++++++++++++++++- 4 files changed, 195 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 996c1c4..45b30e6 100644 --- a/README.md +++ b/README.md @@ -203,7 +203,8 @@ end Baz note over Foo, Bar: Using * / ! -# * and ! cause agents to be created and destroyed inline +# * and ! cause agents to be +# created and destroyed inline Bar -> *Baz: make Baz Foo <- !Baz: end Baz @@ -257,7 +258,8 @@ Bar -> Baz ``` begin Initiator as I, Receiver as R -# the '...id' syntax allows connections to span multiple lines +# the '...id' syntax allows connections +# to span multiple lines I -> ...fin1 ...fin1 -> R: FIN diff --git a/library.htm b/library.htm index 23d4b11..46372fa 100644 --- a/library.htm +++ b/library.htm @@ -154,7 +154,7 @@ converted when the page loads: -
+
 <pre class="sequence-diagram">
   A -> B: foo
   B -> A: bar
@@ -163,6 +163,7 @@ converted when the page loads:
 
 
Language

 
+

 
Connection Types

 
 title Connection Types
@@ -197,7 +198,9 @@ Foo <- ]: From the right
 [ ~> ]: Wavy left to right!
 # (etc.)
 

+

 
+

 
Dividers

 
 title Dividers
@@ -218,7 +221,9 @@ divider tear with height 20: Lots of stuff happens
 
 -Bar --> Foo
 

+

 
+

 
Notes & State

 
 title Note Placements
@@ -234,7 +239,9 @@ text right: "Comments\nOver here!"
 
 state over Foo: Foo is ponderous
 

+

 
+

 
Logic

 
 title At the Bank
@@ -256,7 +263,9 @@ else
   ATM -> Person: Error
 end
 

+

 
+

 
Label Templates

 
 autolabel "[<inc>] <label>"
@@ -266,7 +275,9 @@ A <- ]: Collect underpants
 A <-> ]: ???
 A <- ]: Profit!
 

+

 
+

 
Multiline Text

 
 title "My Multiline
@@ -283,7 +294,9 @@ end
 state over Foo: "Newlines here,
 too!"
 

+

 
+

 
Themes

 
 theme sketch
@@ -304,7 +317,9 @@ end Another thing
 
  • sketch
    • 
 
  • sketch left handed
    • 
 
+
    
 
+
    
 
    Short-Lived Agents
    
 
     title "Baz doesn't live long"
@@ -318,7 +333,8 @@ end Baz
 
 note over Foo, Bar: Using * / !
 
-# * and ! cause agents to be created and destroyed inline
+# * and ! cause agents to be
+# created and destroyed inline
 Bar -> *Baz: make Baz
 Foo <- !Baz: end Baz
 
@@ -326,7 +342,9 @@ Foo <- !Baz: end Baz
 terminators bar
 # (options are: box, bar, cross, fade, none)
 
    
+
    
 
+
    
 
    Agent Aliases
    
 
     define My complicated agent name as A
@@ -336,7 +354,9 @@ and this one's multi-line!" as B
 A -> B: this is much easier
 A <- B: than writing the whole name
 
    
+
    
 
+
    
 
    Markdown
    
 
     define "Name with
@@ -347,7 +367,9 @@ and ~strikeout~" as B
 A -> B: "_**basic markdown
 is supported!**_"
 
    
+
    
 
+
    
 
    Alternative Agent Ordering
    
 
     define Baz, Foo
@@ -355,12 +377,15 @@ define Baz, Foo
 Foo -> Bar
 Bar -> Baz
 
    
+
    
 
+
    
 
    Asynchronous Communication
    
 
     begin Initiator as I, Receiver as R
 
-# the '...id' syntax allows connections to span multiple lines
+# the '...id' syntax allows connections
+# to span multiple lines
 
 I -> ...fin1
 ...fin1 -> R: FIN
@@ -374,7 +399,9 @@ R -> ...fin2
 !I -> ...ack2
 ...ack2 -> !R: ACK
 
    
+
    
 
+
    
 
    More
    
 
 
    
@@ -382,8 +409,9 @@ More features are supported. See the
 online editor’s library and autocomplete
 features to discover them.
 
    
+
    
 
-
    Browser Support
    
+
    Browser Support
    
 
 
    
 This has been tested in the latest versions of Google Chrome, Mozilla Firefox,
@@ -401,11 +429,13 @@ For more advanced usage, an API is available:
 
 
    
 
-
    +
     var diagram = new SequenceDiagram();
 diagram.set('A -> B\nB -> A');
 document.body.appendChild(diagram.dom());
-diagram.setHighlight(1); // Highlight elements created in line 1 (0-based)
+
+// Highlight elements created in line 1 (0-based)
+diagram.setHighlight(1);
 
    
 
 
    Constructor
    
diff --git a/web/styles/editor.css b/web/styles/editor.css
index d13dd98..62b3a54 100644
--- a/web/styles/editor.css
+++ b/web/styles/editor.css
@@ -388,3 +388,36 @@ html, body {
 	background: #99EE99;
 	box-sizing: border-box;
 }
+
+@media print {
+	.drop-target:after {
+		display: none;
+	}
+
+	.pane-side {
+		display: none;
+	}
+
+	.pane-view {
+		min-width: 100%;
+	}
+
+	.pane-view-scroller {
+		overflow: visible;
+	}
+
+	.pane-view-inner {
+		/* https://bugs.chromium.org/p/chromium/issues/detail?id=449512 */
+		/* (not using this workaround for now
+		 * due to drastically lowered resolution) */
+		/*-webkit-filter: opacity(1);*/
+	}
+
+	.pane-view .region .outline {
+		stroke: none !important;
+	}
+
+	.options {
+		display: none;
+	}
+}
diff --git a/web/styles/library.css b/web/styles/library.css
index 9ecbfd4..300c8a3 100644
--- a/web/styles/library.css
+++ b/web/styles/library.css
@@ -21,14 +21,16 @@ article > header {
 	padding: 10px 20px;
 	background: linear-gradient(#DDEEFF, #FFFFFF);
 	border-radius: 2px;
+	page-break-inside: avoid;
+	break-inside: avoid;
 }
 
 article > header > h1 {
 	margin: 0 0 10px;
 	padding: 0;
 	font: 3.5em 'Vollkorn', serif;
-	text-align: center;
 	clear: both;
+	text-align: center;
 }
 
 article > header > .sequence-diagram {
@@ -40,19 +42,32 @@ article > h2 {
 	padding: 5px 20px 0;
 	font: 2em 'Vollkorn', serif;
 	clear: both;
+	page-break-before: always;
+	break-before: page;
+	page-break-after: avoid;
+	break-after: avoid;
 }
 
-article > h3 {
+article h3 {
 	margin: 25px -20px 10px;
 	padding: 5px 20px 0;
 	font: 1.5em 'Vollkorn', serif;
 	clear: both;
+	page-break-after: avoid;
+	break-after: avoid;
 }
 
-article > h4 {
+article h4 {
 	margin: 15px -20px 10px;
 	padding: 5px 20px 0;
 	font: 1.1em 'Vollkorn', serif;
+	page-break-after: avoid;
+	break-after: avoid;
+}
+
+.no-forced-break {
+	page-break-before: auto;
+	break-before: auto;
 }
 
 article > p {
@@ -64,6 +79,19 @@ article > p {
 article > ul {
 	margin: 10px 0;
 	padding: 0 0 0 30px;
+	page-break-before: avoid;
+	page-break-inside: avoid;
+	break-before: avoid;
+	break-inside: avoid;
+}
+
+section {
+	display: block;
+	margin: 0;
+	padding: 0;
+	clear: both;
+	page-break-inside: avoid;
+	break-inside: avoid;
 }
 
 a:link, a:visited {
@@ -87,6 +115,8 @@ a:hover, a:active {
 	margin-left: 20px;
 	background: #F8F8F8;
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+	page-break-inside: avoid;
+	break-inside: avoid;
 }
 
 .region.focus .outline {
@@ -114,6 +144,7 @@ pre {
 	min-width: 150px;
 	font-size: 1.1em;
 	line-height: 1.2;
+	page-break-inside: avoid;
 }
 
 nav {
@@ -139,3 +170,91 @@ nav a {
 nav a:hover {
 	background: #EEEEEE;
 }
+
+@media print {
+	body {
+		background: transparent;
+		margin: 0;
+	}
+
+	article {
+		max-width: none;
+		background: transparent;
+		box-shadow: none;
+		margin: 0;
+		padding: 0;
+		border-radius: 0;
+		color: #000000;
+	}
+
+	article > header {
+		margin: 0 0 30px;
+		background: transparent;
+		border-radius: 0;
+	}
+
+	article > header > h1 {
+		margin: 50px 0 80px;
+	}
+
+	article > h2 {
+		margin: 35px 0 10px;
+		padding: 5px 0 0;
+	}
+
+	article h3 {
+		margin: 25px 0 10px;
+		padding: 5px 0 0;
+	}
+
+	article h4 {
+		margin: 15px 0 10px;
+		padding: 5px 0 0;
+	}
+
+	article > header > .sequence-diagram {
+		/* filters print with low resolution */
+		filter: none;
+	}
+
+	a:link, a:visited, a:hover, a:active {
+		color: inherit;
+		text-decoration: underline;
+	}
+
+	pre {
+		background: #FFFFFF;
+		overflow: visible;
+		box-shadow: none;
+		border: 1px solid #666666;
+	}
+
+	pre.print-reduced {
+		display: inline-block;
+	}
+
+	pre.example {
+		font-size: 0.8em;
+		width: 50%;
+		box-sizing: border-box;
+		display: inline-block;
+	}
+
+	.example-diagram {
+		max-width: 50%;
+		max-height: 400px;
+		box-sizing: border-box;
+		margin-left: 0;
+		background: #FFFFFF;
+		box-shadow: none;
+	}
+
+	.right {
+		background: #FFFFFF;
+		margin: -2px;
+	}
+
+	nav {
+		display: none;
+	}
+}