Add overlay class to overlays to allow CSS targeting

sketch_tool/lib/plugins/freeform.js

@@ -315,7 +315,12 @@ export default class Freeform extends BasePlugin {
       z.each(this.state, (spline, splineIndex) =>
         // Draw visible spline under invisible spline
         z(
-          'path.visible-' + splineIndex + '.freeform' + '.plugin-id-' + this.id,
+          'path.visible-' +
+            splineIndex +
+            '.freeform' +
+            (this.params.overlay ? '.overlay' : '') +
+            '.plugin-id-' +
+            this.id,
           {
             d: cubicSplinePathData(spline),
             style: `stroke: ${this.params.color}; stroke-width: ${this.params.strokeWidth}px; fill: none; opacity: ${this.params.opacity};`,

sketch_tool/lib/plugins/horizontal-line.js

@@ -125,6 +125,7 @@ export default class HorizontalLine extends BasePlugin {
           'line.visible-' +
             positionIndex +
             '.horizontal-line' +
+            (this.params.overlay ? '.overlay' : '') +
             '.plugin-id-' +
             this.id,
           {

sketch_tool/lib/plugins/line-segment.js

@@ -410,6 +410,7 @@ export default class LineSegment extends BasePlugin {
             'line.visible-' +
               ptIndex +
               '.line-segment' +
+              (this.params.overlay ? '.overlay' : '') +
               '.plugin-id-' +
               this.id,
             {

sketch_tool/lib/plugins/point.js

@@ -126,6 +126,7 @@ export default class Point extends BasePlugin {
       z.each(this.state, (position, positionIndex) =>
         z(
           'circle.point' +
+            (this.params.overlay ? '.overlay' : '') +
             '.plugin-id-' +
             this.id +
             '.state-index-' +

sketch_tool/lib/plugins/polyline.js

@@ -181,6 +181,7 @@ export default class Polyline extends BasePlugin {
           'path.visible-' +
             polylineIndex +
             '.polyline' +
+            (this.params.overlay ? '.overlay' : '') +
             '.plugin-id-' +
             this.id,
           {
@@ -197,7 +198,6 @@ export default class Polyline extends BasePlugin {
       ),
       z.each(this.state, (polyline, polylineIndex) =>
         // Draw invisible and selectable polyline under invisible points
-
         z('path.invisible-' + polylineIndex + this.readOnlyClass(), {
           d: polylinePathData(this.state[polylineIndex], this.params.closed),
           style: `

sketch_tool/lib/plugins/spline.js

@@ -161,16 +161,24 @@ export default class Spline extends BasePlugin {
       // Draw visible elements under invisible elements
       z.each(this.state, (spline, splineIndex) =>
         // Draw spline
-        z('path.visible-' + splineIndex + '.spline' + '.plugin-id-' + this.id, {
-          d: splinePathData(this.state[splineIndex]),
-          style: `
+        z(
+          'path.visible-' +
+            splineIndex +
+            '.spline' +
+            (this.params.overlay ? '.overlay' : '') +
+            '.plugin-id-' +
+            this.id,
+          {
+            d: splinePathData(this.state[splineIndex]),
+            style: `
               stroke: ${this.params.color};
               stroke-width: ${this.splineStrokeWidth(splineIndex)};
               stroke-dasharray: ${this.computeDashArray(this.params.dashStyle, this.splineStrokeWidth(splineIndex))};
               fill: none;
               opacity: ${this.params.opacity};
             `,
-        }),
+          },
+        ),
       ),
       // Draw points
       z.if(
@@ -181,6 +189,7 @@ export default class Spline extends BasePlugin {
               'circle.visible-' +
                 splineIndex +
                 '.spline' +
+                (this.params.overlay ? '.overlay' : '') +
                 '.plugin-id-' +
                 this.id,
               {

sketch_tool/lib/plugins/vertical-line.js

@@ -126,6 +126,7 @@ export default class VerticalLine extends BasePlugin {
           'line.visible-' +
             positionIndex +
             '.vertical-line' +
+            (this.params.overlay ? '.overlay' : '') +
             '.plugin-id-' +
             this.id,
           {

sketch_tool/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/sketchresponse",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A configurable JavaScript front-end drawing tool with plugin components - adapted for use in PrairieLearn",
   "private": false,
   "license": "LGPL-2.1",