@gedit/editor-2d 0.3.5 → 0.3.6

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

@@ -0,0 +1,435 @@
+import * as React from 'react';
+import {
+  able,
+  EditorStateConfigEntity,
+  Entity,
+  entity,
+  Layer,
+  Selectable,
+  SelectState,
+  EditorState,
+} from '@gedit/playground';
+import { Disposable } from '@gedit/utils';
+import { domUtils } from '@gedit/utils/lib/browser';
+import { PlaygroundContext2d } from './playground-context';
+import { DocumentEntity, Editor2dEntity, ExtendEntity } from './entities';
+import { Editor2dDocument, Editor2dNode } from '../model';
+import { AnimSvgPath } from './path-edit/anim-path-edit-svg';
+import { setBezierMovePoint } from './path-edit';
+import type { PathPointSelection } from '@gedit/playground';
+import { getPointsToPath, PathChild, toFixedValue } from '@gedit/canvas-draw';
+import {
+  FrameChild,
+  TimelineData,
+  TimelineFrame,
+} from '@gedit/render-engine-ide';
+import TweenOne from 'tween-one';
+
+const fixPointPosition = ({
+  item,
+  frameData,
+  path,
+  key,
+}: {
+  key: 'x' | 'y';
+  item: PathChild & { id: number };
+  frameData: FrameChild[];
+  path: PathChild[];
+}) => {
+  const currentTime =
+    typeof item.id === 'string' ? parseFloat(item.id) : item.id;
+  const preFrame = frameData
+    .filter(d => d.time < currentTime && d.key === `position.${key}`)
+    .pop();
+  const pre = path.find(d => d.id === preFrame?.time);
+  const nextFrame = frameData
+    .filter(d => d.time > currentTime && d.key === `position.${key}`)
+    .shift();
+  const next = path.find(d => d.id === nextFrame?.time);
+  if (!preFrame || !nextFrame || !pre || !next) {
+    return {
+      [key]: item?.y ?? pre?.y ?? next?.y ?? 0,
+    };
+  }
+  const time = nextFrame.time - preFrame.time;
+  const moment = currentTime - preFrame.time;
+  const p = getPointsToPath([pre, next]);
+  const obj: { [key: string]: number } = {};
+  TweenOne(obj, {
+    animation: {
+      PathMotion: { path: p },
+      duration: time,
+    },
+    moment,
+    paused: true,
+  });
+  // item.y = obj.y;
+  return obj;
+};
+
+/**
+ * 扩展编辑
+ */
+export class AnimPathEditLayer extends Layer<PlaygroundContext2d> {
+  node = domUtils.createDivWithClass('gedit-anim-path-edit-layer');
+  id = 'animPathEditLayer';
+  @entity(EditorStateConfigEntity)
+  protected editorState: EditorStateConfigEntity;
+  @entity(DocumentEntity) documentEntity: DocumentEntity;
+  @entity(ExtendEntity) extendEntity: ExtendEntity;
+  @able(Selectable) protected selectableNodes: Entity[];
+
+  get document(): Editor2dDocument | undefined {
+    return this.documentEntity.config.document;
+  }
+  get selectedEntity(): Editor2dEntity | undefined {
+    const nodes = this.selectableNodes.filter(
+      node => node.getData<SelectState>(SelectState)?.selected
+    );
+    // 只考虑单选模式
+    return nodes.length === 1 ? (nodes[0] as Editor2dEntity) : undefined;
+  }
+
+  get isEnabled(): boolean {
+    return this.editorState.is(EditorState.STATE_SELECT.id);
+  }
+
+  addDispose(disposable: Disposable[]): void {
+    this.toDispose.pushAll(disposable);
+  }
+
+  onReady(): void {
+    this.addDispose([
+      this.editorState.onStateChange(() => {
+        const animId = this.document?.timelineService?.currentTimelineData?.id;
+        // 如果动画面板打开，状态变更，清空选中
+        if (!this.isEnabled && animId) {
+          this.context.animPathSelection?.clearSelection();
+        }
+      }),
+      // this.selectionService!.onSelectionChanged(e => {
+      // }),
+      this.context.animPathSelection.onSelectionChanged(() => {
+        this.draw();
+      }),
+    ]);
+  }
+
+  onZoom(scale: number): void {
+    domUtils.setStyle(this.node, {
+      transform: `scale(${scale})`,
+    });
+  }
+  getCurrentFrameData(
+    id: string | number,
+    animData: TimelineData
+  ): { currentFrame?: FrameChild[]; frameNode?: TimelineFrame } {
+    const node = this.selectedEntity;
+
+    if (!node || !animData) {
+      return {};
+    }
+    const frameNode = animData.frames.find((c: any) => c.id === node?.node?.id);
+    const currentFrame = frameNode?.frame.value.filter(
+      (c: any) => c.time === id
+    );
+    return {
+      currentFrame,
+      frameNode,
+    };
+  }
+
+  onPointMouseDown(
+    e: React.MouseEvent<SVGCircleElement>,
+    currentPoint: PathChild
+    // paths: PathChild[]
+  ): void {
+    if (e.buttons !== 1) {
+      return;
+    }
+    // 如果在 selection 里拖动所有点, 没有则切换当前 selection 里的点
+    const { animPathSelection } = this.context;
+    const animData = this.document?.timelineService?.currentTimelineData;
+    if (!animPathSelection || !animData || !currentPoint.id) {
+      return;
+    }
+    const selectionNode = [
+      {
+        pointId: currentPoint.id as number,
+      },
+    ];
+
+    animPathSelection.selection = selectionNode;
+    const { currentFrame, frameNode } = this.getCurrentFrameData(
+      currentPoint.id,
+      animData
+    );
+
+    const timeObj = {
+      totalTime: animData.totalTime,
+      regionStartTime: animData.regionStartTime,
+      regionEndTime: animData.regionEndTime,
+    };
+
+    if (!currentFrame || !frameNode) {
+      return;
+    }
+
+    this.startDrag(e.clientX, e.clientY, {
+      // 拖动
+      onDrag: dragEvent => {
+        let { x, y } = dragEvent.endPos;
+        x /= this.config?.finalScale || 1;
+        y /= this.config?.finalScale || 1;
+        if (currentFrame.length === 1) {
+          const c = currentFrame[0];
+          const v = {
+            key: `position.${c.key === 'position.x' ? 'y' : 'x'}`,
+            time: currentPoint.id as number,
+            value: 0, // 这里只是占位，下面会改数据；
+          };
+          const index = frameNode.frame.value.findIndex(d => d === c);
+          frameNode.frame.value.splice(index, 0, v);
+          this.document?.timelineService?.saveTimelineData(
+            animData,
+            timeObj,
+            true
+          );
+          const node = this.document?.getNodeById(animData.id);
+          // 更新时间轴上的帧数据；
+          if (node) {
+            this.document?.timelineService?.changeTimelineData(node);
+          }
+          currentFrame.push(v);
+        }
+        currentFrame.forEach((c: any) => {
+          const keys = c.key.split('.');
+          const key = keys[1] as 'x' | 'y';
+          const value = toFixedValue(key === 'x' ? x : y, 4);
+          const diff = currentPoint[key] - value;
+          c.value = value;
+          if ('bezierSV' in c) {
+            c.bezierSV = (currentPoint[`${key}1`] || 0) - diff;
+          }
+          if ('bezierEV' in c) {
+            c.bezierEV = (currentPoint[`${key}2`] || 0) - diff;
+          }
+        });
+        // 更新当前帧数据
+        frameNode.frame.current =
+          this.document?.timelineService?.getNodeCurrentFrame(frameNode) ||
+          frameNode.frame.current;
+        this.document?.timelineService?.saveTimelineData(
+          animData,
+          timeObj,
+          true,
+          true
+        );
+        // this.document?.updateNode(animNode, { ...animNode }, true);
+      },
+      onDragEnd: () => {
+        this.document?.timelineService?.saveTimelineData(
+          animData,
+          timeObj,
+          true
+        );
+      },
+    });
+    this.draw();
+  }
+
+  onBezierPointMouseDown(
+    e: React.MouseEvent<SVGCircleElement>,
+    currentPoint: PathChild,
+    key: 'left' | 'right'
+  ): void {
+    if (e.buttons !== 1) {
+      return;
+    }
+    // 如果在 selection 里拖动所有点, 没有则切换当前 selection 里的点
+    const { animPathSelection } = this.context;
+    const animData = this.document?.timelineService?.currentTimelineData;
+    if (!animPathSelection || !animData || !currentPoint.id) {
+      return;
+    }
+    const selectionNode = [
+      {
+        pointId: currentPoint.id as number,
+        bezierKey: key,
+      },
+    ];
+
+    animPathSelection.selection = selectionNode;
+
+    const { currentFrame, frameNode } = this.getCurrentFrameData(
+      currentPoint.id,
+      animData
+    );
+
+    const timeObj = {
+      totalTime: animData.totalTime,
+      regionStartTime: animData.regionStartTime,
+      regionEndTime: animData.regionEndTime,
+    };
+
+    if (!currentFrame || !frameNode) {
+      return;
+    }
+    this.startDrag(e.clientX, e.clientY, {
+      onDrag: dragEvent => {
+        let { x, y } = dragEvent.endPos;
+        x /= this.config?.finalScale || 1;
+        y /= this.config?.finalScale || 1;
+        const p = setBezierMovePoint(currentPoint, key, {
+          x,
+          y,
+        });
+        currentFrame.forEach((c: any) => {
+          const keys = c.key.split('.');
+          const bezierKey = keys[1] as 'x' | 'y';
+          switch (bezierKey) {
+            case 'x':
+              c.bezierSV = p.x1;
+              c.bezierEV = p.x2;
+              break;
+            case 'y':
+              c.bezierSV = p.y1;
+              c.bezierEV = p.y2;
+              break;
+            default:
+              break;
+          }
+        });
+        // 更新当前帧数据
+        frameNode.frame.current =
+          this.document?.timelineService?.getNodeCurrentFrame(frameNode) ||
+          frameNode.frame.current;
+        this.document?.timelineService?.saveTimelineData(
+          {
+            id: animData.id,
+            frames: animData.frames,
+          },
+          timeObj,
+          true,
+          true
+        );
+        // this.document?.updateNode(animNode, { ...animNode }, true);
+      },
+      onDragEnd: () => {
+        animPathSelection.selection = [
+          {
+            pointId: currentPoint.id as number,
+          },
+        ];
+        this.document?.timelineService?.saveTimelineData(
+          {
+            id: animData.id,
+            frames: animData.frames,
+          },
+          timeObj
+        );
+      },
+    });
+    this.draw();
+  }
+
+  draw(): JSX.Element {
+    const node = this.selectedEntity;
+    const animId = this.document?.timelineService?.currentTimelineData?.id;
+    if (
+      !this.document ||
+      !node ||
+      !(animId && node.node?.useAnimationId === animId) ||
+      !this.isEnabled
+    ) {
+      return <></>;
+    }
+
+    // const { currentTime = 0 } = this.document.timelineService || {};
+    const animNode = this.document.getNodeById(animId) as Editor2dNode & {
+      animation: any;
+    };
+    const currentNode = node.node;
+    // 判断是否有 position 属性动画;
+    const frameNode = animNode.animation.frames.find(
+      (c: any) => c.id === currentNode.id
+    );
+    const { frame, attrSplit = [] } = frameNode;
+    const frameData = frame.value.filter((c: any) =>
+      c.key.match(/^position/)
+    ) as FrameChild[];
+
+    let path: PathChild[] = [];
+
+    frameData.forEach((c: any) => {
+      const inPath = path.find(d => d.id === c.time);
+      const item = inPath || ({ id: c.time } as PathChild);
+      const keys = c.key.split('.');
+      const key = keys[1] as 'x' | 'y';
+      item[key] = c.value;
+      if ('bezierSV' in c) {
+        item[`${key}1`] = c.bezierSV;
+      }
+      if ('bezierEV' in c) {
+        item[`${key}2`] = c.bezierEV;
+      }
+      if ('pathFuncType' in c) {
+        item.type = c.pathFuncType;
+      }
+      if (!inPath) {
+        path.push(item);
+      }
+    });
+    // 保证有值，如果当前帧没有值，取前后两帧的中间值
+    path = path.map((c: PathChild, index) => {
+      if ('x' in c && 'y' in c) {
+        return c;
+      }
+      const item = c as PathChild;
+      if (!item.id) {
+        return {
+          ...item,
+          x: item.x || 0,
+          y: item.y || 0,
+        };
+      }
+
+      // 计算百分比
+      if (!('y' in c) && item.id) {
+        const { y } = fixPointPosition({
+          item: item as PathChild & { id: number },
+          frameData,
+          path,
+          key: 'y',
+        });
+        item.y = y;
+        return item;
+      }
+      const { x } = fixPointPosition({
+        item: item as PathChild & { id: number },
+        frameData,
+        path,
+        key: 'x',
+      });
+      item.x = x;
+      return item;
+    });
+
+    return (
+      <AnimSvgPath
+        width={this.config.config.pageBounds?.width || 300}
+        height={this.config.config.pageBounds?.height || 300}
+        scale={this.config.finalScale}
+        paths={path}
+        noBezier={attrSplit.includes('position')}
+        selection={this.context.animPathSelection?.selection as PathPointSelection<number>[]}
+        onPointMouseDown={this.onPointMouseDown.bind(this)}
+        onBezierPointMouseDown={this.onBezierPointMouseDown.bind(this)}
+        onCancelSelection={() => {
+          this.context.animPathSelection?.clearSelection();
+          this.draw();
+        }}
+      />
+    );
+  }
+}

package/src/browser/playground/canvas-draw.ts

@@ -5,6 +5,7 @@ import {
   GameObjectBaseType,
   GameObjectData,
   GameObjectError,
+  TimelineFrame,
 } from '@gedit/render-engine';
 import { Editor2dNode, omitNode } from '../model/editor2d';
 import {
@@ -22,6 +23,7 @@ import {
   URI,
 } from '@gedit/utils';
 import { EntityManager, SnaplineConfigEntity } from '@gedit/playground';
+import { TimelineService } from '../model';
 
 const WAIT_TO_DISPOSE_TIME = 30000; // 延迟删除, 这样tab在频繁切换时候不会有延迟
 const SCENE_KEY = 'boot';
@@ -41,6 +43,7 @@ export interface CanvasDrawOpts {
     parentNode?: Editor2dNode,
     getParent?: boolean
   ) => Editor2dNode[] | undefined;
+  getTimelineService?: () => TimelineService | undefined;
   isSnapshot?: boolean;
   isTemplate?: boolean;
 }
@@ -134,6 +137,7 @@ export class CanvasDraw extends DisposableImpl {
   protected lastRenderKeys: string[] = [];
   protected renderWidgetDispose: Disposable | undefined;
   protected pixelArt: boolean;
+  protected multiplyAlpha: boolean = false;
   renderWidget?: GameWidgetIDE;
   private allCount = -1;
   private currentSymbols: GameConfig.Symbol[] = [];
@@ -175,12 +179,17 @@ export class CanvasDraw extends DisposableImpl {
       this.waitToDispose = undefined;
     }
     // pixlerArt 更新的话则重新创建
-    if (appConfig.pixelArt !== this.pixelArt && this.renderWidget) {
+    if (
+      (appConfig.pixelArt !== this.pixelArt ||
+        appConfig.multiplyAlpha !== this.multiplyAlpha) &&
+      this.renderWidget
+    ) {
       this.renderWidget.dispose();
     }
     const isScene = new URI(this.data?.uri).path.ext === '.scene';
     // 组件模式用透明
     const backgroundColor = isScene ? appConfig.backgroundColor : '';
+    this.multiplyAlpha = appConfig.multiplyAlpha;
     this.pixelArt = appConfig.pixelArt;
     if (visible && !this.renderWidget) {
       const element = window.document.createElement(
@@ -410,7 +419,9 @@ export class CanvasDraw extends DisposableImpl {
     const currentDepth = depth;
     const oldNode = this.nodeCache.get(nodePath);
     const nodeStr = JSON.stringify(omitNode(node, ['children']));
-    const oldNodeStr = oldNode ? JSON.stringify(omitNode(oldNode, ['children'])) : '';
+    const oldNodeStr = oldNode
+      ? JSON.stringify(omitNode(oldNode, ['children']))
+      : '';
     const nodeChanged = nodeStr !== oldNodeStr;
     let gameObject = gameObjectCache.get(nodePath);
     // 节点重置
@@ -528,12 +539,15 @@ export class CanvasDraw extends DisposableImpl {
         this.fireLoading();
       });
       scene.onGameObjectError(gameObject, error => {
+        // 创建失败，版本也需要记录，否则加载进步不对；
+        this.nodeVersionCache.set(nodePath, newVersion);
         this.onGameObjectChangeEmitter.fire({
           type: GameObjectEventType.ERROR,
           gameObject: gameObject!,
           node: this.nodeCache.get(nodePath)!,
           error,
         });
+        this.fireLoading();
       });
       this.onGameObjectChangeEmitter.fire({
         type: GameObjectEventType.CREATE,
@@ -575,6 +589,7 @@ export class CanvasDraw extends DisposableImpl {
       }).component.id;
       isComponentUpdate = oldCompId !== newCompId;
     }
+    let timeoutAnimId: NodeJS.Timeout | undefined;
     const update = () => {
       const oldVersion = this.nodeVersionCache.get(nodePath);
       const oldMask = this.maskCache.get(nodePath);
@@ -613,6 +628,26 @@ export class CanvasDraw extends DisposableImpl {
           isMask: node.isMask,
           ignoreMask: node.ignoreMask,
         });
+        // 如果元素在动画中，则更新动画
+        const timelineService = this.opts.getTimelineService?.();
+        if (
+          timelineService?.currentTimelineData &&
+          d.useAnimationId === timelineService.currentTimelineData.id
+        ) {
+          clearTimeout(timeoutAnimId);
+          timeoutAnimId = setTimeout(() => {
+            const animItem = timelineService.animationNode as GameObject<
+            GameObjectData & { animation: { frames: TimelineFrame[] } }
+            >;
+            animItem?.update({
+              ...animItem.data,
+              animation: {
+                ...animItem.data.animation,
+                frames: timelineService.currentTimelineData?.frames || [],
+              },
+            } as GameObjectData & { animation: { frames: TimelineFrame[] } });
+          });
+        }
       }
     };
     if ((!firstCreate && gameObject?.created) || isComponentUpdate) {

package/src/browser/playground/canvas-layer.ts

@@ -100,6 +100,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       getComponentContent: (compId, parentNode, getParent) =>
         this.document?.getComponentContent(compId, parentNode, getParent),
       isTemplate: this.context.options.isTemplate,
+      getTimelineService: () => this.document?.timelineService,
     });
     this.toDispose.pushAll([
       this.canvasDrawer,

package/src/browser/playground/extend-edit/gradient-conic-node.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import { asVec, defaultGradientRange } from '@gedit/canvas-draw';
+import PointEvent from './gradient-edit-layer-point-event';
+import { GradientNodeProps } from './gradient-node';
+
+export const GradientConicNode = (props: GradientNodeProps): JSX.Element => {
+  const { width, height, data, extendEntity, onChange } = props;
+  const { range, colors } = data;
+  const {
+    angle = defaultGradientRange.angle,
+    cx = defaultGradientRange.cx,
+    cy = defaultGradientRange.cy,
+  } = range || {};
+  const r2 = Math.max(width, height);
+  const r = r2 / 2;
+  return (
+    <>
+      <div
+        className="gedit-extend-radial-box gedit-extend-circle-box"
+        style={{
+          width: r2,
+          height: r2,
+          left: -r,
+          top: -r,
+          transform: `translate(${cx * width}px, ${
+            cy * height
+          }px) rotate(${angle}deg)`,
+        }}
+      >
+        <PointEvent
+          className="gedit-extend-angle-wrapper"
+          pointClassName="gedit-extend-angle"
+          style={{ transform: `translate(${r2}px, ${r}px)` }}
+          onChange={d => {
+            const sx = r + r * Math.cos((angle * Math.PI) / 180);
+            const sy = r + r * Math.sin((angle * Math.PI) / 180);
+            const nx = sx + d.x;
+            const ny = sy + d.y;
+            const newVec = asVec({ x: r, y: r }, { x: nx, y: ny });
+            const newAngle = ((newVec.ang / Math.PI) * 180 + 360) % 360;
+            const newRange = data.range || {};
+            newRange.angle = parseFloat(newAngle.toFixed(4));
+            data.range = newRange;
+            onChange(data);
+          }}
+        />
+        {colors.map((item, i) => {
+          const { offset, color, uuid } = item;
+          const x = r + r * Math.cos(offset * Math.PI * 2);
+          const y = r + r * Math.sin(offset * Math.PI * 2);
+          return (
+            <PointEvent
+              key={uuid}
+              className="gedit-extend-color-point"
+              pointClassName={clsx({
+                'gedit-extend-color-point-active': extendEntity.config
+                  .selectColorUUid
+                  ? item.uuid === extendEntity.config.selectColorUUid
+                  : !i,
+              })}
+              pointStyle={{ backgroundColor: color }}
+              style={{
+                transform: `translate(${x}px, ${y}px)`,
+              }}
+              onChange={d => {
+                const currentVec = asVec({ x: r, y: r }, { x, y });
+                const sx =
+                  r + r * Math.cos(currentVec.ang + (angle * Math.PI) / 180);
+                const sy =
+                  r + r * Math.sin(currentVec.ang + (angle * Math.PI) / 180);
+                const nx = sx + d.x;
+                const ny = sy + d.y;
+                const newVec = asVec({ x: r, y: r }, { x: nx, y: ny });
+                const newAngle =
+                  (newVec.ang - (angle * Math.PI) / 180 + Math.PI * 2) %
+                  (Math.PI * 2);
+                const newOffset = newAngle / (Math.PI * 2);
+                item.offset = newOffset;
+                data.colors = colors.sort((a, b) => a.offset - b.offset);
+                onChange(data);
+              }}
+              onMouseDown={() => {
+                extendEntity.updateConfig({ selectColorUUid: uuid });
+              }}
+            />
+          );
+        })}
+      </div>
+      <PointEvent
+        className="gedit-extend-origin-wrapper"
+        style={{
+          transform: `translate(${cx * width}px, ${cy * height}px)`,
+        }}
+        pointClassName="gedit-extend-origin"
+        onChange={d => {
+          const newRange = data.range || {};
+          newRange.cx = parseFloat((cx + d.x / width).toFixed(4));
+          newRange.cy = parseFloat((cy + d.y / height).toFixed(4));
+          data.range = newRange;
+          onChange(data);
+        }}
+      />
+    </>
+  );
+};