diff --git a/README.md b/README.md index c7561fa..99017ca 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ const drawer = new Drawer($el, { /** optional options */}); #### Using iife first import file + ```html ``` @@ -36,4 +37,32 @@ then init drawer const $el = document.getElementById("myElement"); const drawer = new Drawer($el, { /** optional options */}); ``` + ### Available options + +default options + +```js +{ + id: Date.now().toString(), // id for drawer + defaultToolbar: true, // add default sidebar bouton + width: 400, // width + height: 400, // height + localStorageKey: 'draw', // local storage key for save + autoSave: true, // save on change in localStorage + toolbarPosition: 'outerTop', // can be 'outerTop', 'outerEnd', 'outerBottom', 'outerStart', 'innerTop', 'innerEnd', 'innerBottom', 'innerStart' + bgColor: '#fff', // can be format hex, rgba, rgba, hlsa + color: '#000', // can be format hex, rgba, rgba, hlsa + lineThickness: 3, // Line thickness + dotted: false, // active line dotted + dash: [10, 5], // if dotted true + cap: 'round', // "butt" | "round" | "square" + fill: true, // fill draw + availableColor: undefined, // for input color + availableColorOnly: false, // show color only into colorpicker popover + grid: false, // show css grid for draw helping + guides: false, // show guide when drawing + opacity: 1, // global opacity of draw + xor: false, // active xor +}; +``` diff --git a/src/types/drawer.d.ts b/src/types/drawer.d.ts index 85ff79d..37b0319 100644 --- a/src/types/drawer.d.ts +++ b/src/types/drawer.d.ts @@ -1,8 +1,8 @@ export interface DrawerOptions { id: string; + defaultToolbar: boolean; height: number; width: number; - defaultToolbar: boolean; localStorageKey: string; dotted: boolean; dash: number[]; @@ -11,7 +11,7 @@ export interface DrawerOptions { color: string; bgColor: string; lineThickness: number; - cap: 'round' | 'square'; + cap: CanvasLineCap; fill: boolean; availableColor?: string[]; availableColorOnly: boolean; @@ -46,12 +46,6 @@ export enum ToolbarPosition { innerEnd = 'innerEnd', innerBottom = 'innerBottom', innerStart = 'innerStart', - /** - * only available for outer position - * calculate where can be added, in this order outerTop -> outerRight -> outerBottom -> outerLeft - * if no one available, added to innerTop - */ - auto = 'auto', } export interface Position {