cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
243 lines (242 loc) • 8 kB
JavaScript
import { __exports as cursor } from "../../../../../_virtual/cursor.mjs";
import "./browser.mjs";
import { __exports as browser } from "../../../../../_virtual/browser.mjs";
(function(exports) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _browser = browser;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor)
descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps)
_defineProperties(Constructor.prototype, protoProps);
if (staticProps)
_defineProperties(Constructor, staticProps);
return Constructor;
}
var useFallback = !_browser.supportsCursorURIs || _browser.isTouchDevice;
var Cursor = /* @__PURE__ */ function() {
function Cursor2() {
_classCallCheck(this, Cursor2);
this._target = null;
this._canvas = document.createElement("canvas");
if (useFallback) {
this._canvas.style.position = "fixed";
this._canvas.style.zIndex = "65535";
this._canvas.style.pointerEvents = "none";
this._canvas.style.visibility = "hidden";
}
this._position = {
x: 0,
y: 0
};
this._hotSpot = {
x: 0,
y: 0
};
this._eventHandlers = {
"mouseover": this._handleMouseOver.bind(this),
"mouseleave": this._handleMouseLeave.bind(this),
"mousemove": this._handleMouseMove.bind(this),
"mouseup": this._handleMouseUp.bind(this)
};
}
_createClass(Cursor2, [{
key: "attach",
value: function attach(target) {
if (this._target) {
this.detach();
}
this._target = target;
if (useFallback) {
document.body.appendChild(this._canvas);
var options = {
capture: true,
passive: true
};
this._target.addEventListener("mouseover", this._eventHandlers.mouseover, options);
this._target.addEventListener("mouseleave", this._eventHandlers.mouseleave, options);
this._target.addEventListener("mousemove", this._eventHandlers.mousemove, options);
this._target.addEventListener("mouseup", this._eventHandlers.mouseup, options);
}
this.clear();
}
}, {
key: "detach",
value: function detach() {
if (!this._target) {
return;
}
if (useFallback) {
var options = {
capture: true,
passive: true
};
this._target.removeEventListener("mouseover", this._eventHandlers.mouseover, options);
this._target.removeEventListener("mouseleave", this._eventHandlers.mouseleave, options);
this._target.removeEventListener("mousemove", this._eventHandlers.mousemove, options);
this._target.removeEventListener("mouseup", this._eventHandlers.mouseup, options);
document.body.removeChild(this._canvas);
}
this._target = null;
}
}, {
key: "change",
value: function change(rgba, hotx, hoty, w, h) {
if (w === 0 || h === 0) {
this.clear();
return;
}
this._position.x = this._position.x + this._hotSpot.x - hotx;
this._position.y = this._position.y + this._hotSpot.y - hoty;
this._hotSpot.x = hotx;
this._hotSpot.y = hoty;
var ctx = this._canvas.getContext("2d");
this._canvas.width = w;
this._canvas.height = h;
var img = new ImageData(new Uint8ClampedArray(rgba), w, h);
ctx.clearRect(0, 0, w, h);
ctx.putImageData(img, 0, 0);
if (useFallback) {
this._updatePosition();
} else {
var url = this._canvas.toDataURL();
this._target.style.cursor = "url(" + url + ")" + hotx + " " + hoty + ", default";
}
}
}, {
key: "clear",
value: function clear() {
this._target.style.cursor = "none";
this._canvas.width = 0;
this._canvas.height = 0;
this._position.x = this._position.x + this._hotSpot.x;
this._position.y = this._position.y + this._hotSpot.y;
this._hotSpot.x = 0;
this._hotSpot.y = 0;
}
}, {
key: "move",
value: function move(clientX, clientY) {
if (!useFallback) {
return;
}
if (window.visualViewport) {
this._position.x = clientX + window.visualViewport.offsetLeft;
this._position.y = clientY + window.visualViewport.offsetTop;
} else {
this._position.x = clientX;
this._position.y = clientY;
}
this._updatePosition();
var target = document.elementFromPoint(clientX, clientY);
this._updateVisibility(target);
}
}, {
key: "_handleMouseOver",
value: function _handleMouseOver(event) {
this._handleMouseMove(event);
}
}, {
key: "_handleMouseLeave",
value: function _handleMouseLeave(event) {
this._updateVisibility(event.relatedTarget);
}
}, {
key: "_handleMouseMove",
value: function _handleMouseMove(event) {
this._updateVisibility(event.target);
this._position.x = event.clientX - this._hotSpot.x;
this._position.y = event.clientY - this._hotSpot.y;
this._updatePosition();
}
}, {
key: "_handleMouseUp",
value: function _handleMouseUp(event) {
var _this = this;
var target = document.elementFromPoint(event.clientX, event.clientY);
this._updateVisibility(target);
if (this._captureIsActive()) {
window.setTimeout(function() {
if (!_this._target) {
return;
}
target = document.elementFromPoint(event.clientX, event.clientY);
_this._updateVisibility(target);
}, 0);
}
}
}, {
key: "_showCursor",
value: function _showCursor() {
if (this._canvas.style.visibility === "hidden") {
this._canvas.style.visibility = "";
}
}
}, {
key: "_hideCursor",
value: function _hideCursor() {
if (this._canvas.style.visibility !== "hidden") {
this._canvas.style.visibility = "hidden";
}
}
}, {
key: "_shouldShowCursor",
value: function _shouldShowCursor(target) {
if (!target) {
return false;
}
if (target === this._target) {
return true;
}
if (!this._target.contains(target)) {
return false;
}
if (window.getComputedStyle(target).cursor !== "none") {
return false;
}
return true;
}
}, {
key: "_updateVisibility",
value: function _updateVisibility(target) {
if (this._captureIsActive()) {
target = document.captureElement;
}
if (this._shouldShowCursor(target)) {
this._showCursor();
} else {
this._hideCursor();
}
}
}, {
key: "_updatePosition",
value: function _updatePosition() {
this._canvas.style.left = this._position.x + "px";
this._canvas.style.top = this._position.y + "px";
}
}, {
key: "_captureIsActive",
value: function _captureIsActive() {
return document.captureElement && document.documentElement.contains(document.captureElement);
}
}]);
return Cursor2;
}();
exports["default"] = Cursor;
})(cursor);