fl-web-component 0.1.0

package/packages/components/model/readme.md

@@ -0,0 +1,31 @@
+适配步骤
+1. 依赖库在 main.js 进行注册
+// main.js
+//依赖 QWebChannel 库，实现组件与 pc 间通信，需在 main.js 进行注册
+import { QWebChannel } from "@/utils/qwebchannel";
+// 注册 three.js 库
+import * as THREE from 'three'
+
+Vue.prototype.THREE = THREE
+Vue.prototype.QWebChannel = QWebChannel
+
+2. 项目所涉及的依赖库
+  "dependencies": {
+    "camera-controls": "^2.6.0",
+    "three": "^0.138.0",
+    "three.path": "^1.0.1",
+    "lodash": "^4.17.21",   
+    "konva": "^9.3.14",     
+    "html2canvas": "^1.4.1",    
+    "element-ui": "^2.15.3",   
+    "vue": "^2.5.2",     
+  },
+3. request.js
+关于 xhr 请求的中间件拦截器
+4. api/config.js 适配
+关于本地开发和线上服务区分的标识
+api\index.js
+
+import config from "@/api/config";
+5. 白名单 
+proof-for-pc.vue

package/packages/components/model/utils/annotation-tool.js

@@ -0,0 +1,340 @@
+import Konva from "konva";
+const className = "annotation-shape";
+var _that = null;
+const AnnotationTool = function(stage, layer, type, strokeWidth = 1) {
+  this.stage = stage;
+  this.layer = layer;
+  this.type = type;
+  this.strokeWidth = strokeWidth;
+  this.list = [];
+  this.currentObj = null;
+  this.isDrawing = false;
+  this.startPoints = [];
+  this.annotationList = [];
+  this.linePoints = [];
+  this.isInput = false;
+  this.color = "#FF3B2F";
+};
+AnnotationTool.prototype = {
+  start() {
+    _that = this;
+    this.stage.on("mousedown", this.stageMouseDown, false);
+    this.stage.on("mousemove", this.stageMouseMove, false);
+    this.stage.on("mouseup", this.stageMouseUp, false);
+  },
+  updateType(val) {
+    const { type, strokeWidth } = val;
+    this.type = type;
+    this.strokeWidth = strokeWidth;
+  },
+  updateColor(color) {
+    this.color = color;
+  },
+  stageMouseDown(e) {
+    // _that.currentObj = null
+    if (e.attrs.name === "annotation-shape" || _that.isInput) return;
+    // 左键开始
+    const mousePos = _that.stage.getPointerPosition();
+    const x = (mousePos.x - _that.stage.getX()) / _that.stage.scaleX();
+    const y = (mousePos.y - _that.stage.getY()) / _that.stage.scaleY();
+    _that.startPoints.push(x);
+    _that.startPoints.push(y);
+    switch (_that.type) {
+      case "Rect":
+        const rect = new Konva.Rect({
+          type: _that.type,
+          name: className,
+          x: x,
+          y: y,
+          width: 0,
+          height: 0,
+          stroke: _that.color,
+          strokeWidth: _that.strokeWidth,
+          draggable: true
+        });
+        rect.on("mousedown", e => {
+          e.cancelBubble = true;
+        });
+        // rect.on('mouseup', (e) => {
+        //   e.cancelBubble = true;
+        // })
+        rect.on("click", e => {
+          e.cancelBubble = true;
+          if (_that.type === "Rubber") {
+            _that.rubberRemove(rect._id);
+            rect.destroy();
+          }
+        });
+        _that.annotationList.push(rect);
+        _that.layer.add(rect);
+        _that.isDrawing = true;
+        break;
+      case "Circle":
+        const circle = new Konva.Circle({
+          type: _that.type,
+          name: className,
+          x: x,
+          y: y,
+          radius: 0,
+          stroke: _that.color,
+          strokeWidth: _that.strokeWidth,
+          draggable: true
+        });
+        // circle.on('mouseup', (e) => {
+        //   e.cancelBubble = true;
+        // })
+        circle.on("mousedown", e => {
+          e.cancelBubble = true;
+        });
+        circle.on("click", e => {
+          e.cancelBubble = true;
+          if (_that.type === "Rubber") {
+            _that.rubberRemove(circle._id);
+            circle.destroy();
+          }
+        });
+        _that.annotationList.push(circle);
+        _that.layer.add(circle);
+        _that.isDrawing = true;
+        break;
+      case "Line":
+        _that.linePoints = _that.linePoints.concat(_that.startPoints);
+        const line = new Konva.Line({
+          name: className,
+          type: _that.type,
+          points: [x, y],
+          stroke: _that.color,
+          strokeWidth: _that.strokeWidth,
+          lineCap: "round",
+          lineJoin: "round",
+          draggable: true
+        });
+        // line.on('mouseup', (e) => {
+        //   e.cancelBubble = true;
+        // })
+        line.on("mousedown", e => {
+          e.cancelBubble = true;
+        });
+        line.on("click", e => {
+          e.cancelBubble = true;
+          if (_that.type === "Rubber") {
+            _that.rubberRemove(line._id);
+            line.destroy();
+          }
+        });
+        _that.annotationList.push(line);
+        _that.layer.add(line);
+        _that.isDrawing = true;
+        break;
+      case "Text":
+        const textNode = new Konva.Text({
+          name: className,
+          type: _that.type,
+          x: x,
+          y: y,
+          width: 200,
+          text: "",
+          fontSize: 13 + (3 * _that.strokeWidth),
+          fill: _that.color,
+          draggable: true
+        });
+        // textNode.on('mouseup', (e) => {
+        //   e.cancelBubble = true;
+        // })
+        textNode.on("mousedown", e => {
+          e.cancelBubble = true;
+        });
+        textNode.on("click", e => {
+          e.cancelBubble = true;
+          if (_that.type === "Rubber") {
+            _that.rubberRemove(textNode._id);
+            textNode.destroy();
+          }
+        });
+        _that.annotationList.push(textNode);
+        _that.layer.add(textNode);
+        _that.isDrawing = true;
+        textNode.on("dblclick", () => {
+          e.cancelBubble = true;
+          _that.isInput = true;
+          textNode.hide();
+          var textPosition = textNode.absolutePosition();
+          var stageBox = _that.stage.container().getBoundingClientRect();
+          var areaPosition = {
+            x: stageBox.left + textPosition.x,
+            y: stageBox.top + textPosition.y
+          };
+          var textarea = document.createElement("textarea");
+          document.body.appendChild(textarea);
+          textarea.value = textNode.text();
+          textarea.style.position = "absolute";
+          textarea.style.top = areaPosition.y + "px";
+          textarea.style.left = areaPosition.x + "px";
+          textarea.style.width =
+            textNode.width() - textNode.padding() * 2 + "px";
+          textarea.style.height =
+            textNode.height() - textNode.padding() * 2 + 5 + "px";
+          textarea.style.fontSize = "16px"; // textNode.fontSize() + 'px'
+          textarea.style.border = "1px solid " + _that.color;
+          textarea.style.padding = "5px";
+          textarea.style.margin = "0px";
+          textarea.style.overflow = "hidden";
+          textarea.style.background = "none";
+          textarea.style.outline = "none";
+          textarea.style.resize = "none";
+          textarea.style.lineHeight = textNode.lineHeight();
+          textarea.style.fontFamily = textNode.fontFamily();
+          textarea.style.transformOrigin = "left top";
+          textarea.style.textAlign = textNode.align();
+          textarea.style.color = textNode.fill();
+          var rotation = textNode.rotation();
+          var transform;
+          if (rotation) {
+            transform += "rotateZ(" + rotation + "deg)";
+          }
+          var px = 0;
+          var isFirefox =
+            navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+          if (isFirefox) {
+            px += 2 + Math.round(20 / 20); // textNode.fontSize()
+          }
+          transform += "translateY(-" + px + "px)";
+          textarea.style.transform = transform;
+          textarea.style.height = textarea.scrollHeight + 3 + "px";
+          textarea.focus();
+          function removeTextarea() {
+            textarea.parentNode.removeChild(textarea);
+            window.removeEventListener("click", handleOutsideClick);
+            textNode.show();
+            _that.layer.draw();
+          }
+          function setTextareaWidth(newWidth) {
+            if (!newWidth) {
+              // set width for placeholder
+              newWidth = textNode.placeholder.length * textNode.fontSize();
+            }
+            // some extra fixes on different browsers
+            var isSafari = /^((?!chrome|android).)*safari/i.test(
+              navigator.userAgent
+            );
+            var isFirefox =
+              navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+            if (isSafari || isFirefox) {
+              newWidth = Math.ceil(newWidth);
+            }
+
+            var isEdge =
+              document.documentMode || /Edge/.test(navigator.userAgent);
+            if (isEdge) {
+              newWidth += 1;
+            }
+            textarea.style.width = newWidth + "px";
+          }
+          textarea.addEventListener("keydown", function(e) {
+            if (e.code === 13 && !e.shiftKey) {
+              textNode.text(textarea.value);
+              removeTextarea();
+            }
+            // on esc do not set value back to node
+            if (e.code === 27) {
+              removeTextarea();
+            }
+          });
+          // textarea.addEventListener('keydown', function(e) {
+          //   var scale = textNode.getAbsoluteScale().x
+          //   setTextareaWidth(textNode.width() * scale)
+          //   textarea.style.height = 'auto'
+          //   textarea.style.height =
+          //     textarea.scrollHeight + textNode.fontSize() + 'px'
+          // })
+          function handleOutsideClick(e) {
+            e.stopPropagation();
+            if (e.target !== textarea) {
+              textNode.text(textarea.value);
+              removeTextarea();
+              _that.isInput = false;
+            }
+          }
+          setTimeout(() => {
+            window.addEventListener("click", handleOutsideClick);
+          });
+        });
+        break;
+    }
+  },
+  stageMouseMove(e) {
+    if (_that.isDrawing) {
+      const mousePos = _that.stage.getPointerPosition();
+      const x = (mousePos.x - _that.stage.getX()) / _that.stage.scaleX();
+      const y = (mousePos.y - _that.stage.getY()) / _that.stage.scaleY();
+      const currentObj = _that.annotationList[_that.annotationList.length - 1];
+      switch (currentObj.className) {
+        case "Rect":
+          currentObj.setAttrs({
+            width: x - _that.startPoints[0],
+            height: y - _that.startPoints[1]
+          });
+          break;
+        case "Circle":
+          let radius = 0;
+          let width = x - _that.startPoints[0] < 0 ? 0 : x - _that.startPoints[0];
+          let height = y - _that.startPoints[1] < 0? 0 : y - _that.startPoints[1];
+          if (width === height) {
+            radius = width / 2;
+          } else {
+            radius = Math.max(width, height) / 2;
+          }
+          currentObj.setAttrs({
+            radius: radius
+          });
+          break;
+        case "Line":
+          _that.linePoints.push(x);
+          _that.linePoints.push(y);
+          const points = [].concat(_that.linePoints);
+          currentObj.setPoints(points);
+          break;
+      }
+    }
+  },
+  stageMouseUp(e) {
+    _that.isDrawing = false;
+    _that.startPoints.splice(0);
+    _that.linePoints.splice(0);
+    _that.isInput = false;
+  },
+  clear() {
+    this.annotationList.forEach(item => {
+      item.destroy();
+    });
+    this.annotationList.splice(0);
+  },
+  clearLayer() {
+    this.clear();
+
+    const items = this.stage.getLayers()[0].destroyChildren();
+  },
+  rubberRemove(id) {
+    const l = this.annotationList.length;
+    for (let index = 0; index < l; index++) {
+      if (id === this.annotationList[index]._id) {
+        this.annotationList.splice(index, 1);
+        break;
+      }
+    }
+  },
+  destroy() {
+    this.annotationList.forEach(item => {
+      item.off("mousedown");
+      // item.off('mouseup')
+      item.off("mousemove");
+      item.destroy();
+    });
+    this.stage.off("mousedown");
+    this.stage.off("mouseup");
+    this.stage.off("mousemove");
+  }
+};
+export default {
+  AnnotationTool
+};

package/packages/components/model/utils/cursor.js

@@ -0,0 +1,18 @@
+/*
+ * @Author: FYang
+ * @Date: 2023-05-25 10:55:15
+ * @LastEditTime: 2023-06-15 14:11:14
+ * @Description:
+ * @FilePath: \dmp-ui\src\views\system\drawing-display\components\cursor.js
+ */
+let cursors={
+  pen:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACd0lEQVRYR+2WT2gTQRTGv7eb9JLkmPoHvHkQLy2i94o0KMiyMxgRbwrmpigeFBUJFPHiRegpgiLiQZbMTFoR/4AX7UVQCD14EfGcQkGFiia7T0Yq1HWTbLeGgnSOszPv9/HNex9L2ORFm8zHloD/1gHyff8cEZ0EEAIIyuXybKPR6MZ7biQOCCEaAM6shRHRrFLq7MgF+L5/nIgexUHMHOXz+XIQBMt/CPuXY+h53m7Xdd8BKPWpO6m1bo9EQLVaHet2uwtEtL8P/HMul9sRBMG3kQjwff8WEV3sA2cAp7TW90fSA0KIwwCeAInBxsx8wRhzO0nchqdACDEeRVHbcZztCQA7gjWt9d1+vbYhAfV63Wm3208BTCcAekR0Win1YFCjb0iAEOIygJsJgB9EdEIppYdNWWYBUsoDzPwawFgMssLMwhjzfBjcfs8sQAjRBCBjkC9RFB1ttVqv0sBTC6hUKoVisSiZeS8RPVZKLQghbNTayP29lpn5iDHmTVp4KgGrVhsAO1cLv9RaH7LuSSlvMPN5AF8BVOIpl0bIwCeoVqvlXq+3CGDbmmI2VI5prZXdm5qaypVKpbH5+fmVNMB1BZGUcoaZr8UvMXPXcZx7RHSn2Wy+BWBFZVp9HajVavmlpaVPa6xPBBDRdaXUTCZ6vynwPK/kuu4lAFeHFWbmK8aYpCwYdvXX978ckFLuY2Zra9plm+9F2sNDe8COXKFQ+AhgPEXRxYmJicl6vR6lOJv8hEm71oUwDB86jrNnQOH3YRh6c3NzH7LCB+aAbcJOp3OQiKaZeRcRWUe+A+gQ0TPXdXX85yKLkMxRnAWWdGdLwJYDPwFn/dQhz4OkVwAAAABJRU5ErkJggg==',
+  line:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA4klEQVRYR+3WTQrCMBCG4fmy8AYeyo2kBS+goAsPJPhzhTEIHso7SEa6EETsXzJjN+m+vE8nhQlo4gcT96kAygRMJ1BV1RrAg5nvbT+7GaCJi8gJwBPAiplvvxAmAO/9hoiOAJyIRCLahhAufwF8fLkjIhGRfQjh8JcjGBtvUGpHkBJXA6TGVQA58WxAbjwLoBFPBmjFkwCa8dEA7fgogEV8MMAqPghgGe8FWMc7Ad8r1Tm3Y+az9i26dRl57xcArkQ061upOajObVjX9TLGOG+7TOSE3++qreNUTAGUCUw+gRcF0dchsIjssQAAAABJRU5ErkJggg==',
+  round:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACpUlEQVRYR+2WPW8TQRCG39mLqUBQuKQiCeJDSiT4DRCFwtk964KQ6BCWoCUfonMJOD1gRAkCjG/ODUmB+AcgpQECCVW6NBFQYecGbbSHEhPfnZ0ijbezduedx7PvzhzhiBcdcX4MAYYV6KsCQRAc29nZMSIyA+ASEZ22JhaRTQCfRCQqFApRo9H4k9fcuQG01mUiegTgTIb4BoAFZg7zQGQCBEHgtdvth0R0r0twTUQ2iMhqjAI427W/NDk5uVitVuM0kEwArfXSnuQdInpGREvNZvPHXuFSqTQ2MjIyLyK3AHhur8bMCwMDuLK/dQLbAMrM/CFN0BhzBUADwEnnDxNFUdQrpmcFrOE6nc4Xd+cdAFNZyZMkWuurRPTOVoKI1j3Pu9jLmD0BfN+/LiKvrCgRPQ7D8G4eUyVnjDF1ALfd71lmtlX5b/UEMMa8BHDDRiilRrvvPAumXC6Px3H8zZ17wcw3+wVYs86O4/hrq9U6n5XwoH1jjAUYB7DGzOf6BfgF4DiAZWa+NgiA1nqFiKYA/GbmE4MCrDDz9CEBfjLz7qvoXmke2L2CtPJlQRljMjVymVBExqIosi0297KNyfO87wObUGs9S0SvncATZr6TOzsA3/efikjFPeMgDMOkoe2TyWpEn12f7yilppvN5vs8EK4bLieNqFgsXqjX6+2+PGAPG2N8AE0XuK2UCrIgXPI3AE65OM3MrV7gmcPIGFMDMOcEbEt+LiK1bk8cNIzs+A7DcDGtapkA1WpVra6uPgAw3yVkm4w1ZjKObcP5t2zyiYmJ+4cex4mi1lorpWr2RaT+I6J1EZlLK/s+0DymSs5UKpXC1taWBjATx/FlpdTuJ1kcx5tKqY9EFBWLxVYvw/Vtwn7gBj2b6YFBhfPGDQGGFfgLW7AHMIfxtKYAAAAASUVORK5CYII=',
+  trangle:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAl0lEQVRYR+2WsQ2DMBBF/w1BaLIIW/gKGJIU31uwCJUzhFGKVIAEjiUr0nd/95+f5DsbGh9rnA8ByIAMnBoIISQz62o805zzO8b4OOp1CuDuuUb4twfJw6wrACuApRBmAPD81P4C8CI5lQC4+wxgFIAMyIAM/L2B5qO4ZArvam7vgprrGEAi2d9ax1WufaGJvmQyIAPNDWzonXsh3WqxKQAAAABJRU5ErkJggg==',
+  eraser:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA1hJREFUWEfFl09oXUUUxr/vPkzARRFcumhdVGgV8t7MJBFaaC30z0YQMW1AUWyhXVWlYmm7aLWbtiQNFboqoqUFgy1VFBcuuhDRJu2bM0kIRsFkJS7ctC9dNLwQ7pGBtDxe3p9734t04G7uPef7fvfMzJl7iac82I2/c25nzPfe/9ypTscAxphxksOrxlfTNB2ZmpqaywvSEYAx5n2SX9aZVUiOViqV0fn5+WpWkNwAxWLxuUKhcAfAliYmoqojIYRvskDkBrDWngNwop24qkaACCKtYnMBOOcGVDW+faEdwOrzqqqOpmk6Oj09XWmUkxfglqq+mdG8Nuz3CBJCuFqfmxnAGPMOyesdmNem3BSR/bU3MgFYa58BEAC80iUAVPVICOHKY52sAJ8BON2tecxPkmR3uVy+nRmgVCptTZIkvn1vtwAkv/LeH8w1BXUdrxuG+6q6PYTwR2YAa+0bAL7rxrUm96SInM+1C6y1sYmYdQCYXFxc3NmoRTddhM6546p6YR3MQfIt7/2tXI3IGGOTJDmsqoe7hLgmIu8102i5Da21XwN4FsBWAJs7AHkI4DURibuo4WgKYIx5neQPqrqvt7f3l+Xl5XgAnQQQm1LWcUZEzrYKbrUG7qjqX7Xl6+/vfzlN008ANC3pkwZD+mq1umd2dvZBbgBjzEckRwBsF5G79QKxOgA+JrmjaWnJd733bc+ONRUolUobkySZBBAPjg+aGQwNDRUWFhaOkvwQwKa6uBsiciDLPK0BcM5dVtVhVX01hDDfTqRYLG4uFApHAcQrjkcA9orIr+1y4/M1ANbaP1V1PIQQD6BMwzl3XVU3kpxU1VRE2n4xPVkr9Q7WWgWwX0RuZnE3xuwl+ZOqHggh3Ojr63thZmbmnyy5DStgjDlD8tO45ZaWlsbm5uaWW4k5526r6r8i8nZW09q4htvQWvsFgEMAhORF7/14I3Hn3CFV/ZzkLu/9vXUDiELGmH0kjwHYTfJbAGPe+98emwwODm5YWVmZAPC9iJzqxLzhFNQLOeeOqGoEeYnkJZJj5XL579WpGu7p6dk2MTFx/38DiMIDAwPPp2l6bBVkJf4OAoj/hZkXa9OGlYfcOVdK03SY5Iuqei2E8GOe/EaxmT5KuzVplf8fJR1KMBY8k7wAAAAASUVORK5CYII=',
+  text:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA5klEQVRYR+2VPwrCMBSHfwlFvIizq6u7y0vR2Qt4A0dP4AmcLSUUhI6Ozs5epA5NpKBQ1Ni0tAThZUxe8r735Z9A4CYC5wcDsAGngTiOJ8aYRR+HVEp5StP09m0tJwARLQEc+wAAsNJaJ38NsDXGnOsVSCnnAHbPvqbxTgam1tp1lUAIcdBaX+sAb1v0kYCIfs5/rdX5GjYB+J4dBmADbIANsIHWBpRSs7IspeszyrLsAsAO9hQT0R3AyJWgKIpxnudVjFdrbSA4gFJqY62NXOVFUbRPkqT0Kr/66n0Dh4pjADYQ3MADakKSIQVRq+oAAAAASUVORK5CYII=',
+  inspectionAdd: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAbCAMAAAC+/9RaAAAAAXNSR0IArs4c6QAAAWVQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAkpKSAAAAgICAeHh4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwcHBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJiYmAAAAAAAAAAAAAAAA19fX29vbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHR0d5+fnQ0ND6OjoAAAAAAAAAAAAAAAAAAAAAAAAuLi4AAAAAAAAREREFhYWgICA8fHx+vr68vLyeHh4pKSkqKio9fX1+Pj4+vr609PT3d3durq6/f39/f397Ozs7u7u7e3t9fX1+Pj48/Pz////+fn5AAAAAI3pCAgIDAwMEBAQHBwcICAgIyMjJycnOzs7R0dHS0tLW1tbY2Njf39/g4ODh4eHj4+Pk5OTp6enr6+vs7Oz29vb39/f4+Pj6+vr8/Pz9/f3////fyxaCgAAAFp0Uk5TAAECAwQFBgcICQsMDQ4ODxARExUZGhwfICEiJCUqKywtLi8yNTU2OkJGRkZLTU9UVVZYaGlpa21xcnN0dnd+gYOEi5WXmpufpsHDxMfPz9rh5e3v9PX29/f5eHS9kwAAATJJREFUKM910vdXwjAQB/CmTSoCioqjgEgFF+69994TFYOoqGi1Kq7e32/TwtOW+P0xn5dc3t0Jwv+pWKtGXMD1sNss8kSOAhz1SDyJw3MhPUG4olEN1msQV2j+e6esmC00937YLXGFZgvpMcIVSp9gtZYQgsUyoXljG8z4xTKhuQ/IZCCMi835IzTLRJXddx50XWfS7pTrS3prnB8wmQ/IBKOS3H1qYMUUKz5ky6ORMszD34AiWR19ga3lE6eohIlxsTHct+J8zZbjpWRTQ3Lv64reMFmcm5kcCGFzcvujnUFMwuNnb/evTPoTaizkRwJu7IgGzH542zZPIcUk4SVEMn+NKqs8bGhisGtkdoFJq+xelbpIvLdY3BUkeSJD01ODpY46zKfEWhQfb/2QZBdn+QHojG9mLMVTWQAAAABJRU5ErkJggg==',
+  inspectionRemove: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAdCAMAAABopjdHAAAAAXNSR0IArs4c6QAAAmpQTFRFAAAAAAAA////AAAAgICAAAAAVVVVAAAAQEBAAAAAMzMzmZmZAAAAKioqAAAAJCQkAAAAICAgAAAAAAAAAAAAFxcXRkZGAAAAAAAAEhISAAAAAAAAEBAQAAAAAAAAhoaGAAAAAAAAqqqqAAAAm5ubCQkJAAAAAAAAAAAACAgIAAAAAAAABwcHJCQkAAAABwcHAAAAmJiYAAAABgYGAAAAAAAAs7OzAAAAAAAABQUFAAAAAAAAAAAAAAAAysrKAAAAICAgAAAAAAAAZ2dnAAAAAAAAy8vLAAAAz8/PAAAAAAAAUFBQ29vbAAAAAAAA2traGRkZxsbGAAAADAwM5+fnExMTEBAQBwcHFhYWAAAANzc3ERERPj4+WlpaWVlZDAwMhYWF8vLy9PT0g4OD8fHxYWFhkZGR7u7ue3t7d3d38/Pz8fHx/Pz8cXFxoqKi0dHRwcHBw8PD+vr6/Pz83Nzc/Pz85ubm8vLy/v7+8vLy+/v7+fn5/v7+/P3+/f7+/v//AAAAAQEBAgICBAQECQkJExMTGhoaJCQkJSUlJycnNDQ0RERESUlJVVVVgYGBhISEoKCgoqKip6enq6urrKyswcHBxsbGy8vLzMzM5+fn6urq7Ozs8PDw9PT0+fn5+vr6/f39/f///v7+/v///zQn/zQo/zcr/zgs/zks/zkt/zou/zsv/zsw/zww/0A0/0E1/0I3/0Q5/0U6/25l/4N6/4V9/6ii/6ul/62n/66o/6+p/7Cr/7Gt/7Sv/7ey/7m1/7q2/+Lg/+Pi/+Tj/+jn//f2//j3//v7//z7//z8//39//79//7+////WIDzvAAAAIB0Uk5TAAEBAgIDAwQEBQUFBgYHBwgICQoLCwsMDg4PEBAREhUXGxscHB0eHyAhIiMjIyQkJSUmKywvLzAyNTY3ODo6PD9BSUpLTk5QUFJUXF1fYGFlZmtrbG1wcXJ2eHt8kJKVnZ2eoKCjpaWmp6ips7m9vsLN2uLk5efu8fL6+/v9/v4j10sFAAABsUlEQVQoz2NgwANymBmxirOJny1SYcUmw6l29myNHTZdnAZnJ00764NNRu/slIb+s4kCGNo4tc9ObmjoOluqxIqpByjT0DjnrBkzVpmGhuln3VhRTOSCyTT0nU0Rw6qnoaFjUYU8C1aZhoa5Zw0R7uDRRsg0N8w468HDyM2Gpqe182xP+4SzWSLFSWCnIGRazm49dRYE9h5KZ2eEy0ya2HJ2y+rVZ1IjKw+sWHokGybTNOvsgsbu48tWrz5VtX/lqm31DiIQmbaz1fFnZzZ0H1++eu2eVau2Lww1EQDLzD5bEu4be7a3ofvEqtWrVu1YHGElwwiOhbN5fhb6TmXzGxrm7V61esnJBBtpkIc5tc7GeRoJ8+kEnJ06c9+qVUtWrz8TyA7yD7uGt6MqPyODqE3y2X0rV+06vm71hjP+oGBnllCU5QDSrLrlu5ev2lmfe3rDmo1HQ0BeZWYDhz2zav7BJTvqooMyz2zafNZZCBGyTAouhYdrw2yN3TOOnY0yFUCKDkE9r4JgSylBdde0GHs5lPgV0LQ2kWRm4FG2MpdDi3hecQGQCLuIEDN6OkJJBgDLB7syypb32wAAAABJRU5ErkJggg=='
+}
+export default cursors;