info/BezierInfo-2
1
0
Fork 0
mirror of https://github.com/Pomax/BezierInfo-2.git synced 2025-09-26 16:19:03 +02:00
Code Issues Releases Wiki Activity

movables

Browse Source
This commit is contained in:
Pomax
2020-08-04 14:59:56 -07:00
parent a291b753f9
commit 6ddee66a33
27 changed files with 978 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
lib/custom-element/api/base-api.js
View File

@@ -21,7 +21,11 @@ class BaseAPI {
static get methods() {
const priv = this.privateMethods;
const names = Object.getOwnPropertyNames(this.prototype).concat([`setSize`, `showFocus`, `redraw`]);
const names = Object.getOwnPropertyNames(this.prototype).concat([
`setSize`,
`showFocus`,
`redraw`,
]);
return names.filter((v) => priv.indexOf(v) < 0);
}
@@ -145,21 +149,26 @@ class BaseAPI {
* Determine whether or not the canva should be focussed when interacted with.
*/
showFocus(show = true) {
const canvas = this.canvas;
if (show) {
canvas.setAttribute(`tabIndex`, 0);
canvas.classList.add(`focus-enabled`);
canvas._force_listener = () => this.forceFocus();
[`touchstart`, `mousedown`].forEach((evtName) =>
canvas.addEventListener(evtName, canvas._force_listener)
);
} else {
canvas.removeAttribute(`tabIndex`);
canvas.classList.remove(`focus-enabled`);
[`touchstart`, `mousedown`].forEach((evtName) =>
canvas.removeEventListener(evtName, canvas._force_listener)
);
if (show === false) {
return this.noFocus();
}
const canvas = this.canvas;
canvas.setAttribute(`tabIndex`, 0);
canvas.classList.add(`focus-enabled`);
canvas._force_listener = () => this.forceFocus();
[`touchstart`, `mousedown`].forEach((evtName) =>
canvas.addEventListener(evtName, canvas._force_listener)
);
}
noFocus() {
const canvas = this.canvas;
canvas.removeAttribute(`tabIndex`);
canvas.classList.remove(`focus-enabled`);
[`touchstart`, `mousedown`].forEach((evtName) =>
canvas.removeEventListener(evtName, canvas._force_listener)
);
}
/**
@@ -187,6 +196,8 @@ class BaseAPI {
*/
setup() {
// console.log(`setup`);
this.showFocus();
this.moveable = [];
}
/**
@@ -212,15 +223,20 @@ class BaseAPI {
function enhanceContext(ctx) {
const styles = [];
ctx.cacheStyle = () => {
styles.push({
let e = {
strokeStyle: ctx.strokeStyle,
fillStyle: ctx.fillStyle,
lineWidth: ctx.lineWidth,
});
transform: ctx.getTransform(),
};
styles.push(e);
};
ctx.restoreStyle = () => {
const v = styles.pop();
Object.keys(v).forEach((k) => (ctx[k] = v[k]));
Object.keys(v).forEach((k) => {
if (k !== `transform`) ctx[k] = v[k];
else ctx.setTransform(v[k]);
});
};
return ctx;
}