ff23d37fa2
The doorhanger for highlighting has a basic color picker composed of 5 predefined colors to set the default color to use. These colors can be changed thanks to a preference for now but it's something which could be changed in the Firefox settings in the future. Each highlight has in its own toolbar a color picker to just change its color. The different color pickers are so similar (modulo few differences in their styles) that this patch introduces a new class ColorPicker which provides a color picker component which could be reused in future editors. All in all, a large part of this patch is dedicated to color picker itself and its style and the rest is almost a matter of wiring the component.
87 lines
2.7 KiB
JavaScript
87 lines
2.7 KiB
JavaScript
/* Copyright 2022 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import { AnnotationEditorParamsType } from "pdfjs-lib";
|
|
|
|
class AnnotationEditorParams {
|
|
/**
|
|
* @param {AnnotationEditorParamsOptions} options
|
|
* @param {EventBus} eventBus
|
|
*/
|
|
constructor(options, eventBus) {
|
|
this.eventBus = eventBus;
|
|
this.#bindListeners(options);
|
|
}
|
|
|
|
#bindListeners({
|
|
editorFreeTextFontSize,
|
|
editorFreeTextColor,
|
|
editorInkColor,
|
|
editorInkThickness,
|
|
editorInkOpacity,
|
|
editorStampAddImage,
|
|
}) {
|
|
const dispatchEvent = (typeStr, value) => {
|
|
this.eventBus.dispatch("switchannotationeditorparams", {
|
|
source: this,
|
|
type: AnnotationEditorParamsType[typeStr],
|
|
value,
|
|
});
|
|
};
|
|
editorFreeTextFontSize.addEventListener("input", function () {
|
|
dispatchEvent("FREETEXT_SIZE", this.valueAsNumber);
|
|
});
|
|
editorFreeTextColor.addEventListener("input", function () {
|
|
dispatchEvent("FREETEXT_COLOR", this.value);
|
|
});
|
|
editorInkColor.addEventListener("input", function () {
|
|
dispatchEvent("INK_COLOR", this.value);
|
|
});
|
|
editorInkThickness.addEventListener("input", function () {
|
|
dispatchEvent("INK_THICKNESS", this.valueAsNumber);
|
|
});
|
|
editorInkOpacity.addEventListener("input", function () {
|
|
dispatchEvent("INK_OPACITY", this.valueAsNumber);
|
|
});
|
|
editorStampAddImage.addEventListener("click", () => {
|
|
dispatchEvent("CREATE");
|
|
});
|
|
|
|
this.eventBus._on("annotationeditorparamschanged", evt => {
|
|
for (const [type, value] of evt.details) {
|
|
switch (type) {
|
|
case AnnotationEditorParamsType.FREETEXT_SIZE:
|
|
editorFreeTextFontSize.value = value;
|
|
break;
|
|
case AnnotationEditorParamsType.FREETEXT_COLOR:
|
|
editorFreeTextColor.value = value;
|
|
break;
|
|
case AnnotationEditorParamsType.INK_COLOR:
|
|
editorInkColor.value = value;
|
|
break;
|
|
case AnnotationEditorParamsType.INK_THICKNESS:
|
|
editorInkThickness.value = value;
|
|
break;
|
|
case AnnotationEditorParamsType.INK_OPACITY:
|
|
editorInkOpacity.value = value;
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
export { AnnotationEditorParams };
|