feat: add draw bar with options

This commit is contained in:
Michal Szczepanski 2023-09-14 00:54:28 +02:00
parent fccfa04ee4
commit c79bab674c
10 changed files with 224 additions and 50 deletions

@ -0,0 +1,96 @@
/*
* This file is part of the pinmenote-extension distribution (https://github.com/pinmenote/pinmenote-extension).
* Copyright (c) 2023 Michal Szczepanski.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { DrawNewButton } from './draw-main-buttons/draw-new.button';
import { DrawNewCancelButton } from './draw-main-buttons/draw-new-cancel.button';
import { HtmlComponent } from '../model/pin-view.model';
import { PinEditManager } from '../pin-edit.manager';
import { PinEditModel } from '../model/pin-edit.model';
import { applyStylesToElement } from '../../../style.utils';
const barStyles = {
top: '-24px',
height: '24px',
position: 'absolute',
'background-color': '#ffffff',
display: 'none'
};
export class DrawBarMainComponent implements HtmlComponent<HTMLElement> {
private readonly el: HTMLDivElement;
private visible = false;
private readonly newDraw: DrawNewButton;
private readonly cancelDraw: DrawNewCancelButton;
constructor(private edit: PinEditManager, private model: PinEditModel) {
this.el = model.doc.document.createElement('div');
this.newDraw = new DrawNewButton(edit, model);
this.cancelDraw = new DrawNewCancelButton(edit, model);
}
render(): HTMLElement {
const style = Object.assign({ width: `${this.model.rect.width}px` }, barStyles);
applyStylesToElement(this.el, style);
this.el.appendChild(this.newDraw.render());
this.el.appendChild(this.cancelDraw.render());
this.adjustTop();
return this.el;
}
cleanup(): void {
this.newDraw.cleanup();
}
resize(): void {
this.el.style.width = `${this.model.rect.width}px`;
this.adjustTop();
}
focusin(): void {
if (this.visible) this.el.style.display = 'flex';
}
focusout(): void {
this.el.style.display = 'none';
}
show(): void {
this.visible = true;
this.focusin();
}
hide(): void {
this.visible = false;
this.focusout();
}
/**
* Element is on top of page that's why we show bar overlapping element
* @private
*/
private adjustTop(): void {
if (this.model.rect.y === 0) {
this.el.style.top = '24px';
} else {
this.el.style.top = '-24px';
}
}
}

@ -28,7 +28,7 @@ import { DrawUndoButton } from './draw-buttons/draw-undo.button';
import { PinEditModel } from '../model/pin-edit.model';
import { applyStylesToElement } from '../../../style.utils';
const drawBarStyles = {
const barStyles = {
top: '-24px',
height: '24px',
position: 'absolute',
@ -178,7 +178,7 @@ export class DrawBarComponent implements HtmlComponent<HTMLElement>, HtmlCompone
}
render(): HTMLElement {
const style = Object.assign({ width: `${this.model.rect.width}px` }, drawBarStyles);
const style = Object.assign({ width: `${this.model.rect.width}px` }, barStyles);
applyStylesToElement(this.el, style);
this.placeComponent(this.pencil.render(), 5);

@ -0,0 +1,23 @@
/*
* This file is part of the pinmenote-extension distribution (https://github.com/pinmenote/pinmenote-extension).
* Copyright (c) 2023 Michal Szczepanski.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { HtmlComponent } from '../model/pin-view.model';
export class DrawListComponent implements HtmlComponent<void> {
render(): void {
return undefined;
}
}

@ -14,46 +14,37 @@
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { HtmlComponent } from '../../../model/pin-view.model';
import { PinEditManager } from '../../../pin-edit.manager';
import { PinEditModel } from '../../../model/pin-edit.model';
import { applyStylesToElement } from '../../../../../style.utils';
import { fnConsoleLog } from '../../../../../fn/fn-console';
import { iconButtonStyles } from '../../../styles/icon-button.styles';
import { HtmlComponent } from '../../model/pin-view.model';
import { PinEditManager } from '../../pin-edit.manager';
import { PinEditModel } from '../../model/pin-edit.model';
import { applyStylesToElement } from '../../../../style.utils';
export class ActionDrawActionButton implements HtmlComponent<HTMLElement> {
export class DrawNewCancelButton implements HtmlComponent<HTMLElement> {
private readonly el: HTMLDivElement;
private fillColor: string;
constructor(private edit: PinEditManager, private model: PinEditModel) {
this.el = model.doc.document.createElement('div');
this.fillColor = model.local.drawVisible ? '#ff0000' : '#000000';
}
render(): HTMLElement {
this.el.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</svg>`;
this.el.innerText = 'Cancel';
this.el.addEventListener('click', this.handleClick);
applyStylesToElement(this.el, iconButtonStyles);
if (!this.model.local.drawVisible) this.hide();
applyStylesToElement(this.el, {
cursor: 'pointer',
color: '#000',
'font-size': '1em',
'font-weight': 'bold',
'margin-left': '10px'
});
return this.el;
}
handleClick = () => {
this.edit.cancelDraw();
this.model.topBar.drawTurnoff();
};
cleanup(): void {
this.el.removeEventListener('click', this.handleClick);
}
show(): void {
if (this.model.local.drawVisible) this.el.style.display = 'inline-block';
}
hide(): void {
this.el.style.display = 'none';
}
handleClick = () => {
fnConsoleLog('draw action button');
};
}

@ -0,0 +1,49 @@
/*
* This file is part of the pinmenote-extension distribution (https://github.com/pinmenote/pinmenote-extension).
* Copyright (c) 2023 Michal Szczepanski.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, version 3.
*
* This program is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { HtmlComponent } from '../../model/pin-view.model';
import { PinEditManager } from '../../pin-edit.manager';
import { PinEditModel } from '../../model/pin-edit.model';
import { applyStylesToElement } from '../../../../style.utils';
export class DrawNewButton implements HtmlComponent<HTMLElement> {
private readonly el: HTMLDivElement;
constructor(private edit: PinEditManager, private model: PinEditModel) {
this.el = model.doc.document.createElement('div');
}
render(): HTMLElement {
this.el.innerText = 'New';
this.el.addEventListener('click', this.handleClick);
applyStylesToElement(this.el, {
cursor: 'pointer',
color: '#000',
'font-size': '1em',
'font-weight': 'bold',
'margin-left': '10px'
});
return this.el;
}
handleClick = () => {
this.edit.newDraw();
};
cleanup(): void {
this.el.removeEventListener('click', this.handleClick);
}
}

@ -19,6 +19,7 @@ import { fnConsoleLog } from '../../fn/fn-console';
enum VisibleState {
None = 1,
DrawMain,
DrawBar,
PinEditBar,
DownloadBar
@ -36,17 +37,23 @@ export class PinEditManager {
}
startDraw = () => {
this.parent.drawComponent.drawArea.canDraw = true;
this.parent.topBar.drawVisibleIcon.hide();
this.parent.topBar.drawActionIcon.hide();
this.changeVisibleBar(VisibleState.DrawMain);
};
newDraw = () => {
this.parent.drawComponent.drawArea.canDraw = true;
this.changeVisibleBar(VisibleState.DrawBar);
};
cancelDraw = () => {
this.stopEdit();
this.parent.topBar.drawVisibleIcon.show();
};
stopDraw = () => {
this.parent.drawComponent.drawArea.canDraw = false;
this.stopEdit();
this.parent.topBar.drawVisibleIcon.show();
this.parent.topBar.drawActionIcon.show();
this.cancelDraw();
};
showDraw = () => {
@ -96,6 +103,9 @@ export class PinEditManager {
this.parent.drawBar.hide();
this.parent.topBar.drawTurnoff();
}
if (this.prevState === VisibleState.DrawMain) {
this.parent.drawMain.hide();
}
// Edit cleanup
if (this.prevState === VisibleState.PinEditBar) {
@ -119,6 +129,11 @@ export class PinEditManager {
this.parent.editBar.show();
break;
case VisibleState.DrawMain: {
this.parent.topBar.moveup();
this.parent.drawMain.show();
break;
}
case VisibleState.DrawBar:
this.parent.topBar.moveup();
this.parent.drawComponent.focusin();

@ -19,6 +19,7 @@ import { BottomBarComponent } from './bottom-bar/bottom-bar.component';
import { DocumentMediator } from '../../../content-script/mediator/document.mediator';
import { DownloadBarComponent } from './download-bar/download-bar.component';
import { DrawBarComponent } from './draw-bar/draw-bar.component';
import { DrawBarMainComponent } from './draw-bar/draw-bar-main.component';
import { DrawContainerComponent } from './draw-container.component';
import { DrawToolDto } from '../../model/obj/obj-draw.dto';
import { ObjDto } from '../../model/obj/obj.dto';
@ -49,6 +50,7 @@ export class PinComponent implements HtmlComponent<void>, PageComponent {
readonly drawComponent: DrawContainerComponent;
readonly drawBar: DrawBarComponent;
readonly drawMain: DrawBarMainComponent;
readonly downloadBar: DownloadBarComponent;
@ -71,6 +73,7 @@ export class PinComponent implements HtmlComponent<void>, PageComponent {
this.text = new TextContainerComponent(this.model);
this.drawBar = new DrawBarComponent(this.model);
this.drawMain = new DrawBarMainComponent(this.edit, this.model);
this.drawComponent = new DrawContainerComponent(this.model);
this.downloadBar = new DownloadBarComponent(this.edit, this.model);
@ -113,9 +116,12 @@ export class PinComponent implements HtmlComponent<void>, PageComponent {
// Draw
this.top.appendChild(this.drawComponent.render());
this.top.appendChild(this.drawMain.render());
this.top.appendChild(this.drawBar.render());
this.drawBar.setSize(4);
this.drawBar.setTool(DrawToolDto.Pencil);
if (this.model.local.drawVisible) {
this.drawComponent.focusin();
this.drawComponent.drawArea.canDraw = false;
@ -162,8 +168,11 @@ export class PinComponent implements HtmlComponent<void>, PageComponent {
this.text.resize();
this.topBar.resize();
this.bottomBar.resize();
this.drawComponent.resize();
this.drawBar.resize();
this.drawMain.resize();
this.downloadBar.resize();
this.editBar.resize();
};
@ -182,6 +191,7 @@ export class PinComponent implements HtmlComponent<void>, PageComponent {
this.drawComponent.cleanup();
this.drawBar.cleanup();
this.drawMain.cleanup();
this.editBar.cleanup();
}

@ -57,12 +57,10 @@ export class ActionDrawVisibleButton implements HtmlComponent<HTMLElement> {
this.fillColor = '#000000';
this.model.local.drawVisible = false;
this.edit.hideDraw();
this.model.topBar.drawActionIcon.hide();
} else {
this.fillColor = '#ff0000';
this.model.local.drawVisible = true;
this.edit.showDraw();
this.model.topBar.drawActionIcon.show();
}
(this.el.firstChild as HTMLElement).setAttribute('fill', this.fillColor);
await new PinUpdateCommand(this.model.object).execute();

@ -17,7 +17,6 @@
import { HtmlComponent, HtmlComponentFocusable } from '../model/pin-view.model';
import { ActionCopyButton } from './action-buttons/action-copy.button';
import { ActionDownloadButton } from './action-buttons/action-download.button';
import { ActionDrawActionButton } from './action-buttons/draw/action-draw-action.button';
import { ActionDrawButton } from './action-buttons/draw/action-draw.button';
import { ActionDrawVisibleButton } from './action-buttons/draw/action-draw-visible.button';
import { ActionPinEditButton } from './action-buttons/action-pin-edit.button';
@ -68,12 +67,6 @@ const drawVisibleIconStyles = {
'background-color': '#ffffff00'
};
const drawActionStyles = {
left: '48px',
position: 'absolute',
'background-color': '#ffffff00'
};
export class TopBarComponent implements HtmlComponent<HTMLElement>, HtmlComponentFocusable {
private readonly el: HTMLDivElement;
@ -84,7 +77,6 @@ export class TopBarComponent implements HtmlComponent<HTMLElement>, HtmlComponen
private readonly drawIcon: ActionDrawButton;
readonly drawVisibleIcon: ActionDrawVisibleButton;
readonly drawActionIcon: ActionDrawActionButton;
private topMargin = '-24px';
@ -97,7 +89,6 @@ export class TopBarComponent implements HtmlComponent<HTMLElement>, HtmlComponen
this.drawIcon = new ActionDrawButton(edit, model);
this.drawVisibleIcon = new ActionDrawVisibleButton(edit, model);
this.drawActionIcon = new ActionDrawActionButton(edit, model);
}
focusin(): void {
@ -154,10 +145,6 @@ export class TopBarComponent implements HtmlComponent<HTMLElement>, HtmlComponen
this.el.appendChild(drawVisible);
applyStylesToElement(drawVisible, drawVisibleIconStyles);
const drawAction = this.drawActionIcon.render();
this.el.append(drawAction);
applyStylesToElement(drawAction, drawActionStyles);
this.adjustTop();
return this.el;

@ -38,6 +38,11 @@ export class ObjectStoreKeys {
static readonly SEARCH_WORD = 's:w';
static readonly SEARCH_START = 's:s';
// TAG
static readonly TAG_INDEX = 't:i';
static readonly TAG_WORD = 't:w';
static readonly TAG_START = 't:s';
static readonly ACCESS_TOKEN = 'accessToken';
// SYNC