Skip to content

Commit 58fbbd0

Browse files
yucheng11122017yucheng11122017
authored
Enable markdown for content, header and label in annotation point
* enable markdown formating for content in annotate point * add slot for header and label in annotation point * add documentation on using markdown in content label and header * add functional test * add test cases for annotation
1 parent 31d00dc commit 58fbbd0

File tree

11 files changed

+761
-41
lines changed

11 files changed

+761
-41
lines changed

‎docs/userGuide/syntax/annotations.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,23 @@ The x and y coordinates of each Annotate Point are relative to the image and are
3939
</variable>
4040
</include>
4141

42+
**Use markdown in the header, label and content**
43+
44+
Annotate Points supports markdown in the header, label and content.
45+
46+
<include src="codeAndOutput.md" boilerplate >
47+
<variable name="highlightStyle">html</variable>
48+
<variable name="code">
49+
50+
<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
51+
<a-point x="25%" y="25%" content="# Content" />
52+
<a-point x="50%" y="25%" header=":blush:" />
53+
<a-point x="75%" y="25%" label=":heart:"/>
54+
</annotate>
55+
</variable>
56+
</include>
57+
58+
4259
**Customising shapes for Annotate Point** <br>
4360

4461
Annotate Points supports different shapes and customisation.

‎packages/cli/test/functional/test_site/expected/siteData.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,9 @@
213213
{
214214
"src": "testAnnotate.md",
215215
"title": "Annotate Feature Test",
216-
"headings": {},
216+
"headings": {
217+
"content": "Content"
218+
},
217219
"headingKeywords": {}
218220
},
219221
{

‎packages/cli/test/functional/test_site/expected/testAnnotate.html

Lines changed: 144 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -208,63 +208,175 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
208208
<breadcrumb></breadcrumb>
209209
<p><strong>Annotate with saved Image</strong></p>
210210
<annotate src="./images/annotateSampleImage.png" width="500" alt="sampleImage">
211-
<a-point x="25%" y="25%" content="Lorem ipsum dolor sit amet"></a-point>
211+
<a-point x="25%" y="25%"><template #content>
212+
<p>Lorem ipsum dolor sit amet</p>
213+
</template></a-point>
212214
</annotate>
213215
<br>
214216
<p><strong>Annotate point positions</strong></p>
215217

216218
<annotate src="./images/annotateSampleImage.png" width="350" alt="sampleImage">
217-
<a-point x="0%" y="0%" content="Lorem ipsum dolor sit amet"></a-point>
218-
<a-point x="50%" y="50%" content="Lorem ipsum dolor sit amet"></a-point>
219-
<a-point x="100%" y="100%" content="Lorem ipsum dolor sit amet"></a-point>
219+
<a-point x="0%" y="0%"><template #content>
220+
<p>Lorem ipsum dolor sit amet</p>
221+
</template></a-point>
222+
<a-point x="50%" y="50%"><template #content>
223+
<p>Lorem ipsum dolor sit amet</p>
224+
</template></a-point>
225+
<a-point x="100%" y="100%"><template #content>
226+
<p>Lorem ipsum dolor sit amet</p>
227+
</template></a-point>
220228
</annotate>
221229

222230
<annotate src="./images/annotateSampleImage.png" width="600" alt="sampleImage">
223-
<a-point x="0%" y="0%" content="Lorem ipsum dolor sit amet"></a-point>
224-
<a-point x="50%" y="50%" content="Lorem ipsum dolor sit amet"></a-point>
225-
<a-point x="100%" y="100%" content="Lorem ipsum dolor sit amet"></a-point>
231+
<a-point x="0%" y="0%"><template #content>
232+
<p>Lorem ipsum dolor sit amet</p>
233+
</template></a-point>
234+
<a-point x="50%" y="50%"><template #content>
235+
<p>Lorem ipsum dolor sit amet</p>
236+
</template></a-point>
237+
<a-point x="100%" y="100%"><template #content>
238+
<p>Lorem ipsum dolor sit amet</p>
239+
</template></a-point>
226240
</annotate>
227241

228242
<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
229-
<a-point x="0%" y="0%" content="Lorem ipsum dolor sit amet"></a-point>
230-
<a-point x="50%" y="50%" content="Lorem ipsum dolor sit amet"></a-point>
231-
<a-point x="100%" y="100%" content="Lorem ipsum dolor sit amet"></a-point>
243+
<a-point x="0%" y="0%"><template #content>
244+
<p>Lorem ipsum dolor sit amet</p>
245+
</template></a-point>
246+
<a-point x="50%" y="50%"><template #content>
247+
<p>Lorem ipsum dolor sit amet</p>
248+
</template></a-point>
249+
<a-point x="100%" y="100%"><template #content>
250+
<p>Lorem ipsum dolor sit amet</p>
251+
</template></a-point>
232252
</annotate>
233253
<br>
234254
<p><strong>Annotate point attributes</strong></p>
235255

236256
<annotate src="./images/annotateSampleImage.png" width="350" alt="sampleImage">
237-
<a-point x="25%" y="25%" content="Lorem ipsum dolor sit amet"></a-point>
238-
<a-point x="50%" y="25%" content="Lorem ipsum dolor sit amet" size="60"></a-point>
239-
<a-point x="75%" y="25%" content="Lorem ipsum dolor sit amet" header="Lorem ipsum"></a-point>
240-
<a-point x="33%" y="50%" content="Lorem ipsum dolor sit amet" color="red"></a-point>
241-
<a-point x="66%" y="50%" content="Lorem ipsum dolor sit amet" opacity="0.7"></a-point>
242-
<a-point x="25%" y="75%" content="Lorem ipsum dolor sit amet" label="1"></a-point>
243-
<a-point x="50%" y="75%" content="Lorem ipsum dolor sit amet" textColor="white" color="black" label="2" opacity="1"></a-point>
244-
<a-point x="75%" y="75%" content="Lorem ipsum dolor sit amet" fontSize="30" label="3"></a-point>
257+
<a-point x="25%" y="25%"><template #content>
258+
<p>Lorem ipsum dolor sit amet</p>
259+
</template></a-point>
260+
<a-point x="50%" y="25%" size="60"><template #content>
261+
<p>Lorem ipsum dolor sit amet</p>
262+
</template></a-point>
263+
<a-point x="75%" y="25%"><template #header>
264+
<p>Lorem ipsum</p>
265+
</template><template #content>
266+
<p>Lorem ipsum dolor sit amet</p>
267+
</template></a-point>
268+
<a-point x="33%" y="50%" color="red"><template #content>
269+
<p>Lorem ipsum dolor sit amet</p>
270+
</template></a-point>
271+
<a-point x="66%" y="50%" opacity="0.7"><template #content>
272+
<p>Lorem ipsum dolor sit amet</p>
273+
</template></a-point>
274+
<a-point x="25%" y="75%"><template #label>
275+
<p>1</p>
276+
</template><template #content>
277+
<p>Lorem ipsum dolor sit amet</p>
278+
</template></a-point>
279+
<a-point x="50%" y="75%" textColor="white" color="black" opacity="1"><template #label>
280+
<p>2</p>
281+
</template><template #content>
282+
<p>Lorem ipsum dolor sit amet</p>
283+
</template></a-point>
284+
<a-point x="75%" y="75%" fontSize="30"><template #label>
285+
<p>3</p>
286+
</template><template #content>
287+
<p>Lorem ipsum dolor sit amet</p>
288+
</template></a-point>
245289
</annotate>
246290

247291
<annotate src="./images/annotateSampleImage.png" width="600" alt="sampleImage">
248-
<a-point x="33%" y="33%" content="Lorem ipsum dolor sit amet"></a-point>
249-
<a-point x="66%" y="33%" content="Lorem ipsum dolor sit amet" trigger="hover focus"></a-point>
250-
<a-point x="25%" y="66%" content="Lorem ipsum dolor sit amet" placement="left"></a-point>
251-
<a-point x="50%" y="66%" content="Lorem ipsum dolor sit amet" placement="bottom"></a-point>
252-
<a-point x="75%" y="66%" content="Lorem ipsum dolor sit amet" placement="right"></a-point>
292+
<a-point x="33%" y="33%"><template #content>
293+
<p>Lorem ipsum dolor sit amet</p>
294+
</template></a-point>
295+
<a-point x="66%" y="33%" trigger="hover focus"><template #content>
296+
<p>Lorem ipsum dolor sit amet</p>
297+
</template></a-point>
298+
<a-point x="25%" y="66%" placement="left"><template #content>
299+
<p>Lorem ipsum dolor sit amet</p>
300+
</template></a-point>
301+
<a-point x="50%" y="66%" placement="bottom"><template #content>
302+
<p>Lorem ipsum dolor sit amet</p>
303+
</template></a-point>
304+
<a-point x="75%" y="66%" placement="right"><template #content>
305+
<p>Lorem ipsum dolor sit amet</p>
306+
</template></a-point>
253307
</annotate>
254308

255309
<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
256-
<a-point x="25%" y="50%" content="some test text" label="1"></a-point>
257-
<a-point x="50%" y="50%" content="some test text" label="2" legend="bottom" header="some test text"></a-point>
258-
<a-point x="75%" y="50%" content="some test text" label="3" legend="both" header="some test text"></a-point>
310+
<a-point x="25%" y="50%"><template #label>
311+
<p>1</p>
312+
</template><template #content>
313+
<p>some test text</p>
314+
</template></a-point>
315+
<a-point x="50%" y="50%" legend="bottom"><template #label>
316+
<p>2</p>
317+
</template><template #header>
318+
<p>some test text</p>
319+
</template><template #content>
320+
<p>some test text</p>
321+
</template></a-point>
322+
<a-point x="75%" y="50%" legend="both"><template #label>
323+
<p>3</p>
324+
</template><template #header>
325+
<p>some test text</p>
326+
</template><template #content>
327+
<p>some test text</p>
328+
</template></a-point>
259329
</annotate>
260330

261331
<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
262-
<a-point x="25%" y="25%" content="some test text" label="1" legend="both"></a-point>
263-
<a-point x="50%" y="25%" content="some test text" label="2" legend="both"></a-point>
264-
<a-point x="75%" y="25%" content="some test text" label="3" legend="both"></a-point>
265-
<a-point x="25%" y="50%" content="some test text" label="4" legend="both" header="some test text"></a-point>
266-
<a-point x="50%" y="50%" content="some test text" label="5" legend="both" header="some test text"></a-point>
267-
<a-point x="75%" y="50%" content="some test text" label="6" legend="both" header="some test text"></a-point>
332+
<a-point x="25%" y="25%" legend="both"><template #label>
333+
<p>1</p>
334+
</template><template #content>
335+
<p>some test text</p>
336+
</template></a-point>
337+
<a-point x="50%" y="25%" legend="both"><template #label>
338+
<p>2</p>
339+
</template><template #content>
340+
<p>some test text</p>
341+
</template></a-point>
342+
<a-point x="75%" y="25%" legend="both"><template #label>
343+
<p>3</p>
344+
</template><template #content>
345+
<p>some test text</p>
346+
</template></a-point>
347+
<a-point x="25%" y="50%" legend="both"><template #label>
348+
<p>4</p>
349+
</template><template #header>
350+
<p>some test text</p>
351+
</template><template #content>
352+
<p>some test text</p>
353+
</template></a-point>
354+
<a-point x="50%" y="50%" legend="both"><template #label>
355+
<p>5</p>
356+
</template><template #header>
357+
<p>some test text</p>
358+
</template><template #content>
359+
<p>some test text</p>
360+
</template></a-point>
361+
<a-point x="75%" y="50%" legend="both"><template #label>
362+
<p>6</p>
363+
</template><template #header>
364+
<p>some test text</p>
365+
</template><template #content>
366+
<p>some test text</p>
367+
</template></a-point>
368+
</annotate>
369+
370+
<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
371+
<a-point x="25%" y="25%"><template #content>
372+
<h1 id="content">Content<a class="fa fa-anchor" href="#content" onclick="event.stopPropagation()"></a></h1>
373+
</template></a-point>
374+
<a-point x="50%" y="25%"><template #header>
375+
<p>😊</p>
376+
</template></a-point>
377+
<a-point x="75%" y="25%"><template #label>
378+
<p>❤️</p>
379+
</template></a-point>
268380
</annotate>
269381
<p><strong>Annotate Point customised shapes</strong></p>
270382
<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">

‎packages/cli/test/functional/test_site/expected/testAnnotate.page-vue-render.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/cli/test/functional/test_site/testAnnotate.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,13 @@
7171
<a-point x="75%" y="50%" content="some test text" label="6" legend="both" header="some test text"/>
7272
</annotate>
7373

74+
<!-- Markdown in content, header and label -->
75+
<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
76+
<a-point x="25%" y="25%" content="# Content" />
77+
<a-point x="50%" y="25%" header=":blush:" />
78+
<a-point x="75%" y="25%" label=":heart:"/>
79+
</annotate>
80+
7481
**Annotate Point customised shapes**
7582
<annotate src="./images/annotateSampleImage.png" width="1500" alt="sampleImage">
7683
<a-point x="25%" y="25%">

‎packages/core/src/html/MdAttributeRenderer.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,4 +188,10 @@ export class MdAttributeRenderer {
188188
processScrollTopButtonAttributes(node: MbNode) {
189189
this.processAttributeWithoutOverride(node, 'icon', true);
190190
}
191+
192+
processAnnotationPointAttributes(node: MbNode) {
193+
this.processAttributeWithoutOverride(node, 'content', false);
194+
this.processAttributeWithoutOverride(node, 'header', false);
195+
this.processAttributeWithoutOverride(node, 'label', false);
196+
}
191197
}

‎packages/core/src/html/NodeProcessor.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,9 @@ export class NodeProcessor {
247247
case 'scroll-top-button':
248248
this.mdAttributeRenderer.processScrollTopButtonAttributes(node);
249249
break;
250+
case 'a-point':
251+
this.mdAttributeRenderer.processAnnotationPointAttributes(node);
252+
break;
250253
case 'code':
251254
setCodeLineNumbers(node, this.config.codeLineNumbers);
252255
// fall through

‎packages/vue-components/src/__tests__/Annotation.spec.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { mount } from '@vue/test-utils';
2+
import { Dropdown } from 'floating-vue';
3+
import Annotation from '../annotations/Annotate.vue';
4+
import AnnotationPoint from '../annotations/AnnotatePoint.vue';
5+
6+
const DEFAULT_STUBS = {
7+
'a-point': AnnotationPoint,
8+
'v-popover': Dropdown,
9+
};
10+
11+
const ANNOTATION_POINTS = `
12+
<a-point x="25%" y="25%" content="25% from the left and 25% from the top" />
13+
<a-point x="50%" y="25%" content="50% from the left and 25% from the top" size="60"/>
14+
<a-point x="75%" y="25%" content="75% from the left and 25% from the top" header="This has a header"/>
15+
<a-point x="33%" y="50%" content="33% from the left and 50% from the top" color="red"/>
16+
<a-point x="66%" y="50%" content="66% from the left and 50% from the top" opacity="0.7"/>
17+
<a-point x="25%" y="75%" content="25% from the left and 75% from the top" label="1"/>
18+
<a-point x="50%" y="75%" content="50% from the left and 75% from the top"
19+
textColor="white" color="black" label="2" opacity="1"/>
20+
<a-point x="75%" y="75%" content="75% from the left and 75% from the top" fontSize="30" label="3"/>
21+
`;
22+
23+
const CUSTOMISED_ANNOTATION_POINTS = `
24+
<a-point x="25%" y="25%" content="25% from the left and 25% from the top">
25+
<div style="color:red">Hi</div>
26+
</a-point>
27+
<a-point x="75%" y="75%" content="75% from the left and 75% from the top">
28+
<span class="badge bg-primary">Primary</span>
29+
</a-point>
30+
`;
31+
32+
const MARKDOWN_ANNOTATION_POINTS = `
33+
<a-point x="25%" y="25%" content="[link](https://markbind.org/userGuide/gettingStarted.html)" />
34+
<a-point x="50%" y="50%" header="### Header" />
35+
<a-point x="75%" y="75%" label=":rocket:" />
36+
`;
37+
38+
describe('Annotation', () => {
39+
test('with different visual annotation points', async () => {
40+
const wrapper = mount(Annotation, {
41+
propsData: {
42+
src: './annotateSampleImage.png',
43+
},
44+
slots: {
45+
default: ANNOTATION_POINTS,
46+
},
47+
stubs: DEFAULT_STUBS,
48+
});
49+
await wrapper.vm.$nextTick();
50+
expect(wrapper.element).toMatchSnapshot();
51+
});
52+
53+
test('with customised annotation points', async () => {
54+
const wrapper = mount(Annotation, {
55+
propsData: {
56+
src: './annotateSampleImage.png',
57+
},
58+
slots: {
59+
default: CUSTOMISED_ANNOTATION_POINTS,
60+
},
61+
stubs: DEFAULT_STUBS,
62+
});
63+
await wrapper.vm.$nextTick();
64+
expect(wrapper.element).toMatchSnapshot();
65+
});
66+
67+
test('with markdown in header, content and label', async () => {
68+
const wrapper = mount(Annotation, {
69+
propsData: {
70+
src: './annotateSampleImage.png',
71+
},
72+
slots: {
73+
default: MARKDOWN_ANNOTATION_POINTS,
74+
},
75+
stubs: DEFAULT_STUBS,
76+
});
77+
await wrapper.vm.$nextTick();
78+
expect(wrapper.element).toMatchSnapshot();
79+
});
80+
});

0 commit comments

Comments
 (0)