From 1e03740e012a09596654a6f299637c4b22423f10 Mon Sep 17 00:00:00 2001 From: Calixte Denizet Date: Wed, 20 Nov 2024 22:26:38 +0100 Subject: [PATCH] [Editor] Add a new base class to allow to add a drawing in the SVG layer. This patch makes a clear separation between the way to draw and the editing stuff. It adds a class DrawEditor which should be extended in order to create new drawing tools. As an example, the ink tool has been rewritten in order to use it. --- src/core/annotation.js | 54 +- src/display/draw_layer.js | 16 +- src/display/editor/annotation_editor_layer.js | 103 +- src/display/editor/draw.js | 817 +++++++++++ src/display/editor/drawers/inkdraw.js | 787 ++++++++++ src/display/editor/drawers/outline.js | 41 + src/display/editor/editor.js | 133 +- src/display/editor/ink.js | 1266 ++--------------- src/display/editor/tools.js | 23 + src/shared/util.js | 1 + test/integration/ink_editor_spec.mjs | 41 - test/test_manifest.json | 212 ++- test/unit/annotation_spec.js | 135 +- web/annotation_editor_layer_builder.css | 25 +- web/draw_layer_builder.css | 21 + web/viewer.html | 2 +- 16 files changed, 2273 insertions(+), 1404 deletions(-) create mode 100644 src/display/editor/draw.js create mode 100644 src/display/editor/drawers/inkdraw.js diff --git a/src/core/annotation.js b/src/core/annotation.js index e970dc34cddd4..95a5a22f2f35b 100644 --- a/src/core/annotation.js +++ b/src/core/annotation.js @@ -4466,7 +4466,7 @@ class InkAnnotation extends MarkupAnnotation { ink.set("Subtype", Name.get("Ink")); ink.set("CreationDate", `D:${getModificationDate()}`); ink.set("Rect", rect); - ink.set("InkList", outlines?.points || paths.map(p => p.points)); + ink.set("InkList", outlines?.points || paths.points); ink.set("F", 4); ink.set("Rotate", rotation); @@ -4523,28 +4523,31 @@ class InkAnnotation extends MarkupAnnotation { appearanceBuffer.push("/R0 gs"); } - const buffer = []; - for (const { bezier } of paths) { - buffer.length = 0; - buffer.push( - `${numberToString(bezier[0])} ${numberToString(bezier[1])} m` - ); - if (bezier.length === 2) { - buffer.push( - `${numberToString(bezier[0])} ${numberToString(bezier[1])} l S` - ); - } else { - for (let i = 2, ii = bezier.length; i < ii; i += 6) { - const curve = bezier - .slice(i, i + 6) - .map(numberToString) - .join(" "); - buffer.push(`${curve} c`); + for (const outline of paths.lines) { + for (let i = 0, ii = outline.length; i < ii; i += 6) { + if (isNaN(outline[i]) || outline[i] === null) { + appearanceBuffer.push( + `${numberToString(outline[i + 4])} ${numberToString( + outline[i + 5] + )} m` + ); + } else { + const [c1x, c1y, c2x, c2y, x, y] = outline.slice(i, i + 6); + appearanceBuffer.push( + `${numberToString(c1x)} ${numberToString(c1y)} ` + + `${numberToString(c2x)} ${numberToString(c2y)} ` + + `${numberToString(x)} ${numberToString(y)} c` + ); } - buffer.push("S"); } - appearanceBuffer.push(buffer.join("\n")); + if (outline.length === 6) { + appearanceBuffer.push( + `${numberToString(outline[4])} ${numberToString(outline[5])} l` + ); + } } + appearanceBuffer.push("S"); + const appearance = appearanceBuffer.join("\n"); const appearanceStreamDict = new Dict(xref); @@ -4594,11 +4597,12 @@ class InkAnnotation extends MarkupAnnotation { )} l` ); } else { - const curve = outline - .slice(i, i + 6) - .map(numberToString) - .join(" "); - appearanceBuffer.push(`${curve} c`); + const [c1x, c1y, c2x, c2y, x, y] = outline.slice(i, i + 6); + appearanceBuffer.push( + `${numberToString(c1x)} ${numberToString(c1y)} ` + + `${numberToString(c2x)} ${numberToString(c2y)} ` + + `${numberToString(x)} ${numberToString(y)} c` + ); } } appearanceBuffer.push("h f"); diff --git a/src/display/draw_layer.js b/src/display/draw_layer.js index d7592069814d8..c6fad57639781 100644 --- a/src/display/draw_layer.js +++ b/src/display/draw_layer.js @@ -183,7 +183,11 @@ class DrawLayer { this.updateProperties(id, properties); } - updateProperties(elementOrId, { root, bbox, rootClass, path }) { + updateProperties(elementOrId, properties) { + if (!properties) { + return; + } + const { root, bbox, rootClass, path } = properties; const element = typeof elementOrId === "number" ? this.#mapping.get(elementOrId) @@ -207,6 +211,16 @@ class DrawLayer { } } + updateParent(id, layer) { + if (layer === this) { + return; + } + const root = this.#mapping.get(id); + layer.#parent.append(root); + this.#mapping.delete(id); + layer.#mapping.set(id, root); + } + remove(id) { this.#toUpdate.delete(id); if (this.#parent === null) { diff --git a/src/display/editor/annotation_editor_layer.js b/src/display/editor/annotation_editor_layer.js index 1cce512288524..d1a9283e2d81c 100644 --- a/src/display/editor/annotation_editor_layer.js +++ b/src/display/editor/annotation_editor_layer.js @@ -72,10 +72,12 @@ class AnnotationEditorLayer { #hadPointerDown = false; - #isCleaningUp = false; - #isDisabling = false; + #isDrawing = false; + + #drawingAC = null; + #textLayer = null; #textSelectionAC = null; @@ -160,12 +162,9 @@ class AnnotationEditorLayer { this.disableClick(); return; case AnnotationEditorType.INK: - // We always want to have an ink editor ready to draw in. - this.addInkEditorIfNeeded(false); - this.disableTextSelection(); this.togglePointerEvents(true); - this.disableClick(); + this.enableClick(); break; case AnnotationEditorType.HIGHLIGHT: this.enableTextSelection(); @@ -193,30 +192,6 @@ class AnnotationEditorLayer { return textLayer === this.#textLayer?.div; } - addInkEditorIfNeeded(isCommitting) { - if (this.#uiManager.getMode() !== AnnotationEditorType.INK) { - // We don't want to add an ink editor if we're not in ink mode! - return; - } - - if (!isCommitting) { - // We're removing an editor but an empty one can already exist so in this - // case we don't need to create a new one. - for (const editor of this.#editors.values()) { - if (editor.isEmpty()) { - editor.setInBackground(); - return; - } - } - } - - const editor = this.createAndAddNewEditor( - { offsetX: 0, offsetY: 0 }, - /* isCentered = */ false - ); - editor.setInBackground(); - } - /** * Set the editing state. * @param {boolean} isEditing @@ -233,6 +208,10 @@ class AnnotationEditorLayer { this.#uiManager.addCommands(params); } + cleanUndoStack(type) { + this.#uiManager.cleanUndoStack(type); + } + toggleDrawing(enabled = false) { this.div.classList.toggle("drawing", !enabled); } @@ -482,10 +461,6 @@ class AnnotationEditorLayer { this.#uiManager.removeEditor(editor); editor.div.remove(); editor.isAttachedToDOM = false; - - if (!this.#isCleaningUp) { - this.addInkEditorIfNeeded(/* isCommitting = */ false); - } } /** @@ -766,6 +741,13 @@ class AnnotationEditorLayer { } this.#hadPointerDown = false; + if ( + this.#currentEditorType?.isDrawer && + this.#currentEditorType.supportMultipleDrawings + ) { + return; + } + if (!this.#allowClick) { this.#allowClick = true; return; @@ -808,10 +790,51 @@ class AnnotationEditorLayer { this.#hadPointerDown = true; + if (this.#currentEditorType?.isDrawer) { + this.setDrawingSession(event); + return; + } + const editor = this.#uiManager.getActive(); this.#allowClick = !editor || editor.isEmpty(); } + setDrawingSession(event) { + if (this.#isDrawing) { + this.#currentEditorType.startDrawing(this, false, event); + return; + } + + this.#isDrawing = true; + this.#drawingAC = new AbortController(); + const signal = this.#uiManager.combinedSignal(this.#drawingAC); + this.div.focus(); + this.div.addEventListener( + "blur", + ({ relatedTarget }) => { + if (relatedTarget && !this.div.contains(relatedTarget)) { + this.commitOrRemove(); + } + }, + { + signal, + } + ); + this.#uiManager.disableUserSelect(true); + this.#currentEditorType.startDrawing(this, false, event); + } + + endDrawingSession() { + if (!this.#isDrawing) { + return; + } + this.#drawingAC.abort(); + this.#drawingAC = null; + this.#isDrawing = false; + this.#uiManager.disableUserSelect(false); + this.#currentEditorType.endDrawing(this); + } + /** * * @param {AnnotationEditor} editor @@ -828,6 +851,14 @@ class AnnotationEditorLayer { return true; } + commitOrRemove() { + if (this.#isDrawing) { + this.endDrawingSession(); + return true; + } + return false; + } + /** * Destroy the main editor. */ @@ -858,13 +889,11 @@ class AnnotationEditorLayer { // When we're cleaning up, some editors are removed but we don't want // to add a new one which will induce an addition in this.#editors, hence // an infinite loop. - this.#isCleaningUp = true; for (const editor of this.#editors.values()) { if (editor.isEmpty()) { editor.remove(); } } - this.#isCleaningUp = false; } /** @@ -896,6 +925,7 @@ class AnnotationEditorLayer { const oldRotation = this.viewport.rotation; const rotation = viewport.rotation; + this.viewport = viewport; setLayerDimensions(this.div, { rotation }); if (oldRotation !== rotation) { @@ -903,7 +933,6 @@ class AnnotationEditorLayer { editor.rotate(rotation); } } - this.addInkEditorIfNeeded(/* isCommitting = */ false); } /** diff --git a/src/display/editor/draw.js b/src/display/editor/draw.js new file mode 100644 index 0000000000000..2b5f99ef69a34 --- /dev/null +++ b/src/display/editor/draw.js @@ -0,0 +1,817 @@ +/* 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 { AnnotationEditorParamsType, unreachable } from "../../shared/util.js"; +import { AnnotationEditor } from "./editor.js"; +import { noContextMenu } from "../display_utils.js"; + +class DrawingOptions { + #svgProperties = Object.create(null); + + updateProperty(name, value) { + this[name] = value; + this.updateSVGProperty(name, value); + } + + updateProperties(properties) { + if (!properties) { + return; + } + for (const [name, value] of Object.entries(properties)) { + this.updateProperty(name, value); + } + } + + updateSVGProperty(name, value) { + this.#svgProperties[name] = value; + } + + toSVGProperties() { + const root = this.#svgProperties; + this.#svgProperties = Object.create(null); + if (!root) { + this.updateProperties(this); + return this.toSVGProperties(); + } + return { root }; + } + + reset() { + this.#svgProperties = null; + } + + clone() { + unreachable("Not implemented"); + } +} + +/** + * Basic draw editor. + */ +class DrawingEditor extends AnnotationEditor { + #drawOutlines = null; + + #mustBeCommitted; + + static _currentDrawId = -1; + + static _currentDraw = null; + + static _currentDrawingOptions = null; + + constructor(params) { + super(params); + this._drawId = null; + this.#mustBeCommitted = params.mustBeCommitted || false; + + if (params.drawOutlines) { + this.#createDrawOutlines(params); + this.#addToDrawLayer(); + } + } + + #createDrawOutlines({ drawOutlines, drawId, drawingOptions }) { + this.#drawOutlines = drawOutlines; + this._drawingOptions ||= drawingOptions; + + if (drawId >= 0) { + this._drawId = drawId; + // We need to redraw the highlight because we change the coordinates to be + // in the box coordinate system. + this.parent.drawLayer.finalizeDraw( + drawId, + drawOutlines.defaultProperties + ); + } else { + // We create a new drawing. + this._drawId = this.#createDrawing(drawOutlines, this.parent); + } + + this.#updateBbox(drawOutlines.box); + } + + #createDrawing(drawOutlines, parent) { + const { id } = parent.drawLayer.draw( + DrawingEditor._mergeSVGProperties( + this._drawingOptions.toSVGProperties(), + drawOutlines.defaultSVGProperties + ), + /* isPathUpdatable = */ false, + /* hasClip = */ false + ); + return id; + } + + static _mergeSVGProperties(p1, p2) { + const p1Keys = new Set(Object.keys(p1)); + + for (const [key, value] of Object.entries(p2)) { + if (p1Keys.has(key)) { + Object.assign(p1[key], value); + } else { + p1[key] = value; + } + } + return p1; + } + + /** + * @param {Object} options + * @return {DrawingOptions} the default options to use for a new editor. + */ + static getDefaultDrawingOptions(_options) { + unreachable("Not implemented"); + } + + /** + * @return {Map} a map between the + * parameter types and the name of the options. + */ + // eslint-disable-next-line getter-return + static get typesMap() { + unreachable("Not implemented"); + } + + static get isDrawer() { + return true; + } + + /** + * @returns {boolean} `true` if several drawings can be add to the annotation. + */ + static get supportMultipleDrawings() { + return false; + } + + /** @inheritdoc */ + static updateDefaultParams(type, value) { + const propertyName = this.typesMap.get(type); + if (propertyName) { + this._defaultDrawingOptions.updateProperty(propertyName, value); + } + } + + /** @inheritdoc */ + updateParams(type, value) { + const propertyName = this.constructor.typesMap.get(type); + if (propertyName) { + this._updateProperty(type, propertyName, value); + } + } + + /** @inheritdoc */ + static get defaultPropertiesToUpdate() { + const properties = []; + const options = this._defaultDrawingOptions; + for (const [type, name] of this.typesMap) { + properties.push([type, options[name]]); + } + return properties; + } + + /** @inheritdoc */ + get propertiesToUpdate() { + const properties = []; + const { _drawingOptions } = this; + for (const [type, name] of this.constructor.typesMap) { + properties.push([type, _drawingOptions[name]]); + } + return properties; + } + + /** + * Update a property and make this action undoable. + * @param {string} color + */ + _updateProperty(type, name, value) { + const options = this._drawingOptions; + const savedValue = options[name]; + const setter = val => { + options.updateProperty(name, val); + const bbox = this.#drawOutlines.updateProperty(name, val); + if (bbox) { + this.#updateBbox(bbox); + } + if (this.parent) { + this.parent.drawLayer.updateProperties( + this._drawId, + options.toSVGProperties() + ); + } + }; + this.addCommands({ + cmd: setter.bind(this, value), + undo: setter.bind(this, savedValue), + post: this._uiManager.updateUI.bind(this._uiManager, this), + mustExec: true, + type, + overwriteIfSameType: true, + keepUndo: true, + }); + } + + /** @inheritdoc */ + _onResizing() { + this.parent.drawLayer.updateProperties( + this._drawId, + DrawingEditor._mergeSVGProperties( + this.#drawOutlines.getPathResizingSVGProperties( + this.#convertToDrawSpace() + ), + { + bbox: this.#rotateBox(), + } + ) + ); + } + + /** @inheritdoc */ + _onResized() { + this.parent.drawLayer.updateProperties( + this._drawId, + DrawingEditor._mergeSVGProperties( + this.#drawOutlines.getPathResizedSVGProperties( + this.#convertToDrawSpace() + ), + { + bbox: this.#rotateBox(), + } + ) + ); + } + + /** @inheritdoc */ + _onTranslating(x, y) { + this.parent.drawLayer.updateProperties(this._drawId, { + bbox: this.#rotateBox(x, y), + }); + } + + /** @inheritdoc */ + _onTranslated() { + this.parent.drawLayer.updateProperties( + this._drawId, + DrawingEditor._mergeSVGProperties( + this.#drawOutlines.getPathTranslatedSVGProperties( + this.#convertToDrawSpace(), + this.parentDimensions + ), + { + bbox: this.#rotateBox(), + } + ) + ); + } + + _onStartDragging() { + this.parent.drawLayer.updateProperties(this._drawId, { + rootClass: { + moving: true, + }, + }); + } + + _onStopDragging() { + this.parent.drawLayer.updateProperties(this._drawId, { + rootClass: { + moving: false, + }, + }); + } + + /** @inheritdoc */ + commit() { + super.commit(); + + this.disableEditMode(); + this.disableEditing(); + } + + /** @inheritdoc */ + disableEditing() { + super.disableEditing(); + this.div.classList.toggle("disabled", true); + } + + /** @inheritdoc */ + enableEditing() { + super.enableEditing(); + this.div.classList.toggle("disabled", false); + } + + /** @inheritdoc */ + getBaseTranslation() { + // The editor itself doesn't have any CSS border (we're drawing one + // ourselves in using SVG). + return [0, 0]; + } + + /** @inheritdoc */ + get isResizable() { + return true; + } + + /** @inheritdoc */ + onceAdded() { + if (!this.annotationElementId) { + this.parent.addUndoableEditor(this); + } + this._isDraggable = true; + if (this.#mustBeCommitted) { + this.#mustBeCommitted = false; + this.commit(); + this.parent.setSelected(this); + this.div.focus(); + } + } + + /** @inheritdoc */ + remove() { + this.#cleanDrawLayer(); + super.remove(); + } + + /** @inheritdoc */ + rebuild() { + if (!this.parent) { + return; + } + super.rebuild(); + if (this.div === null) { + return; + } + + this.#addToDrawLayer(); + this.#updateBbox(this.#drawOutlines.box); + + if (!this.isAttachedToDOM) { + // At some point this editor was removed and we're rebuilding it, + // hence we must add it to its parent. + this.parent.add(this); + } + } + + setParent(parent) { + let mustBeSelected = false; + if (this.parent && !parent) { + this._uiManager.removeShouldRescale(this); + this.#cleanDrawLayer(); + } else if (parent) { + this._uiManager.addShouldRescale(this); + this.#addToDrawLayer(parent); + // If mustBeSelected is true it means that this editor was selected + // when its parent has been destroyed, hence we must select it again. + mustBeSelected = + !this.parent && this.div?.classList.contains("selectedEditor"); + } + super.setParent(parent); + if (mustBeSelected) { + // We select it after the parent has been set. + this.select(); + } + } + + #cleanDrawLayer() { + if (this._drawId === null || !this.parent) { + return; + } + this.parent.drawLayer.remove(this._drawId); + this._drawId = null; + + // All the SVG properties must be reset in order to make possible the undo. + this._drawingOptions.reset(); + } + + #addToDrawLayer(parent = this.parent) { + if (this._drawId !== null && this.parent === parent) { + return; + } + if (this._drawId !== null) { + // The parent has changed, we need to move the drawing to the new parent. + this.parent.drawLayer.updateParent(this._drawId, parent.drawLayer); + return; + } + this._drawId = this.#createDrawing(this.#drawOutlines, parent); + } + + #convertToParentSpace([x, y, width, height]) { + const { + parentDimensions: [pW, pH], + rotation, + } = this; + switch (rotation) { + case 90: + return [y, 1 - x, width * (pH / pW), height * (pW / pH)]; + case 180: + return [1 - x, 1 - y, width, height]; + case 270: + return [1 - y, x, width * (pH / pW), height * (pW / pH)]; + default: + return [x, y, width, height]; + } + } + + #convertToDrawSpace() { + const { + x, + y, + width, + height, + parentDimensions: [pW, pH], + rotation, + } = this; + switch (rotation) { + case 90: + return [1 - y, x, width * (pW / pH), height * (pH / pW)]; + case 180: + return [1 - x, 1 - y, width, height]; + case 270: + return [y, 1 - x, width * (pW / pH), height * (pH / pW)]; + default: + return [x, y, width, height]; + } + } + + #updateBbox(bbox) { + [this.x, this.y, this.width, this.height] = + this.#convertToParentSpace(bbox); + if (this.div) { + this.fixAndSetPosition(); + const [parentWidth, parentHeight] = this.parentDimensions; + this.setDims(this.width * parentWidth, this.height * parentHeight); + } + this._onResized(); + } + + #rotateBox() { + // We've to deal with two rotations: the rotation of the annotation and the + // rotation of the parent page. + // When the page is rotated, all the layers are just rotated thanks to CSS + // but there is a notable exception: the canvas wrapper. + // The canvas wrapper is not rotated but the dimensions are (or not) swapped + // and the page is redrawn with the rotation applied to the canvas. + // The drawn layer is under the canvas wrapper and is not rotated so we have + // to "manually" rotate the coordinates. + // + // The coordinates (this.x, this.y) correspond to the top-left corner of + // the editor after it has been rotated in the page coordinate system. + + const { + x, + y, + width, + height, + rotation, + parentRotation, + parentDimensions: [pW, pH], + } = this; + switch ((rotation * 4 + parentRotation) / 90) { + case 1: + // 0 -> 90 + return [1 - y - height, x, height, width]; + case 2: + // 0 -> 180 + return [1 - x - width, 1 - y - height, width, height]; + case 3: + // 0 -> 270 + return [y, 1 - x - width, height, width]; + case 4: + // 90 -> 0 + return [ + x, + y - width * (pW / pH), + height * (pH / pW), + width * (pW / pH), + ]; + case 5: + // 90 -> 90 + return [1 - y, x, width * (pW / pH), height * (pH / pW)]; + case 6: + // 90 -> 180 + return [ + 1 - x - height * (pH / pW), + 1 - y, + height * (pH / pW), + width * (pW / pH), + ]; + case 7: + // 90 -> 270 + return [ + y - width * (pW / pH), + 1 - x - height * (pH / pW), + width * (pW / pH), + height * (pH / pW), + ]; + case 8: + // 180 -> 0 + return [x - width, y - height, width, height]; + case 9: + // 180 -> 90 + return [1 - y, x - width, height, width]; + case 10: + // 180 -> 180 + return [1 - x, 1 - y, width, height]; + case 11: + // 180 -> 270 + return [y - height, 1 - x, height, width]; + case 12: + // 270 -> 0 + return [ + x - height * (pH / pW), + y, + height * (pH / pW), + width * (pW / pH), + ]; + case 13: + // 270 -> 90 + return [ + 1 - y - width * (pW / pH), + x - height * (pH / pW), + width * (pW / pH), + height * (pH / pW), + ]; + case 14: + // 270 -> 180 + return [ + 1 - x, + 1 - y - width * (pW / pH), + height * (pH / pW), + width * (pW / pH), + ]; + case 15: + // 270 -> 270 + return [y, 1 - x, width * (pW / pH), height * (pH / pW)]; + default: + // 0 -> 0 + return [x, y, width, height]; + } + } + + /** @inheritdoc */ + rotate() { + if (!this.parent) { + return; + } + this.parent.drawLayer.updateProperties( + this._drawId, + DrawingEditor._mergeSVGProperties( + { + bbox: this.#rotateBox(), + }, + this.#drawOutlines.updateRotation( + (this.parentRotation - this.rotation + 360) % 360 + ) + ) + ); + } + + onScaleChanging() { + if (!this.parent) { + return; + } + this.#updateBbox( + this.#drawOutlines.updateParentDimensions( + this.parentDimensions, + this.parent.scale + ) + ); + } + + /** @inheritdoc */ + render() { + if (this.div) { + return this.div; + } + + const div = super.render(); + div.classList.add("draw"); + + const drawDiv = document.createElement("div"); + div.append(drawDiv); + drawDiv.setAttribute("aria-hidden", "true"); + drawDiv.className = "internal"; + const [parentWidth, parentHeight] = this.parentDimensions; + this.setDims(this.width * parentWidth, this.height * parentHeight); + this._uiManager.addShouldRescale(this); + this.disableEditing(); + + return div; + } + + /** + * Create a new drawer instance. + * @param {number} x - The x coordinate of the event. + * @param {number} y - The y coordinate of the event. + * @param {number} parentWidth - The parent width. + * @param {number} parentHeight - The parent height. + * @param {number} rotation - The parent rotation. + */ + static createDrawerInstance(_x, _y, _parentWidth, _parentHeight, _rotation) { + unreachable("Not implemented"); + } + + static startDrawing(parent, _isLTR, { target, offsetX: x, offsetY: y }) { + const { + viewport: { rotation }, + } = parent; + const { width: parentWidth, height: parentHeight } = + target.getBoundingClientRect(); + const ac = new AbortController(); + const signal = parent.combinedSignal(ac); + + window.addEventListener( + "pointerup", + e => { + ac.abort(); + parent.toggleDrawing(true); + this._endDraw(parent, e); + }, + { signal } + ); + window.addEventListener( + "pointerdown", + e => { + // Avoid to have undesired clicks during the drawing. + e.preventDefault(); + e.stopPropagation(); + }, + { + capture: true, + passive: false, + signal, + } + ); + window.addEventListener("contextmenu", noContextMenu, { signal }); + target.addEventListener("pointermove", this._drawMove.bind(this, parent), { + signal, + }); + parent.toggleDrawing(); + + if (this._currentDraw) { + parent.drawLayer.updateProperties( + this._currentDrawId, + this._currentDraw.startNew(x, y, parentWidth, parentHeight, rotation) + ); + return; + } + + this._currentDraw = this.createDrawerInstance( + x, + y, + parentWidth, + parentHeight, + rotation + ); + this._currentDrawingOptions = this.getDefaultDrawingOptions(); + + ({ id: this._currentDrawId } = parent.drawLayer.draw( + this._mergeSVGProperties( + this._currentDrawingOptions.toSVGProperties(), + this._currentDraw.defaultSVGProperties + ), + /* isPathUpdatable = */ true, + /* hasClip = */ false + )); + } + + static _drawMove(parent, { offsetX, offsetY }) { + parent.drawLayer.updateProperties( + this._currentDrawId, + this._currentDraw.add(offsetX, offsetY) + ); + } + + static _endDraw(parent, { offsetX, offsetY }) { + parent.drawLayer.updateProperties( + this._currentDrawId, + this._currentDraw.end(offsetX, offsetY) + ); + if (this.supportMultipleDrawings) { + const draw = this._currentDraw; + const drawId = this._currentDrawId; + const lastElement = draw.getLastElement(); + parent.addCommands({ + cmd: () => { + parent.drawLayer.updateProperties( + drawId, + draw.setLastElement(lastElement) + ); + }, + undo: () => { + parent.drawLayer.updateProperties(drawId, draw.removeLastElement()); + }, + mustExec: false, + type: AnnotationEditorParamsType.DRAW_STEP, + }); + + return; + } + + this.endDrawing(parent); + } + + static endDrawing(parent) { + parent.toggleDrawing(true); + parent.cleanUndoStack(AnnotationEditorParamsType.DRAW_STEP); + if (!this._currentDraw) { + return; + } + + if (!this._currentDraw.isEmpty()) { + const { + pageDimensions: [pageWidth, pageHeight], + scale, + } = parent; + + parent.createAndAddNewEditor({ offsetX: 0, offsetY: 0 }, false, { + drawId: this._currentDrawId, + drawOutlines: this._currentDraw.getOutlines( + pageWidth * scale, + pageHeight * scale, + scale + ), + drawingOptions: this._currentDrawingOptions, + mustBeCommitted: true, + }); + } else { + parent.drawLayer.remove(this._currentDrawId); + } + this._currentDrawId = -1; + this._currentDraw = null; + this._currentDrawingOptions = null; + } + + /** + * Create the drawing options. + * @param {Object} _data + */ + createDrawingOptions(_data) {} + + /** + * Deserialize the drawing outlines. + * @param {number} pageX - The x coordinate of the page. + * @param {number} pageY - The y coordinate of the page. + * @param {number} pageWidth - The width of the page. + * @param {number} pageHeight - The height of the page. + * @param {Object} data - The data to deserialize. + * @returns {Object} The deserialized outlines. + */ + static deserializeDraw(_pageX, _pageY, _pageWidth, _pageHeight, _data) { + unreachable("Not implemented"); + } + + /** @inheritdoc */ + static async deserialize(data, parent, uiManager) { + const { + rawDims: { pageWidth, pageHeight, pageX, pageY }, + } = parent.viewport; + const drawOutlines = this.deserializeDraw( + pageX, + pageY, + pageWidth, + pageHeight, + data + ); + const editor = await super.deserialize(data, parent, uiManager); + editor.createDrawingOptions(data); + editor.#createDrawOutlines({ drawOutlines }); + editor.#addToDrawLayer(); + editor.onScaleChanging(); + editor.rotate(); + + return editor; + } + + serializeDraw() { + const [pageX, pageY] = this.pageTranslation; + const [pageWidth, pageHeight] = this.pageDimensions; + return this.#drawOutlines.serialize([pageX, pageY, pageWidth, pageHeight]); + } + + /** @inheritdoc */ + renderAnnotationElement(annotation) { + annotation.updateEdited({ + rect: this.getRect(0, 0), + }); + + return null; + } + + static canCreateNewEmptyEditor() { + return false; + } +} + +export { DrawingEditor, DrawingOptions }; diff --git a/src/display/editor/drawers/inkdraw.js b/src/display/editor/drawers/inkdraw.js new file mode 100644 index 0000000000000..cb4c98fee95a3 --- /dev/null +++ b/src/display/editor/drawers/inkdraw.js @@ -0,0 +1,787 @@ +/* Copyright 2024 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 { Outline } from "./outline.js"; +import { Util } from "../../../shared/util.js"; + +class InkDrawOutliner { + // The last 3 points of the line. + #last = new Float64Array(6); + + #line; + + #lines = []; + + #rotation; + + #thickness; + + #points; + + #lastSVGPath = ""; + + #lastIndex = -1; + + #outlines = new InkDrawOutline(); + + #parentWidth; + + #parentHeight; + + constructor(x, y, parentWidth, parentHeight, rotation, thickness) { + this.#parentWidth = parentWidth; + this.#parentHeight = parentHeight; + this.#rotation = rotation; + this.#thickness = thickness; + + [x, y] = this.#normalizePoint(x, y); + + this.#line = [NaN, NaN, NaN, NaN, x, y]; + this.#points = [x, y]; + this.#lines.push({ line: this.#line, points: this.#points }); + this.#last.set([NaN, NaN, NaN, NaN, x, y], 0); + } + + #normalizePoint(x, y) { + return Outline._normalizePoint( + x, + y, + this.#parentWidth, + this.#parentHeight, + this.#rotation + ); + } + + isEmpty() { + return this.#lines.length === 0; + } + + add(x, y) { + // The point is in canvas coordinates which means that there is no rotation. + // It's the same as parent coordinates. + [x, y] = this.#normalizePoint(x, y); + const [x1, y1, x2, y2] = this.#last.subarray(2, 6); + const diffX = x - x2; + const diffY = y - y2; + const d = Math.hypot(this.#parentWidth * diffX, this.#parentHeight * diffY); + if (d <= 2) { + // The idea is to avoid garbage points around the last point. + // When the points are too close, it just leads to bad normal vectors and + // control points. + return null; + } + + this.#points.push(x, y); + + if (isNaN(x1)) { + // We've only one point. + this.#last.set([x2, y2, x, y], 2); + this.#line.push(NaN, NaN, NaN, NaN, x, y); + return { + path: { + d: this.toSVGPath(), + }, + }; + } + + if (isNaN(this.#last[0])) { + // We've only two points. + this.#line.splice(6, 6); + } + + this.#last.set([x1, y1, x2, y2, x, y], 0); + this.#line.push( + (x1 + 5 * x2) / 6, + (y1 + 5 * y2) / 6, + (5 * x2 + x) / 6, + (5 * y2 + y) / 6, + (x2 + x) / 2, + (y2 + y) / 2 + ); + + return { + path: { + d: this.toSVGPath(), + }, + }; + } + + end(x, y) { + const change = this.add(x, y); + if (change) { + return change; + } + if (this.#points.length === 2) { + // We've only one point. + return { + path: { + d: this.toSVGPath(), + }, + }; + } + return null; + } + + startNew(x, y, parentWidth, parentHeight, rotation) { + this.#parentWidth = parentWidth; + this.#parentHeight = parentHeight; + this.#rotation = rotation; + + [x, y] = this.#normalizePoint(x, y); + + this.#line = [NaN, NaN, NaN, NaN, x, y]; + this.#points = [x, y]; + const last = this.#lines.at(-1); + if (last) { + last.line = new Float32Array(last.line); + last.points = new Float32Array(last.points); + } + this.#lines.push({ line: this.#line, points: this.#points }); + this.#last.set([NaN, NaN, NaN, NaN, x, y], 0); + this.#lastIndex = -1; + this.toSVGPath(); + + return null; + } + + getLastElement() { + return this.#lines.at(-1); + } + + setLastElement(element) { + if (!this.#lines) { + return this.#outlines.setLastElement(element); + } + this.#lines.push(element); + this.#line = element.line; + this.#points = element.points; + this.#lastIndex = -1; + return { + path: { + d: this.toSVGPath(), + }, + }; + } + + removeLastElement() { + if (!this.#lines) { + return this.#outlines.removeLastElement(); + } + this.#lines.pop(); + this.#lastSVGPath = ""; + for (let i = 0, ii = this.#lines.length; i < ii; i++) { + const { line, points } = this.#lines[i]; + this.#line = line; + this.#points = points; + this.#lastIndex = -1; + this.toSVGPath(); + } + + return { + path: { + d: this.#lastSVGPath, + }, + }; + } + + toSVGPath() { + const firstX = Outline.svgRound(this.#line[4]); + const firstY = Outline.svgRound(this.#line[5]); + if (this.#points.length === 2) { + this.#lastSVGPath = `${this.#lastSVGPath} M ${firstX} ${firstY} Z`; + return this.#lastSVGPath; + } + + if (this.#points.length <= 6) { + // We've 2 or 3 points. + const i = this.#lastSVGPath.lastIndexOf("M"); + this.#lastSVGPath = `${this.#lastSVGPath.slice(0, i)} M ${firstX} ${firstY}`; + } + + if (this.#points.length === 4) { + const secondX = Outline.svgRound(this.#line[10]); + const secondY = Outline.svgRound(this.#line[11]); + this.#lastSVGPath = `${this.#lastSVGPath} L ${secondX} ${secondY}`; + this.#lastIndex = 12; + return this.#lastSVGPath; + } + + this.#lastSVGPath += this.#line + .slice(this.#lastIndex) + .map((x, i) => + i % 6 === 0 ? `C${Outline.svgRound(x)}` : Outline.svgRound(x).toString() + ) + .join(" "); + + this.#lastIndex = this.#line.length; + + return this.#lastSVGPath; + } + + getOutlines(parentWidth, parentHeight, scale) { + const last = this.#lines.at(-1); + last.line = new Float32Array(last.line); + last.points = new Float32Array(last.points); + + this.#outlines.build( + this.#lines, + parentWidth, + parentHeight, + scale, + this.#rotation, + this.#thickness + ); + + // We reset everything: the drawing is done. + this.#last = null; + this.#line = null; + this.#lines = null; + this.#lastSVGPath = null; + + return this.#outlines; + } + + get defaultSVGProperties() { + return { + root: { + viewBox: "0 0 10000 10000", + }, + rootClass: { + draw: true, + }, + bbox: [0, 0, 1, 1], + }; + } +} + +class InkDrawOutline extends Outline { + #bbox; + + #currentRotation = 0; + + #lines; + + #parentWidth; + + #parentHeight; + + #parentScale; + + #rotation; + + #thickness; + + build(lines, parentWidth, parentHeight, parentScale, rotation, thickness) { + this.#parentWidth = parentWidth; + this.#parentHeight = parentHeight; + this.#parentScale = parentScale; + this.#rotation = rotation; + this.#thickness = thickness; + this.#lines = lines; + + this.#computeBbox(); + } + + setLastElement(element) { + this.#lines.push(element); + return { + path: { + d: this.toSVGPath(), + }, + }; + } + + removeLastElement() { + this.#lines.pop(); + return { + path: { + d: this.toSVGPath(), + }, + }; + } + + toSVGPath() { + const buffer = []; + for (const { line } of this.#lines) { + buffer.push(`M${Outline.svgRound(line[4])} ${Outline.svgRound(line[5])}`); + if (line.length === 6) { + buffer.push("Z"); + continue; + } + if (line.length === 12) { + buffer.push( + `L${Outline.svgRound(line[10])} ${Outline.svgRound(line[11])}` + ); + continue; + } + for (let i = 6, ii = line.length; i < ii; i += 6) { + const [c1x, c1y, c2x, c2y, x, y] = line + .subarray(i, i + 6) + .map(Outline.svgRound); + buffer.push(`C${c1x} ${c1y} ${c2x} ${c2y} ${x} ${y}`); + } + } + return buffer.join(""); + } + + serialize([pageX, pageY, pageWidth, pageHeight]) { + const serializedLines = []; + const serializedPoints = []; + let tx, ty, sx, sy, swap; + + switch (this.#rotation) { + case 0: + swap = false; + tx = pageX; + ty = pageY + pageHeight; + sx = pageWidth; + sy = -pageHeight; + break; + case 90: + swap = true; + tx = pageX; + ty = pageY; + sx = pageWidth; + sy = pageHeight; + break; + case 180: + swap = false; + tx = pageX + pageWidth; + ty = pageY; + sx = -pageWidth; + sy = pageHeight; + break; + case 270: + swap = true; + tx = pageX + pageWidth; + ty = pageY + pageHeight; + sx = -pageWidth; + sy = -pageHeight; + break; + } + + if (swap) { + for (const { line, points } of this.#lines) { + serializedLines.push(Outline._rescaleAndSwap(line, tx, ty, sx, sy)); + serializedPoints.push(Outline._rescaleAndSwap(points, tx, ty, sx, sy)); + } + } else { + for (const { line, points } of this.#lines) { + serializedLines.push(Outline._rescale(line, tx, ty, sx, sy)); + serializedPoints.push(Outline._rescale(points, tx, ty, sx, sy)); + } + } + + return { lines: serializedLines, points: serializedPoints }; + } + + static deserialize( + pageX, + pageY, + pageWidth, + pageHeight, + { paths: { lines, points }, rotation, thickness } + ) { + const newLines = []; + let tx, ty, sx, sy, swap; + switch (rotation) { + case 0: + swap = false; + tx = -pageX / pageWidth; + ty = pageY / pageHeight + 1; + sx = 1 / pageWidth; + sy = -1 / pageHeight; + break; + case 90: + swap = true; + tx = -pageY / pageHeight; + ty = -pageX / pageWidth; + sx = 1 / pageHeight; + sy = 1 / pageWidth; + break; + case 180: + swap = false; + tx = pageX / pageWidth + 1; + ty = -pageY / pageHeight; + sx = -1 / pageWidth; + sy = 1 / pageHeight; + break; + case 270: + swap = true; + tx = pageY / pageHeight + 1; + ty = pageX / pageWidth + 1; + sx = -1 / pageHeight; + sy = -1 / pageWidth; + break; + } + + if (swap) { + for (let i = 0, ii = lines.length; i < ii; i++) { + newLines.push({ + line: Outline._rescaleAndSwap( + lines[i].map(x => x ?? NaN), + tx, + ty, + sx, + sy + ), + points: Outline._rescaleAndSwap( + points[i].map(x => x ?? NaN), + tx, + ty, + sx, + sy + ), + }); + } + } else { + for (let i = 0, ii = lines.length; i < ii; i++) { + newLines.push({ + line: Outline._rescale( + lines[i].map(x => x ?? NaN), + tx, + ty, + sx, + sy + ), + points: Outline._rescale( + points[i].map(x => x ?? NaN), + tx, + ty, + sx, + sy + ), + }); + } + } + + const outlines = new InkDrawOutline(); + outlines.build(newLines, pageWidth, pageHeight, 1, rotation, thickness); + + return outlines; + } + + #getThicknessComponents(thickness = this.#thickness) { + thickness *= this.#parentScale; + return this.#rotation % 180 === 0 + ? [thickness / this.#parentWidth, thickness / this.#parentHeight] + : [thickness / this.#parentHeight, thickness / this.#parentWidth]; + } + + #computeBbox() { + const bbox = (this.#bbox = new Float32Array([ + Infinity, + Infinity, + -Infinity, + -Infinity, + ])); + + for (const { line } of this.#lines) { + if (line.length <= 12) { + // We've only one or two points => no bezier curve. + for (let i = 4, ii = line.length; i < ii; i += 6) { + const [x, y] = line.subarray(i, i + 2); + bbox[0] = Math.min(bbox[0], x); + bbox[1] = Math.min(bbox[1], y); + bbox[2] = Math.max(bbox[2], x); + bbox[3] = Math.max(bbox[3], y); + } + continue; + } + let lastX = line[4], + lastY = line[5]; + for (let i = 6, ii = line.length; i < ii; i += 6) { + const [c1x, c1y, c2x, c2y, x, y] = line.subarray(i, i + 6); + Util.bezierBoundingBox(lastX, lastY, c1x, c1y, c2x, c2y, x, y, bbox); + lastX = x; + lastY = y; + } + } + + const [thX, thY] = this.#getThicknessComponents(); + bbox[0] = Math.min(1, Math.max(0, bbox[0] - thX / 2)); + bbox[1] = Math.min(1, Math.max(0, bbox[1] - thY / 2)); + bbox[2] = Math.min(1, Math.max(0, bbox[2] + thX / 2)); + bbox[3] = Math.min(1, Math.max(0, bbox[3] + thY / 2)); + + bbox[2] -= bbox[0]; + bbox[3] -= bbox[1]; + } + + get box() { + return this.#bbox; + } + + updateProperty(name, value) { + if (name === "stroke-width") { + return this.#updateThickness(value); + } + return null; + } + + #updateThickness(thickness) { + const [diffThX, diffThY] = this.#getThicknessComponents( + thickness - this.#thickness + ); + this.#bbox[0] -= diffThX / 2; + this.#bbox[1] -= diffThY / 2; + this.#bbox[2] += diffThX; + this.#bbox[3] += diffThY; + this.#thickness = thickness; + + return this.#bbox; + } + + updateParentDimensions([width, height], scale) { + const [oldThX, oldThY] = this.#getThicknessComponents(); + this.#parentWidth = width; + this.#parentHeight = height; + this.#parentScale = scale; + const [thX, thY] = this.#getThicknessComponents(); + const diffThX = thX - oldThX; + const diffThY = thY - oldThY; + this.#bbox[0] -= diffThX / 2; + this.#bbox[1] -= diffThY / 2; + this.#bbox[2] += diffThX; + this.#bbox[3] += diffThY; + + return this.#bbox; + } + + updateRotation(rotation) { + this.#currentRotation = rotation; + return { + path: { + transform: this.rotationTransform, + }, + }; + } + + get viewBox() { + return this.#bbox.map(Outline.svgRound).join(" "); + } + + get defaultProperties() { + const [x, y] = this.#bbox; + return { + root: { + viewBox: this.viewBox, + }, + path: { + "transform-origin": `${Outline.svgRound(x)} ${Outline.svgRound(y)}`, + }, + }; + } + + get rotationTransform() { + const [, , width, height] = this.#bbox; + let a = 0, + b = 0, + c = 0, + d = 0, + e = 0, + f = 0; + switch (this.#currentRotation) { + case 90: + b = height / width; + c = -width / height; + e = width; + break; + case 180: + a = -1; + d = -1; + e = width; + f = height; + break; + case 270: + b = -height / width; + c = width / height; + f = height; + break; + default: + return ""; + } + return `matrix(${a} ${b} ${c} ${d} ${Outline.svgRound(e)} ${Outline.svgRound(f)})`; + } + + getPathResizingSVGProperties([newX, newY, newWidth, newHeight]) { + const [thX, thY] = this.#getThicknessComponents(); + const [x, y, width, height] = this.#bbox; + + if ( + Math.abs(width - thX) <= Outline.PRECISION || + Math.abs(height - thY) <= Outline.PRECISION + ) { + const tx = newX + newWidth / 2 - (x + width / 2); + const ty = newY + newHeight / 2 - (y + height / 2); + return { + path: { + "transform-origin": `${Outline.svgRound(newX)} ${Outline.svgRound(newY)}`, + transform: `${this.rotationTransform} translate(${tx} ${ty})`, + }, + }; + } + + // We compute the following transform: + // 1. Translate the path to the origin (-thX/2, -thY/2). + // 2. Scale the path to the new size: + // ((newWidth - thX) / (bbox.width - thX), + // (newHeight - thY) / (bbox.height - thY)). + // 3. Translate the path back to its original position (thX/2, thY/2). + // 4. Scale the inverse of bbox scaling: + // (bbox.width / newWidth, bbox.height / newHeight). + + const s1x = (newWidth - thX) / (width - thX); + const s1y = (newHeight - thY) / (height - thY); + const s2x = width / newWidth; + const s2y = height / newHeight; + const halfThX = Outline.svgRound(thX / 2); + const halfThY = Outline.svgRound(thY / 2); + + return { + path: { + "transform-origin": `${Outline.svgRound(x)} ${Outline.svgRound(y)}`, + transform: + `${this.rotationTransform} scale(${s2x} ${s2y}) ` + + `translate(${halfThX} ${halfThY}) scale(${s1x} ${s1y}) ` + + `translate(${-halfThX} ${-halfThY})`, + }, + }; + } + + getPathResizedSVGProperties([newX, newY, newWidth, newHeight]) { + const [thX, thY] = this.#getThicknessComponents(); + const [x, y, width, height] = this.#bbox; + + this.#bbox[0] = newX; + this.#bbox[1] = newY; + this.#bbox[2] = newWidth; + this.#bbox[3] = newHeight; + + if ( + Math.abs(width - thX) <= Outline.PRECISION || + Math.abs(height - thY) <= Outline.PRECISION + ) { + const tx = newX + newWidth / 2 - (x + width / 2); + const ty = newY + newHeight / 2 - (y + height / 2); + for (const { line, points } of this.#lines) { + Outline._translate(line, tx, ty, line); + Outline._translate(points, tx, ty, points); + } + return { + root: { + viewBox: this.viewBox, + }, + path: { + "transform-origin": `${Outline.svgRound(newX)} ${Outline.svgRound(newY)}`, + transform: this.rotationTransform || null, + d: this.toSVGPath(), + }, + }; + } + + // We compute the following transform: + // 1. Translate the path to the origin (-(x + th/2), -(y + th/2)). + // 2. Scale the path to the new size: + // ((newWidth - thX) / (bbox.width - thX), + // (newHeight - thY) / (bbox.height - thY)). + // 3. Translate the path back to its new position + // (newX + th/2,y newY + th/2). + + const s1x = (newWidth - thX) / (width - thX); + const s1y = (newHeight - thY) / (height - thY); + const tx = -s1x * (x + thX / 2) + newX + thX / 2; + const ty = -s1y * (y + thY / 2) + newY + thY / 2; + + if (s1x !== 1 || s1y !== 1 || tx !== 0 || ty !== 0) { + for (const { line, points } of this.#lines) { + Outline._rescale(line, tx, ty, s1x, s1y, line); + Outline._rescale(points, tx, ty, s1x, s1y, points); + } + } + + return { + root: { + viewBox: this.viewBox, + }, + path: { + "transform-origin": `${Outline.svgRound(newX)} ${Outline.svgRound(newY)}`, + transform: this.rotationTransform || null, + d: this.toSVGPath(), + }, + }; + } + + getPathTranslatedSVGProperties([newX, newY], parentDimensions) { + const [newParentWidth, newParentHeight] = parentDimensions; + const tx = newX - this.#bbox[0]; + const ty = newY - this.#bbox[1]; + + if ( + this.#parentWidth === newParentWidth && + this.#parentHeight === newParentHeight + ) { + // We don't change the parent dimensions so it's a simple translation. + for (const { line, points } of this.#lines) { + Outline._translate(line, tx, ty, line); + Outline._translate(points, tx, ty, points); + } + } else { + const sx = this.#parentWidth / newParentWidth; + const sy = this.#parentHeight / newParentHeight; + this.#parentWidth = newParentWidth; + this.#parentHeight = newParentHeight; + + for (const { line, points } of this.#lines) { + Outline._rescale(line, tx, ty, sx, sy, line); + Outline._rescale(points, tx, ty, sx, sy, points); + } + this.#bbox[2] *= sx; + this.#bbox[3] *= sy; + } + this.#bbox[0] = newX; + this.#bbox[1] = newY; + + return { + root: { + viewBox: this.viewBox, + }, + path: { + d: this.toSVGPath(), + "transform-origin": `${Outline.svgRound(newX)} ${Outline.svgRound(newY)}`, + }, + }; + } + + get defaultSVGProperties() { + const bbox = this.#bbox; + return { + root: { + viewBox: this.viewBox, + }, + rootClass: { + draw: true, + }, + path: { + d: this.toSVGPath(), + "transform-origin": `${Outline.svgRound(bbox[0])} ${Outline.svgRound(bbox[1])}`, + transform: this.rotationTransform || null, + }, + bbox, + }; + } +} + +export { InkDrawOutline, InkDrawOutliner }; diff --git a/src/display/editor/drawers/outline.js b/src/display/editor/drawers/outline.js index 2e05e61f7efd0..bc860cec5ad8b 100644 --- a/src/display/editor/drawers/outline.js +++ b/src/display/editor/drawers/outline.js @@ -16,6 +16,8 @@ import { unreachable } from "../../../shared/util.js"; class Outline { + static PRECISION = 1e-4; + /** * @returns {string} The SVG path of the outline. */ @@ -52,6 +54,45 @@ class Outline { } return dest; } + + static _translate(src, tx, ty, dest) { + dest ||= new Float32Array(src.length); + for (let i = 0, ii = src.length; i < ii; i += 2) { + dest[i] = tx + src[i]; + dest[i + 1] = ty + src[i + 1]; + } + return dest; + } + + static svgRound(x) { + return Math.round(x * 10000); + } + + static _normalizePoint(x, y, parentWidth, parentHeight, rotation) { + switch (rotation) { + case 90: + return [1 - y / parentWidth, x / parentHeight]; + case 180: + return [1 - x / parentWidth, 1 - y / parentHeight]; + case 270: + return [y / parentWidth, 1 - x / parentHeight]; + default: + return [x / parentWidth, y / parentHeight]; + } + } + + static _normalizePagePoint(x, y, rotation) { + switch (rotation) { + case 90: + return [1 - y, x]; + case 180: + return [1 - x, 1 - y]; + case 270: + return [y, 1 - x]; + default: + return [x, y]; + } + } } export { Outline }; diff --git a/src/display/editor/editor.js b/src/display/editor/editor.js index 2ace781179e4e..44f89b81c74fd 100644 --- a/src/display/editor/editor.js +++ b/src/display/editor/editor.js @@ -188,6 +188,10 @@ class AnnotationEditor { return Object.getPrototypeOf(this).constructor._type; } + static get isDrawer() { + return false; + } + static get _defaultLineColor() { return shadow( this, @@ -465,7 +469,10 @@ class AnnotationEditor { drag(tx, ty) { this.#initialPosition ||= [this.x, this.y]; - const [parentWidth, parentHeight] = this.parentDimensions; + const { + div, + parentDimensions: [parentWidth, parentHeight], + } = this; this.x += tx / parentWidth; this.y += ty / parentHeight; if (this.parent && (this.x < 0 || this.x > 1 || this.y < 0 || this.y > 1)) { @@ -492,11 +499,29 @@ class AnnotationEditor { x += bx; y += by; - this.div.style.left = `${(100 * x).toFixed(2)}%`; - this.div.style.top = `${(100 * y).toFixed(2)}%`; - this.div.scrollIntoView({ block: "nearest" }); + const { style } = div; + style.left = `${(100 * x).toFixed(2)}%`; + style.top = `${(100 * y).toFixed(2)}%`; + + this._onTranslating(x, y); + + div.scrollIntoView({ block: "nearest" }); } + /** + * Called when the editor is being translated. + * @param {number} x - in page coordinates. + * @param {number} y - in page coordinates. + */ + _onTranslating(x, y) {} + + /** + * Called when the editor has been translated. + * @param {number} x - in page coordinates. + * @param {number} y - in page coordinates. + */ + _onTranslated(x, y) {} + get _hasBeenMoved() { return ( !!this.#initialPosition && @@ -542,7 +567,10 @@ class AnnotationEditor { * @param {number} [rotation] - the rotation of the page. */ fixAndSetPosition(rotation = this.rotation) { - const [pageWidth, pageHeight] = this.pageDimensions; + const { + div: { style }, + pageDimensions: [pageWidth, pageHeight], + } = this; let { x, y, width, height } = this; width *= pageWidth; height *= pageHeight; @@ -577,7 +605,6 @@ class AnnotationEditor { x += bx; y += by; - const { style } = this.div; style.left = `${(100 * x).toFixed(2)}%`; style.top = `${(100 * y).toFixed(2)}%`; @@ -655,9 +682,10 @@ class AnnotationEditor { */ setDims(width, height) { const [parentWidth, parentHeight] = this.parentDimensions; - this.div.style.width = `${((100 * width) / parentWidth).toFixed(2)}%`; + const { style } = this.div; + style.width = `${((100 * width) / parentWidth).toFixed(2)}%`; if (!this.#keepAspectRatio) { - this.div.style.height = `${((100 * height) / parentHeight).toFixed(2)}%`; + style.height = `${((100 * height) / parentHeight).toFixed(2)}%`; } } @@ -675,9 +703,7 @@ class AnnotationEditor { style.width = `${((100 * parseFloat(width)) / parentWidth).toFixed(2)}%`; } if (!this.#keepAspectRatio && !heightPercent) { - style.height = `${((100 * parseFloat(height)) / parentHeight).toFixed( - 2 - )}%`; + style.height = `${((100 * parseFloat(height)) / parentHeight).toFixed(2)}%`; } } @@ -758,10 +784,12 @@ class AnnotationEditor { { passive: false, signal } ); window.addEventListener("contextmenu", noContextMenu, { signal }); - const savedX = this.x; - const savedY = this.y; - const savedWidth = this.width; - const savedHeight = this.height; + this.#savedDimensions = { + savedX: this.x, + savedY: this.y, + savedWidth: this.width, + savedHeight: this.height, + }; const savedParentCursor = this.parent.div.style.cursor; const savedCursor = this.div.style.cursor; this.div.style.cursor = this.parent.div.style.cursor = @@ -775,7 +803,7 @@ class AnnotationEditor { this.parent.div.style.cursor = savedParentCursor; this.div.style.cursor = savedCursor; - this.#addResizeToUndoStack(savedX, savedY, savedWidth, savedHeight); + this.#addResizeToUndoStack(); }; window.addEventListener("pointerup", pointerUpCallback, { signal }); // If the user switches to another window (with alt+tab), then we end the @@ -783,7 +811,29 @@ class AnnotationEditor { window.addEventListener("blur", pointerUpCallback, { signal }); } - #addResizeToUndoStack(savedX, savedY, savedWidth, savedHeight) { + #resize(x, y, width, height) { + this.width = width; + this.height = height; + this.x = x; + this.y = y; + const [parentWidth, parentHeight] = this.parentDimensions; + this.setDims(parentWidth * width, parentHeight * height); + this.fixAndSetPosition(); + this._onResized(); + } + + /** + * Called when the editor has been resized. + */ + _onResized() {} + + #addResizeToUndoStack() { + if (!this.#savedDimensions) { + return; + } + const { savedX, savedY, savedWidth, savedHeight } = this.#savedDimensions; + this.#savedDimensions = null; + const newX = this.x; const newY = this.y; const newWidth = this.width; @@ -798,24 +848,8 @@ class AnnotationEditor { } this.addCommands({ - cmd: () => { - this.width = newWidth; - this.height = newHeight; - this.x = newX; - this.y = newY; - const [parentWidth, parentHeight] = this.parentDimensions; - this.setDims(parentWidth * newWidth, parentHeight * newHeight); - this.fixAndSetPosition(); - }, - undo: () => { - this.width = savedWidth; - this.height = savedHeight; - this.x = savedX; - this.y = savedY; - const [parentWidth, parentHeight] = this.parentDimensions; - this.setDims(parentWidth * savedWidth, parentHeight * savedHeight); - this.fixAndSetPosition(); - }, + cmd: this.#resize.bind(this, newX, newY, newWidth, newHeight), + undo: this.#resize.bind(this, savedX, savedY, savedWidth, savedHeight), mustExec: true, }); } @@ -959,8 +993,15 @@ class AnnotationEditor { this.setDims(parentWidth * newWidth, parentHeight * newHeight); this.fixAndSetPosition(); + + this._onResizing(); } + /** + * Called when the editor is being resized. + */ + _onResizing() {} + /** * Called when the alt text dialog is closed. */ @@ -1168,12 +1209,16 @@ class AnnotationEditor { ); } + this._onStartDragging(); + const pointerUpCallback = () => { ac.abort(); if (isSelected) { this.div.classList.remove("moving"); } + this._onStopDragging(); + this.#hasBeenClicked = false; if (!this._uiManager.endDragSession()) { this.#selectOnPointerEvent(event); @@ -1186,6 +1231,10 @@ class AnnotationEditor { window.addEventListener("blur", pointerUpCallback, { signal }); } + _onStartDragging() {} + + _onStopDragging() {} + moveInDOM() { // Moving the editor in the DOM can be expensive, so we wait a bit before. // It's important to not block the UI (for example when changing the font @@ -1204,6 +1253,7 @@ class AnnotationEditor { this.x = x; this.y = y; this.fixAndSetPosition(); + this._onTranslated(); } /** @@ -1350,11 +1400,16 @@ class AnnotationEditor { } /** - * Rotate the editor. + * Rotate the editor when the page is rotated. * @param {number} angle */ rotate(_angle) {} + /** + * Resize the editor when the page is resized. + */ + resize() {} + /** * Serialize the editor when it has been deleted. * @returns {Object} @@ -1600,11 +1655,7 @@ class AnnotationEditor { #stopResizing() { this.#isResizerEnabledForKeyboard = false; this.#setResizerTabIndex(-1); - if (this.#savedDimensions) { - const { savedX, savedY, savedWidth, savedHeight } = this.#savedDimensions; - this.#addResizeToUndoStack(savedX, savedY, savedWidth, savedHeight); - this.#savedDimensions = null; - } + this.#addResizeToUndoStack(); } _stopResizingWithKeyboard() { diff --git a/src/display/editor/ink.js b/src/display/editor/ink.js index c5d0def6c51bb..15d56b520cf9c 100644 --- a/src/display/editor/ink.js +++ b/src/display/editor/ink.js @@ -16,1220 +16,194 @@ import { AnnotationEditorParamsType, AnnotationEditorType, - assert, + shadow, Util, } from "../../shared/util.js"; +import { DrawingEditor, DrawingOptions } from "./draw.js"; +import { InkDrawOutline, InkDrawOutliner } from "./drawers/inkdraw.js"; import { AnnotationEditor } from "./editor.js"; import { InkAnnotationElement } from "../annotation_layer.js"; -import { noContextMenu } from "../display_utils.js"; -import { opacityToHex } from "./tools.js"; -/** - * Basic draw editor in order to generate an Ink annotation. - */ -class InkEditor extends AnnotationEditor { - #baseHeight = 0; - - #baseWidth = 0; - - #canvasContextMenuTimeoutId = null; - - #currentPath2D = new Path2D(); - - #disableEditing = false; - - #drawingAC = null; - - #hasSomethingToDraw = false; - - #isCanvasInitialized = false; - - #observer = null; - - #pointerdownAC = null; - - #realWidth = 0; - - #realHeight = 0; - - #requestFrameCallback = null; - - static _defaultColor = null; +class InkDrawingOptions extends DrawingOptions { + #viewParameters; + + constructor(viewerParameters) { + super(); + this.#viewParameters = viewerParameters; + + super.updateProperties({ + fill: "none", + stroke: AnnotationEditor._defaultLineColor, + "stroke-opacity": 1, + "stroke-width": 1, + "stroke-linecap": "round", + "stroke-linejoin": "round", + "stroke-miterlimit": 10, + }); + } - static _defaultOpacity = 1; + updateSVGProperty(name, value) { + if (name === "stroke-width") { + value ??= this["stroke-width"]; + value *= this.#viewParameters.realScale; + } + super.updateSVGProperty(name, value); + } - static _defaultThickness = 1; + clone() { + const clone = new InkDrawingOptions(this.#viewParameters); + clone.updateProperties(this); + return clone; + } +} +/** + * Basic draw editor in order to generate an Ink annotation. + */ +class InkEditor extends DrawingEditor { static _type = "ink"; static _editorType = AnnotationEditorType.INK; + static _defaultDrawingOptions = null; + constructor(params) { super({ ...params, name: "inkEditor" }); - this.color = params.color || null; - this.thickness = params.thickness || null; - this.opacity = params.opacity || null; - this.paths = []; - this.bezierPath2D = []; - this.allRawPaths = []; - this.currentPath = []; - this.scaleFactor = 1; - this.translationX = this.translationY = 0; - this.x = 0; - this.y = 0; - this._willKeepAspectRatio = true; } /** @inheritdoc */ static initialize(l10n, uiManager) { AnnotationEditor.initialize(l10n, uiManager); + this._defaultDrawingOptions = new InkDrawingOptions( + uiManager.viewParameters + ); } /** @inheritdoc */ - static updateDefaultParams(type, value) { - switch (type) { - case AnnotationEditorParamsType.INK_THICKNESS: - InkEditor._defaultThickness = value; - break; - case AnnotationEditorParamsType.INK_COLOR: - InkEditor._defaultColor = value; - break; - case AnnotationEditorParamsType.INK_OPACITY: - InkEditor._defaultOpacity = value / 100; - break; - } - } - - /** @inheritdoc */ - updateParams(type, value) { - switch (type) { - case AnnotationEditorParamsType.INK_THICKNESS: - this.#updateThickness(value); - break; - case AnnotationEditorParamsType.INK_COLOR: - this.#updateColor(value); - break; - case AnnotationEditorParamsType.INK_OPACITY: - this.#updateOpacity(value); - break; - } - } - - /** @inheritdoc */ - static get defaultPropertiesToUpdate() { - return [ - [AnnotationEditorParamsType.INK_THICKNESS, InkEditor._defaultThickness], - [ - AnnotationEditorParamsType.INK_COLOR, - InkEditor._defaultColor || AnnotationEditor._defaultLineColor, - ], - [ - AnnotationEditorParamsType.INK_OPACITY, - Math.round(InkEditor._defaultOpacity * 100), - ], - ]; - } - - /** @inheritdoc */ - get propertiesToUpdate() { - return [ - [ - AnnotationEditorParamsType.INK_THICKNESS, - this.thickness || InkEditor._defaultThickness, - ], - [ - AnnotationEditorParamsType.INK_COLOR, - this.color || - InkEditor._defaultColor || - AnnotationEditor._defaultLineColor, - ], - [ - AnnotationEditorParamsType.INK_OPACITY, - Math.round(100 * (this.opacity ?? InkEditor._defaultOpacity)), - ], - ]; - } - - /** - * Update the thickness and make this action undoable. - * @param {number} thickness - */ - #updateThickness(thickness) { - const setThickness = th => { - this.thickness = th; - this.#fitToContent(); - }; - const savedThickness = this.thickness; - this.addCommands({ - cmd: setThickness.bind(this, thickness), - undo: setThickness.bind(this, savedThickness), - post: this._uiManager.updateUI.bind(this._uiManager, this), - mustExec: true, - type: AnnotationEditorParamsType.INK_THICKNESS, - overwriteIfSameType: true, - keepUndo: true, - }); - } - - /** - * Update the color and make this action undoable. - * @param {string} color - */ - #updateColor(color) { - const setColor = col => { - this.color = col; - this.#redraw(); - }; - const savedColor = this.color; - this.addCommands({ - cmd: setColor.bind(this, color), - undo: setColor.bind(this, savedColor), - post: this._uiManager.updateUI.bind(this._uiManager, this), - mustExec: true, - type: AnnotationEditorParamsType.INK_COLOR, - overwriteIfSameType: true, - keepUndo: true, - }); - } - - /** - * Update the opacity and make this action undoable. - * @param {number} opacity - */ - #updateOpacity(opacity) { - const setOpacity = op => { - this.opacity = op; - this.#redraw(); - }; - opacity /= 100; - const savedOpacity = this.opacity; - this.addCommands({ - cmd: setOpacity.bind(this, opacity), - undo: setOpacity.bind(this, savedOpacity), - post: this._uiManager.updateUI.bind(this._uiManager, this), - mustExec: true, - type: AnnotationEditorParamsType.INK_OPACITY, - overwriteIfSameType: true, - keepUndo: true, - }); - } - - /** @inheritdoc */ - rebuild() { - if (!this.parent) { - return; - } - super.rebuild(); - if (this.div === null) { - return; - } - - if (!this.canvas) { - this.#createCanvas(); - this.#createObserver(); - } - - if (!this.isAttachedToDOM) { - // At some point this editor was removed and we're rebuilding it, - // hence we must add it to its parent. - this.parent.add(this); - this.#setCanvasDims(); - } - this.#fitToContent(); - } - - /** @inheritdoc */ - remove() { - if (this.canvas === null) { - return; - } - - if (!this.isEmpty()) { - this.commit(); - } - - // Destroy the canvas. - this.canvas.width = this.canvas.height = 0; - this.canvas.remove(); - this.canvas = null; - - if (this.#canvasContextMenuTimeoutId) { - clearTimeout(this.#canvasContextMenuTimeoutId); - this.#canvasContextMenuTimeoutId = null; - } - - this.#observer?.disconnect(); - this.#observer = null; - - super.remove(); - } - - setParent(parent) { - if (!this.parent && parent) { - // We've a parent hence the rescale will be handled thanks to the - // ResizeObserver. - this._uiManager.removeShouldRescale(this); - } else if (this.parent && parent === null) { - // The editor is removed from the DOM, hence we handle the rescale thanks - // to the onScaleChanging callback. - // This way, it'll be saved/printed correctly. - this._uiManager.addShouldRescale(this); - } - super.setParent(parent); - } - - onScaleChanging() { - const [parentWidth, parentHeight] = this.parentDimensions; - const width = this.width * parentWidth; - const height = this.height * parentHeight; - this.setDimensions(width, height); - } - - /** @inheritdoc */ - enableEditMode() { - if (this.#disableEditing || this.canvas === null) { - return; - } - - super.enableEditMode(); - this._isDraggable = false; - this.#addPointerdownListener(); - } - - /** @inheritdoc */ - disableEditMode() { - if (!this.isInEditMode() || this.canvas === null) { - return; - } - - super.disableEditMode(); - this._isDraggable = !this.isEmpty(); - this.div.classList.remove("editing"); - this.#removePointerdownListener(); + static getDefaultDrawingOptions(options) { + const clone = this._defaultDrawingOptions.clone(); + clone.updateProperties(options); + return clone; } /** @inheritdoc */ - onceAdded() { - this._isDraggable = !this.isEmpty(); + static get supportMultipleDrawings() { + return true; } /** @inheritdoc */ - isEmpty() { - return ( - this.paths.length === 0 || - (this.paths.length === 1 && this.paths[0].length === 0) + static get typesMap() { + return shadow( + this, + "typesMap", + new Map([ + [AnnotationEditorParamsType.INK_THICKNESS, "stroke-width"], + [AnnotationEditorParamsType.INK_COLOR, "stroke"], + [AnnotationEditorParamsType.INK_OPACITY, "stroke-opacity"], + ]) ); } - #getInitialBBox() { - const { - parentRotation, - parentDimensions: [width, height], - } = this; - switch (parentRotation) { - case 90: - return [0, height, height, width]; - case 180: - return [width, height, width, height]; - case 270: - return [width, 0, height, width]; - default: - return [0, 0, width, height]; - } - } - - /** - * Set line styles. - */ - #setStroke() { - const { ctx, color, opacity, thickness, parentScale, scaleFactor } = this; - ctx.lineWidth = (thickness * parentScale) / scaleFactor; - ctx.lineCap = "round"; - ctx.lineJoin = "round"; - ctx.miterLimit = 10; - ctx.strokeStyle = `${color}${opacityToHex(opacity)}`; - } - - /** - * Start to draw on the canvas. - * @param {number} x - * @param {number} y - */ - #startDrawing(x, y) { - this.canvas.addEventListener("contextmenu", noContextMenu, { - signal: this._uiManager._signal, - }); - this.#removePointerdownListener(); - - if (typeof PDFJSDev === "undefined" || PDFJSDev.test("TESTING")) { - assert( - !this.#drawingAC, - "No `this.#drawingAC` AbortController should exist." - ); - } - this.#drawingAC = new AbortController(); - const signal = this._uiManager.combinedSignal(this.#drawingAC); - - this.canvas.addEventListener( - "pointerleave", - this.canvasPointerleave.bind(this), - { signal } - ); - this.canvas.addEventListener( - "pointermove", - this.canvasPointermove.bind(this), - { signal } - ); - this.canvas.addEventListener("pointerup", this.canvasPointerup.bind(this), { - signal, - }); - - this.isEditing = true; - if (!this.#isCanvasInitialized) { - this.#isCanvasInitialized = true; - this.#setCanvasDims(); - this.thickness ||= InkEditor._defaultThickness; - this.color ||= - InkEditor._defaultColor || AnnotationEditor._defaultLineColor; - this.opacity ??= InkEditor._defaultOpacity; - } - this.currentPath.push([x, y]); - this.#hasSomethingToDraw = false; - this.#setStroke(); - - this.#requestFrameCallback = () => { - this.#drawPoints(); - if (this.#requestFrameCallback) { - window.requestAnimationFrame(this.#requestFrameCallback); - } - }; - window.requestAnimationFrame(this.#requestFrameCallback); - } - - /** - * Draw on the canvas. - * @param {number} x - * @param {number} y - */ - #draw(x, y) { - const [lastX, lastY] = this.currentPath.at(-1); - if (this.currentPath.length > 1 && x === lastX && y === lastY) { - return; - } - const currentPath = this.currentPath; - let path2D = this.#currentPath2D; - currentPath.push([x, y]); - this.#hasSomethingToDraw = true; - - if (currentPath.length <= 2) { - path2D.moveTo(...currentPath[0]); - path2D.lineTo(x, y); - return; - } - - if (currentPath.length === 3) { - this.#currentPath2D = path2D = new Path2D(); - path2D.moveTo(...currentPath[0]); - } - - this.#makeBezierCurve( - path2D, - ...currentPath.at(-3), - ...currentPath.at(-2), + /** @inheritdoc */ + static createDrawerInstance(x, y, parentWidth, parentHeight, rotation) { + return new InkDrawOutliner( x, - y + y, + parentWidth, + parentHeight, + rotation, + this._defaultDrawingOptions["stroke-width"], + AnnotationEditor._borderLineWidth ); } - #endPath() { - if (this.currentPath.length === 0) { - return; - } - const lastPoint = this.currentPath.at(-1); - this.#currentPath2D.lineTo(...lastPoint); - } - - /** - * Stop to draw on the canvas. - * @param {number} x - * @param {number} y - */ - #stopDrawing(x, y) { - this.#requestFrameCallback = null; - - x = Math.min(Math.max(x, 0), this.canvas.width); - y = Math.min(Math.max(y, 0), this.canvas.height); - - this.#draw(x, y); - this.#endPath(); - - // Interpolate the path entered by the user with some - // Bezier's curves in order to have a smoother path and - // to reduce the data size used to draw it in the PDF. - let bezier; - if (this.currentPath.length !== 1) { - bezier = this.#generateBezierPoints(); - } else { - // We have only one point finally. - const xy = [x, y]; - bezier = [[xy, xy.slice(), xy.slice(), xy]]; - } - const path2D = this.#currentPath2D; - const currentPath = this.currentPath; - this.currentPath = []; - this.#currentPath2D = new Path2D(); - - const cmd = () => { - this.allRawPaths.push(currentPath); - this.paths.push(bezier); - this.bezierPath2D.push(path2D); - this._uiManager.rebuild(this); - }; - - const undo = () => { - this.allRawPaths.pop(); - this.paths.pop(); - this.bezierPath2D.pop(); - if (this.paths.length === 0) { - this.remove(); - } else { - if (!this.canvas) { - this.#createCanvas(); - this.#createObserver(); - } - this.#fitToContent(); - } - }; - - this.addCommands({ cmd, undo, mustExec: true }); - } - - #drawPoints() { - if (!this.#hasSomethingToDraw) { - return; - } - this.#hasSomethingToDraw = false; - - const thickness = Math.ceil(this.thickness * this.parentScale); - const lastPoints = this.currentPath.slice(-3); - const x = lastPoints.map(xy => xy[0]); - const y = lastPoints.map(xy => xy[1]); - const xMin = Math.min(...x) - thickness; - const xMax = Math.max(...x) + thickness; - const yMin = Math.min(...y) - thickness; - const yMax = Math.max(...y) + thickness; - - const { ctx } = this; - ctx.save(); - - if (typeof PDFJSDev !== "undefined" && PDFJSDev.test("MOZCENTRAL")) { - // In Chrome, the clip() method doesn't work as expected. - ctx.clearRect(xMin, yMin, xMax - xMin, yMax - yMin); - ctx.beginPath(); - ctx.rect(xMin, yMin, xMax - xMin, yMax - yMin); - ctx.clip(); - } else { - ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - } - - for (const path of this.bezierPath2D) { - ctx.stroke(path); - } - ctx.stroke(this.#currentPath2D); - - ctx.restore(); - } - - #makeBezierCurve(path2D, x0, y0, x1, y1, x2, y2) { - const prevX = (x0 + x1) / 2; - const prevY = (y0 + y1) / 2; - const x3 = (x1 + x2) / 2; - const y3 = (y1 + y2) / 2; - - path2D.bezierCurveTo( - prevX + (2 * (x1 - prevX)) / 3, - prevY + (2 * (y1 - prevY)) / 3, - x3 + (2 * (x1 - x3)) / 3, - y3 + (2 * (y1 - y3)) / 3, - x3, - y3 + /** @inheritdoc */ + static deserializeDraw(pageX, pageY, pageWidth, pageHeight, data) { + return InkDrawOutline.deserialize( + pageX, + pageY, + pageWidth, + pageHeight, + data ); } - #generateBezierPoints() { - const path = this.currentPath; - if (path.length <= 2) { - return [[path[0], path[0], path.at(-1), path.at(-1)]]; - } - - const bezierPoints = []; - let i; - let [x0, y0] = path[0]; - for (i = 1; i < path.length - 2; i++) { - const [x1, y1] = path[i]; - const [x2, y2] = path[i + 1]; - const x3 = (x1 + x2) / 2; - const y3 = (y1 + y2) / 2; - - // The quadratic is: [[x0, y0], [x1, y1], [x3, y3]]. - // Convert the quadratic to a cubic - // (see https://fontforge.org/docs/techref/bezier.html#converting-truetype-to-postscript) - const control1 = [x0 + (2 * (x1 - x0)) / 3, y0 + (2 * (y1 - y0)) / 3]; - const control2 = [x3 + (2 * (x1 - x3)) / 3, y3 + (2 * (y1 - y3)) / 3]; - - bezierPoints.push([[x0, y0], control1, control2, [x3, y3]]); - - [x0, y0] = [x3, y3]; - } - - const [x1, y1] = path[i]; - const [x2, y2] = path[i + 1]; - - // The quadratic is: [[x0, y0], [x1, y1], [x2, y2]]. - const control1 = [x0 + (2 * (x1 - x0)) / 3, y0 + (2 * (y1 - y0)) / 3]; - const control2 = [x2 + (2 * (x1 - x2)) / 3, y2 + (2 * (y1 - y2)) / 3]; - - bezierPoints.push([[x0, y0], control1, control2, [x2, y2]]); - return bezierPoints; - } - - /** - * Redraw all the paths. - */ - #redraw() { - if (this.isEmpty()) { - this.#updateTransform(); - return; - } - this.#setStroke(); - - const { canvas, ctx } = this; - ctx.setTransform(1, 0, 0, 1, 0, 0); - ctx.clearRect(0, 0, canvas.width, canvas.height); - this.#updateTransform(); - - for (const path of this.bezierPath2D) { - ctx.stroke(path); - } - } - - /** - * Commit the curves we have in this editor. - */ - commit() { - if (this.#disableEditing) { - return; - } - - super.commit(); - - this.isEditing = false; - this.disableEditMode(); - - // This editor must be on top of the main ink editor. - this.setInForeground(); - - this.#disableEditing = true; - this.div.classList.add("disabled"); - - this.#fitToContent(/* firstTime = */ true); - this.select(); - - this.parent.addInkEditorIfNeeded(/* isCommitting = */ true); - - // When committing, the position of this editor is changed, hence we must - // move it to the right position in the DOM. - this.moveInDOM(); - this.div.focus({ - preventScroll: true /* See issue #15744 */, - }); - } - /** @inheritdoc */ - focusin(event) { - if (!this._focusEventsAllowed) { - return; - } - super.focusin(event); - this.enableEditMode(); - } - - #addPointerdownListener() { - if (this.#pointerdownAC) { - return; + static async deserialize(data, parent, uiManager) { + if (data instanceof InkAnnotationElement) { + return null; } - this.#pointerdownAC = new AbortController(); - const signal = this._uiManager.combinedSignal(this.#pointerdownAC); - - this.canvas.addEventListener( - "pointerdown", - this.canvasPointerdown.bind(this), - { signal } - ); - } - #removePointerdownListener() { - this.pointerdownAC?.abort(); - this.pointerdownAC = null; + return super.deserialize(data, parent, uiManager); } - /** - * onpointerdown callback for the canvas we're drawing on. - * @param {PointerEvent} event - */ - canvasPointerdown(event) { - if (event.button !== 0 || !this.isInEditMode() || this.#disableEditing) { + /** @inheritdoc */ + onScaleChanging() { + if (!this.parent) { return; } - - // We want to draw on top of any other editors. - // Since it's the last child, there's no need to give it a higher z-index. - this.setInForeground(); - - event.preventDefault(); - - if (!this.div.contains(document.activeElement)) { - this.div.focus({ - preventScroll: true /* See issue #17327 */, - }); - } - - this.#startDrawing(event.offsetX, event.offsetY); - } - - /** - * onpointermove callback for the canvas we're drawing on. - * @param {PointerEvent} event - */ - canvasPointermove(event) { - event.preventDefault(); - this.#draw(event.offsetX, event.offsetY); - } - - /** - * onpointerup callback for the canvas we're drawing on. - * @param {PointerEvent} event - */ - canvasPointerup(event) { - event.preventDefault(); - this.#endDrawing(event); - } - - /** - * onpointerleave callback for the canvas we're drawing on. - * @param {PointerEvent} event - */ - canvasPointerleave(event) { - this.#endDrawing(event); - } - - /** - * End the drawing. - * @param {PointerEvent} event - */ - #endDrawing(event) { - this.#drawingAC?.abort(); - this.#drawingAC = null; - - this.#addPointerdownListener(); - // Slight delay to avoid the context menu to appear (it can happen on a long - // tap with a pen). - if (this.#canvasContextMenuTimeoutId) { - clearTimeout(this.#canvasContextMenuTimeoutId); - } - this.#canvasContextMenuTimeoutId = setTimeout(() => { - this.#canvasContextMenuTimeoutId = null; - this.canvas.removeEventListener("contextmenu", noContextMenu); - }, 10); - - this.#stopDrawing(event.offsetX, event.offsetY); - - this.addToAnnotationStorage(); - - // Since the ink editor covers all of the page and we want to be able - // to select another editor, we just put this one in the background. - this.setInBackground(); - } - - /** - * Create the canvas element. - */ - #createCanvas() { - this.canvas = document.createElement("canvas"); - this.canvas.width = this.canvas.height = 0; - this.canvas.className = "inkEditorCanvas"; - this.canvas.setAttribute("data-l10n-id", "pdfjs-ink-canvas"); - - this.div.append(this.canvas); - this.ctx = this.canvas.getContext("2d"); - } - - /** - * Create the resize observer. - */ - #createObserver() { - this.#observer = new ResizeObserver(entries => { - const rect = entries[0].contentRect; - if (rect.width && rect.height) { - this.setDimensions(rect.width, rect.height); - } - }); - this.#observer.observe(this.div); - this._uiManager._signal.addEventListener( - "abort", - () => { - this.#observer?.disconnect(); - this.#observer = null; - }, - { once: true } + super.onScaleChanging(); + const { _drawId, _drawingOptions, parent } = this; + _drawingOptions.updateSVGProperty("stroke-width"); + parent.drawLayer.updateProperties( + _drawId, + _drawingOptions.toSVGProperties() ); } /** @inheritdoc */ - get isResizable() { - return !this.isEmpty() && this.#disableEditing; + createDrawingOptions({ color, thickness, opacity }) { + this._drawingOptions = InkEditor.getDefaultDrawingOptions({ + stroke: Util.makeHexColor(...color), + "stroke-width": thickness, + "stroke-opacity": opacity, + }); } /** @inheritdoc */ - render() { - if (this.div) { - return this.div; - } - - let baseX, baseY; - if (this.width) { - baseX = this.x; - baseY = this.y; - } - - super.render(); - - this.div.setAttribute("data-l10n-id", "pdfjs-ink"); - - const [x, y, w, h] = this.#getInitialBBox(); - this.setAt(x, y, 0, 0); - this.setDims(w, h); - - this.#createCanvas(); - - if (this.width) { - // This editor was created in using copy (ctrl+c). - const [parentWidth, parentHeight] = this.parentDimensions; - this.setAspectRatio(this.width * parentWidth, this.height * parentHeight); - this.setAt( - baseX * parentWidth, - baseY * parentHeight, - this.width * parentWidth, - this.height * parentHeight - ); - this.#isCanvasInitialized = true; - this.#setCanvasDims(); - this.setDims(this.width * parentWidth, this.height * parentHeight); - this.#redraw(); - this.div.classList.add("disabled"); - } else { - this.div.classList.add("editing"); - this.enableEditMode(); - } - - this.#createObserver(); - - return this.div; - } - - #setCanvasDims() { - if (!this.#isCanvasInitialized) { - return; - } - const [parentWidth, parentHeight] = this.parentDimensions; - this.canvas.width = Math.ceil(this.width * parentWidth); - this.canvas.height = Math.ceil(this.height * parentHeight); - this.#updateTransform(); - } - - /** - * When the dimensions of the div change the inner canvas must - * renew its dimensions, hence it must redraw its own contents. - * @param {number} width - the new width of the div - * @param {number} height - the new height of the div - * @returns - */ - setDimensions(width, height) { - const roundedWidth = Math.round(width); - const roundedHeight = Math.round(height); - if ( - this.#realWidth === roundedWidth && - this.#realHeight === roundedHeight - ) { - return; - } - - this.#realWidth = roundedWidth; - this.#realHeight = roundedHeight; - - this.canvas.style.visibility = "hidden"; - - const [parentWidth, parentHeight] = this.parentDimensions; - this.width = width / parentWidth; - this.height = height / parentHeight; - this.fixAndSetPosition(); - - if (this.#disableEditing) { - this.#setScaleFactor(width, height); - } - - this.#setCanvasDims(); - this.#redraw(); - - this.canvas.style.visibility = "visible"; - - // For any reason the dimensions couldn't be in percent but in pixels, hence - // we must fix them. - this.fixDims(); - } - - #setScaleFactor(width, height) { - const padding = this.#getPadding(); - const scaleFactorW = (width - padding) / this.#baseWidth; - const scaleFactorH = (height - padding) / this.#baseHeight; - this.scaleFactor = Math.min(scaleFactorW, scaleFactorH); - } - - /** - * Update the canvas transform. - */ - #updateTransform() { - const padding = this.#getPadding() / 2; - this.ctx.setTransform( - this.scaleFactor, - 0, - 0, - this.scaleFactor, - this.translationX * this.scaleFactor + padding, - this.translationY * this.scaleFactor + padding - ); - } - - /** - * Convert into a Path2D. - * @param {Array>} bezier - * @returns {Path2D} - */ - static #buildPath2D(bezier) { - const path2D = new Path2D(); - for (let i = 0, ii = bezier.length; i < ii; i++) { - const [first, control1, control2, second] = bezier[i]; - if (i === 0) { - path2D.moveTo(...first); - } - path2D.bezierCurveTo( - control1[0], - control1[1], - control2[0], - control2[1], - second[0], - second[1] - ); - } - return path2D; - } - - static #toPDFCoordinates(points, rect, rotation) { - const [blX, blY, trX, trY] = rect; - - switch (rotation) { - case 0: - for (let i = 0, ii = points.length; i < ii; i += 2) { - points[i] += blX; - points[i + 1] = trY - points[i + 1]; - } - break; - case 90: - for (let i = 0, ii = points.length; i < ii; i += 2) { - const x = points[i]; - points[i] = points[i + 1] + blX; - points[i + 1] = x + blY; - } - break; - case 180: - for (let i = 0, ii = points.length; i < ii; i += 2) { - points[i] = trX - points[i]; - points[i + 1] += blY; - } - break; - case 270: - for (let i = 0, ii = points.length; i < ii; i += 2) { - const x = points[i]; - points[i] = trX - points[i + 1]; - points[i + 1] = trY - x; - } - break; - default: - throw new Error("Invalid rotation"); - } - return points; - } - - static #fromPDFCoordinates(points, rect, rotation) { - const [blX, blY, trX, trY] = rect; - - switch (rotation) { - case 0: - for (let i = 0, ii = points.length; i < ii; i += 2) { - points[i] -= blX; - points[i + 1] = trY - points[i + 1]; - } - break; - case 90: - for (let i = 0, ii = points.length; i < ii; i += 2) { - const x = points[i]; - points[i] = points[i + 1] - blY; - points[i + 1] = x - blX; - } - break; - case 180: - for (let i = 0, ii = points.length; i < ii; i += 2) { - points[i] = trX - points[i]; - points[i + 1] -= blY; - } - break; - case 270: - for (let i = 0, ii = points.length; i < ii; i += 2) { - const x = points[i]; - points[i] = trY - points[i + 1]; - points[i + 1] = trX - x; - } - break; - default: - throw new Error("Invalid rotation"); - } - return points; - } - - /** - * Transform and serialize the paths. - * @param {number} s - scale factor - * @param {number} tx - abscissa of the translation - * @param {number} ty - ordinate of the translation - * @param {Array} rect - the bounding box of the annotation - */ - #serializePaths(s, tx, ty, rect) { - const paths = []; - const padding = this.thickness / 2; - const shiftX = s * tx + padding; - const shiftY = s * ty + padding; - for (const bezier of this.paths) { - const buffer = []; - const points = []; - for (let j = 0, jj = bezier.length; j < jj; j++) { - const [first, control1, control2, second] = bezier[j]; - if (first[0] === second[0] && first[1] === second[1] && jj === 1) { - // We have only one point. - const p0 = s * first[0] + shiftX; - const p1 = s * first[1] + shiftY; - buffer.push(p0, p1); - points.push(p0, p1); - break; - } - const p10 = s * first[0] + shiftX; - const p11 = s * first[1] + shiftY; - const p20 = s * control1[0] + shiftX; - const p21 = s * control1[1] + shiftY; - const p30 = s * control2[0] + shiftX; - const p31 = s * control2[1] + shiftY; - const p40 = s * second[0] + shiftX; - const p41 = s * second[1] + shiftY; - - if (j === 0) { - buffer.push(p10, p11); - points.push(p10, p11); - } - buffer.push(p20, p21, p30, p31, p40, p41); - points.push(p20, p21); - if (j === jj - 1) { - points.push(p40, p41); - } - } - paths.push({ - bezier: InkEditor.#toPDFCoordinates(buffer, rect, this.rotation), - points: InkEditor.#toPDFCoordinates(points, rect, this.rotation), - }); - } - - return paths; - } - - /** - * Get the bounding box containing all the paths. - * @returns {Array} - */ - #getBbox() { - let xMin = Infinity; - let xMax = -Infinity; - let yMin = Infinity; - let yMax = -Infinity; - - for (const path of this.paths) { - for (const [first, control1, control2, second] of path) { - const bbox = Util.bezierBoundingBox( - ...first, - ...control1, - ...control2, - ...second - ); - xMin = Math.min(xMin, bbox[0]); - yMin = Math.min(yMin, bbox[1]); - xMax = Math.max(xMax, bbox[2]); - yMax = Math.max(yMax, bbox[3]); - } - } - - return [xMin, yMin, xMax, yMax]; - } - - /** - * The bounding box is computed with null thickness, so we must take - * it into account for the display. - * It corresponds to the total padding, hence it should be divided by 2 - * in order to have left/right paddings. - * @returns {number} - */ - #getPadding() { - return this.#disableEditing - ? Math.ceil(this.thickness * this.parentScale) - : 0; - } - - /** - * Set the div position and dimensions in order to fit to - * the bounding box of the contents. - * @returns {undefined} - */ - #fitToContent(firstTime = false) { + serialize(isForCopying = false) { if (this.isEmpty()) { - return; - } - - if (!this.#disableEditing) { - this.#redraw(); - return; - } - - const bbox = this.#getBbox(); - const padding = this.#getPadding(); - this.#baseWidth = Math.max(AnnotationEditor.MIN_SIZE, bbox[2] - bbox[0]); - this.#baseHeight = Math.max(AnnotationEditor.MIN_SIZE, bbox[3] - bbox[1]); - - const width = Math.ceil(padding + this.#baseWidth * this.scaleFactor); - const height = Math.ceil(padding + this.#baseHeight * this.scaleFactor); - - const [parentWidth, parentHeight] = this.parentDimensions; - this.width = width / parentWidth; - this.height = height / parentHeight; - - this.setAspectRatio(width, height); - - const prevTranslationX = this.translationX; - const prevTranslationY = this.translationY; - - this.translationX = -bbox[0]; - this.translationY = -bbox[1]; - this.#setCanvasDims(); - this.#redraw(); - - this.#realWidth = width; - this.#realHeight = height; - - this.setDims(width, height); - const unscaledPadding = firstTime ? padding / this.scaleFactor / 2 : 0; - this.translate( - prevTranslationX - this.translationX - unscaledPadding, - prevTranslationY - this.translationY - unscaledPadding - ); - } - - /** @inheritdoc */ - static async deserialize(data, parent, uiManager) { - if (data instanceof InkAnnotationElement) { return null; } - const editor = await super.deserialize(data, parent, uiManager); - - editor.thickness = data.thickness; - editor.color = Util.makeHexColor(...data.color); - editor.opacity = data.opacity; - const [pageWidth, pageHeight] = editor.pageDimensions; - const width = editor.width * pageWidth; - const height = editor.height * pageHeight; - const scaleFactor = editor.parentScale; - const padding = data.thickness / 2; - - editor.#disableEditing = true; - editor.#realWidth = Math.round(width); - editor.#realHeight = Math.round(height); - - const { paths, rect, rotation } = data; - - for (let { bezier } of paths) { - bezier = InkEditor.#fromPDFCoordinates(bezier, rect, rotation); - const path = []; - editor.paths.push(path); - let p0 = scaleFactor * (bezier[0] - padding); - let p1 = scaleFactor * (bezier[1] - padding); - for (let i = 2, ii = bezier.length; i < ii; i += 6) { - const p10 = scaleFactor * (bezier[i] - padding); - const p11 = scaleFactor * (bezier[i + 1] - padding); - const p20 = scaleFactor * (bezier[i + 2] - padding); - const p21 = scaleFactor * (bezier[i + 3] - padding); - const p30 = scaleFactor * (bezier[i + 4] - padding); - const p31 = scaleFactor * (bezier[i + 5] - padding); - path.push([ - [p0, p1], - [p10, p11], - [p20, p21], - [p30, p31], - ]); - p0 = p30; - p1 = p31; - } - const path2D = this.#buildPath2D(path); - editor.bezierPath2D.push(path2D); + if (this.deleted) { + return this.serializeDeleted(); } - const bbox = editor.#getBbox(); - editor.#baseWidth = Math.max(AnnotationEditor.MIN_SIZE, bbox[2] - bbox[0]); - editor.#baseHeight = Math.max(AnnotationEditor.MIN_SIZE, bbox[3] - bbox[1]); - editor.#setScaleFactor(width, height); - - return editor; - } - - /** @inheritdoc */ - serialize() { - if (this.isEmpty()) { - return null; + let { lines, points } = this.serializeDraw(); + if (isForCopying) { + // JSON.stringify will convert TypedArrays to objects, so we need to + // convert them to arrays. + lines = lines.map(line => Array.from(line)); + points = points.map(point => Array.from(point)); } const rect = this.getRect(0, 0); - const color = AnnotationEditor._colorManager.convert(this.ctx.strokeStyle); + const { + _drawingOptions: { + stroke, + "stroke-opacity": opacity, + "stroke-width": thickness, + }, + } = this; - return { + const serialized = { annotationType: AnnotationEditorType.INK, - color, - thickness: this.thickness, - opacity: this.opacity, - paths: this.#serializePaths( - this.scaleFactor / this.parentScale, - this.translationX, - this.translationY, - rect - ), + color: AnnotationEditor._colorManager.convert(stroke), + opacity, + thickness, + paths: { + lines, + points, + }, pageIndex: this.pageIndex, rect, rotation: this.rotation, structTreeParentId: this._structTreeParentId, }; + + serialized.id = this.annotationElementId; + return serialized; } } diff --git a/src/display/editor/tools.js b/src/display/editor/tools.js index 40b96897babba..6b2c4ca5a82ab 100644 --- a/src/display/editor/tools.js +++ b/src/display/editor/tools.js @@ -411,6 +411,21 @@ class CommandManager { return this.#position < this.#commands.length - 1; } + cleanType(type) { + if (this.#position === -1) { + return; + } + for (let i = this.#position; i >= 0; i--) { + if (this.#commands[i].type !== type) { + this.#commands.splice(i + 1, this.#position - i); + this.#position = i; + return; + } + } + this.#commands.length = 0; + this.#position = -1; + } + destroy() { this.#commands = null; } @@ -2044,6 +2059,10 @@ class AnnotationEditorUIManager { }); } + cleanUndoStack(type) { + this.#commandManager.cleanType(type); + } + #isEmpty() { if (this.#allEditors.size === 0) { return true; @@ -2134,6 +2153,10 @@ class AnnotationEditorUIManager { } } + if (this.currentLayer?.commitOrRemove()) { + return; + } + if (!this.hasSelection) { return; } diff --git a/src/shared/util.js b/src/shared/util.js index 006c416b0db49..b6dfb4002a304 100644 --- a/src/shared/util.js +++ b/src/shared/util.js @@ -94,6 +94,7 @@ const AnnotationEditorParamsType = { HIGHLIGHT_THICKNESS: 33, HIGHLIGHT_FREE: 34, HIGHLIGHT_SHOW_ALL: 35, + DRAW_STEP: 41, }; // Permission flags from Table 22, Section 7.6.3.2 of the PDF specification. diff --git a/test/integration/ink_editor_spec.mjs b/test/integration/ink_editor_spec.mjs index 8cf5059dfb2ae..780464c660b3c 100644 --- a/test/integration/ink_editor_spec.mjs +++ b/test/integration/ink_editor_spec.mjs @@ -20,7 +20,6 @@ import { getEditorSelector, getRect, getSelectedEditors, - kbRedo, kbSelectAll, kbUndo, loadAndWait, @@ -98,46 +97,6 @@ describe("Ink Editor", () => { }) ); }); - - it("must draw, undo/redo and check that the editor don't move", async () => { - await Promise.all( - pages.map(async ([browserName, page]) => { - await clearAll(page); - - const rect = await getRect(page, ".annotationEditorLayer"); - - const xStart = rect.x + 300; - const yStart = rect.y + 300; - const clickHandle = await waitForPointerUp(page); - await page.mouse.move(xStart, yStart); - await page.mouse.down(); - await page.mouse.move(xStart + 50, yStart + 50); - await page.mouse.up(); - await awaitPromise(clickHandle); - - await commit(page); - - const rectBefore = await getRect(page, ".inkEditor canvas"); - - for (let i = 0; i < 30; i++) { - await kbUndo(page); - await waitForStorageEntries(page, 0); - await kbRedo(page); - await waitForStorageEntries(page, 1); - } - - const rectAfter = await getRect(page, ".inkEditor canvas"); - - expect(Math.round(rectBefore.x)) - .withContext(`In ${browserName}`) - .toEqual(Math.round(rectAfter.x)); - - expect(Math.round(rectBefore.y)) - .withContext(`In ${browserName}`) - .toEqual(Math.round(rectAfter.y)); - }) - ); - }); }); describe("with a rotated pdf", () => { diff --git a/test/test_manifest.json b/test/test_manifest.json index 508e2af7d2fb1..2363fb41cdf7d 100644 --- a/test/test_manifest.json +++ b/test/test_manifest.json @@ -8244,24 +8244,44 @@ "color": [255, 0, 0], "thickness": 3, "opacity": 1, - "paths": [ - { - "bezier": [ - 73, 560.2277710847244, 74.30408044851005, 561.5318515332344, - 76.89681158113368, 557.7555609512324, 77.5, 557.2277710847244, - 81.95407020558315, 553.3304596548392, 87.4811839685984, - 550.8645311043504, 92.5, 547.7277710847244, 97.38795894206055, - 544.6727967459365, 109.48854351637208, 540.2392275683522, 113.5, + "paths": { + "lines": [ + [ + null, + null, + null, + null, + 73, + 560.2277710847244, + 74.30408044851005, + 561.5318515332344, + 76.89681158113368, + 557.7555609512324, + 77.5, + 557.2277710847244, + 81.95407020558315, + 553.3304596548392, + 87.4811839685984, + 550.8645311043504, + 92.5, + 547.7277710847244, + 97.38795894206055, + 544.6727967459365, + 109.48854351637208, + 540.2392275683522, + 113.5, 536.2277710847244 - ], - "points": [ + ] + ], + "points": [ + [ 73, 560.2277710847244, 76.7257911988625, 558.1025687477292, 75.5128345111164, 559.4147224528562, 77.5, 557.2277710847244, 92.5, 547.7277710847244, 109.21378602219673, 539.2873735223628, 103.32868842191223, 542.3364518890394, 113.5, 536.2277710847244 ] - } - ], + ] + }, "pageIndex": 0, "rect": [71.5, 534.5, 115, 562], "rotation": 0 @@ -8330,22 +8350,37 @@ "color": [255, 0, 0], "thickness": 1, "opacity": 1, - "paths": [ - { - "bezier": [ - 417.61538461538464, 520.3461538461538, 419.15384615384613, - 520.3461538461538, 421.0769230769231, 520.3461538461538, - 423.38461538461536, 520.3461538461538, 425.6923076923077, - 520.3461538461538, 429.15384615384613, 519.9615384615385, - 433.7692307692308, 519.1923076923076 - ], - "points": [ + "paths": { + "lines": [ + [ + null, + null, + null, + null, + 417.61538461538464, + 520.3461538461538, + 419.15384615384613, + 520.3461538461538, + 421.0769230769231, + 520.3461538461538, + 423.38461538461536, + 520.3461538461538, + 425.6923076923077, + 520.3461538461538, + 429.15384615384613, + 519.9615384615385, + 433.7692307692308, + 519.1923076923076 + ] + ], + "points": [ + [ 417.61538461538464, 520.3461538461538, 419.15384615384613, 520.3461538461538, 425.6923076923077, 520.3461538461538, 433.7692307692308, 519.1923076923076 ] - } - ], + ] + }, "pageIndex": 0, "rect": [ 417.11538461538464, 510.46153846153845, 434.42307692307696, @@ -8358,22 +8393,37 @@ "color": [0, 255, 0], "thickness": 1, "opacity": 1, - "paths": [ - { - "bezier": [ - 449.92307692307696, 526.6538461538462, 449.92307692307696, - 527.423076923077, 449.6346153846154, 528.8653846153846, - 449.0576923076924, 530.9807692307693, 448.4807692307693, - 533.0961538461539, 447.8076923076924, 536.6538461538462, - 447.0384615384616, 541.6538461538462 - ], - "points": [ + "paths": { + "lines": [ + [ + null, + null, + null, + null, + 449.92307692307696, + 526.6538461538462, + 449.92307692307696, + 527.423076923077, + 449.6346153846154, + 528.8653846153846, + 449.0576923076924, + 530.9807692307693, + 448.4807692307693, + 533.0961538461539, + 447.8076923076924, + 536.6538461538462, + 447.0384615384616, + 541.6538461538462 + ] + ], + "points": [ + [ 449.92307692307696, 526.6538461538462, 449.92307692307696, 527.423076923077, 448.4807692307693, 533.0961538461539, 447.0384615384616, 541.6538461538462 ] - } - ], + ] + }, "pageIndex": 0, "rect": [ 446.5384615384616, 526.1538461538462, 456.92307692307696, @@ -8386,22 +8436,37 @@ "color": [0, 0, 255], "thickness": 1, "opacity": 1, - "paths": [ - { - "bezier": [ - 482.8461538461538, 511.6538461538462, 482.07692307692304, - 511.6538461538462, 480.53846153846155, 511.6538461538462, - 478.23076923076917, 511.6538461538462, 475.9230769230769, - 511.6538461538462, 472.46153846153845, 511.6538461538462, - 467.8461538461538, 511.6538461538462 - ], - "points": [ + "paths": { + "lines": [ + [ + null, + null, + null, + null, + 482.8461538461538, + 511.6538461538462, + 482.07692307692304, + 511.6538461538462, + 480.53846153846155, + 511.6538461538462, + 478.23076923076917, + 511.6538461538462, + 475.9230769230769, + 511.6538461538462, + 472.46153846153845, + 511.6538461538462, + 467.8461538461538, + 511.6538461538462 + ] + ], + "points": [ + [ 482.8461538461538, 511.6538461538462, 482.07692307692304, 511.6538461538462, 475.9230769230769, 511.6538461538462, 467.8461538461538, 511.6538461538462 ] - } - ], + ] + }, "pageIndex": 0, "rect": [ 467.1923076923077, 511.1538461538462, 483.3461538461538, @@ -8414,22 +8479,37 @@ "color": [0, 255, 255], "thickness": 1, "opacity": 1, - "paths": [ - { - "bezier": [ - 445.9230769230769, 509.3846153846154, 445.5384615384615, - 509.3846153846154, 445.15384615384613, 508.1346153846154, - 444.7692307692307, 505.6346153846154, 444.38461538461536, - 503.1346153846154, 443.23076923076917, 499.00000000000006, - 441.30769230769226, 493.2307692307693 - ], - "points": [ + "paths": { + "lines": [ + [ + null, + null, + null, + null, + 445.9230769230769, + 509.3846153846154, + 445.5384615384615, + 509.3846153846154, + 445.15384615384613, + 508.1346153846154, + 444.7692307692307, + 505.6346153846154, + 444.38461538461536, + 503.1346153846154, + 443.23076923076917, + 499.00000000000006, + 441.30769230769226, + 493.2307692307693 + ] + ], + "points": [ + [ 445.9230769230769, 509.3846153846154, 445.5384615384615, 509.3846153846154, 444.38461538461536, 503.1346153846154, 441.30769230769226, 493.2307692307693 ] - } - ], + ] + }, "pageIndex": 0, "rect": [ 436.03846153846155, 492.5769230769231, 446.4230769230769, @@ -9599,12 +9679,12 @@ "color": [53, 228, 47], "thickness": 20, "opacity": 1, - "paths": [ - { - "bezier": [279.9183673469388, 477.0105263157895], - "points": [279.9183673469388, 477.0105263157895] - } - ], + "paths": { + "lines": [ + [null, null, null, null, 279.9183673469388, 477.0105263157895] + ], + "points": [[279.9183673469388, 477.0105263157895]] + }, "pageIndex": 0, "rect": [ 269.9183673469388, 443.93684210526317, 312.9387755102041, diff --git a/test/unit/annotation_spec.js b/test/unit/annotation_spec.js index 7c840704d859d..bc50065c2df1c 100644 --- a/test/unit/annotation_spec.js +++ b/test/unit/annotation_spec.js @@ -4448,21 +4448,54 @@ describe("annotation", function () { thickness: 1, opacity: 1, color: [0, 0, 0], - paths: [ - { - bezier: [ - 10, 11, 12, 13, 14, 15, 16, 17, 22, 23, 24, 25, 26, 27, + paths: { + lines: [ + [ + NaN, + NaN, + NaN, + NaN, + 10, + 11, + 12, + 13, + 14, + 15, + 16, + 17, + 22, + 23, + 24, + 25, + 26, + 27, ], - points: [1, 2, 3, 4, 5, 6, 7, 8], - }, - { - bezier: [ - 910, 911, 912, 913, 914, 915, 916, 917, 922, 923, 924, 925, - 926, 927, + [ + NaN, + NaN, + NaN, + NaN, + 910, + 911, + 912, + 913, + 914, + 915, + 916, + 917, + 922, + 923, + 924, + 925, + 926, + 927, ], - points: [91, 92, 93, 94, 95, 96, 97, 98], - }, - ], + ], + points: [ + [1, 2, 3, 4, 5, 6, 7, 8], + [91, 92, 93, 94, 95, 96, 97, 98], + ], + }, }, ], null, @@ -4482,13 +4515,12 @@ describe("annotation", function () { const appearance = data[1].data; expect(appearance).toEqual( "2 0 obj\n" + - "<< /FormType 1 /Subtype /Form /Type /XObject /BBox [12 34 56 78] /Length 129>> stream\n" + + "<< /FormType 1 /Subtype /Form /Type /XObject /BBox [12 34 56 78] /Length 127>> stream\n" + "1 w 1 J 1 j\n" + "0 G\n" + "10 11 m\n" + "12 13 14 15 16 17 c\n" + "22 23 24 25 26 27 c\n" + - "S\n" + "910 911 m\n" + "912 913 914 915 916 917 c\n" + "922 923 924 925 926 927 c\n" + @@ -4513,21 +4545,54 @@ describe("annotation", function () { thickness: 1, opacity: 0.12, color: [0, 0, 0], - paths: [ - { - bezier: [ - 10, 11, 12, 13, 14, 15, 16, 17, 22, 23, 24, 25, 26, 27, + paths: { + lines: [ + [ + NaN, + NaN, + NaN, + NaN, + 10, + 11, + 12, + 13, + 14, + 15, + 16, + 17, + 22, + 23, + 24, + 25, + 26, + 27, ], - points: [1, 2, 3, 4, 5, 6, 7, 8], - }, - { - bezier: [ - 910, 911, 912, 913, 914, 915, 916, 917, 922, 923, 924, 925, - 926, 927, + [ + NaN, + NaN, + NaN, + NaN, + 910, + 911, + 912, + 913, + 914, + 915, + 916, + 917, + 922, + 923, + 924, + 925, + 926, + 927, ], - points: [91, 92, 93, 94, 95, 96, 97, 98], - }, - ], + ], + points: [ + [1, 2, 3, 4, 5, 6, 7, 8], + [91, 92, 93, 94, 95, 96, 97, 98], + ], + }, }, ], null, @@ -4547,7 +4612,7 @@ describe("annotation", function () { const appearance = data[1].data; expect(appearance).toEqual( "2 0 obj\n" + - "<< /FormType 1 /Subtype /Form /Type /XObject /BBox [12 34 56 78] /Length 136 /Resources " + + "<< /FormType 1 /Subtype /Form /Type /XObject /BBox [12 34 56 78] /Length 134 /Resources " + "<< /ExtGState << /R0 << /CA 0.12 /Type /ExtGState>>>>>>>> stream\n" + "1 w 1 J 1 j\n" + "0 G\n" + @@ -4555,7 +4620,6 @@ describe("annotation", function () { "10 11 m\n" + "12 13 14 15 16 17 c\n" + "22 23 24 25 26 27 c\n" + - "S\n" + "910 911 m\n" + "912 913 914 915 916 917 c\n" + "922 923 924 925 926 927 c\n" + @@ -4581,13 +4645,10 @@ describe("annotation", function () { thickness: 3, opacity: 1, color: [0, 255, 0], - paths: [ - { - bezier: [1, 2, 3, 4, 5, 6, 7, 8], - // Useless in the printing case. - points: [1, 2, 3, 4, 5, 6, 7, 8], - }, - ], + paths: { + lines: [[NaN, NaN, NaN, NaN, 1, 2, 3, 4, 5, 6, 7, 8]], + points: [[1, 2, 3, 4, 5, 6, 7, 8]], + }, }, ] ) diff --git a/web/annotation_editor_layer_builder.css b/web/annotation_editor_layer_builder.css index 9592b9a744f24..f14894440aa63 100644 --- a/web/annotation_editor_layer_builder.css +++ b/web/annotation_editor_layer_builder.css @@ -66,19 +66,21 @@ font-size: 0; } -.textLayer.highlighting { - cursor: var(--editorFreeHighlight-editing-cursor); +.textLayer { + &.highlighting { + cursor: var(--editorFreeHighlight-editing-cursor); - &:not(.free) span { - cursor: var(--editorHighlight-editing-cursor); + &:not(.free) span { + cursor: var(--editorHighlight-editing-cursor); - &[role="img"] { - cursor: var(--editorFreeHighlight-editing-cursor); + &[role="img"] { + cursor: var(--editorFreeHighlight-editing-cursor); + } } - } - &.free span { - cursor: var(--editorFreeHighlight-editing-cursor); + &.free span { + cursor: var(--editorFreeHighlight-editing-cursor); + } } } @@ -154,6 +156,11 @@ .annotationEditorLayer.inkEditing { cursor: var(--editorInk-editing-cursor); + touch-action: none; +} + +.annotationEditorLayer .draw { + box-sizing: border-box; } .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) { diff --git a/web/draw_layer_builder.css b/web/draw_layer_builder.css index e4b6ae385adfb..5ea206ced7657 100644 --- a/web/draw_layer_builder.css +++ b/web/draw_layer_builder.css @@ -17,6 +17,10 @@ svg { transform: none; + &.moving { + z-index: 100000; + } + &.highlight, &.highlightOutline { &[data-main-rotation="90"] { @@ -41,6 +45,23 @@ } } + &.draw { + position: absolute; + mix-blend-mode: normal; + + &[data-draw-rotation="90"] { + transform: rotate(90deg); + } + + &[data-draw-rotation="180"] { + transform: rotate(180deg); + } + + &[data-draw-rotation="270"] { + transform: rotate(270deg); + } + } + &.highlight { --blend-mode: multiply; diff --git a/web/viewer.html b/web/viewer.html index 1a8eb7f10dc13..860826cbbbcd6 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -300,7 +300,7 @@
- +