[Editor] Remove the outline which is inside the free highlight shape

When an highlight is self-intersecting, the outline was drawn inside.
In order to remove it, we use a svg mask to exclude the shape inside
when drawing the outlines.
That leads to change the outline 1px,white-2px,blue-1px,white to a
2px,white-2px,blue: the part of the stroke which is inside the shape
is removed because of the mask.

src/display/draw_layer.js

@@ -135,9 +135,33 @@ class DrawLayer {
  path.setAttribute("d", outlines.toSVGPath());
  path.setAttribute("vector-effect", "non-scaling-stroke");
 
+ let maskId;
+ if (outlines.free) {
+ root.classList.add("free");
+ const mask = DrawLayer._svgFactory.createElement("mask");
+ defs.append(mask);
+ maskId = `mask_p${this.pageIndex}_${id}`;
+ mask.setAttribute("id", maskId);
+ mask.setAttribute("maskUnits", "objectBoundingBox");
+ const rect = DrawLayer._svgFactory.createElement("rect");
+ mask.append(rect);
+ rect.setAttribute("width", "1");
+ rect.setAttribute("height", "1");
+ rect.setAttribute("fill", "white");
+ const use = DrawLayer._svgFactory.createElement("use");
+ mask.append(use);
+ use.setAttribute("href", `#${pathId}`);
+ use.setAttribute("stroke", "none");
+ use.setAttribute("fill", "black");
+ use.setAttribute("fill-rule", "nonzero");
+ }
+
  const use1 = DrawLayer._svgFactory.createElement("use");
  root.append(use1);
  use1.setAttribute("href", `#${pathId}`);
+ if (maskId) {
+ use1.setAttribute("mask", `url(#${maskId})`);
+ }
  const use2 = use1.cloneNode();
  root.append(use2);
  use1.classList.add("mainOutline");

web/draw_layer_builder.css

@@ -56,22 +56,52 @@
  fill-rule: evenodd;
  fill: none;
 
- &.hovered {
- stroke: var(--hover-outline-color);
- stroke-width: var(--outline-width);
+ &:not(.free) {
+ &.hovered:not(.selected) {
+ stroke: var(--hover-outline-color);
+ stroke-width: var(--outline-width);
+ }
+
+ &.selected {
+ .mainOutline {
+ stroke: var(--outline-around-color);
+ stroke-width: calc(
+ var(--outline-width) + 2 * var(--outline-around-width)
+ );
+ }
+
+ .secondaryOutline {
+ stroke: var(--outline-color);
+ stroke-width: var(--outline-width);
+ }
+ }
  }
 
- &.selected {
- .mainOutline {
- stroke: var(--outline-around-color);
- stroke-width: calc(
- var(--outline-width) + 2 * var(--outline-around-width)
- );
+ &.free {
+ /*
+ When drawing the outline we use a mask in order to remove the parts
+ that are inside the shape. Unfortunately, this removes the part of the
+ outline that is inside the shape. To "fix" this we draw the outline
+ we increase the width to have what we want to be visible outside the
+ shape. This is not a perfect solution, but it works well enough.
+ */
+ &.hovered:not(.selected) {
+ stroke: var(--hover-outline-color);
+ stroke-width: calc(2 * var(--outline-width));
  }
 
- .secondaryOutline {
- stroke: var(--outline-color);
- stroke-width: var(--outline-width);
+ &.selected {
+ .mainOutline {
+ stroke: var(--outline-around-color);
+ stroke-width: calc(
+ 2 * (2 * var(--outline-width) + var(--outline-around-width))
+ );
+ }
+
+ .secondaryOutline {
+ stroke: var(--outline-color);
+ stroke-width: calc(2 * var(--outline-width));
+ }
  }
  }
  }