@ibiz-template/vue3-components 0.7.41-alpha.45 → 0.7.41-alpha.46

package/lib/util/screen-shot-util/screen-shot/module/draw-mosaic.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+"use strict";
+const getAxisColor = (imgData, x, y) => {
+  const w = imgData.width;
+  const d = imgData.data;
+  const color = [];
+  color[0] = d[4 * (y * w + x)];
+  color[1] = d[4 * (y * w + x) + 1];
+  color[2] = d[4 * (y * w + x) + 2];
+  color[3] = d[4 * (y * w + x) + 3];
+  return color;
+};
+const setAxisColor = (imgData, x, y, color) => {
+  const w = imgData.width;
+  const d = imgData.data;
+  d[4 * (y * w + x)] = color[0];
+  d[4 * (y * w + x) + 1] = color[1];
+  d[4 * (y * w + x) + 2] = color[2];
+  d[4 * (y * w + x) + 3] = color[3];
+};
+function drawMosaic(mouseX, mouseY, size, degreeOfBlur, context) {
+  const dpr = window.devicePixelRatio || 1;
+  const imgData = context.getImageData(
+    mouseX * dpr,
+    mouseY * dpr,
+    size * dpr,
+    size * dpr
+  );
+  const w = imgData.width;
+  const h = imgData.height;
+  const stepW = w / degreeOfBlur;
+  const stepH = h / degreeOfBlur;
+  for (let i = 0; i < stepH; i++) {
+    for (let j = 0; j < stepW; j++) {
+      const color = getAxisColor(
+        imgData,
+        j * degreeOfBlur + Math.floor(Math.random() * degreeOfBlur),
+        i * degreeOfBlur + Math.floor(Math.random() * degreeOfBlur)
+      );
+      for (let k = 0; k < degreeOfBlur; k++) {
+        for (let l = 0; l < degreeOfBlur; l++) {
+          setAxisColor(
+            imgData,
+            j * degreeOfBlur + l,
+            i * degreeOfBlur + k,
+            color
+          );
+        }
+      }
+    }
+  }
+  context.putImageData(imgData, mouseX * dpr, mouseY * dpr);
+}
+
+exports.drawMosaic = drawMosaic;

package/lib/util/screen-shot-util/screen-shot/module/draw-pencil.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+"use strict";
+function initPencil(context, mouseX, mouseY) {
+  context.beginPath();
+  context.moveTo(mouseX, mouseY);
+}
+function drawPencil(context, mouseX, mouseY, size, color) {
+  context.save();
+  context.lineWidth = size;
+  context.strokeStyle = color;
+  context.lineTo(mouseX, mouseY);
+  context.stroke();
+  context.restore();
+}
+
+exports.drawPencil = drawPencil;
+exports.initPencil = initPencil;

package/lib/util/screen-shot-util/screen-shot/module/draw-rectangle.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+"use strict";
+function drawRectangle(mouseX, mouseY, width, height, color, borderWidth, context) {
+  context.save();
+  context.strokeStyle = color;
+  context.lineWidth = borderWidth;
+  context.beginPath();
+  context.rect(mouseX, mouseY, width, height);
+  context.stroke();
+  context.restore();
+}
+
+exports.drawRectangle = drawRectangle;

package/lib/util/screen-shot-util/screen-shot/module/draw-text.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+"use strict";
+function drawText(text, mouseX, mouseY, color, fontSize, context) {
+  context.save();
+  context.lineWidth = 1;
+  context.fillStyle = color;
+  context.textBaseline = "middle";
+  context.font = "bold ".concat(fontSize, "px none");
+  context.fillText(text, mouseX, mouseY);
+  context.restore();
+}
+
+exports.drawText = drawText;

package/lib/util/screen-shot-util/screen-shot/module/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var drawPencil = require('./draw-pencil.cjs');
+var drawText = require('./draw-text.cjs');
+var drawArrow = require('./draw-arrow.cjs');
+var drawCircle = require('./draw-circle.cjs');
+var drawMosaic = require('./draw-mosaic.cjs');
+var drawRectangle = require('./draw-rectangle.cjs');
+
+"use strict";
+
+exports.drawPencil = drawPencil.drawPencil;
+exports.initPencil = drawPencil.initPencil;
+exports.drawText = drawText.drawText;
+exports.DrawArrow = drawArrow.DrawArrow;
+exports.drawCircle = drawCircle.drawCircle;
+exports.drawMosaic = drawMosaic.drawMosaic;
+exports.drawRectangle = drawRectangle.drawRectangle;

package/lib/util/screen-shot-util/screen-shot/type/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+"use strict";
+var ToolbarItemType = /* @__PURE__ */ ((ToolbarItemType2) => {
+  ToolbarItemType2["BRUSH"] = "brush";
+  ToolbarItemType2["RECT"] = "rect";
+  ToolbarItemType2["CIRCLE"] = "circle";
+  ToolbarItemType2["MARKER"] = "marker";
+  ToolbarItemType2["TEXT"] = "text";
+  ToolbarItemType2["ARROW"] = "arrow";
+  ToolbarItemType2["DIVIDER"] = "divider";
+  ToolbarItemType2["AI"] = "ai";
+  ToolbarItemType2["MOSAIC"] = "mosaic";
+  ToolbarItemType2["DRAWDOWN"] = "drawdown";
+  return ToolbarItemType2;
+})(ToolbarItemType || {});
+
+exports.ToolbarItemType = ToolbarItemType;

package/lib/util/screen-shot-util/screen-shot/util/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+"use strict";
+function getMousePosition(event) {
+  const mouseX = event.offsetX > 0 ? event.offsetX : 0;
+  const mouseY = event.offsetY > 0 ? event.offsetY : 0;
+  return { mouseX, mouseY };
+}
+
+exports.getMousePosition = getMousePosition;

package/lib/util/screen-shot-util/screen-shot-util.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+var vue = require('vue');
+require('./screen-shot/index.cjs');
+var screenShot = require('./screen-shot/components/screen-shot/screen-shot.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ScreenShotUtil {
+  /**
+   * Creates an instance of ScreenShotUtil.
+   * @memberof ScreenShotUtil
+   */
+  constructor() {
+    __publicField(this, "currentApp", null);
+    __publicField(this, "container", null);
+  }
+  /**
+   * @description 销毁组件实例
+   * @private
+   * @memberof ScreenShotUtil
+   */
+  destroyComponent() {
+    if (this.currentApp && this.container) {
+      this.currentApp.unmount();
+      this.currentApp = null;
+    }
+    if (this.container && document.body.contains(this.container)) {
+      document.body.removeChild(this.container);
+      this.container = null;
+    }
+  }
+  /**
+   * @description 开始截图
+   * @param {HTMLElement} element 需要截图的元素
+   * @param {{ container?: HTMLElement; itemClassName?: string }} opts 如果需针对dom内部滚动容器截图，则需配置：滚动容器，滚动容器项类名，用以排除非可视区元素
+   * @returns {*}  {(Promise<string | undefined>)} 图片(png格式) base64 字符串
+   * @memberof ScreenShotUtil
+   */
+  async onScreenShot(element, opts) {
+    this.destroyComponent();
+    const { container, itemClassName } = opts;
+    return new Promise((resolve) => {
+      this.container = document.createElement("div");
+      document.body.appendChild(this.container);
+      this.currentApp = vue.createApp(screenShot.ScreenShot, {
+        element,
+        container,
+        itemClassName,
+        onComplete: (base64) => {
+          this.destroyComponent();
+          resolve(base64);
+        },
+        onCancel: () => {
+          this.destroyComponent();
+          resolve(void 0);
+        }
+      });
+      this.currentApp.mount(this.container);
+    });
+  }
+}
+
+exports.ScreenShotUtil = ScreenShotUtil;

package/lib/web-app/main.cjs

@@ -24,6 +24,7 @@ var loadingUtil = require('../util/loading-util/loading-util.cjs');
 var noticeUtil = require('../util/notice-util/notice-util.cjs');
 var overlayController = require('../util/overlay-controller/overlay-controller.cjs');
 var inlineAiUtil = require('../util/inline-ai-util/inline-ai-util.cjs');
+var screenShotUtil = require('../util/screen-shot-util/screen-shot-util.cjs');
 var aiChatUtil = require('../util/ai-chat-util/ai-chat-util.cjs');
 var fullscreenUtil = require('../util/fullscreen/fullscreen-util.cjs');
 
@@ -86,6 +87,7 @@ async function runApp(plugins, opts) {
   ibiz.notice = new noticeUtil.NoticeUtil();
   ibiz.overlay = new overlayController.OverlayController();
   ibiz.inLineAIUtil = new inlineAiUtil.InLineAIUtil();
+  ibiz.screenShotUtil = new screenShotUtil.ScreenShotUtil();
   ibiz.aiChatUtil = new aiChatUtil.AIChatUtil();
   ibiz.util.text.format = (value, code) => {
     return app.config.globalProperties.$textFormat(value, code);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibiz-template/vue3-components",
-  "version": "0.7.41-alpha.45",
+  "version": "0.7.41-alpha.46",
   "description": "web端组件库(vue3)",
   "main": "lib/index.cjs",
   "module": "es/index.mjs",
@@ -30,16 +30,16 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@floating-ui/dom": "^1.5.3",
-    "@ibiz-template-plugin/ai-chat": "^0.0.37",
+    "@ibiz-template-plugin/ai-chat": "^0.0.38",
     "@ibiz-template-plugin/gantt": "0.1.8-alpha.316",
     "@ibiz-template-plugin/bi-report": "0.0.30",
     "@ibiz-template-plugin/data-view": "0.0.6",
     "@ibiz-template/core": "0.7.41-alpha.35",
     "@ibiz-template/devtool": "0.0.13",
-    "@ibiz-template/model-helper": "0.7.41-alpha.43",
-    "@ibiz-template/runtime": "0.7.41-alpha.43",
+    "@ibiz-template/model-helper": "0.7.41-alpha.44",
+    "@ibiz-template/runtime": "0.7.41-alpha.44",
     "@ibiz-template/theme": "0.7.39",
-    "@ibiz-template/vue3-util": "0.7.41-alpha.43",
+    "@ibiz-template/vue3-util": "0.7.41-alpha.44",
     "@ibiz-template/web-theme": "3.9.0",
     "@ibiz/model-core": "^0.1.84",
     "@imengyu/vue3-context-menu": "^1.3.5",
@@ -68,6 +68,7 @@
     "vuedraggable": "^4.1.0",
     "sortablejs": "^1.15.6",
     "snabbdom": "^3.3.1",
+    "modern-screenshot": "^4.6.7",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {