feats: 为 snow-shot 适配功能

packages/element/src/Shape.ts

@@ -98,6 +98,7 @@ export const generateRoughOptions = (
     case "iframe":
     case "embeddable":
     case "diamond":
+    case "blur":
     case "ellipse": {
       options.fillStyle = element.fillStyle;
       options.fill = isTransparent(element.backgroundColor)
@@ -326,6 +327,7 @@ export const _generateElementShape = (
   switch (element.type) {
     case "rectangle":
     case "iframe":
+    case "blur":
     case "embeddable": {
       let shape: ElementShapes[typeof element.type];
       // this is for rendering the stroke/bg of the embeddable, especially

packages/element/src/comparisons.ts

@@ -10,7 +10,10 @@ export const hasBackground = (type: ElementOrToolType) =>
   type === "freedraw";
 
 export const hasStrokeColor = (type: ElementOrToolType) =>
-  type !== "image" && type !== "frame" && type !== "magicframe";
+  type !== "image" &&
+  type !== "frame" &&
+  type !== "magicframe" &&
+  type !== "blur";
 
 export const hasStrokeWidth = (type: ElementOrToolType) =>
   type === "rectangle" ||
@@ -39,6 +42,10 @@ export const canChangeRoundness = (type: ElementOrToolType) =>
   type === "diamond" ||
   type === "image";
 
+export const canChangeBlur = (type: ElementOrToolType) => type === "blur";
+
+export const canChangeLayer = (type: ElementOrToolType) => type !== "blur";
+
 export const toolIsArrow = (type: ElementOrToolType) => type === "arrow";
 
 export const canHaveArrowheads = (type: ElementOrToolType) => type === "arrow";

packages/element/src/newElement.ts

@@ -46,6 +46,7 @@ import type {
   ExcalidrawArrowElement,
   FixedSegment,
   ExcalidrawElbowArrowElement,
+  ExcalidrawBlurElement,
 } from "./types";
 
 export type ElementConstructorOpts = MarkOptional<
@@ -212,6 +213,25 @@ export const newMagicFrameElement = (
   return frameElement;
 };
 
+export const newBlurElement = (
+  opts: {
+    blur: number;
+  } & ElementConstructorOpts,
+): NonDeleted<ExcalidrawBlurElement> => {
+  const blurElement = newElementWith(
+    {
+      ..._newElementBase<ExcalidrawBlurElement>("blur", opts),
+      type: "blur",
+      blur: opts.blur,
+      fillStyle: "solid",
+      backgroundColor: "#000000",
+    },
+    {},
+  );
+
+  return blurElement;
+};
+
 /** computes element x/y offset based on textAlign/verticalAlign */
 const getTextElementPositionOffsets = (
   opts: {

packages/element/src/renderElement.ts

@@ -404,6 +404,8 @@ const drawElementOnCanvas = (
       rc.draw(ShapeCache.get(element)!);
       break;
     }
+    case "blur":
+      break;
     case "arrow":
     case "line": {
       context.lineJoin = "round";
@@ -814,6 +816,7 @@ export const renderElement = (
     case "image":
     case "text":
     case "iframe":
+    case "blur":
     case "embeddable": {
       // TODO investigate if we can do this in situ. Right now we need to call
       // beforehand because math helpers (such as getElementAbsoluteCoords)

packages/element/src/shapes.ts

@@ -58,6 +58,7 @@ export const getElementShape = <Point extends GlobalPoint | LocalPoint>(
     case "embeddable":
     case "image":
     case "iframe":
+    case "blur":
     case "text":
     case "selection":
       return getPolygonShape(element);

packages/element/src/typeChecks.ts

@@ -28,6 +28,7 @@ import type {
   PointBinding,
   FixedPointBinding,
   ExcalidrawFlowchartNodeElement,
+  ExcalidrawBlurElement,
 } from "./types";
 
 export const isInitializedImageElement = (
@@ -107,6 +108,12 @@ export const isLinearElement = (
   return element != null && isLinearElementType(element.type);
 };
 
+export const isBlurElement = (
+  element?: ExcalidrawElement | null,
+): element is ExcalidrawBlurElement => {
+  return element != null && isBlurElementType(element.type);
+};
+
 export const isArrowElement = (
   element?: ExcalidrawElement | null,
 ): element is ExcalidrawArrowElement => {
@@ -127,6 +134,10 @@ export const isLinearElementType = (
   );
 };
 
+export const isBlurElementType = (elementType: ElementOrToolType): boolean => {
+  return elementType === "blur";
+};
+
 export const isBindingElement = (
   element?: ExcalidrawElement | null,
   includeLocked = true,
@@ -231,6 +242,7 @@ export const isExcalidrawElement = (
     case "frame":
     case "magicframe":
     case "image":
+    case "blur":
     case "selection": {
       return true;
     }

packages/element/src/types.ts

@@ -89,6 +89,11 @@ export type ExcalidrawRectangleElement = _ExcalidrawElementBase & {
   type: "rectangle";
 };
 
+export type ExcalidrawBlurElement = _ExcalidrawElementBase & {
+  type: "blur";
+  blur: number;
+};
+
 export type ExcalidrawDiamondElement = _ExcalidrawElementBase & {
   type: "diamond";
 };
@@ -212,7 +217,8 @@ export type ExcalidrawElement =
   | ExcalidrawFrameElement
   | ExcalidrawMagicFrameElement
   | ExcalidrawIframeElement
-  | ExcalidrawEmbeddableElement;
+  | ExcalidrawEmbeddableElement
+  | ExcalidrawBlurElement;
 
 export type ExcalidrawNonSelectionElement = Exclude<
   ExcalidrawElement,