hengine
Version:
A simple graphic engine for `canvasom`.
356 lines (296 loc) • 10.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('canvasom')) :
typeof define === 'function' && define.amd ? define(['exports', 'canvasom'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.HE = {}, global.COM));
})(this, (function (exports, canvasom) { 'use strict';
exports.Sizing = void 0;
!function (t) {
t.fill = function (t) {
var i = t.paddingLeft,
e = t.paddingTop;
return {
width: t.containerWidth - i - t.paddingRight,
height: t.containerHeight - e - t.paddingBottom,
left: i,
top: e,
scale: 1
};
}, t.fixedWidth = function (t) {
var i = t.targetWidth,
e = t.paddingLeft,
n = t.paddingTop,
d = t.containerWidth - e - t.paddingRight;
return {
width: d,
height: t.containerHeight - n - t.paddingBottom,
left: e,
top: n,
scale: d / i
};
}, t.fixedHeight = function (t) {
var i = t.targetHeight,
e = t.paddingLeft,
n = t.paddingTop,
d = t.containerWidth - e - t.paddingRight,
a = t.containerHeight - n - t.paddingBottom;
return {
width: d,
height: a,
left: e,
top: n,
scale: a / i
};
}, t.semifixed = function (i) {
var e = i.targetWidth,
n = i.targetHeight,
d = i.paddingLeft,
a = i.paddingTop;
return (i.containerWidth - d - i.paddingRight) / (i.containerHeight - a - i.paddingBottom) < e / n ? t.fixedWidth(i) : t.fixedHeight(i);
}, t.contain = function (t) {
var i = t.targetWidth,
e = t.targetHeight,
n = t.paddingLeft,
d = t.paddingTop,
a = t.containerWidth - n - t.paddingRight,
h = t.containerHeight - d - t.paddingBottom;
if (a / h < i / e) {
var _t = a / i,
g = e * _t;
return {
width: a,
height: g,
left: n,
top: (h - g) / 2 + d,
scale: _t
};
}
{
var _t2 = h / e,
_g = i * _t2;
return {
width: _g,
height: h,
left: (a - _g) / 2 + n,
top: d,
scale: _t2
};
}
}, t.center = function (t) {
var i = t.targetWidth,
e = t.targetHeight,
n = t.paddingLeft,
d = t.paddingTop;
return {
width: i,
height: e,
left: (t.containerWidth - n - t.paddingRight - i) / 2 + n,
top: (t.containerHeight - d - t.paddingBottom - e) / 2 + d,
scale: 1
};
};
}(exports.Sizing || (exports.Sizing = {}));
var Resizer = /*#__PURE__*/function () {
function Resizer(i) {
var _i$container, _i$padding, _i$paddingTop, _i$paddingRight, _i$paddingBottom, _i$paddingLeft, _i$active, _i$width, _i$height, _i$sizing;
this.active = void 0;
this.target = void 0;
this.container = void 0;
this.width = void 0;
this.height = void 0;
this.sizing = void 0;
this.paddingTop = void 0;
this.paddingRight = void 0;
this.paddingBottom = void 0;
this.paddingLeft = void 0;
this.callback = void 0;
this.update = void 0;
var e = (i == null ? void 0 : i.target) || null;
this.target = e, this.container = (_i$container = i == null ? void 0 : i.container) != null ? _i$container : e && e.parentElement;
var n = (_i$padding = i == null ? void 0 : i.padding) != null ? _i$padding : 0;
this.paddingTop = (_i$paddingTop = i == null ? void 0 : i.paddingTop) != null ? _i$paddingTop : n, this.paddingRight = (_i$paddingRight = i == null ? void 0 : i.paddingRight) != null ? _i$paddingRight : n, this.paddingBottom = (_i$paddingBottom = i == null ? void 0 : i.paddingBottom) != null ? _i$paddingBottom : n, this.paddingLeft = (_i$paddingLeft = i == null ? void 0 : i.paddingLeft) != null ? _i$paddingLeft : n, this.active = (_i$active = i == null ? void 0 : i.active) != null ? _i$active : !0, this.width = (_i$width = i == null ? void 0 : i.width) != null ? _i$width : 0, this.height = (_i$height = i == null ? void 0 : i.height) != null ? _i$height : 0, this.sizing = (_i$sizing = i == null ? void 0 : i.sizing) != null ? _i$sizing : exports.Sizing.center, this.callback = (i == null ? void 0 : i.callback) || null, this.updateSync = this.updateSync.bind(this), this.onResize = this.onResize.bind(this), this.update = function (t, i) {
var e = null;
var debounceWrapper = function debounceWrapper() {
for (var _len = arguments.length, t = new Array(_len), _key = 0; _key < _len; _key++) {
t[_key] = arguments[_key];
}
null !== e && clearTimeout(e), e = setTimeout.apply(void 0, [i, debounceWrapper.debounceTimeout].concat(t));
};
return debounceWrapper.debounceTimeout = t, debounceWrapper;
}(100, this.updateSync), !1 !== (i == null ? void 0 : i.autoResize) && (window.addEventListener("resize", this.onResize), window.addEventListener("orientationchange", this.onResize)), this.active && this.update();
}
var _proto = Resizer.prototype;
_proto.updateSync = function updateSync(t) {
var _this$callback;
var i = this.target,
e = this.container;
if (!this.active || !i || !e) return;
var n = i.style,
d = e.getBoundingClientRect(),
a = this.sizing({
containerWidth: d.width,
containerHeight: d.height,
paddingTop: this.paddingTop,
paddingRight: this.paddingRight,
paddingBottom: this.paddingBottom,
paddingLeft: this.paddingLeft,
targetWidth: this.width,
targetHeight: this.height
});
n.width = a.width + "px", n.height = a.height + "px", n.marginLeft = a.left + "px", n.marginTop = a.top + "px", (_this$callback = this.callback) != null && _this$callback.call(this, a), t == null ? void 0 : t(a);
};
_proto.onResize = function onResize() {
this.update();
};
return Resizer;
}();
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
/** dts2md break */
/**
* Class of scene nodes.
*/
var SceneNode = /*#__PURE__*/function (_CanvasNode) {
_inheritsLoose(SceneNode, _CanvasNode);
/** dts2md break */
/**
* Constructor of {@link SceneNode}.
*/
function SceneNode(options) {
return _CanvasNode.call(this, _extends({
stretch: 1,
penetrable: true
}, options)) || this;
}
return SceneNode;
}(canvasom.CanvasNode);
/** dts2md break */
/**
* Class of canvas engines.
*/
var CanvasEngine = /*#__PURE__*/function (_CanvasRoot) {
_inheritsLoose(CanvasEngine, _CanvasRoot);
/** dts2md break */
/**
* Constructor of {@link CanvasEngine}.
*/
function CanvasEngine(options) {
var _this;
_this = _CanvasRoot.call(this, options) || this;
_this.resizer = void 0;
_this.currentScene = null;
_this.onResize = _this.onResize.bind(_assertThisInitialized(_this));
var resizerOptions = {
width: _this.renderer.width,
height: _this.renderer.height,
target: _this.renderer.canvas,
sizing: exports.Sizing.contain,
callback: _this.onResize
};
if (options != null && options.resizerOptions) {
Object.assign(resizerOptions, options.resizerOptions);
}
_this.resizer = new Resizer(resizerOptions);
_this.renderer.autoStyle = false;
return _this;
}
/** dts2md break */
/**
* The resizer in use.
*/
var _proto = CanvasEngine.prototype;
/** dts2md break */
/**
* Resize callback.
* (Remember to invoke this in your implemention
* of `resizer.callback` if you have one.)
*/
_proto.onResize = function onResize(result) {
var scale = result.scale;
this.renderer.resize(result.width / scale, result.height / scale);
canvasom.Schedule.updateAndRender(this);
}
/** dts2md break */
/**
* Enter specific scene.
* (Pass `null` to exit current scene
* without entering another scene.)
* @returns Whether the scene change is successful.
*/
;
_proto.enter = function enter(nextScene) {
var currentScene = this.currentScene;
if (currentScene) {
var exitEvent = new canvasom.Event({
name: 'exit',
stoppable: true,
cancelable: true,
data: {
nextScene: nextScene
}
});
currentScene.emit(exitEvent);
if (exitEvent.canceled) {
return false;
}
}
if (nextScene) {
var enterEvent = new canvasom.Event({
name: 'enter',
stoppable: true,
cancelable: true,
data: {
currentScene: currentScene
}
});
nextScene.emit(enterEvent);
if (enterEvent.canceled) {
return false;
}
this.appendChild(nextScene);
}
if (currentScene) {
this.removeChild(currentScene);
}
this.currentScene = nextScene;
if (currentScene || nextScene) {
canvasom.Schedule.updateAndRender(this);
}
return true;
};
return CanvasEngine;
}(canvasom.CanvasRoot);
exports.CanvasEngine = CanvasEngine;
exports.Resizer = Resizer;
exports.SceneNode = SceneNode;
Object.defineProperty(exports, '__esModule', { value: true });
}));