@gedit/editor-2d 0.1.115 → 0.2.4

package/src/browser/playground/path-edit-layer.tsx

@@ -0,0 +1,330 @@
+import * as React from 'react';
+import { EditorStateConfigEntity, entity, Layer } from '@gedit/playground';
+import { DocumentEntity } from './entities/document-entity';
+import { domUtils } from '@gedit/utils/lib/browser';
+import { GameObjectBaseType } from '@gedit/render-engine';
+import {
+  Editor2dDocument,
+  Editor2dPathNode,
+} from '../model';
+import { PlaygroundContext2d } from './playground-context';
+import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
+import { asVec, getLineWidth, PathChild } from '@gedit/canvas-draw';
+import { generateUuid } from '@gedit/utils';
+import { PointDefault, PointSchema } from './path-edit-layer-move-point';
+import { SvgPath } from './path-edit-layer-svg-path';
+
+const EDIT_PATH_STATE = 'ADD_PATH';
+
+/**
+ * 动态绘制层
+ */
+export class PathEditLayer extends Layer<PlaygroundContext2d> {
+  node = domUtils.createDivWithClass('gedit-path-edit-layer');
+  @entity(EditorStateConfigEntity)
+  protected editorState: EditorStateConfigEntity;
+  @entity(DocumentEntity) documentEntity: DocumentEntity;
+  protected hideMovePoint: boolean;
+
+  currentPathNode?: Editor2dPathNode;
+  currentPointId?: string;
+  startPos?: PathChild;
+  selectId?: string;
+
+  get isEnabled(): boolean {
+    return this.editorState.is(EDIT_PATH_STATE);
+  }
+
+  onZoom(scale: number): void {
+    domUtils.setStyle(this.node, {
+      transform: `scale(${scale})`,
+    });
+  }
+
+  onReady(): void {
+    this.toDispose.pushAll([
+      // 退出路径编辑
+      this.editorState.onCancel(EDIT_PATH_STATE, () => {
+        if (!this.currentPathNode) {
+          return;
+        }
+        // 如果只有一个点代表绘制不成功，则删除
+        /*  if (
+          !this.currentPathNode.path ||
+          (this.currentPathNode.path &&
+            this.currentPathNode.path.paths.length <= 1)
+        ) {
+          this.document?.delNode(this.currentPathNode);
+        } */
+        this.selectId = undefined;
+        this.currentPathNode = undefined;
+      }),
+      this.listenPlaygroundEvent(
+        'mousedown',
+        (e: MouseEvent) => {
+          // 当前编辑模式为路径编辑
+          if (this.editorState.is(EDIT_PATH_STATE)) {
+            this.startPos = this.getPosFromMouseEvent(e);
+            this.startPos.id = generateUuid();
+            this.currentPointId = this.startPos.id;
+            this.drawPath(this.startPos);
+          }
+        },
+        10
+      ),
+      this.listenPlaygroundEvent('mousemove', (e: MouseEvent) => {
+        if (this.startPos) {
+          const pos = this.getPosFromMouseEvent(e);
+          const x1 = this.startPos.x * 2 - pos.x;
+          const y1 = this.startPos.y * 2 - pos.y;
+          this.startPos.x2 = pos.x;
+          this.startPos.y2 = pos.y;
+          this.startPos.x1 = x1;
+          this.startPos.y1 = y1;
+          this.document?.updateNode(this.currentPathNode!, {}, true);
+        }
+      }),
+      this.listenPlaygroundEvent('mouseup', (e: MouseEvent) => {
+        this.startPos = undefined;
+      }),
+      // 图层发生变化时退出模式
+      this.selectionService?.onSelectionChanged(e => {
+        if (this.editorState.is(EDIT_PATH_STATE)) {
+          const selectNodes = this.document?.getSelectedNodes() || [];
+          if (
+            selectNodes.length &&
+            (selectNodes[0].displayType !== GameObjectBaseType.PATH ||
+              selectNodes.length !== 1)
+          ) {
+            this.editorState.toDefaultState();
+          }
+        }
+      })!,
+    ]);
+  }
+
+  /**
+   * 创建路径
+   * @param pos - 当前鼠标点击的位置
+   */
+  drawPath(pos: PointSchema): void {
+    if (!this.document) return;
+    // 判断当前 select 是否 path 路径
+    const selectedNodes = this.document?.getSelectedNodes() || [];
+    if (selectedNodes.length === 1 && selectedNodes[0].displayType === 'path') {
+      this.currentPathNode = selectedNodes[0] as Editor2dPathNode;
+    }
+    // 创建一个空的路径节点，用于存储数据
+    if (!this.currentPathNode) {
+      this.currentPathNode = this.document.createDisplayNode<Editor2dPathNode>(
+        GameObjectBaseType.PATH
+      );
+      this.currentPathNode.selected = true;
+      this.context.selection.addSelection({
+        node: this.currentPathNode as Readonly<SelectableTreeNode>,
+        type: TreeSelection.SelectionType.TOGGLE,
+      });
+    }
+    this.selectId = this.currentPathNode.id;
+    this.currentPathNode.path.paths.push(pos);
+    this.document.updateNode(this.currentPathNode, {}, true);
+    /* this.document.updateNode(
+      this.currentPathNode,
+      {
+        path: {
+          ...this.currentPathNode.path,
+          paths: (this.currentPathNode.path.paths || []).concat(pos),
+        },
+      },
+      true
+    ); */
+  }
+
+  get document(): Editor2dDocument | undefined {
+    return this.documentEntity.config.document;
+  }
+
+  protected onBezierPointMouseDown(e: React.MouseEvent, p: PathChild, key: string): void {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  protected onPointMouseDown(
+    e: React.MouseEvent,
+    node: Editor2dPathNode,
+    p: PathChild
+  ): void {
+    const document = this.document!;
+    this.startDrag(e.clientX, e.clientY, {
+      // 拖动
+      onDrag(dragEvent): void {
+        const pos = dragEvent.endPos;
+        const x = pos.x / (this.config?.finalScale || 1);
+        const y = pos.y / (this.config?.finalScale || 1);
+        if (typeof p.x1 === 'number') {
+          p.x1 = p.x1 - p.x + x;
+        }
+        if (typeof p.x2 === 'number') {
+          p.x2 = p.x2 - p.x + x;
+        }
+        if (typeof p.y1 === 'number') {
+          p.y1 = p.y1 - p.y + y;
+        }
+        if (typeof p.y2 === 'number') {
+          p.y2 = p.y2 - p.y + y;
+        }
+        p.x = x;
+        p.y = y;
+
+        document.updateNode(node, {}, true);
+      },
+    });
+    this.currentPointId = p.id;
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  protected onHideMovePoint(): void {
+    this.hideMovePoint = true;
+    this.draw();
+  }
+  protected onShowMovePoint(): void {
+    this.hideMovePoint = false;
+    this.draw();
+  }
+
+  protected getBezierPoint(node?: Editor2dPathNode): JSX.Element[] {
+    if (!node) {
+      return [];
+    }
+    const { paths } = node.path;
+    const children: JSX.Element[] = [];
+    const points: PathChild[] = [];
+    // 在最后点
+    if (!this.currentPointId) {
+      points.push(paths[paths.length - 1]);
+    } else {
+      const index = paths.findIndex(c => c.id === this.currentPointId);
+      points.push(...paths.filter((_, i) => i >= index - 1 && i <= index + 1));
+    }
+    points.forEach((p, i) => {
+      if ('x1' in p && 'y1' in p) {
+        children.push(
+          <div
+            key={`x1-line_${i}`}
+            className="gedit-path-edit-layer-point-bezier-line"
+            style={{
+              width: getLineWidth({ x: p.x1 || 0, y: p.y1 || 0 }, p),
+              transform: `translate(${p.x}px, ${p.y}px) rotate(${
+                (asVec({ x: p.x1 || 0, y: p.y1 || 0 }, p).ang / Math.PI) * 180
+              }deg)`,
+            }}
+          />,
+          <div
+            key={`x1_${i}`}
+            className="gedit-path-edit-layer-point-bezier"
+            style={{
+              transform: `translate(${p.x1}px, ${p.y1}px) scale(${
+                1 / this.config.finalScale
+              })`,
+            }}
+            onMouseDown={e => {
+              this.onBezierPointMouseDown(e, p, '1');
+            }}
+            onMouseEnter={this.onHideMovePoint.bind(this)}
+            onMouseLeave={this.onShowMovePoint.bind(this)}
+          />
+        );
+      }
+      if ('x2' in p && 'y2' in p) {
+        children.push(
+          <div
+            key={`x2-line_${i}`}
+            className="gedit-path-edit-layer-point-bezier-line"
+            style={{
+              width: getLineWidth({ x: p.x2 || 0, y: p.y2 || 0 }, p),
+              transform: `translate(${p.x}px, ${p.y}px) rotate(${
+                (asVec({ x: p.x2 || 0, y: p.y2 || 0 }, p).ang / Math.PI) * 180
+              }deg)`,
+            }}
+          />,
+          <div
+            key={`x2_${i}`}
+            className="gedit-path-edit-layer-point-bezier"
+            style={{
+              transform: `translate(${p.x2}px, ${p.y2}px) scale(${
+                1 / this.config.finalScale
+              })`,
+            }}
+            onMouseEnter={this.onHideMovePoint.bind(this)}
+            onMouseLeave={this.onShowMovePoint.bind(this)}
+          />
+        );
+      }
+    });
+    return children;
+  }
+
+  draw(): JSX.Element {
+    const selectNodes = this.document?.getSelectedNodes() || [];
+    if (
+      selectNodes.length > 1 ||
+      (selectNodes[0] && selectNodes[0].displayType !== 'path') ||
+      !this.document ||
+      !this.isEnabled
+    ) {
+      // this.editorState.toDefaultState();
+      return <></>;
+    }
+    const node: Editor2dPathNode | undefined = selectNodes[0] as
+      | Editor2dPathNode
+      | undefined;
+
+    const allPoints: JSX.Element[] = [];
+    // 只管当前点相邻的两个点的 bezier;
+    const bezierPoint: JSX.Element[] = this.getBezierPoint(node);
+
+    const { paths = [] } = node ? node.path : {};
+    paths.forEach((p, i) => {
+      allPoints.push(
+        <div
+          className="gedit-path-edit-layer-point"
+          key={`${node?.id}.${i}`}
+          style={{
+            transform: `translate(${p.x}px, ${p.y}px) scale(${
+              1 / this.config.finalScale
+            })`,
+          }}
+          onMouseDown={e => {
+            this.onPointMouseDown(e, node!, p);
+          }}
+          onMouseEnter={this.onHideMovePoint.bind(this)}
+          onMouseLeave={this.onShowMovePoint.bind(this)}
+        />
+      );
+    });
+    return (
+      <>
+        {!this.hideMovePoint && (
+          <PointDefault
+            getPosFromMouseEvent={this.getPosFromMouseEvent.bind(this)}
+            paths={paths}
+            scale={this.config.finalScale}
+          />
+        )}
+        <SvgPath
+          width={this.config.config.pageBounds?.width || 300}
+          height={this.config.config.pageBounds?.height || 300}
+          paths={paths}
+          scale={this.config.finalScale}
+          pathProps={{
+            onMouseEnter: this.onHideMovePoint.bind(this),
+            onMouseLeave: this.onShowMovePoint.bind(this),
+          }}
+        />
+        {allPoints}
+        {bezierPoint}
+      </>
+    );
+  }
+}

package/src/browser/playground/playground-contribution.ts

@@ -10,7 +10,7 @@ import {
   ToolbarConfigEntity
 } from '@gedit/playground';
 import { CanvasLayer } from './canvas-layer';
-import { CanvasDrawLayer } from './canvas-draw-layer';
+import { PathEditLayer } from './path-edit-layer';
 // import { SelectionLayer } from './selection-layer';
 import { AppConfigData, AppConfigService } from '@gedit/app-config';
 import { HistoryService } from '@gedit/history';
@@ -18,6 +18,8 @@ import { Editor2dModelOptions, Editor2dNode } from '../model/editor2d';
 import { ContextMenuRenderer } from '@gedit/layout';
 import { CommandService } from '@gedit/command';
 import { CommonCommands } from '@gedit/application-common/lib/browser';
+import { ExtendEditLayer, EXTEND_EDIT_STATE } from './extend-edit-layer';
+import { Editor2dSelection } from '../model/editor2d-selection';
 
 @injectable()
 export class PlaygroundContribution2d implements PlaygroundContribution {
@@ -27,9 +29,11 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
   @inject(PlaygroundConfig) readonly config: PlaygroundConfig;
   @inject(CommandService) readonly commandService: CommandService;
   @inject(ContextMenuRenderer) readonly menuRender: ContextMenuRenderer;
+  @inject(Editor2dSelection) readonly editor2dSelection: Editor2dSelection;
   registerPlayground(registry: PlaygroundRegistry): void {
     registry.registerLayer(CanvasLayer);
-    registry.registerLayer(CanvasDrawLayer);
+    registry.registerLayer(PathEditLayer);
+    registry.registerLayer(ExtendEditLayer);
     // registry.registerLayer(SelectionLayer);
   }
   onDispose(playground: Playground): void {
@@ -50,6 +54,7 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
         gridVisible: false,
       });
     }
+    const isComponent = this.modelOpts.autoSaveService.resource.uri.path.ext === '.comp';
     if (stateEntity) {
       stateEntity.registerState({
         id: 'FULL_SCREEN',
@@ -64,6 +69,14 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
           }, 10);
         }
       });
+      stateEntity.registerState({
+        id: EXTEND_EDIT_STATE,
+        icon: '',
+        title: '扩展编辑',
+        hidden: true, // 该模式为内部模式
+        disableSelector: true,
+        cancelMode: 'hold'
+      });
       stateEntity.registerState({
         id: 'ADD_ELEMENT',
         icon: 'gedit-toolbar-add',
@@ -83,6 +96,27 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
           });
         }
       });
+      /* stateEntity.registerState({
+        id: 'ADD_PATH',
+        icon: 'gedit-toolbar-pen',
+        title: '失量',
+        shortcut: 'P',
+        // cursor: 'url(https://gw.alipayobjects.com/zos/bmw-prod/8dc2fcc4-279b-408c-886c-60fdba4c1f1e.svg), copy',
+        // shortcutAutoEsc: true,
+        disableSelector: true,
+        priority: 0,
+        order: 1,
+        cancelMode: 'esc',
+        handle: (a, b) => {
+          const currentSelectedNodes = this.editor2dSelection.selectedNodes;
+          console.log(currentSelectedNodes);
+          if (currentSelectedNodes.length !== 1 || currentSelectedNodes[0].displayType !== 'path') {
+            // 路径选中时先取消所有 selection;
+            this.editor2dSelection.clearSelection();
+          }
+
+        }
+      }); */
     }
     // 模板编辑器模式
     if (this.modelOpts.isTemplate) {
@@ -96,7 +130,7 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
       });
     }
     playground.getConfigEntity<SnaplineConfigEntity>(SnaplineConfigEntity).updateConfig({
-      originlineVisible: false, // 隐藏原点
+      originlineVisible: isComponent, // 是否隐藏原点线条，如果是组件模式则显示
     });
     playground.toDispose.push(
       // TODO 放在这里处理会增加复杂度

package/src/browser/style/canvas-layer.css

@@ -6,6 +6,22 @@
     z-index: 10
 }
 
+.gedit-canvas-viewport {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.gedit-canvas-viewport canvas {
+  position: absolute;
+}
+.gedit-viewport-mask, .gedit-viewport-bg {
+  position: absolute;
+}
+.gedit-viewport-mask {
+  background-color: var(--g-editor-background);;
+  opacity: 0.4;
+}
 .gedit-canvas-layer canvas {
     position: absolute;
     display: none;

package/src/browser/style/extend-edit-layer.less

@@ -0,0 +1,127 @@
+.gedit-extend-edit-layer {
+  z-index: 20;
+  .gedit-extend-edit-item {
+    position: absolute;
+  }
+}
+
+.gedit-extend-range-point {
+  position: absolute;
+  left: -5px;
+  top: -5px;
+  width: 10px;
+  height: 10px;
+}
+.gedit-extend-range-point,
+.gedit-extend-color-point {
+  > div {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 10px;
+    position: relative;
+    border: 1px solid #fff;
+    background-color: #ccc;
+    box-shadow: 0 0 4px fade(#262626, 50);
+    transition: transform 0.3s;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}
+
+.gedit-extend-center-point > div {
+  top: -5px;
+}
+.gedit-extend-radius-point {
+  > div {
+    top: 5px;
+  }
+}
+.gedit-extend-color-point-active {
+  transform: scale(1.3);
+}
+
+.gedit-extend-color-point {
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: -4px;
+  top: -4px;
+  cursor: pointer;
+  > div {
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    top: 0;
+  }
+}
+
+.gedit-extend-range-line {
+  background-color: #fff;
+  background-clip: padding-box;
+  height: 5px;
+  position: absolute;
+  left: 0;
+  top: -2.5px;
+  border: 2px solid transparent;
+  border-left: none;
+  border-right: none;
+  transform-origin: 0 2.5px;
+  cursor: copy;
+}
+.gedit-extend-radial-box {
+  border: 1px solid #fff;
+  border-radius: 100%;
+  position: absolute;
+  box-shadow: 0 0 1px 0 fade(#262626, 50) inset;
+}
+.gedit-extend-radial-point {
+  width: 10px;
+  height: 10px;
+  left: -5px;
+  top: 50%;
+  margin-top: -5px;
+  position: absolute;
+  background-color: #ccc;
+  border-radius: 100%;
+  border: 1px solid #fff;
+  transition: transform 0.45s;
+  :hover {
+    transform: scale(1.2);
+  }
+}
+
+.gedit-extend-origin {
+  &-wrapper {
+    position: absolute;
+    margin-left: -7px;
+    margin-top: -7px;
+    width: 14px;
+    height: 14px;
+  }
+  background-color: #fff;
+  -webkit-mask: var(--g-playground-icon-origin);
+  mask: var(--g-playground-icon-origin);
+  width: 14px;
+  height: 14px;
+  cursor: move;
+}
+
+.gedit-extend-angle {
+  &-wrapper {
+    width: 14px;
+    height: 14px;
+    margin-left: -7px;
+    margin-top: -7px;
+  }
+  width: 14px;
+  height: 14px;
+  margin-left: 7px;
+  border: 1px solid #fff;
+  background-color: #ccc;
+  box-shadow: 0 0 4px #262626;
+  clip-path: path("M0 7 L14 0 L14 14z");
+  cursor: pointer;
+}

package/src/browser/style/index.less

@@ -1,7 +1,8 @@
 @import './engine2d.css';
 @import './canvas-layer.css';
-@import './canvas-draw-layer.less';
+@import './path-edit-layer.less';
 @import './selector-extend.less';
+@import './extend-edit-layer.less';
 
 :root {
     --g-mask-transparent: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAADKADAAQAAAABAAAADAAAAAATDPpdAAAAfUlEQVQoFbVQQQ7AIAgD7Sf8/8s8+gd1s0vIptMlHkZiUGyBVmOMRwux4B2AhBDEOWflK6uqgICRYLVn3Zh9C6t+5G3CcqXVkKYPnQYCvfdSSpFaa8ejaM05N223S0QQmFJ6NeIfaN1I4JtnNmFb9L8Ergm6MWrg7jP36NIJC0BbmAiDWGoAAAAASUVORK5CYII=');;

package/src/browser/style/path-edit-layer.less

@@ -0,0 +1,72 @@
+.gedit-path-edit-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: visible;
+  z-index: 20;
+  &-point {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    top: -4px;
+    left: -4px;
+    background-color: #fff; //var(--g-playground-select);
+    border: 1px solid #ccc;
+    cursor: pointer;
+    z-index: 50;
+    &-move {
+      z-index: 0;
+    }
+  }
+  &-point-bezier {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    top: -3px;
+    left: -3px;
+    background-color: #fff;//var(--g-playground-select);
+    border: 1px solid #ccc;
+    border-radius: 100%;
+    cursor: pointer;
+    z-index: 50;
+    &-line {
+      height: 1px;
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform-origin: 0% 50%;
+      background-color: #bbb;
+    }
+  }
+  &-pen {
+    // 移出画布
+    cursor: url(../svg/pen+.svg), copy;
+  }
+  &-line {
+    height: 1px;
+    background-color: #ccc;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0% 50%;
+    z-index: 0;
+  }
+  &-svg {
+    position: absolute;
+    overflow: visible;
+    left: 0;
+    top: 0;
+    cursor: url(../svg/pen+.svg), copy;
+    z-index: 1;
+  }
+  &-path {
+    stroke: #fff000;
+    fill: none;
+    // stroke-width: 1px;
+    pointer-events: auto;
+    &:hover {
+      stroke: var(--g-playground-select);
+    }
+  }
+}

package/src/browser/svg/pen+.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="20" height="20"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="3-Pen-+-形状结合-蒙版">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="蒙版"></g>
+            <g id="3-Pen" mask="url(#mask-2)">
+                <g transform="translate(-8.950265, -5.827689)">
+                    <g id="编组-3" stroke="none" fill="none" fill-rule="evenodd" transform="translate(15.908060, 15.908060) rotate(-33.000000) translate(-15.908060, -15.908060) translate(4.408060, 4.408060)">
+                        <path d="M15.2636045,3.54128301 C15.1463591,3.42389369 14.9824898,3.36270075 14.8080946,3.37118409 C14.6336994,3.37966742 14.4630852,3.45713108 14.3338359,3.58651099 L11.6470455,6.26392495 C11.5176657,6.39317434 11.440202,6.5637885 11.4317187,6.73818372 C11.4232353,6.91257893 11.4844283,7.07644824 11.6018176,7.1936937 L11.8768691,7.46874527 C10.5668432,8.45506005 9.02084742,9.03767617 7.45291352,9.13593476 C7.17991393,9.16129804 6.93457934,9.35190929 6.83636102,9.61496155 L3.41043657,18.7950899 C3.33416882,18.998745 3.35731687,19.2172739 3.47265178,19.3824321 C3.58798669,19.5475903 3.78145241,19.6392496 3.9926312,19.6287856 C4.06292863,19.6255581 4.13335027,19.6110664 4.20120966,19.5858632 L13.3818161,16.1500821 C13.6415844,16.0533232 13.8312241,15.8129004 13.8603634,15.5433857 C13.9604921,13.9787315 14.5428258,12.4364838 15.5270733,11.1292857 L15.8021248,11.4043373 C15.9193778,11.5205354 16.0825735,11.5809356 16.2560971,11.5723565 C16.4307018,11.5648704 16.6019069,11.488138 16.7318934,11.3591093 L19.4089874,8.67888942 C19.5435052,8.54879031 19.6244033,8.37447287 19.6330845,8.19600994 C19.6417657,8.01754702 19.5774832,7.8502918 19.4550144,7.73269363 L15.2636045,3.54128301 Z" id="路径" stroke="#FFFFFF" fill="#000000" fill-rule="nonzero" transform="translate(11.500000, 11.500000) rotate(-225.000000) translate(-11.500000, -11.500000) "></path>
+                        <path d="M14.0272692,11.6425806 L7.59746366,14.049758 L10.7844497,10.8596464 C11.2245552,10.9666111 11.7106572,10.7537469 11.9661762,10.3421679 C12.2216953,9.93058893 12.1818754,9.42460131 11.869373,9.11209895 C11.5568707,8.79959659 11.050883,8.75977669 10.6393041,9.01529573 C10.2277251,9.27081477 10.0148608,9.7569168 10.1218256,10.1970223 L6.93171401,13.3840083 L9.33889138,6.9542028 C11.0769116,6.75281121 12.7662565,6.04449073 14.1937478,4.91862422 L16.0690989,6.79397534 C14.9422125,8.21892537 14.2317635,9.90598413 14.0272692,11.6425806 L14.0272692,11.6425806 Z" id="路径" fill="#FFFFFF" fill-rule="nonzero" transform="translate(11.500406, 9.484191) rotate(-225.000000) translate(-11.500406, -9.484191) "></path>
+                    </g>
+                    <path d="M23.1879258,6.71185268 C24.3227683,6.31096118 24.4529395,6.56265282 24.6021394,6.71185268 C24.7831038,6.89281709 24.8950326,7.14281709 24.8950326,7.41915954 L24.8950326,7.41915954 L24.8942326,9.41815943 L26.8950326,9.41895946 C27.171175,9.41895946 27.421175,9.53088827 27.6021394,9.71185268 C27.7831038,9.89281709 27.8950326,10.1428171 27.8950326,10.4189595 C27.8950326,10.6951018 27.7831038,10.9451018 27.6021394,11.1260662 C27.421175,11.3070306 27.171175,11.4189595 26.8948327,11.4189594 L26.8948327,11.4189594 L24.8942326,11.4181595 L24.8950326,13.4189595 C24.8950326,13.6951018 24.7831038,13.9451018 24.6021394,14.1260662 C24.421175,14.3070306 24.171175,14.4189595 23.8950326,14.4189595 C23.6188902,14.4189595 23.3688902,14.3070306 23.1879258,14.1260662 C23.0069614,13.9451018 22.8950326,13.6951018 22.8950326,13.4191594 L22.8950326,13.4191594 L22.8942326,11.4181595 L20.8950326,11.4189595 C20.6188902,11.4189595 20.3688902,11.3070306 20.1879258,11.1260662 C20.0069614,10.9451018 19.8950326,10.6951018 19.8950326,10.4189595 C19.8950326,10.1428171 20.0069614,9.89281709 20.1879258,9.71185268 C20.3688902,9.53088827 20.6188902,9.41895946 20.8948325,9.4189595 L20.8948325,9.4189595 L22.8942326,9.41815942 L22.8950326,7.41895946 C22.8950326,7.14281709 23.0069614,6.89281709 23.1879258,6.71185268 Z" id="形状结合" stroke="#FFFFFF" fill="#000000" fill-rule="nonzero"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/browser/utils/snapshot.ts

@@ -80,6 +80,7 @@ export class SnapshotCreator extends DisposableImpl {
     }
     this.drawer = new CanvasDraw({
       host,
+      isSnapshot: true,
       ...opts,
     });
     this.toDispose.pushAll([