mirror of
https://github.com/mozilla/pdf.js.git
synced 2026-05-31 07:11:00 +02:00
957e004e38
References <https://bugzilla.mozilla.org/show_bug.cgi?id=1879559> (“In HCM, the text selection is barely visible”). Continues work from @calixteman who had a partial patch. This PR improves viewer text-selection highlighting by rendering selection shapes in the draw layer. * add selection overlay rendering in the draw layer * significant code relates to selections spanning multiple text layers/pages, and edges/end-of-content boundaries * clear selection on rotate/scale/scroll/spread changes My main question is: how should it appear? I don’t have access to the Figma file linked on bugzilla. In the CSS (`draw_layer-builder.css`) there are 3 blocks: * default * `@supports` for browsers supporting `backdrop-filter` * `forced-colors` mode So it’s possible to design for those (or more). Personally, the `backdrop-filter: invert(1)` is the most contrast, so perhaps it’s better to use something else as the default, and to use `invert(1)` if high contrast mode is used (maybe with a `prefers-contrast` media query instead)?
88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
/* Copyright 2022 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import { DrawLayer } from "pdfjs-lib";
|
|
|
|
/**
|
|
* @typedef DrawLayerBuilderOptions
|
|
* Configuration for {@linkcode DrawLayerBuilder}.
|
|
* @property {number} pageIndex
|
|
* Zero-based page index.
|
|
* @property {Element | null} [textLayer]
|
|
* Text layer element (optional).
|
|
* @property {Object | null} [filterFactory]
|
|
* Filter factory used to style selections (optional).
|
|
* @property {Object | null} [pageColors]
|
|
* Page foreground/background colors for HCM (optional).
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} DrawLayerBuilderRenderOptions
|
|
* @property {string} [intent] - The default value is "display".
|
|
*/
|
|
|
|
class DrawLayerBuilder {
|
|
#drawLayer = null;
|
|
|
|
/**
|
|
* @param {DrawLayerBuilderOptions} options
|
|
* Configuration.
|
|
* @returns
|
|
* Instance.
|
|
*/
|
|
constructor(options) {
|
|
this.pageIndex = options.pageIndex;
|
|
this.textLayer = options.textLayer || null;
|
|
this.filterFactory = options.filterFactory || null;
|
|
this.pageColors = options.pageColors || null;
|
|
}
|
|
|
|
/**
|
|
* @param {DrawLayerBuilderRenderOptions} options
|
|
* @returns {Promise<void>}
|
|
*/
|
|
async render({ intent = "display" }) {
|
|
if (intent !== "display" || this.#drawLayer || this._cancelled) {
|
|
return;
|
|
}
|
|
this.#drawLayer = new DrawLayer({
|
|
pageIndex: this.pageIndex,
|
|
textLayer: this.textLayer,
|
|
filterFactory: this.filterFactory,
|
|
pageColors: this.pageColors,
|
|
});
|
|
}
|
|
|
|
cancel() {
|
|
this._cancelled = true;
|
|
|
|
if (!this.#drawLayer) {
|
|
return;
|
|
}
|
|
this.#drawLayer.destroy();
|
|
this.#drawLayer = null;
|
|
}
|
|
|
|
setParent(parent) {
|
|
this.#drawLayer?.setParent(parent);
|
|
}
|
|
|
|
getDrawLayer() {
|
|
return this.#drawLayer;
|
|
}
|
|
}
|
|
|
|
export { DrawLayerBuilder };
|