Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #17586 from calixteman/editor_freehighlight_outline_inside

Browse Source 
[Editor] Remove the outline which is inside the free highlight shape
This commit is contained in:
calixteman 2024-01-30 17:56:52 +01:00 committed by GitHub
commit 245fd02141
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 68 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/display/draw_layer.js
View File

@ -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");

58
web/draw_layer_builder.css
View File

@ -56,22 +56,52 @@
fill-rule: evenodd;
fill: none;
&.hovered {
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)
);
&:not(.free) {
&.hovered:not(.selected) {
stroke: var(--hover-outline-color);
stroke-width: var(--outline-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)
);
}
.secondaryOutline {
stroke: var(--outline-color);
stroke-width: var(--outline-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 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));
}
&.selected {
.mainOutline {
stroke: var(--outline-around-color);
stroke-width: calc(
2 * (var(--outline-width) + var(--outline-around-width))
);
}
.secondaryOutline {
stroke: var(--outline-color);
stroke-width: calc(2 * var(--outline-width));
}
}
}
}