@tldraw/editor
Version:
tldraw infinite canvas SDK (editor).
98 lines (97 loc) • 4.13 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var environment_exports = {};
__export(environment_exports, {
tlenv: () => tlenv,
tlenvReactive: () => tlenvReactive
});
module.exports = __toCommonJS(environment_exports);
var import_state = require("@tldraw/state");
var import_dom = require("../utils/dom");
const tlenv = {
isSafari: false,
isIos: false,
isChromeForIos: false,
isFirefox: false,
isAndroid: false,
isWebview: false,
isDarwin: false,
hasCanvasSupport: false
};
let isForcedFinePointer = false;
if (typeof window !== "undefined") {
if ("navigator" in window) {
tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i);
tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent);
tlenv.isFirefox = /firefox/i.test(navigator.userAgent);
tlenv.isAndroid = /android/i.test(navigator.userAgent);
tlenv.isDarwin = (0, import_dom.getGlobalWindow)().navigator.userAgent.toLowerCase().indexOf("mac") > -1;
}
tlenv.hasCanvasSupport = "Promise" in window && "HTMLCanvasElement" in window;
isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos;
}
const tlenvReactive = (0, import_state.atom)("tlenvReactive", {
// Whether the user's device has a coarse pointer. This is dynamic on many systems, especially
// on touch-screen laptops, which will become "coarse" if the user touches the screen.
// See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer#coarse
isCoarsePointer: false,
// Whether the user's display supports P3 color space. This is dynamic because a window can
// move between displays with different color gamut support.
supportsP3ColorSpace: false
});
if (typeof window !== "undefined") {
const canRenderP3 = typeof CSS !== "undefined" && CSS.supports("color", "color(display-p3 1 1 1)");
if (canRenderP3) {
const p3mql = window.matchMedia("(color-gamut: p3)");
const updateSupportsP3 = () => {
const supportsP3 = p3mql.matches;
if (supportsP3 !== tlenvReactive.__unsafe__getWithoutCapture().supportsP3ColorSpace) {
tlenvReactive.update((prev) => ({ ...prev, supportsP3ColorSpace: supportsP3 }));
}
};
updateSupportsP3();
p3mql.addEventListener("change", updateSupportsP3);
}
}
if (typeof window !== "undefined" && !isForcedFinePointer) {
const mql = (0, import_dom.getGlobalWindow)().matchMedia && (0, import_dom.getGlobalWindow)().matchMedia("(any-pointer: coarse)");
const isCurrentCoarsePointer = () => tlenvReactive.__unsafe__getWithoutCapture().isCoarsePointer;
if (mql) {
const updateIsCoarsePointer = () => {
const isCoarsePointer = mql.matches;
if (isCoarsePointer !== isCurrentCoarsePointer()) {
tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer }));
}
};
updateIsCoarsePointer();
mql.addEventListener("change", updateIsCoarsePointer);
}
(0, import_dom.getGlobalWindow)().addEventListener(
"pointerdown",
(e) => {
const isCoarseEvent = e.pointerType !== "mouse";
if (isCoarseEvent !== isCurrentCoarsePointer()) {
tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarseEvent }));
}
},
{ capture: true }
);
}
//# sourceMappingURL=environment.js.map