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

package/es/util/screen-shot-util/screen-shot/module/draw-mosaic.mjs

@@ -0,0 +1,54 @@
+"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);
+}
+
+export { drawMosaic };

package/es/util/screen-shot-util/screen-shot/module/draw-pencil.mjs

@@ -0,0 +1,15 @@
+"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();
+}
+
+export { drawPencil, initPencil };

package/es/util/screen-shot-util/screen-shot/module/draw-rectangle.mjs

@@ -0,0 +1,12 @@
+"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();
+}
+
+export { drawRectangle };

package/es/util/screen-shot-util/screen-shot/module/draw-text.mjs

@@ -0,0 +1,12 @@
+"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();
+}
+
+export { drawText };

package/es/util/screen-shot-util/screen-shot/module/index.mjs

@@ -0,0 +1,8 @@
+export { drawPencil, initPencil } from './draw-pencil.mjs';
+export { drawText } from './draw-text.mjs';
+export { DrawArrow } from './draw-arrow.mjs';
+export { drawCircle } from './draw-circle.mjs';
+export { drawMosaic } from './draw-mosaic.mjs';
+export { drawRectangle } from './draw-rectangle.mjs';
+
+"use strict";

package/es/util/screen-shot-util/screen-shot/type/index.mjs

@@ -0,0 +1,16 @@
+"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 || {});
+
+export { ToolbarItemType };

package/es/util/screen-shot-util/screen-shot/util/index.mjs

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

package/es/util/screen-shot-util/screen-shot-util.mjs

@@ -0,0 +1,67 @@
+import { createApp } from 'vue';
+import './screen-shot/index.mjs';
+import { ScreenShot } from './screen-shot/components/screen-shot/screen-shot.mjs';
+
+"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 = createApp(ScreenShot, {
+        element,
+        container,
+        itemClassName,
+        onComplete: (base64) => {
+          this.destroyComponent();
+          resolve(base64);
+        },
+        onCancel: () => {
+          this.destroyComponent();
+          resolve(void 0);
+        }
+      });
+      this.currentApp.mount(this.container);
+    });
+  }
+}
+
+export { ScreenShotUtil };

package/es/web-app/main.mjs

@@ -22,6 +22,7 @@ import { LoadingUtil } from '../util/loading-util/loading-util.mjs';
 import { NoticeUtil } from '../util/notice-util/notice-util.mjs';
 import { OverlayController } from '../util/overlay-controller/overlay-controller.mjs';
 import { InLineAIUtil } from '../util/inline-ai-util/inline-ai-util.mjs';
+import { ScreenShotUtil } from '../util/screen-shot-util/screen-shot-util.mjs';
 import { AIChatUtil } from '../util/ai-chat-util/ai-chat-util.mjs';
 import { FullscreenUtil } from '../util/fullscreen/fullscreen-util.mjs';
 
@@ -84,6 +85,7 @@ async function runApp(plugins, opts) {
   ibiz.notice = new NoticeUtil();
   ibiz.overlay = new OverlayController();
   ibiz.inLineAIUtil = new InLineAIUtil();
+  ibiz.screenShotUtil = new ScreenShotUtil();
   ibiz.aiChatUtil = new AIChatUtil();
   ibiz.util.text.format = (value, code) => {
     return app.config.globalProperties.$textFormat(value, code);

package/lib/common/button-list/button-list.css

@@ -1 +1 @@
-.ibiz-button-list{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular);--ibiz-button-list-gap:var(--ibiz-spacing-base-tight)}.ibiz-button-list__content{display:flex}.ibiz-button-list__content .ibiz-button-list__dropdown{width:auto}.ibiz-button-list__content .el-button+.el-dropdown{margin-left:var(--ibiz-button-list-gap)}.ibiz-button-list__button-content{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;width:100%}.ibiz-button-list__button-content--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);margin-right:var(--ibiz-button-list-icon-margin);font-size:var(--ibiz-button-list-icon-size)}.ibiz-button-list__item>span{width:100%;pointer-events:none}.ibiz-button-list__item--group>span{display:flex;justify-content:space-between}.ibiz-button-list__item--group-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);margin-left:var(--ibiz-button-list-icon-margin);font-size:var(--ibiz-button-list-icon-size)}.ibiz-button-list__dropdown{width:100%;height:100%}.ibiz-button-list__dropdown .ibiz-icon{margin-right:0}.ibiz-button-list__dropdown .ibiz-icon+.ibiz-button-list__button-content--caption{margin-left:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown .el-button-group{display:flex;width:100%;height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-button-list__dropdown .el-button-group .el-button:first-child{flex-grow:1}.ibiz-button-list__dropdown .el-button-group .el-button:last-child{flex-shrink:0}.ibiz-button-list__dropdown--style2 .el-button{--el-button-active-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;--el-button-hover-bg-color:transparent}.ibiz-button-list__dropdown--style2 .el-button-group .ibiz-button-list__item{padding-right:0}.ibiz-button-list__dropdown--style2 .el-button-group .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown--style2 .el-button-group:hover .el-button{color:var(--ibiz-color-primary)}.ibiz-button-list--itemx .ibiz-button-list__more-button{width:32px;padding-right:0;padding-left:0}.ibiz-button-list__dropdown-popper{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular);--ibiz-button-list-gap:var(--ibiz-spacing-base-tight)}.ibiz-button-list__dropdown-popper>.el-scrollbar{min-width:150px;overflow:visible}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item{background-color:transparent}.ibiz-button-list__dropdown-popper--style2.el-popper.el-dropdown__popper .el-scrollbar .el-dropdown__list .el-dropdown-menu__item:hover{background-color:var(--ibiz-color-bg-0)}.ibiz-button-list__dropdown-popper--style2 .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown-popper-content{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none)}.ibiz-button-list__popover{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none)!important;border-radius:0!important}.ibiz-button-list__dropdown-popper-content,.ibiz-button-list__popover{display:flex;flex-direction:column;background-color:var(--ibiz-color-primary)!important}.ibiz-button-list__dropdown-popper-content .el-button,.ibiz-button-list__popover .el-button{justify-content:flex-start;width:100%;height:var(--ibiz-height-control-large);padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);margin:var(--ibiz-spacing-none);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text)}.ibiz-button-list__dropdown-popper-content .el-button ion-icon,.ibiz-button-list__popover .el-button ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__dropdown-popper-content .el-button.is-text:not(.is-disabled):hover,.ibiz-button-list__popover .el-button.is-text:not(.is-disabled):hover{background-color:var(--el-button-hover-bg-color);border-color:var(--el-button-hover-border-color)}
+.ibiz-button-list{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular);--ibiz-button-list-gap:var(--ibiz-spacing-base-tight)}.ibiz-button-list__content{display:flex}.ibiz-button-list__content .ibiz-button-list__dropdown{width:auto}.ibiz-button-list__content .el-button+.el-dropdown{margin-left:var(--ibiz-button-list-gap)}.ibiz-button-list__button-content{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;width:100%}.ibiz-button-list__button-content--icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);margin-right:var(--ibiz-button-list-icon-margin);font-size:var(--ibiz-button-list-icon-size)}.ibiz-button-list__item>span{width:100%;pointer-events:none}.ibiz-button-list__item--group>span{display:flex;justify-content:space-between}.ibiz-button-list__item--group-icon{display:flex;align-items:center;justify-content:center;width:var(--ibiz-button-list-icon-size);height:var(--ibiz-button-list-icon-size);margin-left:var(--ibiz-button-list-icon-margin);font-size:var(--ibiz-button-list-icon-size)}.ibiz-button-list__dropdown{width:100%;height:100%}.ibiz-button-list__dropdown .ibiz-icon{margin-right:0}.ibiz-button-list__dropdown .ibiz-icon+.ibiz-button-list__button-content--caption{margin-left:var(--ibiz-button-list-icon-margin)}.ibiz-button-list__dropdown .el-button-group{display:flex;width:100%;height:100%;border-radius:var(--ibiz-border-radius-small)}.ibiz-button-list__dropdown .el-button-group .el-button:first-child{flex-grow:1}.ibiz-button-list__dropdown .el-button-group .el-button:last-child{flex-shrink:0}.ibiz-button-list__dropdown--style2 .el-button{--el-button-active-bg-color:transparent;--el-button-bg-color:transparent;--el-mask-color-extra-light:transparent;--el-button-hover-bg-color:transparent}.ibiz-button-list__dropdown--style2 .el-button-group .ibiz-button-list__item{padding-right:0}.ibiz-button-list__dropdown--style2 .el-button-group .el-button{color:var(--ibiz-color-text-2)}.ibiz-button-list__dropdown--style2 .el-button-group:hover .el-button{color:var(--ibiz-color-primary)}.ibiz-button-list--itemx .ibiz-button-list__more-button{width:32px;padding-right:0;padding-left:0}.ibiz-button-list__dropdown-popper{--ibiz-button-list-icon-margin:var(--ibiz-spacing-extra-tight);--ibiz-button-list-icon-size:var(--ibiz-width-icon-medium);--ibiz-button-list-popover-bg:var(--ibiz-color-bg-3);--ibiz-button-list-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-button-list-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-button-list-popover-button-margin:var(--ibiz-spacing-none);--ibiz-button-list-popover-button-size:var(--ibiz-height-control-large);--ibiz-button-list-popover-button-font-size:var(--ibiz-font-size-regular);--ibiz-button-list-gap:var(--ibiz-spacing-base-tight)}.ibiz-button-list__dropdown-popper>.el-scrollbar{min-width:150px;overflow:visible}.ibiz-button-list__dropdown-popper-content{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none)}.ibiz-button-list__popover{padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none)!important;border-radius:0!important}.ibiz-button-list__dropdown-popper-content,.ibiz-button-list__popover{display:flex;flex-direction:column;background-color:var(--ibiz-color-primary)!important}.ibiz-button-list__dropdown-popper-content .el-button,.ibiz-button-list__popover .el-button{justify-content:flex-start;width:100%;height:var(--ibiz-height-control-large);padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);margin:var(--ibiz-spacing-none);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-color-primary-text)}.ibiz-button-list__dropdown-popper-content .el-button ion-icon,.ibiz-button-list__popover .el-button ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-button-list__dropdown-popper-content .el-button.is-text:not(.is-disabled):hover,.ibiz-button-list__popover .el-button.is-text:not(.is-disabled):hover{background-color:var(--el-button-hover-bg-color);border-color:var(--el-button-hover-border-color)}.ibiz-button-list__dropdown-popper--style2 .el-scrollbar .el-dropdown__list,.ibiz-button-list__dropdown-popper--style2 .ibiz-button-list__dropdown-popper-content{background-color:transparent!important}.ibiz-button-list__dropdown-popper--style2 .el-button{color:var(--ibiz-color-text-2);background-color:transparent;border-radius:0}.ibiz-button-list__dropdown-popper--style2 .el-button.is-text:not(.is-disabled):hover{background-color:var(--ibiz-color-bg-0);border-color:transparent}

package/lib/index.cjs

@@ -183,6 +183,7 @@ var keydownUtil = require('./util/keydown-util/keydown-util.cjs');
 var buttonUtil = require('./util/button-util/button-util.cjs');
 var inlineAiUtil = require('./util/inline-ai-util/inline-ai-util.cjs');
 var aiChatUtil = require('./util/ai-chat-util/ai-chat-util.cjs');
+var screenShotUtil = require('./util/screen-shot-util/screen-shot-util.cjs');
 var wangEditorUtil = require('./util/wang-editor-util/wang-editor-util.cjs');
 var icon = require('./util/icon/icon.cjs');
 var authGuard = require('./web-app/guard/auth-guard/auth-guard.cjs');
@@ -374,6 +375,7 @@ exports.useFocusByEnter = keydownUtil.useFocusByEnter;
 exports.convertBtnType = buttonUtil.convertBtnType;
 exports.InLineAIUtil = inlineAiUtil.InLineAIUtil;
 exports.AIChatUtil = aiChatUtil.AIChatUtil;
+exports.ScreenShotUtil = screenShotUtil.ScreenShotUtil;
 exports.parseHtml = wangEditorUtil.parseHtml;
 exports.ArrowLeftBold = icon.ArrowLeftBold;
 exports.ArrowRightBold = icon.ArrowRightBold;

package/lib/locale/en/index.cjs

@@ -879,6 +879,19 @@ var index = {
       violationPrivacy: "Violation of Privacy",
       contentInfringement: "Content infringement",
       placeholder: "Please enter"
+    },
+    screenShotUtil: {
+      prepareCanvas: "Prepare the canvas...",
+      small: "Small",
+      medium: "Medium",
+      big: "Big",
+      brush: "Brush",
+      rect: "Rect",
+      circle: "Circle",
+      mosaic: "Mosaic",
+      text: "Text",
+      arrow: "Arrow",
+      drawdown: "Drawdown"
     }
   },
   // runTime

package/lib/locale/zh-CN/index.cjs

@@ -875,6 +875,19 @@ var index = {
       violationPrivacy: "\u4FB5\u72AF\u9690\u79C1",
       contentInfringement: "\u5185\u5BB9\u4FB5\u6743",
       placeholder: "\u8BF7\u8F93\u5165"
+    },
+    screenShotUtil: {
+      prepareCanvas: "\u51C6\u5907\u753B\u5E03\u4E2D...",
+      small: "\u5C0F",
+      medium: "\u4E2D",
+      big: "\u5927",
+      brush: "\u753B\u7B14",
+      rect: "\u77E9\u5F62",
+      circle: "\u5706\u5F62",
+      mosaic: "\u9A6C\u8D5B\u514B",
+      text: "\u6587\u672C\u6CE8\u91CA",
+      arrow: "\u7BAD\u5934",
+      drawdown: "\u56DE\u64A4"
     }
   },
   // runTime