Skip to content

Commit f8496ab

Browse files
PerlkonigPerlkonig
committed
Fix enter/exit to allow you to not draw the background line
1 parent 53173a3 commit f8496ab

File tree

3 files changed

+29
-12
lines changed

3 files changed

+29
-12
lines changed

‎src/renderers/_base.ts‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6157,6 +6157,10 @@ export abstract class RendererBase {
61576157
if (note.dashed !== undefined && note.dashed !== null) {
61586158
dasharray = (note.dashed ).join(" ");
61596159
}
6160+
let bgopacity = 1;
6161+
if ( ("occlude" in note) && note.occlude === false) {
6162+
bgopacity = 0;
6163+
}
61606164
for (const node of (note.targets as ITarget[])) {
61616165
// outline the polygon if provided
61626166
if (polys !== undefined && polys[node.row][node.col] !== undefined) {
@@ -6166,7 +6170,7 @@ export abstract class RendererBase {
61666170
notes.circle(poly.r * 2)
61676171
.addClass(`aprender-annotation-${x2uid(cloned)}`)
61686172
.fill("none")
6169-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6173+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
61706174
.center(poly.cx, poly.cy)
61716175
.attr({ 'pointer-events': 'none' });
61726176
notes.circle(poly.r * 2)
@@ -6179,7 +6183,7 @@ export abstract class RendererBase {
61796183
notes.path(poly.path)
61806184
.addClass(`aprender-annotation-${x2uid(cloned)}`)
61816185
.fill("none")
6182-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6186+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
61836187
.attr({ 'pointer-events': 'none' });
61846188
notes.path(poly.path)
61856189
.addClass(`aprender-annotation-${x2uid(cloned)}`)
@@ -6190,7 +6194,7 @@ export abstract class RendererBase {
61906194
notes.polygon(poly.points.map(({x,y}) => [x,y].join(",")).join(" "))
61916195
.addClass(`aprender-annotation-${x2uid(cloned)}`)
61926196
.fill("none")
6193-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6197+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
61946198
.attr({ 'pointer-events': 'none' });
61956199
notes.polygon(poly.points.map(({x,y}) => [x,y].join(",")).join(" "))
61966200
.addClass(`aprender-annotation-${x2uid(cloned)}`)
@@ -6214,7 +6218,7 @@ export abstract class RendererBase {
62146218
notes.rect(this.cellsize, this.cellsize)
62156219
.addClass(`aprender-annotation-${x2uid(cloned)}`)
62166220
.fill("none")
6217-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6221+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
62186222
.center(pt.x, pt.y)
62196223
.attr({ 'pointer-events': 'none' });
62206224
notes.rect(this.cellsize, this.cellsize)
@@ -6227,7 +6231,7 @@ export abstract class RendererBase {
62276231
notes.circle(this.cellsize * 1.1, this.cellsize * 1.1)
62286232
.addClass(`aprender-annotation-${x2uid(cloned)}`)
62296233
.fill("none")
6230-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6234+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
62316235
.center(pt.x, pt.y)
62326236
.attr({ 'pointer-events': 'none' });
62336237
notes.circle(this.cellsize * 1.1, this.cellsize * 1.1)
@@ -6248,7 +6252,7 @@ export abstract class RendererBase {
62486252
notes.polygon(periph)
62496253
.addClass(`aprender-annotation-${x2uid(cloned)}`)
62506254
.fill("none")
6251-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6255+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
62526256
.center(pt.x, pt.y)
62536257
.attr({ 'pointer-events': 'none' });
62546258
notes.polygon(periph)
@@ -6276,6 +6280,10 @@ export abstract class RendererBase {
62766280
if (note.dashed !== undefined && note.dashed !== null) {
62776281
dasharray = (note.dashed ).join(" ");
62786282
}
6283+
let bgopacity = 1;
6284+
if ( ("occlude" in note) && note.occlude === false) {
6285+
bgopacity = 0;
6286+
}
62796287
for (const node of (note.targets as ITarget[])) {
62806288
// outline the polygon if provided
62816289
if (polys !== undefined) {
@@ -6285,7 +6293,7 @@ export abstract class RendererBase {
62856293
notes.circle(poly.r * 2)
62866294
.addClass(`aprender-annotation-${x2uid(cloned)}`)
62876295
.fill("none")
6288-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6296+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
62896297
.center(poly.cx, poly.cy)
62906298
.attr({ 'pointer-events': 'none' });
62916299
notes.circle(poly.r * 2)
@@ -6298,7 +6306,7 @@ export abstract class RendererBase {
62986306
notes.path(poly.path)
62996307
.addClass(`aprender-annotation-${x2uid(cloned)}`)
63006308
.fill("none")
6301-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6309+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
63026310
.attr({ 'pointer-events': 'none' });
63036311
notes.path(poly.path)
63046312
.addClass(`aprender-annotation-${x2uid(cloned)}`)
@@ -6309,7 +6317,7 @@ export abstract class RendererBase {
63096317
notes.polygon(poly.points.map(({x,y}) => [x,y].join(",")).join(" "))
63106318
.addClass(`aprender-annotation-${x2uid(cloned)}`)
63116319
.fill("none")
6312-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6320+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
63136321
.attr({ 'pointer-events': 'none' });
63146322
notes.polygon(poly.points.map(({x,y}) => [x,y].join(",")).join(" "))
63156323
.addClass(`aprender-annotation-${x2uid(cloned)}`)
@@ -6333,7 +6341,7 @@ export abstract class RendererBase {
63336341
notes.rect(this.cellsize, this.cellsize)
63346342
.addClass(`aprender-annotation-${x2uid(cloned)}`)
63356343
.fill("none")
6336-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6344+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
63376345
.center(pt.x, pt.y)
63386346
.attr({ 'pointer-events': 'none' });
63396347
notes.rect(this.cellsize, this.cellsize)
@@ -6346,7 +6354,7 @@ export abstract class RendererBase {
63466354
notes.circle(this.cellsize * 1.1, this.cellsize * 1.1)
63476355
.addClass(`aprender-annotation-${x2uid(cloned)}`)
63486356
.fill("none")
6349-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6357+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
63506358
.center(pt.x, pt.y)
63516359
.attr({ 'pointer-events': 'none' });
63526360
notes.circle(this.cellsize * 1.1, this.cellsize * 1.1)
@@ -6367,7 +6375,7 @@ export abstract class RendererBase {
63676375
notes.polygon(periph)
63686376
.addClass(`aprender-annotation-${x2uid(cloned)}`)
63696377
.fill("none")
6370-
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round"})
6378+
.stroke({color: this.options.colourContext.background, width: strokeWeight, linecap: "round", linejoin: "round", opacity: bgopacity})
63716379
.center(pt.x, pt.y)
63726380
.attr({ 'pointer-events': 'none' });
63736381
notes.polygon(periph)

‎src/schemas/schema.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1366,6 +1366,10 @@ export interface AnnotationBasic {
13661366
* Only meaningful for the `enter` and `exit` notations. Determines the shape of the dotted line.
13671367
*/
13681368
shape?: "square" | "circle" | "hexf" | "hexp";
1369+
/**
1370+
* Only meaningful for enter/exit notations. By default, a background is drawn before the dotted line. This isn't desireably in rare occasions where you want markers underneath the annotation to be visible.
1371+
*/
1372+
occlude?: boolean;
13691373
}
13701374
/**
13711375
* Delta annotations for the `sowing-*` renderers

‎src/schemas/schema.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,11 @@
454454
"description": "Only meaningful for the `enter` and `exit` notations. Determines the shape of the dotted line.",
455455
"enum": ["square", "circle", "hexf", "hexp"],
456456
"default": "square"
457+
},
458+
"occlude": {
459+
"description": "Only meaningful for enter/exit notations. By default, a background is drawn before the dotted line. This isn't desireably in rare occasions where you want markers underneath the annotation to be visible.",
460+
"type": "boolean",
461+
"default": true
457462
}
458463
},
459464
"required": ["type", "targets"],

0 commit comments

Comments
 (0)