Skip to content

Commit

Permalink
🐛 active btn if button not visible / add custombtn
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabienwnklr
fabienwnklr committed Sep 28, 2023
1 parent 09d89dd commit bf37850
Showing 1 changed file with 55 additions and 26 deletions.
81 changes: 55 additions & 26 deletions src/Drawer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export class Drawer extends History {
dotted: boolean = false;
// options
options: DrawerOptions = defaultOptionsDrawer;
customBtn: { [key: string]: HTMLButtonElement } = {};
// HTML Elements
declare $canvas: HTMLCanvasElement;
$sourceElement: HTMLElement;
Expand Down Expand Up @@ -107,9 +108,9 @@ export class Drawer extends History {
*/
private _buildDrawer() {
try {
this.$drawerContainer = stringToHTMLElement<HTMLDivElement>(/*html*/`<div class="drawer-container"></div>`);
const canvas = /*html*/`
<canvas tabindex="0" id="${this.options.id}" height="${this.options.height}" width="${this.options.width}" moz-opaque class="canvas-drawer"></canvas>
this.$drawerContainer = stringToHTMLElement<HTMLDivElement>(/*html*/ `<div class="drawer-container"></div>`);
const canvas = /*html*/ `
<canvas tabindex="0" id="${this.options.id}" height="${this.options.height}" width="${this.options.width}" class="canvas-drawer"></canvas>
`;
this.$canvas = stringToHTMLElement<HTMLCanvasElement>(canvas);
this.ctx = this.$canvas.getContext('2d', { alpha: true, willReadFrequently: true }) as CanvasRenderingContext2D;
Expand Down Expand Up @@ -189,11 +190,8 @@ export class Drawer extends History {
this.ctx.fillStyle = this.options.color; // passing selectedColor as fill style

// Update icon color for indicate to user
if (this.$colorPickerLabel) {
const $icon = this.$colorPickerLabel.querySelector('svg');
if ($icon) {
$icon.style.color = color;
}
if (this.$colorPicker) {
this.$colorPicker.value = this.ctx.strokeStyle;
}

this.$canvas.dispatchEvent(DrawEvent('update.color', { color }));
Expand Down Expand Up @@ -282,7 +280,7 @@ export class Drawer extends History {
$btn = this.$shapeBtn;
}

if ($btn) this.setActiveBtn($btn);
this.setActiveBtn($btn);
this.$canvas.dispatchEvent(DrawEvent('update.tool', { toolName }));
resolve(true);
}
Expand Down Expand Up @@ -378,7 +376,7 @@ export class Drawer extends History {
addToolbar(): Promise<HTMLDivElement> {
return new Promise((resolve, reject) => {
try {
const toolbar = /*html*/`<div class="toolbar ${this.options.toolbarPosition ?? 'outerTop'}"></div>`;
const toolbar = /*html*/ `<div class="toolbar ${this.options.toolbarPosition ?? 'outerTop'}"></div>`;

this.$toolbar = stringToHTMLElement<HTMLDivElement>(toolbar);
this.$toolbar.style.maxWidth = this.$canvas.width + 'px';
Expand Down Expand Up @@ -428,7 +426,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$undoBtn) {
const undoBtn = /*html*/`<button title="${'Redo'}" class="btn" disabled>${UndoIcon}</button>`;
const undoBtn = /*html*/ `<button title="${'Redo'}" class="btn" disabled>${UndoIcon}</button>`;
const $undoBtn = stringToHTMLElement<HTMLButtonElement>(undoBtn);
this.$undoBtn = $undoBtn;

Expand Down Expand Up @@ -461,7 +459,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$redoBtn) {
const redoBtn = /*html*/`<button title="${'Redo'}" class="btn" disabled>${RedoIcon}</button>`;
const redoBtn = /*html*/ `<button title="${'Redo'}" class="btn" disabled>${RedoIcon}</button>`;
const $redoBtn = stringToHTMLElement<HTMLButtonElement>(redoBtn);
this.$redoBtn = $redoBtn;

Expand Down Expand Up @@ -495,7 +493,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$brushBtn) {
const brushBtn = /*html*/`<button title="${'Brush'}" class="btn active">${BrushIcon}</button>`;
const brushBtn = /*html*/ `<button title="${'Brush'}" class="btn active">${BrushIcon}</button>`;
const $brushBtn = stringToHTMLElement<HTMLButtonElement>(brushBtn);
this.$brushBtn = $brushBtn;

Expand Down Expand Up @@ -528,7 +526,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$eraserBtn) {
const eraserBtn = /*html*/`<button title="${'Eraser'}" class="btn">${EraserIcon}</button>`;
const eraserBtn = /*html*/ `<button title="${'Eraser'}" class="btn">${EraserIcon}</button>`;
const $eraserBtn = stringToHTMLElement<HTMLButtonElement>(eraserBtn);
this.$eraserBtn = $eraserBtn;

Expand Down Expand Up @@ -561,7 +559,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$clearBtn) {
const clearBtn = /*html*/`<button title="${'Clear draw'}" class="btn">${ClearIcon}</button>`;
const clearBtn = /*html*/ `<button title="${'Clear draw'}" class="btn">${ClearIcon}</button>`;
const $clearBtn = stringToHTMLElement<HTMLButtonElement>(clearBtn);
this.$clearBtn = $clearBtn;

Expand Down Expand Up @@ -594,9 +592,9 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$shapeBtn) {
const shapeBtn = /*html*/`<button title="${'Draw shape'}" class="btn btn-shape">${ShapeIcon}</button>`;
const shapeBtn = /*html*/ `<button title="${'Draw shape'}" class="btn btn-shape">${ShapeIcon}</button>`;

const shapeMenu = /*html*/`
const shapeMenu = /*html*/ `
<ul class="shape-menu">
<li class="shape-menu-item">
<button data-shape="triangle" class="btn triangle">${TriangleIcon}</button>
Expand Down Expand Up @@ -670,6 +668,7 @@ export class Drawer extends History {
}
});
}

/**
* Add text button to toolbar if exist
* see {@link addToolbar} before use it
Expand All @@ -679,8 +678,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$textBtn) {
const textBtn = /*html*/`<button title="${'Text zone'}" class="btn">${TextIcon}</button>`;
const $textBtn = stringToHTMLElement<HTMLButtonElement>(textBtn);
const $textBtn = stringToHTMLElement<HTMLButtonElement>(this.textBtnHtml());
this.$textBtn = $textBtn;

this.$toolbar.appendChild(this.$textBtn);
Expand Down Expand Up @@ -712,7 +710,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$lineThickness) {
const lineThickness = /*html*/`
const lineThickness = /*html*/ `
<div class="drawer-range">
<input title="${'Thickness'}" id="${this.$canvas.id}-line-tickness" type="range" class="" min="1" value="${
this.options.lineThickness
Expand Down Expand Up @@ -754,7 +752,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$colorPicker) {
const colorPicker = /*html*/`
const colorPicker = /*html*/ `
<div class="container-colorpicker">
<input class="btn" title="${'Color'}" id="${this.options.id}-colopicker" class="" type="color" value="${
this.options.color
Expand Down Expand Up @@ -790,7 +788,7 @@ export class Drawer extends History {
return new Promise((resolve, reject) => {
try {
if (this.$toolbar && !this.$uploadFile) {
const uploadFile = /*html*/`
const uploadFile = /*html*/ `
<div class="container-uploadFile">
<input id="${this.options.id}-uploadfile" title="${'Color'}" class="" type="file" />
<label title="${'Upload file'}" accept="image/png, image/jpeg, .svg" class="btn" for="${
Expand Down Expand Up @@ -833,7 +831,7 @@ export class Drawer extends History {
addDownloadBtn(action?: action<HTMLButtonElement>): Promise<HTMLButtonElement> {
return new Promise((resolve, reject) => {
if (this.$toolbar && !this.$downloadBtn) {
const download = /*html*/`<button title="${'Download'}" class="btn">${DownloadIcon}</button>`;
const download = /*html*/ `<button title="${'Download'}" class="btn">${DownloadIcon}</button>`;
const $downloadBtn = stringToHTMLElement<HTMLButtonElement>(download);
this.$downloadBtn = $downloadBtn;

Expand Down Expand Up @@ -875,7 +873,7 @@ export class Drawer extends History {
addSettingBtn(action?: action<HTMLButtonElement>): Promise<HTMLButtonElement> {
return new Promise((resolve, reject) => {
if (this.$toolbar && !this.$settingBtn) {
const settingBtn = /*html*/`<button title="${'Setting'}" class="btn">${SettingIcon}</button>`;
const settingBtn = /*html*/ `<button title="${'Setting'}" class="btn">${SettingIcon}</button>`;
const $settingBtn = stringToHTMLElement<HTMLButtonElement>(settingBtn);
this.$settingBtn = $settingBtn;

Expand Down Expand Up @@ -905,6 +903,37 @@ export class Drawer extends History {
});
}

addCustomBtn(
name: string,
title: string,
label: string,
action?: action<HTMLButtonElement>
): Promise<HTMLButtonElement> {
return new Promise((resolve, reject) => {
if (this.$toolbar && !this.customBtn[name]) {
const customBtn = /*html*/ `<button title="${title}" class="btn">${label}</button>`;
const $customBtn = stringToHTMLElement<HTMLButtonElement>(customBtn);
this.customBtn[name] = $customBtn;

this.$toolbar.appendChild(this.customBtn[name]);

this.customBtn[name].addEventListener('click', () => {
if (typeof action === 'function') {
action(this, this.customBtn[name]);
} else {
throw new DrawerError(`No action provided for custom button name '${name}`);
}
});

resolve(this.customBtn[name]);
} else if (!this.$toolbar) {
reject(new DrawerError(`No toolbar provided, please call 'addToolbar' method first.`));
} else {
reject(new DrawerError(`Custom button with name "${name}" already exist.`));
}
});
}

/**
* Upload file from input file
*/
Expand Down Expand Up @@ -996,14 +1025,14 @@ export class Drawer extends History {
* Apply active state to btn
* @param {HTMLButtonElement} $btn Button to add active class
*/
setActiveBtn($btn: HTMLButtonElement) {
setActiveBtn($btn: HTMLButtonElement | null) {
if (this.$toolbar) {
this.$toolbar.querySelectorAll('.btn').forEach(($b) => $b.classList.remove('active'));

if (this.$shapeMenu) {
this.$shapeMenu.querySelectorAll('.btn').forEach(($b) => $b.classList.remove('active'));
}
$btn.classList.add('active');
$btn?.classList.add('active');
} else {
throw new DrawerError(`No toolbar provided`);
}
Expand Down

0 comments on commit bf37850

Please sign in to comment.