feat: add draw bar with options
This commit is contained in:
parent
fccfa04ee4
commit
c79bab674c
@ -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);
|
||||
|
23
src/common/components/pin/draw-bar/draw-list.component.ts
Normal file
23
src/common/components/pin/draw-bar/draw-list.component.ts
Normal file
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user