Documentation and demo for multiline

jornetsimon · Jun 26, 2020 · 009759f · 009759f
1 parent 3bd0b64
commit 009759f
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,7 @@ The config object should represent a partial [RoughAnnotationConfigBase](https:
 | color             | `string`                                                     | See [Automatic colors](#automatic-colors) |
 | strokeWidth       | `number`                                                     | `1`                                       |
 | padding           | `number`,  `[number, number]`, `[number, number, number, number]` | `5`                                       |
+| multiline         | `boolean`                                                    | `false`                                   |
 | iterations        | `number`                                                     | `2`                                       |
 | brackets          | `'left'`, `'right'`, `'top'`, `'bottom'`,  [...`'left'`, `'right'`, `'top'`, `'bottom'`] | `'right'`                                 |
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-rough-notation-workspace",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

diff --git a/projects/demo/src/app/app.component.css b/projects/demo/src/app/app.component.css
@@ -11,6 +11,7 @@
 }
 .section > div {
 	display: flex;
+	align-items: center;
 	font-size: 24px;
 }
 .section > div:not(:last-child) {

diff --git a/projects/demo/src/app/app.component.html b/projects/demo/src/app/app.component.html
@@ -44,6 +44,24 @@ <h2>Types</h2>
 		</span>
 		<button (click)="bracket.toggle()">Toggle</button>
 	</div>
+	<div>
+		<p style="max-width: 700px;">
+			<strong>Multiline</strong>
+			<br />
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque ante, tristique
+			eget sem eu, faucibus porta ex. Mauris in feugiat justo, vel aliquam nulla.
+			<span
+				[roughNotation]="{ type: 'highlight', multiline: true }"
+				#multiline="roughNotation"
+				>Nullam iaculis, massa dignissim ultrices tincidunt, urna mi varius mi, eget
+				consequat sapien arcu et mi. Praesent mauris arcu, imperdiet sit amet ultricies in,
+				posuere ut nisl.
+			</span>
+			Suspendisse faucibus mauris at arcu ullamcorper posuere. Morbi eget arcu quis lectus
+			feugiat vulputate. Sed nec pulvinar sem, ut posuere lacus.
+		</p>
+		<button (click)="multiline.toggle()">Toggle</button>
+	</div>
 </div>
 
 <h2>

diff --git a/projects/ng-rough-notation/README.md b/projects/ng-rough-notation/README.md
@@ -59,6 +59,7 @@ The config object should represent a partial [RoughAnnotationConfigBase](https:
 | color             | `string`                                                     | See [Automatic colors](#automatic-colors) |
 | strokeWidth       | `number`                                                     | `1`                                       |
 | padding           | `number`,  `[number, number]`, `[number, number, number, number]` | `5`                                       |
+| multiline         | `boolean`                                                    | `false`                                   |
 | iterations        | `number`                                                     | `2`                                       |
 | brackets          | `'left'`, `'right'`, `'top'`, `'bottom'`,  [...`'left'`, `'right'`, `'top'`, `'bottom'`] | `'right'`                                 |
 

diff --git a/projects/ng-rough-notation/package.json b/projects/ng-rough-notation/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "ng-rough-notation",
-	"version": "1.0.5",
+	"version": "1.1.0",
 	"description": "Angular directive wrapper for rough-notation",
 	"author": "Simon Jornet",
 	"keywords": [