@gedit/editor-2d 0.3.4 → 0.3.6

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

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import clsx from 'clsx';
+import {
+  getPointsToPaths,
+  PathChild,
+  PATH_FUNC_TYPE,
+} from '@gedit/canvas-draw';
+import { PathPointSelection } from '@gedit/playground';
+
+interface AnimSvgPathProps {
+  width: number;
+  height: number;
+  paths: PathChild[];
+  scale: number;
+  noBezier: boolean;
+  selection: PathPointSelection<number>[];
+  onPointMouseDown?: (
+    e: React.MouseEvent<SVGCircleElement>,
+    point: PathChild,
+    paths: PathChild[]
+  ) => void;
+  onBezierPointMouseDown?: (
+    e: React.MouseEvent<SVGCircleElement>,
+    point: PathChild,
+    key: string,
+    paths: PathChild[]
+  ) => void;
+  onCancelSelection?: (e: React.MouseEvent<SVGSVGElement>) => void;
+}
+
+export const AnimSvgPath = (props: AnimSvgPathProps) => {
+  const {
+    width,
+    height,
+    paths,
+    scale,
+    selection,
+    noBezier,
+    onPointMouseDown,
+    onBezierPointMouseDown,
+    onCancelSelection,
+  } = props;
+  const onClickStopPropagation = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const bezierSelect =
+    selection[0] && typeof selection[0].bezierKey !== 'undefined';
+  const pathsStringArray = getPointsToPaths(paths);
+
+  const allPoints = paths.map((item, i) => (
+    <circle
+      className={clsx('gedit-anim-path-edit-layer-point', {
+        'gedit-anim-path-edit-layer-point-active':
+          selection.some(c => c.pointId === item.id) && !bezierSelect,
+      })}
+      cx={item.x}
+      cy={item.y}
+      r={4 / scale}
+      key={item.id}
+      strokeWidth="1"
+      onMouseMove={onClickStopPropagation}
+      onClick={onClickStopPropagation}
+      onMouseDown={e => {
+        onClickStopPropagation(e);
+
+        onPointMouseDown?.(e, item, paths);
+      }}
+    />
+  ));
+  // 贝塞尔点
+  const bezierPointNodes: JSX.Element[] = [];
+  const bezierPathNodes: JSX.Element[] = [];
+
+  paths.forEach((p, i) => {
+    if (p.type === PATH_FUNC_TYPE.STRAIGHT) {
+      return;
+    }
+    const selectionNode = selection.find(c => c.pointId === p.id);
+    const { bezierKey, pointId: currentPointId } = selectionNode || {};
+    if ('x1' in p && 'y1' in p) {
+      bezierPathNodes.push(
+        <path
+          key={`${p.id}_${i}_x1-line`}
+          className="gedit-anim-path-edit-layer-point-bezier-line"
+          strokeWidth={0.5 / scale}
+          d={`M${p.x},${p.y} L${p.x1},${p.y1}`}
+        />
+      );
+      bezierPointNodes.push(
+        <circle
+          key={`${p.id}_${i}_x1_point`}
+          className={clsx('gedit-anim-path-edit-layer-point-bezier', {
+            'gedit-anim-path-edit-layer-point-active':
+              bezierKey === 'left' && currentPointId === p.id,
+          })}
+          cx={p.x1}
+          cy={p.y1}
+          r={3 / scale}
+          onMouseMove={onClickStopPropagation}
+          onClick={onClickStopPropagation}
+          onMouseDown={e => {
+            onClickStopPropagation(e);
+            onBezierPointMouseDown?.(e, p, 'left', paths);
+          }}
+        />
+      );
+    }
+    if ('x2' in p && 'y2' in p) {
+      bezierPathNodes.push(
+        <path
+          key={`${p.id}_${i}_x2-line`}
+          className="gedit-anim-path-edit-layer-point-bezier-line"
+          strokeWidth={1 / scale}
+          d={`M${p.x},${p.y} L${p.x2},${p.y2}`}
+        />
+      );
+      bezierPointNodes.push(
+        <circle
+          key={`${p.id}_${i}x2_point`}
+          className={clsx('gedit-anim-path-edit-layer-point-bezier', {
+            'gedit-anim-path-edit-layer-point-active':
+              bezierKey === 'right' && currentPointId === p.id,
+          })}
+          cx={p.x2}
+          cy={p.y2}
+          r={3 / scale}
+          onMouseMove={onClickStopPropagation}
+          onClick={onClickStopPropagation}
+          onMouseDown={e => {
+            onClickStopPropagation(e);
+            onBezierPointMouseDown?.(e, p, 'right', paths);
+          }}
+        />
+      );
+    }
+  });
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      className="gedit-anim-path-edit-layer-svg"
+      onMouseDown={e => {
+        if (selection.length) {
+          onClickStopPropagation(e);
+        }
+      }}
+      onClick={e => {
+        onCancelSelection?.(e);
+      }}
+    >
+      {pathsStringArray.map((p, i) => (
+        <path
+          className={clsx('gedit-anim-path-edit-layer-path')}
+          key={i.toString()}
+          strokeLinecap="round"
+          strokeWidth={1 / scale}
+          d={p}
+        />
+      ))}
+      {!noBezier && bezierPathNodes}
+      {allPoints}
+      {!noBezier && bezierPointNodes}
+    </svg>
+  );
+};

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

@@ -5,7 +5,7 @@ import { PathEditLayerEventContext } from '../path-edit-layer';
 import clsx from 'clsx';
 
 export interface PointSchema extends PositionSchema {
-  id?: string;
+  id?: string | number;
 }
 
 export interface PointDefaultProps {

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

@@ -11,20 +11,16 @@ import {
 import { PathEditLayerEventContext } from '../path-edit-layer';
 import clsx from 'clsx';
 import { generateUuid } from '@gedit/utils';
-import { PathSelectMode } from '@gedit/playground';
+import { PathSelectMode, PathPointSelection } from '@gedit/playground';
 import { Editor2dPathNode } from '../../model';
 
-export interface PointSelection {
-  pointId?: string;
-  bezierKey?: string;
-}
 export interface PathSVGProps {
   width: number;
   height: number;
   paths: PathChild[];
   node?: Editor2dPathNode;
   scale: number;
-  selection?: PointSelection[];
+  selection?: PathPointSelection[];
   selectMode?: PathSelectMode;
   getPosFromMouseEvent: PointDefaultProps['getPosFromMouseEvent'];
   getPointIsStartOrEnd: () => boolean;
@@ -267,7 +263,7 @@ export const SvgPath = ({
           paths={paths}
           scale={scale}
           closePath={closePath}
-          currentPointId={selection[0]?.pointId}
+          currentPointId={selection[0]?.pointId as string}
         />
       )}
       {pathsStringArray.map((p, i) => (

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

@@ -22,7 +22,7 @@ import {
 } from '@gedit/utils';
 import { PointSchema } from './path-edit-layer-move-point';
 import { Editor2dPathNode } from '../../model';
-import { cloneDeep } from 'lodash';
+const cloneDeep = require('lodash.clonedeep');
 
 export const transformRotation = (p1: Point, p2: Point, rotation: number) => {
   if (!rotation) {

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

@@ -29,7 +29,6 @@ import {
   SvgPath,
   getNewPoint,
   setBezierMovePoint,
-  PointSelection,
   updatePathNodeData,
   inverseTransformToData,
   transformToData,
@@ -392,7 +391,9 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           this.editorState.is(EditorState.EDIT_PATH_STATE.id) &&
           this.pathPointSelection.selectMode === PathSelectMode.SELECT_BEZIER;
         if (isExit) {
-          const playgroundLayer = this.pipelineLayers.find(c => c.id === 'playgroundLayer') as PlaygroundLayer;
+          const playgroundLayer = this.pipelineLayers.find(
+            c => c.id === 'playgroundLayer'
+          ) as PlaygroundLayer;
           playgroundLayer?.keydownEvent?.({ key: 'Escape' } as KeyboardEvent);
         }
       }),
@@ -621,7 +622,6 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
         }
       }
     }
-    this.config.finalScale;
     const startNodeClone = deepClone(node.path.paths);
 
     this.startDrag(e.clientX, e.clientY, {
@@ -800,7 +800,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           getPosFromMouseEvent={this.getPosFromMouseEvent.bind(this)}
           node={this.currentPathNode}
           paths={paths}
-          selection={this.pathPointSelection?.selection as PointSelection[]}
+          selection={this.pathPointSelection?.selection as PathPointSelection[]}
           selectMode={this.pathPointSelection?.selectMode}
           getPointIsStartOrEnd={this.getPointIsStartOrEnd.bind(this)}
           scale={this.config.finalScale}

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

@@ -1,6 +1,5 @@
 import { inject, injectable } from 'inversify';
 import { RenderEngineIDEService } from '@gedit/render-engine-ide';
-import type { DisplayAssetMetaData } from '@gedit/render-engine-ide';
 import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
 import { AppConfigService } from '@gedit/app-config';
 import { debounce, Emitter, URI } from '@gedit/utils';
@@ -9,6 +8,7 @@ import type { SelectionEntityManager } from './selection-entity-manager';
 import { PathPointSelectionEntity, PathSelectMode, Playground } from '@gedit/playground';
 import { Editor2dDocument } from '../model/editor2d-document';
 import { Editor2dSelection } from '../model/editor2d-selection';
+import { Editor2dAnimPathSelectionService } from '../';
 import { Editor2dModelOptions, Editor2dNode } from '../model/editor2d';
 import { SelectionService } from '@gedit/application-common';
 import { Editor2dContextKeyService } from '../editor2d-context-key-service';
@@ -18,7 +18,6 @@ import { FormService } from '@gedit/ui';
 import { OpenerService } from '@gedit/application-common/lib/browser';
 import { WorkspaceService } from '@gedit/workspace-2d';
 import { HistoryService } from '@gedit/history';
-import { AssetsMetaCache } from '@gedit/assets-2d/lib/browser/assets-meta-cache';
 
 export const Editor2dPlayGround = Symbol('Editor2dPlayGround');
 
@@ -36,6 +35,7 @@ export class PlaygroundContext2d {
     @inject(RenderEngineIDEService) readonly renderEngine: RenderEngineIDEService,
     @inject(Editor2dDocument) readonly document: Editor2dDocument,
     @inject(Editor2dSelection) readonly selection: Editor2dSelection,
+    @inject(Editor2dAnimPathSelectionService) readonly animPathSelection: Editor2dAnimPathSelectionService,
     @inject(SelectionService) readonly selectionService: SelectionService,
     @inject(AppConfigService) readonly appConfig: AppConfigService,
     @inject(Editor2dModelOptions) readonly options: Editor2dModelOptions,
@@ -45,16 +45,12 @@ export class PlaygroundContext2d {
     @inject(WorkspaceService)
     protected readonly workspaceService: WorkspaceService,
     @inject(HistoryService) readonly historyService: HistoryService,
-    @inject(AssetsMetaCache) readonly assetsMetaCache: AssetsMetaCache
   ) {
     this.rootURI = new URI(this.workspaceService.currentRoot!.uri);
     this.document.toDispose.push(this.onCanvasDataChangedEmitter);
     if (options.onCanvasDataChanged) {
       this.onCanvasDataChanged(drawer => options.onCanvasDataChanged!(drawer));
     }
-    this.document.toDispose.push(this.assetsMetaCache.onAssetsChanged((e: DisplayAssetMetaData[]) => {
-      this.document.reloadAssets(e);
-    }));
   }
   /**
    * 刷新 tree selection

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

@@ -12,6 +12,7 @@ import {
 } from '@gedit/playground';
 import { CanvasLayer } from './canvas-layer';
 import { PathEditLayer } from './path-edit-layer';
+import { AnimPathEditLayer } from './anim-path-edit-layer';
 // import { SelectionLayer } from './selection-layer';
 import { AppConfigData, AppConfigService } from '@gedit/app-config';
 import { HistoryService } from '@gedit/history';
@@ -36,6 +37,7 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
     registry.registerLayer(CanvasLayer);
     registry.registerLayer(PathEditLayer);
     registry.registerLayer(ExtendEditLayer);
+    registry.registerLayer(AnimPathEditLayer);
     // registry.registerLayer(SelectionLayer);
   }
   onDispose(playground: Playground): void {

package/src/browser/playground/selection-entity-manager.tsx

@@ -9,6 +9,7 @@ import {
   PlaygroundConfigEntity,
   SelectorConfigEntity,
   SelectorEntityRendererProps,
+  TransformSchema,
 } from '@gedit/playground';
 import type { PlaygroundContext2d } from './playground-context';
 import { Rectangle } from '@gedit/math';
@@ -193,15 +194,14 @@ export class SelectionEntityManager {
           }
         }
       }
-      // 数据相同不更新
-      const currentTransform: any = {};
-      Object.keys(newTransform).forEach(key => {
-        currentTransform[key] = node[key];
+      let oldTransform: TransformSchema = {} as TransformSchema;
+      Object.keys(entity.transform.data).forEach((key: keyof typeof entity.transform.data) => {
+        oldTransform[key] = node[key]! as any;
       });
-      if (JSON.stringify(newTransform) === JSON.stringify(currentTransform)) {
-        return;
+      oldTransform = numberToFixed4(oldTransform);
+      if (JSON.stringify(oldTransform) !== JSON.stringify(newTransform)) {
+        document.updateNode(node, newTransform, true);
       }
-      document.updateNode(node, newTransform, true);
     });
 
     // ableManager是全局的，所以每个节点销毁后得注销时间

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

@@ -1,15 +1,15 @@
-.gedit-path-edit-layer {
+.gedit-path-edit-layer, .gedit-anim-path-edit-layer {
   position: absolute;
   left: 0;
   top: 0;
   overflow: visible;
-  z-index: 20;
+  z-index: 51;
   &-point {
     stroke: #ccc;
     fill: #fff;
     cursor: pointer;
     z-index: 50;
-    transition: stroke 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
+    transition: stroke 0.2s ease-in-out, fill 0.2s ease-in-out, stroke-width 0.2s ease-in-out;
     &-move {
       z-index: 0;
     }
@@ -29,8 +29,8 @@
     }
   }
   &-point-active {
-    stroke: #aaa;
-    stroke-width: 2px;
+    stroke: #fff;
+    fill: var(--g-playground-select)
   }
   &-pen {
     cursor: url(../svg/pen_add.svg), copy;
@@ -57,3 +57,11 @@
     }
   }
 }
+
+.gedit-anim-path-edit-layer {
+  &-path {
+    &:hover {
+      stroke: #fff000;
+    }
+  }
+}

package/src/browser/utils/bezier.path.utils.ts

@@ -0,0 +1,89 @@
+/**
+ * @fileoverview
+ * 贝塞尔曲线工具类
+ * 提供给 timeline 的 pathMotion 动画和 PIXI、DOM 的 path 操作使用
+ * 暂时先放这里；
+ */
+import {
+  asVec,
+  getLineWidth,
+  PathChild,
+} from '@gedit/canvas-draw';
+import { PathPointSelection } from '@gedit/playground';
+import type { PointSchema } from '../playground';
+
+export type PointKey = 'x' | 'y' | 'x1' | 'y1' | 'x2' | 'y2';
+
+export const getPathPoint = (
+  paths: PathChild[],
+  selection?: PathPointSelection
+): PathChild => {
+  // const editorState = context.model.playground.entityManager.getEntity<EditorStateConfigEntity>(EditorStateConfigEntity);
+  // const isPath = editorState?.is('ADD_PATH');\
+  let point = paths[paths.length - 1];
+  if (selection && selection.pointId) {
+    point = paths.find((c: any) => c.id === selection.pointId) || point;
+  }
+  return point;
+};
+
+const getBezierKey = (selection?: PathPointSelection, reverse?: boolean) => {
+  const k = selection && selection.bezierKey === 'right' ? '2' : '1';
+  if (reverse) {
+    return k === '1' ? '2' : '1';
+  }
+  return k;
+};
+
+const getPointKey = (type: 'x' | 'y', selection?: PathPointSelection) =>
+  (selection && selection.bezierKey
+    ? `${type}${getBezierKey(selection)}`
+    : type) as PointKey; // keyof PathChild;
+
+export const getPointPositionKey = (
+  type: 'x' | 'y',
+  point: PathChild,
+  selection?: PathPointSelection
+) => {
+  const key = getPointKey(type, selection);
+  const v = point[key];
+  return v;
+};
+
+// 求线外一点到平行线上的一点的一半距离
+export const getParallelPositionByPoint = (
+  p1: PointSchema,
+  p2: PointSchema,
+  p3: PointSchema
+) => {
+  if (p1 === p2) {
+    p2 = { x: p1.x + 1, y: p1.y + 1 };
+  }
+  const v = asVec(p1, p2);
+  const left = getLineWidth(p1, p3) / 3;
+  const right = getLineWidth(p2, p3) / 3;
+  const r = Math.max(left, right);
+  const leftPoint = {
+    x: p3.x - r * Math.cos(v.ang),
+    y: p3.y - r * Math.sin(v.ang),
+  };
+  const rightPoint = {
+    x: p3.x + r * Math.cos(v.ang),
+    y: p3.y + r * Math.sin(v.ang),
+  };
+  /**
+   * 计算点的位置;
+   * 1. 左点 X 大于中心点，右点 X 小于中心点；默认
+   * 2. 右点 X 大于中心点，左点 X 小于中心点；反转
+   * 3. 左右点 X 都小于中心点，左点 Y 大于右点 Y，默认
+   * 4. 左右点 X 都小于中心点，左点 Y 小于右点 Y，反转
+   * 5. 左右点 X 都大于中心点，左点 Y 大于右点 Y，反转
+   * 6. 左右点 X 都大于中心点，左点 Y 小于右点 Y， 默认
+   */
+  /* const isReverse =
+    (p1.x > p3.x && p2.x < p3.x) ||
+    (p1.x < p3.x && p2.x < p3.x && p1.y < p2.y) ||
+    (p1.x > p3.x && p2.x > p3.x && p1.y > p2.y); */
+
+  return { p1: leftPoint, p2: rightPoint /* isReverse */ };
+};

package/src/browser/utils/bounds.ts

@@ -61,7 +61,6 @@ export const getPIXILocalBoundsByNode = (obj: GameObjectData): ChildBounds => {
       ) {
         if (c.children?.length) {
           const childSize = getPIXILocalBoundsByNode(c);
-          console.log(childSize, c);
           width = childSize.maxX - childSize.x;
           height = childSize.maxY - childSize.y;
         } else {

package/lib/browser/playground/extend-edit-layer-point-event.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"extend-edit-layer-point-event.d.ts","sourceRoot":"","sources":["../../../src/browser/playground/extend-edit-layer-point-event.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,OAAO,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClC,KAAK,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChC,IAAI,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjC;AAED,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACrC;gCAEsB,KAAK;AAA5B,wBAiDE"}

package/lib/browser/playground/extend-edit-layer-point-event.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"extend-edit-layer-point-event.js","sourceRoot":"","sources":["../../../src/browser/playground/extend-edit-layer-point-event.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAqB/B,kBAAe,CAAC,KAAY,EAAE,EAAE;IAC9B,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,EAA4B,CAAC;IAC5D,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,EAA4B,CAAC;IAC3D,MAAM,SAAS,GAAG,CAAC,CAAa,EAAE,EAAE;;QAClC,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC;QAC/B,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC;QAC9B,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACrD,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACjD,MAAA,KAAK,CAAC,SAAS,sDAAG,CAAC,CAAC,CAAC;IACvB,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,CAAC,CAAa,EAAE,EAAE;;QACpC,IAAI,UAAU,CAAC,OAAO,EAAE;YACtB,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;YACpB,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;YACpB,MAAA,KAAK,CAAC,QAAQ,sDAAG;gBACf,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;gBAC3B,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;gBAC3B,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE;gBACjB,IAAI,EAAE,SAAS,CAAC,OAAO;gBACvB,KAAK,EAAE,UAAU,CAAC,OAAO;aAC1B,CAAC,CAAC;YACH,SAAS,CAAC,OAAO,GAAG;gBAClB,CAAC,EAAE,CAAC,CAAC,OAAO;gBACZ,CAAC,EAAE,CAAC,CAAC,OAAO;aACb,CAAC;SACH;IACH,CAAC,CAAC;IACF,MAAM,WAAW,GAAG,CAAC,CAAmB,EAAE,EAAE;;QAC1C,UAAU,CAAC,OAAO,GAAG;YACnB,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;SACb,CAAC;QACF,SAAS,CAAC,OAAO,GAAG;YAClB,CAAC,EAAE,CAAC,CAAC,OAAO;YACZ,CAAC,EAAE,CAAC,CAAC,OAAO;SACb,CAAC;QACF,MAAA,KAAK,CAAC,WAAW,sDAAG,CAAC,CAAC,CAAC;QACvB,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAChD,CAAC,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK;QACjD,6BACE,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,KAAK,EAAE,KAAK,CAAC,UAAU,EACvB,WAAW,EAAE,WAAW,GACxB,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}