lazy-widgets
Version:
Typescript retained mode GUI for the HTML canvas API
144 lines • 5.63 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { watchField } from '../decorators/FlagFields.js';
import { ClickState } from '../helpers/ClickState.js';
import { DynMsg } from '../core/Strings.js';
import { Theme } from '../theme/Theme.js';
import { Button } from './Button.js';
import { SingleParentXMLInputConfig } from '../xml/SingleParentXMLInputConfig.js';
/**
* A {@link Button} which overrides the canvas colour, meaning that it has a
* filled background.
*
* Can be constrained to a specific type of children.
*
* This button version can also be "forced down"; the button becomes similar to
* being pressed, visually. Useful for implementing widgets such as
* {@link ShiftKey}.
*
* @category Widget
*/
export class FilledButton extends Button {
constructor(child, properties) {
var _a;
super(child, properties);
/** Theme property used for overriding the canvas colour. */
this.backgroundProperty = 'backgroundFill';
this.forced = (_a = properties === null || properties === void 0 ? void 0 : properties.forced) !== null && _a !== void 0 ? _a : false;
// TODO stop doing this. this would technically be a breaking change,
// but it's a leftover from canvas-ui where we didn't have damage
// regions and layered rendering
// Make theme that will be inherited by child. Later, this theme's
// canvasFill property will be changed, notifying the child. Make the
// child inherit the theme. fallbackTheme is also later set when this
// widget inherits a theme
this.childTheme = new Theme({
canvasFill: this.getBackgroundFill(),
});
this.child.inheritedTheme = this.childTheme;
}
activate() {
super.activate();
this.updateBackground();
}
/**
* Update the background fill.
*
* Sets {@link FilledButton#backgroundProperty} depending on
* {@link FilledButton#forced} and {@link ButtonClickHelper#clickState},
* sets {@link FilledButton#childTheme}.{@link Theme#canvasFill} and marks
* the widget as dirty.
*/
updateBackground() {
const oldProperty = this.backgroundProperty;
if (this.forced) {
this.backgroundProperty = 'primaryFill';
}
else {
switch (this.clickHelper.clickState) {
case ClickState.Hold:
this.backgroundProperty = 'accentFill';
break;
case ClickState.Hover:
this.backgroundProperty = 'backgroundGlowFill';
break;
default:
this.backgroundProperty = 'backgroundFill';
break;
}
}
// Update canvasFill property of child's theme
if (oldProperty !== this.backgroundProperty) {
this.markWholeAsDirty();
this.childTheme.canvasFill = this.getBackgroundFill();
}
}
getBackgroundFill() {
switch (this.backgroundProperty) {
case 'primaryFill':
return this.primaryFill;
case 'accentFill':
return this.accentFill;
case 'backgroundGlowFill':
return this.backgroundGlowFill;
case 'backgroundFill':
return this.backgroundFill;
default:
throw new Error(DynMsg.INVALID_BACKGROUND_FILL(this.backgroundProperty));
}
}
set inheritedTheme(theme) {
if (theme === this.fallbackTheme) {
return;
}
this.fallbackTheme = theme;
this.childTheme.fallbackTheme = theme;
}
get inheritedTheme() {
return this.fallbackTheme;
}
onThemeUpdated(property = null) {
if (property === null) {
this._layoutDirty = true;
this.markWholeAsDirty();
this.childTheme.canvasFill = this.getBackgroundFill();
}
else if (property === this.backgroundProperty) {
this.markWholeAsDirty();
this.childTheme.canvasFill = this.getBackgroundFill();
}
else if (property === 'containerPadding') {
this._layoutDirty = true;
}
else if (property === 'containerAlignment') {
this._layoutDirty = true;
}
}
handlePreLayoutUpdate() {
if (this.clickHelper.clickStateChanged) {
this.updateBackground();
}
super.handlePreLayoutUpdate();
}
handlePainting(dirtyRects) {
// Paint brackground
const ctx = this.viewport.context;
ctx.save();
ctx.fillStyle = this.getBackgroundFill();
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();
super.handlePainting(dirtyRects);
}
}
FilledButton.autoXML = {
name: 'filled-button',
inputConfig: SingleParentXMLInputConfig
};
__decorate([
watchField(FilledButton.prototype.updateBackground)
], FilledButton.prototype, "forced", void 0);
//# sourceMappingURL=FilledButton.js.map