ZenBrowserMirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/zen-browser/pdf.js.git synced 2025-07-08 09:20:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

[Editor] Always have an ink editor (when in ink mode)

Browse source 
Previously it was created only on mouseover event but on a touch screen
there are no fingerover event...
The idea behind creating the ink editor on mouseover was to avoid to have
a canvas on each visible page.
So now, when the editor is created, the canvas has dimensions 1x1 and
only when the user starts drawing the dimensions are set to the page ones.
This commit is contained in:
Calixte Denizet 2022-07-12 17:32:14 +02:00
parent 220f980e12
commit 2df2defa02
6 changed files with 97 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/display/editor/ink.js
View file

@ -41,6 +41,8 @@ class InkEditor extends AnnotationEditor {
#disableEditing = false;
#isCanvasInitialized = false;
#observer = null;
#realWidth = 0;
@ -53,11 +55,8 @@ class InkEditor extends AnnotationEditor {
constructor(params) {
super({ ...params, name: "inkEditor" });
this.color =
params.color ||
InkEditor._defaultColor ||
AnnotationEditor._defaultLineColor;
this.thickness = params.thickness || InkEditor._defaultThickness;
this.color = params.color || null;
this.thickness = params.thickness || null;
this.paths = [];
this.bezierPath2D = [];
this.currentPath = [];
@ -255,7 +254,6 @@ class InkEditor extends AnnotationEditor {
/** @inheritdoc */
onceAdded() {
this.div.draggable = !this.isEmpty();
this.div.focus();
}
/** @inheritdoc */
@ -298,6 +296,13 @@ class InkEditor extends AnnotationEditor {
* @param {number} y
*/
#startDrawing(x, y) {
if (!this.#isCanvasInitialized) {
this.#isCanvasInitialized = true;
this.#setCanvasDims();
this.thickness ||= InkEditor._defaultThickness;
this.color ||=
InkEditor._defaultColor || AnnotationEditor._defaultLineColor;
}
this.currentPath.push([x, y]);
this.#setStroke();
this.ctx.beginPath();
@ -406,6 +411,8 @@ class InkEditor extends AnnotationEditor {
this.div.classList.add("disabled");
this.#fitToContent();
this.parent.addInkEditorIfNeeded(/* isCommitting = */ true);
}
/** @inheritdoc */
@ -491,6 +498,7 @@ class InkEditor extends AnnotationEditor {
*/
#createCanvas() {
this.canvas = document.createElement("canvas");
this.canvas.width = this.canvas.height = 0;
this.canvas.className = "inkEditorCanvas";
this.div.append(this.canvas);
this.ctx = this.canvas.getContext("2d");
@ -522,7 +530,6 @@ class InkEditor extends AnnotationEditor {
}
super.render();
this.div.classList.add("editing");
const [x, y, w, h] = this.#getInitialBBox();
this.setAt(x, y, 0, 0);
this.setDims(w, h);
@ -531,6 +538,7 @@ class InkEditor extends AnnotationEditor {
if (this.width) {
// This editor was created in using copy (ctrl+c).
this.#isCanvasInitialized = true;
const [parentWidth, parentHeight] = this.parent.viewportBaseDimensions;
this.setAt(
baseX * parentWidth,
@ -542,6 +550,9 @@ class InkEditor extends AnnotationEditor {
this.#setCanvasDims();
this.#redraw();
this.div.classList.add("disabled");
} else {
this.div.classList.add("editing");
this.enableEditMode();
}
this.#createObserver();
@ -550,6 +561,9 @@ class InkEditor extends AnnotationEditor {
}
#setCanvasDims() {
if (!this.#isCanvasInitialized) {
return;
}
const [parentWidth, parentHeight] = this.parent.viewportBaseDimensions;
this.canvas.width = this.width * parentWidth;
this.canvas.height = this.height * parentHeight;
@ -861,6 +875,10 @@ class InkEditor extends AnnotationEditor {
/** @inheritdoc */
serialize() {
if (this.isEmpty()) {
return null;
}
const rect = this.getRect(0, 0);
const height =
this.rotation % 180 === 0 ? rect[3] - rect[1] : rect[2] - rect[0];