[editor] Add some UI elements in order to set font size & color, and ink thickness & color

This commit is contained in:
Calixte Denizet 2022-06-13 18:23:10 +02:00
parent 4e025e1f08
commit 1a3ef2a0aa
20 changed files with 624 additions and 65 deletions

View file

@ -104,7 +104,9 @@ class Toolbar {
zoomOut: options.zoomOut,
editorNoneButton: options.editorNoneButton,
editorFreeTextButton: options.editorFreeTextButton,
editorFreeTextParamsToolbar: options.editorFreeTextParamsToolbar,
editorInkButton: options.editorInkButton,
editorInkParamsToolbar: options.editorInkParamsToolbar,
};
this._wasLocalized = false;
@ -212,20 +214,33 @@ class Toolbar {
#bindEditorToolsListener({
editorNoneButton,
editorFreeTextButton,
editorFreeTextParamsToolbar,
editorInkButton,
editorInkParamsToolbar,
}) {
const editorModeChanged = (evt, disableButtons = false) => {
const editorButtons = [
[AnnotationEditorType.NONE, editorNoneButton],
[AnnotationEditorType.FREETEXT, editorFreeTextButton],
[AnnotationEditorType.INK, editorInkButton],
{ mode: AnnotationEditorType.NONE, button: editorNoneButton },
{
mode: AnnotationEditorType.FREETEXT,
button: editorFreeTextButton,
toolbar: editorFreeTextParamsToolbar,
},
{
mode: AnnotationEditorType.INK,
button: editorInkButton,
toolbar: editorInkParamsToolbar,
},
];
for (const [mode, button] of editorButtons) {
for (const { mode, button, toolbar } of editorButtons) {
const checked = mode === evt.mode;
button.classList.toggle("toggled", checked);
button.setAttribute("aria-checked", checked);
button.disabled = disableButtons;
if (toolbar) {
toolbar.classList.toggle("hidden", !checked);
}
}
};
this.eventBus._on("annotationeditormodechanged", editorModeChanged);