Merge pull request #363 from idrawjs/dev-v0.4

fix(idraw): fix the visible area of ​​the output image of getImageBlo…

package.json

@@ -1,6 +1,6 @@
 {
   "private": false,
-  "version": "0.4.0",
+  "version": "0.4.1",
   "workspaces": [
     "packages/*"
   ],

packages/idraw/src/methods/image.ts

@@ -1,6 +1,6 @@
 import type { Data, ViewSizeInfo } from '@idraw/types';
 import { Core } from '@idraw/core';
-import { calcElementListSize } from '@idraw/util';
+import { calcVisiableViewSize } from '@idraw/util';
 import { IDrawEvent } from '../event';
 import { exportImageFileBlobURL } from '../file';
 import type { ExportImageFileBaseOptions, ExportImageFileResult } from '../file';
@@ -12,7 +12,7 @@ export async function getImageBlobURL(
   const { data, viewSizeInfo, core } = depOptions;
   const { devicePixelRatio } = opts || { devicePixelRatio: 1 };
 
-  const outputSize = calcElementListSize(data.elements);
+  const outputSize = calcVisiableViewSize(data);
 
   return await exportImageFileBlobURL({
     width: outputSize.w,

packages/util/src/index.ts

@@ -100,7 +100,7 @@ export { compressImage } from './tool/image';
 export { formatNumber } from './tool/number';
 export { matrixToAngle, matrixToRadian } from './view/matrix';
 export { getDefaultElementDetailConfig, getDefaultElementRectDetail } from './view/config';
-export { calcViewBoxSize } from './view/view-box';
+export { calcViewBoxSize, calcVisiableViewSize } from './view/view-box';
 export {
   mergeElement,
   createElement,

packages/util/src/view/is.ts

@@ -119,8 +119,37 @@ function numberStr(value: any): boolean {
   return /^(-?\d+(?:\.\d+)?)$/.test(`${value}`);
 }
 
+function type(value: any) {
+  return ['rect', 'circle', 'text', 'image', 'svg', 'html', 'group'].includes(value);
+}
+
+function element(elem: any) {
+  if (!elem) {
+    return false;
+  }
+  return type(elem?.type) && x(elem?.x) && y(elem?.y) && w(elem?.w) && h(elem?.h);
+}
+
+function layout(value: any) {
+  if (!value) {
+    return false;
+  }
+  return x(value?.x) && y(value?.y) && w(value?.w) && h(value?.h);
+}
+
+function data(d: any) {
+  if (Array(d?.elements) && d?.elements.length >= 0) {
+    return true;
+  }
+  return false;
+}
+
 export const is = {
   positiveNum,
+  data,
+  element,
+  layout,
+  type,
   x,
   y,
   w,

packages/util/src/view/view-box.ts

@@ -1,5 +1,7 @@
-import type { Element, ViewScaleInfo, ViewSizeInfo, ViewBoxSize } from '@idraw/types';
+import type { Data, Element, ElementSize, ViewScaleInfo, ViewSizeInfo, ViewBoxSize } from '@idraw/types';
 import { getDefaultElementDetailConfig } from './config';
+import { calcElementListSize } from './element';
+
 const defaultElemConfig = getDefaultElementDetailConfig();
 
 export function calcViewBoxSize(
@@ -63,3 +65,21 @@ export function calcViewBoxSize(
     radiusList
   };
 }
+
+export function calcVisiableViewSize(data: Data): Omit<ElementSize, 'angle'> {
+  const outputSize = calcElementListSize(data.elements);
+  if (data.layout) {
+    if (data.layout?.detail?.overflow === 'hidden') {
+      outputSize.x = data.layout.x;
+      outputSize.y = data.layout.y;
+      outputSize.w = data.layout.w;
+      outputSize.h = data.layout.h;
+    } else {
+      outputSize.x = Math.min(outputSize.x, data.layout.x);
+      outputSize.y = Math.min(outputSize.y, data.layout.y);
+      outputSize.w = Math.max(outputSize.w, data.layout.w);
+      outputSize.h = Math.max(outputSize.h, data.layout.h);
+    }
+  }
+  return outputSize;
+}

packages/util/src/view/view-content.ts

@@ -21,9 +21,9 @@ export function calcViewCenterContent(data: Data, opts: { viewSizeInfo: ViewSize
   let contentH: number = data?.elements?.[0]?.h || 0;
   const { width, height } = opts.viewSizeInfo;
 
-  if (data.layout && data.layout?.detail?.overflow === 'hidden') {
-    contentX = 0;
-    contentY = 0;
+  if (is.layout(data.layout) && data.layout?.detail?.overflow === 'hidden') {
+    contentX = data.layout.x;
+    contentY = data.layout.y;
     contentW = data.layout.w || 0;
     contentH = data.layout.h || 0;
   } else {
@@ -59,9 +59,14 @@ export function calcViewCenterContent(data: Data, opts: { viewSizeInfo: ViewSize
     });
   }
 
-  if (data.layout) {
+  if (data?.layout && is.layout(data.layout)) {
     const { x, y, w, h } = data.layout;
-    if (is.x(x) && is.y(y) && is.w(w) && is.h(h)) {
+    if (data.layout?.detail?.overflow === 'hidden') {
+      contentX = Math.min(contentX, x);
+      contentY = Math.min(contentY, y);
+      contentW = Math.min(contentW, w);
+      contentH = Math.min(contentH, h);
+    } else {
       contentX = Math.min(contentX, x);
       contentY = Math.min(contentY, y);
       contentW = Math.max(contentW, w);