canvas2d-wrapper 1.4.0 → 1.5.0

package/dist/index.modern.js

@@ -1,15 +1,28 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : String(i);
+}
 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);
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
   }
 }
-
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
@@ -18,56 +31,44 @@ function _createClass(Constructor, protoProps, staticProps) {
   });
   return Constructor;
 }
-
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : 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) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
-
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -76,19 +77,14 @@ function _unsupportedIterableToArray(o, minLen) {
   if (n === "Map" || n === "Set") return Array.from(o);
   if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-
 function _arrayLikeToArray(arr, len) {
   if (len == null || len > arr.length) len = arr.length;
-
   for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-
   return arr2;
 }
-
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (it) return (it = it.call(o)).next.bind(it);
-
   if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
     if (it) o = it;
     var i = 0;
@@ -102,7 +98,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
       };
     };
   }
-
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
@@ -118,31 +113,24 @@ function inCircle(element, x, y, left, top, localTileSize) {
 function inPoly(element, x, y, mouseX, mouseY, localTileSize) {
   var j = element.points.length - 1;
   var counter = false;
-
   for (var i = 0; i < element.points.length; i++) {
     var iX = element.points[i].x * localTileSize;
     var iY = element.points[i].y * localTileSize;
-
     if (mouseX === iX && mouseY === iY) {
       return true;
     }
-
     var jX = element.points[j].x * localTileSize;
     var jY = element.points[j].y * localTileSize;
-
     if (iY > y !== jY > y) {
       var slope = (mouseX - iX) * (jY - iY) - (jX - iX) * (mouseY - iY);
-
       if (slope === 0) {
         return true;
       }
-
       if (slope < 0 !== jY < iY) {
         counter = !counter;
       }
     }
   }
-
   return counter;
 }
 
@@ -154,12 +142,10 @@ function inRect(element, x, y, left, top, localTileSize) {
 
 function collideElement(e, elements, left, top, tileSize, zoom) {
   var localTileSize = calcTileSize(tileSize, zoom);
-
   for (var _iterator = _createForOfIteratorHelperLoose(elements), _step; !(_step = _iterator()).done;) {
     var element = _step.value;
     var x = element.x * localTileSize;
     var y = element.y * localTileSize;
-
     switch (element.constructorName) {
       case 'Rect':
       case 'CanvasImage':
@@ -170,9 +156,7 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
             originalEvent: e
           };
         }
-
         break;
-
       case 'Circle':
         if (inCircle(element, x, y, left, top, localTileSize)) {
           return {
@@ -181,9 +165,7 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
             originalEvent: e
           };
         }
-
         break;
-
       case 'Polygon':
         if (inPoly(element, x, y, left, top, localTileSize)) {
           return {
@@ -192,11 +174,9 @@ function collideElement(e, elements, left, top, tileSize, zoom) {
             originalEvent: e
           };
         }
-
         break;
     }
   }
-
   return null;
 }
 
@@ -204,11 +184,9 @@ function elementClick(e, elements, tileSize, state) {
   var left = -state.left - state.deltaLeft + e.pageX - e.target.offsetLeft;
   var top = -state.top - state.deltaTop + e.pageY - e.target.offsetTop;
   var clickedElement = collideElement(e, elements, left, top, tileSize, state.zoom);
-
   if (clickedElement !== null) {
     return clickedElement;
   }
-
   return {
     id: null,
     element: null,
@@ -220,11 +198,9 @@ function elementRightClick(e, elements, tileSize, state) {
   var left = -state.left - state.deltaLeft + e.pageX - e.target.offsetLeft;
   var top = -state.top - state.deltaTop + e.pageY - e.target.offsetTop;
   var clickedElement = collideElement(e, elements, left, top, tileSize, state.zoom);
-
   if (clickedElement !== null) {
     return clickedElement;
   }
-
   return {
     id: null,
     element: null,
@@ -235,78 +211,66 @@ function elementRightClick(e, elements, tileSize, state) {
 var LEFT_BUTTON = 1;
 var selectedObject = null;
 var unselectTimeoutId = 0;
+var UNSELECT_TIMEOUT_MS = 300;
 function mouseMove(event, elements, tileSize, props, setProps, lockXAxis, lockYAxis, dragObjects, onElementMoved, onHover) {
   var newProps = _extends({}, props);
-
   var left = -props.left - props.deltaLeft + event.pageX - event.target.offsetLeft;
   var top = -props.top - props.deltaTop + event.pageY - event.target.offsetTop;
-
   if (event.nativeEvent.buttons === LEFT_BUTTON && !!props.prevX) {
     var moved = false;
-
     if (dragObjects) {
       if (selectedObject === null) {
         selectedObject = collideElement(event, elements, left, top, tileSize, props.zoom);
       }
-
       if (selectedObject !== null && selectedObject.element.draggable) {
         selectedObject.element.x = -props.left - props.deltaLeft + (event.clientX - props.boundingClientRect.left) - selectedObject.element.width / 2;
         selectedObject.element.y = -props.top - props.deltaLeft + (event.clientY - props.boundingClientRect.top) - selectedObject.element.height / 2;
         moved = true;
-
         if (onElementMoved) {
           onElementMoved(selectedObject, event.screenX - props.prevX, event.screenY - props.prevY);
         }
-
         if (onHover) {
           onHover(null);
         }
       }
     }
-
     if (!moved) {
       if (!lockXAxis) {
         newProps.left += event.screenX - props.prevX;
       }
-
       if (!lockYAxis) {
         newProps.top += event.screenY - props.prevY;
       }
     }
-
     if (event.nativeEvent.pointerType !== 'mouse') {
       unselectTimeoutId = setTimeout(function () {
-        console.log('unselect');
         selectedObject = null;
         setProps(_extends({}, newProps, {
           prevX: null,
           prevY: null
         }));
-      }, 300);
+      }, UNSELECT_TIMEOUT_MS);
     }
   } else {
     if (onHover) {
       onHover(collideElement(event, elements, left, top, tileSize, props.zoom));
     }
-
     selectedObject = null;
   }
-
   setProps(_extends({}, newProps, {
     prevX: event.screenX,
     prevY: event.screenY
   }));
 }
 
+var WHEEL_DELTA = 0.05;
 function mouseWheel(event, props, setProps, minZoom, maxZoom) {
   var zoom = props.zoom;
-
   if (event.deltaY < 0) {
-    zoom += 0.05;
+    zoom += WHEEL_DELTA;
   } else {
-    zoom -= 0.05;
+    zoom -= WHEEL_DELTA;
   }
-
   zoom = Math.max(zoom, minZoom);
   zoom = Math.min(zoom, maxZoom);
   setProps(_extends({}, props, {
@@ -319,23 +283,18 @@ function sortElements(elements) {
     if (a.zIndex !== b.zIndex) {
       return a.zIndex - b.zIndex;
     }
-
     if (a.fill === b.fill) {
       if (a.stroke === b.stroke) {
         return 0;
       }
-
       if (a.stroke < b.stroke) {
         return 1;
       }
-
       return -1;
     }
-
     if (a.fill < b.fill) {
       return 1;
     }
-
     return -1;
   });
   return elements;
@@ -349,7 +308,6 @@ var CanvasObject = /*#__PURE__*/function () {
     this['z-index'] = zIndex;
     this.draggable = draggable;
   }
-
   _createClass(CanvasObject, [{
     key: "zIndex",
     get: function get() {
@@ -364,167 +322,142 @@ var CanvasObject = /*#__PURE__*/function () {
       return 'CanvasObject';
     }
   }]);
-
   return CanvasObject;
 }();
 
 var ColoredCanvasObject = /*#__PURE__*/function (_CanvasObject) {
   _inheritsLoose(ColoredCanvasObject, _CanvasObject);
-
   function ColoredCanvasObject(id, x, y, fill, stroke, zIndex, draggable) {
     var _this;
-
     _this = _CanvasObject.call(this, id, x, y, zIndex, draggable) || this;
     _this.fill = fill;
     _this.stroke = stroke;
     return _this;
   }
-
   _createClass(ColoredCanvasObject, [{
     key: "constructorName",
     get: function get() {
       return 'ColoredCanvasObject';
     }
   }]);
-
   return ColoredCanvasObject;
 }(CanvasObject);
 
 var Circle = /*#__PURE__*/function (_ColoredCanvasObject) {
   _inheritsLoose(Circle, _ColoredCanvasObject);
-
   function Circle(_ref) {
     var _this;
-
     var id = _ref.id,
-        x = _ref.x,
-        y = _ref.y,
-        radius = _ref.radius,
-        fill = _ref.fill,
-        stroke = _ref.stroke,
-        zIndex = _ref.zIndex,
-        draggable = _ref.draggable;
+      x = _ref.x,
+      y = _ref.y,
+      radius = _ref.radius,
+      fill = _ref.fill,
+      stroke = _ref.stroke,
+      zIndex = _ref.zIndex,
+      draggable = _ref.draggable;
     _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable) || this;
     _this.radius = radius;
     return _this;
   }
-
   _createClass(Circle, [{
     key: "constructorName",
     get: function get() {
       return 'Circle';
     }
   }]);
-
   return Circle;
 }(ColoredCanvasObject);
 
 var CanvasImage = /*#__PURE__*/function (_CanvasObject) {
   _inheritsLoose(CanvasImage, _CanvasObject);
-
   function CanvasImage(_ref) {
     var _this;
-
     var id = _ref.id,
-        x = _ref.x,
-        y = _ref.y,
-        width = _ref.width,
-        height = _ref.height,
-        src = _ref.src,
-        zIndex = _ref.zIndex,
-        draggable = _ref.draggable;
+      x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
+      src = _ref.src,
+      zIndex = _ref.zIndex,
+      draggable = _ref.draggable;
     _this = _CanvasObject.call(this, id, x, y, zIndex, draggable) || this;
     _this.width = width;
     _this.height = height;
     _this.src = src;
     return _this;
   }
-
   var _proto = CanvasImage.prototype;
-
   _proto.crop = function crop(x, y, width, height) {
     this.sx = sx;
     this.sy = sx;
     this.swidth = swidth;
     this.sheight = sheight;
   };
-
   _createClass(CanvasImage, [{
     key: "constructorName",
     get: function get() {
       return 'CanvasImage';
     }
   }]);
-
   return CanvasImage;
 }(CanvasObject);
 
 var Rect = /*#__PURE__*/function (_ColoredCanvasObject) {
   _inheritsLoose(Rect, _ColoredCanvasObject);
-
   function Rect(_ref) {
     var _this;
-
     var id = _ref.id,
-        x = _ref.x,
-        y = _ref.y,
-        width = _ref.width,
-        height = _ref.height,
-        fill = _ref.fill,
-        stroke = _ref.stroke,
-        zIndex = _ref.zIndex,
-        draggable = _ref.draggable;
+      x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
+      fill = _ref.fill,
+      stroke = _ref.stroke,
+      zIndex = _ref.zIndex,
+      draggable = _ref.draggable;
     _this = _ColoredCanvasObject.call(this, id, x, y, fill, stroke, zIndex, draggable) || this;
     _this.width = width;
     _this.height = height;
     return _this;
   }
-
   _createClass(Rect, [{
     key: "constructorName",
     get: function get() {
       return 'Rect';
     }
   }]);
-
   return Rect;
 }(ColoredCanvasObject);
 
 var Polygon = /*#__PURE__*/function (_ColoredCanvasObject) {
   _inheritsLoose(Polygon, _ColoredCanvasObject);
-
   function Polygon(_ref) {
     var _this;
-
     var id = _ref.id,
-        points = _ref.points,
-        fill = _ref.fill,
-        stroke = _ref.stroke,
-        zIndex = _ref.zIndex,
-        draggable = _ref.draggable;
+      points = _ref.points,
+      fill = _ref.fill,
+      stroke = _ref.stroke,
+      zIndex = _ref.zIndex,
+      draggable = _ref.draggable;
     _this = _ColoredCanvasObject.call(this, id, points[0].x, points[0].y, fill, stroke, zIndex, draggable) || this;
     _this.points = points;
     return _this;
   }
-
   _createClass(Polygon, [{
     key: "constructorName",
     get: function get() {
       return 'Polygon';
     }
   }]);
-
   return Polygon;
 }(ColoredCanvasObject);
 
 function renderCircle(context, element, left, top, localTileSize) {
   context.beginPath();
   context.arc(left + element.x * localTileSize, top + element.y * localTileSize, element.radius * localTileSize, 0, 2 * Math.PI);
-
   if (element.fill) {
     context.fill();
   }
-
   if (element.stroke) {
     context.stroke();
   }
@@ -537,7 +470,6 @@ function renderImage(context, element, left, top, localTileSize) {
     __canvas2dWrapper__.imgCache[element.src] = new Image();
     __canvas2dWrapper__.imgCache[element.src].src = element.src;
   }
-
   if (!element.sx) {
     context.drawImage(__canvas2dWrapper__.imgCache[element.src], left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * localTileSize);
   } else {
@@ -549,7 +481,6 @@ function renderRect(context, element, left, top, localTileSize) {
   if (element.fill) {
     context.fillRect(left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * localTileSize);
   }
-
   if (element.stroke) {
     context.strokeRect(left + element.x * localTileSize, top + element.y * localTileSize, element.width * localTileSize, element.height * localTileSize);
   }
@@ -558,17 +489,13 @@ function renderRect(context, element, left, top, localTileSize) {
 function renderRect$1(context, element, left, top, localTileSize) {
   context.beginPath();
   context.moveTo(left + element.points[0].x * localTileSize, top + element.points[0].y * localTileSize);
-
   for (var i = 0; i < element.points.length; i++) {
     context.lineTo(left + element.points[i].x * localTileSize, top + element.points[i].y * localTileSize);
   }
-
   context.lineTo(left + element.points[0].x * localTileSize, top + element.points[0].y * localTileSize);
-
   if (element.fill) {
     context.fill();
   }
-
   if (element.stroke) {
     context.stroke();
   }
@@ -585,22 +512,17 @@ function renderCanvas(context, width, height, elements, tileSize, state) {
   var prevStrokeStyle = '';
   var localTileSize = calcTileSize(tileSize, state.zoom);
   context.clearRect(0, 0, width, height);
-
   for (var _iterator = _createForOfIteratorHelperLoose(elements), _step; !(_step = _iterator()).done;) {
     var element = _step.value;
-
     if (element.fill !== prevFillStyle && typeof element.fill !== 'undefined') {
       context.fillStyle = element.fill;
       prevFillStyle = element.fill;
     }
-
     if (element.stroke !== prevStrokeStyle && typeof element.stroke !== 'undefined') {
       context.strokeStyle = element.stroke;
       prevStrokeStyle = element.stroke;
     }
-
     var type = element.constructorName;
-
     if (renderFn[type]) {
       renderFn[type](context, element, left, top, localTileSize);
     } else {
@@ -609,54 +531,54 @@ function renderCanvas(context, width, height, elements, tileSize, state) {
   }
 }
 
-var _excluded = ["elements", "width", "height", "trackMouseMove", "minZoom", "maxZoom", "tileSize", "onClick", "onRightClick", "onHover", "onElementMoved", "onWheel", "lockXAxis", "lockYAxis", "smoothingQuality", "dragObjects", "deltaLeft", "deltaTop"];
-var prevEvent;
+var _excluded = ["elements", "width", "height", "trackMouseMove", "minZoom", "maxZoom", "tileSize", "onClick", "onRightClick", "onHover", "onElementMoved", "onWheel", "onFrame", "lockXAxis", "lockYAxis", "smoothingQuality", "dragObjects", "deltaLeft", "deltaTop"];
+function onRightClickEvent(e) {
+  e.preventDefault();
+  onRightClick(elementRightClick(e, elements, tileSize, state));
+}
 function Canvas2D(_ref) {
   var elements = _ref.elements,
-      width = _ref.width,
-      height = _ref.height,
-      _ref$trackMouseMove = _ref.trackMouseMove,
-      trackMouseMove = _ref$trackMouseMove === void 0 ? true : _ref$trackMouseMove,
-      _ref$minZoom = _ref.minZoom,
-      minZoom = _ref$minZoom === void 0 ? 1 : _ref$minZoom,
-      _ref$maxZoom = _ref.maxZoom,
-      maxZoom = _ref$maxZoom === void 0 ? 1 : _ref$maxZoom,
-      _ref$tileSize = _ref.tileSize,
-      tileSize = _ref$tileSize === void 0 ? 1 : _ref$tileSize,
-      onClick = _ref.onClick,
-      onRightClick = _ref.onRightClick,
-      onHover = _ref.onHover,
-      onElementMoved = _ref.onElementMoved,
-      onWheel = _ref.onWheel,
-      _ref$lockXAxis = _ref.lockXAxis,
-      lockXAxis = _ref$lockXAxis === void 0 ? false : _ref$lockXAxis,
-      _ref$lockYAxis = _ref.lockYAxis,
-      lockYAxis = _ref$lockYAxis === void 0 ? false : _ref$lockYAxis,
-      _ref$smoothingQuality = _ref.smoothingQuality,
-      smoothingQuality = _ref$smoothingQuality === void 0 ? 'medium' : _ref$smoothingQuality,
-      _ref$dragObjects = _ref.dragObjects,
-      dragObjects = _ref$dragObjects === void 0 ? false : _ref$dragObjects,
-      _ref$deltaLeft = _ref.deltaLeft,
-      deltaLeft = _ref$deltaLeft === void 0 ? 0 : _ref$deltaLeft,
-      _ref$deltaTop = _ref.deltaTop,
-      deltaTop = _ref$deltaTop === void 0 ? 0 : _ref$deltaTop,
-      otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-
+    width = _ref.width,
+    height = _ref.height,
+    _ref$trackMouseMove = _ref.trackMouseMove,
+    trackMouseMove = _ref$trackMouseMove === void 0 ? true : _ref$trackMouseMove,
+    _ref$minZoom = _ref.minZoom,
+    minZoom = _ref$minZoom === void 0 ? 1 : _ref$minZoom,
+    _ref$maxZoom = _ref.maxZoom,
+    maxZoom = _ref$maxZoom === void 0 ? 1 : _ref$maxZoom,
+    _ref$tileSize = _ref.tileSize,
+    tileSize = _ref$tileSize === void 0 ? 1 : _ref$tileSize,
+    onClick = _ref.onClick,
+    onRightClick = _ref.onRightClick,
+    onHover = _ref.onHover,
+    onElementMoved = _ref.onElementMoved,
+    onWheel = _ref.onWheel,
+    onFrame = _ref.onFrame,
+    _ref$lockXAxis = _ref.lockXAxis,
+    lockXAxis = _ref$lockXAxis === void 0 ? false : _ref$lockXAxis,
+    _ref$lockYAxis = _ref.lockYAxis,
+    lockYAxis = _ref$lockYAxis === void 0 ? false : _ref$lockYAxis,
+    _ref$smoothingQuality = _ref.smoothingQuality,
+    smoothingQuality = _ref$smoothingQuality === void 0 ? 'medium' : _ref$smoothingQuality,
+    _ref$dragObjects = _ref.dragObjects,
+    dragObjects = _ref$dragObjects === void 0 ? false : _ref$dragObjects,
+    _ref$deltaLeft = _ref.deltaLeft,
+    deltaLeft = _ref$deltaLeft === void 0 ? 0 : _ref$deltaLeft,
+    _ref$deltaTop = _ref.deltaTop,
+    deltaTop = _ref$deltaTop === void 0 ? 0 : _ref$deltaTop,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useState = useState({}),
-      state = _useState[0],
-      setState = _useState[1];
-
+    state = _useState[0],
+    setState = _useState[1];
   var canvasRef = useCallback(function (canvas) {
     if (canvas !== null) {
       var context = canvas.getContext('2d');
-
       if (smoothingQuality === false) {
         context.imageSmoothingEnabled = false;
       } else {
         context.imageSmoothingEnabled = true;
         context.imageSmoothingQuality = smoothingQuality;
       }
-
       setState({
         boundingClientRect: canvas.getBoundingClientRect(),
         canvas: canvas,
@@ -671,69 +593,63 @@ function Canvas2D(_ref) {
   }, []);
   state.deltaTop = deltaTop;
   state.deltaLeft = deltaLeft;
-
   if (typeof elements !== 'object' || !Array.isArray(elements)) {
     throw new Error('Invalid elements, should be an array !');
   }
-
   if (typeof width !== 'number' || typeof height !== 'number') {
     throw new Error('width/height should be specified and be numbers.');
   }
-
   if (minZoom > maxZoom) {
     throw new Error('minZoom should be lower than maxZoom.');
   }
-
   if (typeof onClick !== 'function' && typeof onClick !== 'undefined') {
     throw new Error('onClick should be a function.');
   }
-
   var sortedElements = sortElements(elements);
   var onMouseMove = null;
-
   if (trackMouseMove) {
     onMouseMove = function onMouseMove(e) {
       return mouseMove(e, elements, tileSize, state, setState, lockXAxis, lockYAxis, dragObjects, onElementMoved, onHover);
     };
   }
-
   var onWheelFn = function onWheelFn(e) {
     if (onWheel) {
       onWheel(e);
     }
-
     if (minZoom !== maxZoom) {
       mouseWheel(e, state, setState, minZoom, maxZoom);
     }
   };
-
   var onClickFn = null;
-
   if (onClick) {
     onClickFn = function onClickFn(e) {
       return onClick(elementClick(e, elements, tileSize, state));
     };
   }
-
-  if (onRightClick && state.canvas) {
-    if (prevEvent) {
-      state.canvas.removeEventListener('contextmenu', prevEvent);
+  useEffect(function () {
+    if (onRightClick && state.canvas) {
+      state.canvas.addEventListener('contextmenu', onRightClickEvent);
+      return state.canvas.removeEventListener('contextmenu', onRightClickEvent);
     }
-
-    prevEvent = function prevEvent(e) {
-      e.preventDefault();
-      onRightClick(elementRightClick(e, elements, tileSize, state));
+  }, [state.canvas, onRightClick]);
+  useEffect(function () {
+    var shouldRender = true;
+    function render() {
+      if (onFrame) {
+        onFrame();
+      }
+      if (state.context) {
+        renderCanvas(state.context, width, height, sortedElements, tileSize, state);
+      }
+      if (shouldRender) {
+        window.requestAnimationFrame(render);
+      }
+    }
+    window.requestAnimationFrame(render);
+    return function () {
+      shouldRender = false;
     };
-
-    state.canvas.addEventListener('contextmenu', prevEvent);
-  }
-
-  if (state.context) {
-    window.requestAnimationFrame(function () {
-      renderCanvas(state.context, width, height, sortedElements, tileSize, state);
-    });
-  }
-
+  }, [state.context, onFrame]);
   return /*#__PURE__*/React.createElement("canvas", _extends({
     ref: canvasRef,
     width: width,