gl-react-dom
Version:
DOM implementation of gl-react, an universal React library to write and compose WebGL shaders
196 lines (195 loc) • 6.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _invariant = _interopRequireDefault(require("invariant"));
var _getContext = _interopRequireDefault(require("./getContext"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const __DEV__ = process.env.NODE_ENV === "development";
const propTypes = {
onContextCreate: _propTypes.default.func.isRequired,
onContextFailure: _propTypes.default.func.isRequired,
onContextLost: _propTypes.default.func.isRequired,
onContextRestored: _propTypes.default.func.isRequired,
webglContextAttributes: _propTypes.default.object,
width: _propTypes.default.number.isRequired,
height: _propTypes.default.number.isRequired,
style: _propTypes.default.object,
pixelRatio: _propTypes.default.number,
version: _propTypes.default.string
};
class ErrorDebug extends _react.Component {
render() {
const {
error
} = this.props;
let title = String(error.rawError || error.message || error);
let detail = String(error.longMessage || error.rawError || "");
const style = {
width: "100%",
height: "100%",
position: "absolute",
top: 0,
left: 0,
padding: "1em",
background: "#a00",
color: "#fff",
fontSize: "12px",
lineHeight: "1.2em",
fontStyle: "normal",
fontWeight: "normal",
fontFamily: "monospace",
overflow: "auto"
};
const titleStyle = {
fontWeight: "bold",
marginBottom: "1em"
};
const detailStyle = {
whiteSpace: "pre"
};
return /*#__PURE__*/_react.default.createElement("div", {
style: style
}, /*#__PURE__*/_react.default.createElement("div", {
style: titleStyle
}, title), /*#__PURE__*/_react.default.createElement("div", {
style: detailStyle
}, detail));
}
}
class GLViewDOM extends _react.Component {
state = {
error: null
};
static propTypes = propTypes;
webglContextAttributes;
canvas = null;
gl = null;
componentDidMount() {
const {
onContextCreate,
onContextFailure
} = this.props;
const gl = this._createContext();
if (gl) {
this.gl = gl;
onContextCreate(gl);
const {
canvas
} = this;
(0, _invariant.default)(canvas, "canvas is not settled in GLViewDOM#componentDidMount");
canvas.addEventListener("webglcontextlost", this._onContextLost);
canvas.addEventListener("webglcontextrestored", this._onContextRestored);
} else {
onContextFailure(new Error("no-webgl-context"));
}
}
componentWillUnmount() {
if (this.gl) {
this.gl = null;
}
const {
canvas
} = this;
if (canvas) {
canvas.removeEventListener("webglcontextlost", this._onContextLost);
canvas.removeEventListener("webglcontextrestored", this._onContextRestored);
}
}
render() {
const {
error
} = this.state;
let {
width,
height,
pixelRatio,
style,
debug,
version,
...rest
} = this.props;
if (!pixelRatio) pixelRatio = Number(typeof window === "object" && window.devicePixelRatio || 1);
for (let k in propTypes) {
if (rest.hasOwnProperty(k)) {
delete rest[k];
}
}
return /*#__PURE__*/_react.default.createElement("span", {
style: {
position: "relative",
...style,
display: "inline-block",
width,
height
}
}, /*#__PURE__*/_react.default.createElement("canvas", _extends({
ref: this.onRef,
style: {
width,
height
},
width: width * pixelRatio,
height: height * pixelRatio
}, rest)), error ? /*#__PURE__*/_react.default.createElement(ErrorDebug, {
error: error
}) : null);
}
_createContext() {
const {
webglContextAttributes,
debug,
version
} = this.props;
const gl = (0, _getContext.default)(this.canvas, debug ? {
...webglContextAttributes,
preserveDrawingBuffer: true
} : webglContextAttributes, version || "auto");
this.webglContextAttributes = webglContextAttributes || {};
return gl;
}
_onContextLost = e => {
e.preventDefault();
this.gl = null;
this.props.onContextLost();
};
_onContextRestored = () => {
this.gl = this._createContext();
this.props.onContextRestored(this.gl);
};
onRef = ref => {
this.canvas = ref;
};
debugError = !__DEV__ ? null : error => {
this.setState({
error
});
};
afterDraw = !__DEV__ ? null : () => {
if (this.state.error) {
this.setState({
error: null
});
}
};
captureAsDataURL(...args) {
if (!this.webglContextAttributes.preserveDrawingBuffer) {
console.warn("Surface#captureAsDataURL is likely to not work if you don't define webglContextAttributes={{ preserveDrawingBuffer: true }}");
}
(0, _invariant.default)(this.canvas, "canvas is no longer available");
return this.canvas.toDataURL(...args);
}
captureAsBlob(...args) {
if (!this.webglContextAttributes.preserveDrawingBuffer) {
console.warn("Surface#captureAsBlob is likely to not work if you don't define webglContextAttributes={{ preserveDrawingBuffer: true }}");
}
return Promise.resolve().then(() => new Promise((resolve, reject) => this.canvas ? this.canvas.toBlob(resolve, ...args) : reject(new Error("canvas is no longer available"))));
}
}
exports.default = GLViewDOM;
//# sourceMappingURL=GLViewDOM.js.map