mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-08 17:30:09 +02:00
[Editor] - Add the ability to directly draw after selecting ink tool
- Right now, we must select the tool, then click to select a page and click to start drawing and it's a bit painful; - so just create a new ink editor when we're hovering a page without one.
This commit is contained in:
parent
89cebcb6f9
commit
e7dc1ef4f3
6 changed files with 162 additions and 39 deletions
|
@ -21,11 +21,11 @@ import { fitCurve } from "./fit_curve/fit_curve.js";
|
|||
* Basic draw editor in order to generate an Ink annotation.
|
||||
*/
|
||||
class InkEditor extends AnnotationEditor {
|
||||
#aspectRatio;
|
||||
#aspectRatio = 0;
|
||||
|
||||
#baseHeight;
|
||||
#baseHeight = 0;
|
||||
|
||||
#baseWidth;
|
||||
#baseWidth = 0;
|
||||
|
||||
#boundCanvasMousemove;
|
||||
|
||||
|
@ -35,9 +35,9 @@ class InkEditor extends AnnotationEditor {
|
|||
|
||||
#boundCanvasMousedown;
|
||||
|
||||
#disableEditing;
|
||||
#disableEditing = false;
|
||||
|
||||
#observer;
|
||||
#observer = null;
|
||||
|
||||
constructor(params) {
|
||||
super({ ...params, name: "inkEditor" });
|
||||
|
@ -48,10 +48,6 @@ class InkEditor extends AnnotationEditor {
|
|||
this.currentPath = [];
|
||||
this.scaleFactor = 1;
|
||||
this.translationX = this.translationY = 0;
|
||||
this.#baseWidth = this.#baseHeight = 0;
|
||||
this.#aspectRatio = 0;
|
||||
this.#disableEditing = false;
|
||||
this.#observer = null;
|
||||
this.x = 0;
|
||||
this.y = 0;
|
||||
|
||||
|
@ -113,8 +109,6 @@ class InkEditor extends AnnotationEditor {
|
|||
return;
|
||||
}
|
||||
|
||||
super.remove();
|
||||
|
||||
// Destroy the canvas.
|
||||
this.canvas.width = this.canvas.heigth = 0;
|
||||
this.canvas.remove();
|
||||
|
@ -122,11 +116,13 @@ class InkEditor extends AnnotationEditor {
|
|||
|
||||
this.#observer.disconnect();
|
||||
this.#observer = null;
|
||||
|
||||
super.remove();
|
||||
}
|
||||
|
||||
/** @inheritdoc */
|
||||
enableEditMode() {
|
||||
if (this.#disableEditing) {
|
||||
if (this.#disableEditing || this.canvas === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -145,7 +141,7 @@ class InkEditor extends AnnotationEditor {
|
|||
|
||||
super.disableEditMode();
|
||||
this.canvas.style.cursor = "auto";
|
||||
this.div.draggable = true;
|
||||
this.div.draggable = !this.isEmpty();
|
||||
this.div.classList.remove("editing");
|
||||
|
||||
this.canvas.removeEventListener("mousedown", this.#boundCanvasMousedown);
|
||||
|
@ -154,6 +150,7 @@ class InkEditor extends AnnotationEditor {
|
|||
|
||||
/** @inheritdoc */
|
||||
onceAdded() {
|
||||
this.div.draggable = !this.isEmpty();
|
||||
this.div.focus();
|
||||
}
|
||||
|
||||
|
@ -238,11 +235,15 @@ class InkEditor extends AnnotationEditor {
|
|||
if (this.paths.length === 0) {
|
||||
this.remove();
|
||||
} else {
|
||||
if (!this.canvas) {
|
||||
this.#createCanvas();
|
||||
this.#createObserver();
|
||||
}
|
||||
this.#fitToContent();
|
||||
}
|
||||
};
|
||||
|
||||
this.parent.addCommands(cmd, undo);
|
||||
this.parent.addCommands(cmd, undo, true);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -273,8 +274,12 @@ class InkEditor extends AnnotationEditor {
|
|||
if (this.#disableEditing) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.disableEditMode();
|
||||
|
||||
// This editor must be on top of the main ink editor.
|
||||
this.setInForeground();
|
||||
|
||||
this.#disableEditing = true;
|
||||
this.div.classList.add("disabled");
|
||||
|
||||
|
@ -297,6 +302,10 @@ class InkEditor extends AnnotationEditor {
|
|||
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.stopPropagation();
|
||||
|
||||
this.canvas.addEventListener("mouseleave", this.#boundCanvasMouseleave);
|
||||
|
@ -324,6 +333,10 @@ class InkEditor extends AnnotationEditor {
|
|||
if (this.isInEditMode() && this.currentPath.length !== 0) {
|
||||
event.stopPropagation();
|
||||
this.#endDrawing(event);
|
||||
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -334,6 +347,7 @@ class InkEditor extends AnnotationEditor {
|
|||
*/
|
||||
canvasMouseleave(event) {
|
||||
this.#endDrawing(event);
|
||||
this.setInBackground();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue