@gedit/editor-2d 0.1.104 → 0.1.105

package/lib/browser/playground/selector-extend-renderer.js

@@ -0,0 +1,150 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectorExtendRender = void 0;
+var React = require("react");
+var clsx_1 = require("clsx");
+var ui_1 = require("@gedit/ui");
+var selector_extend_icons_1 = require("./selector-extend-icons");
+var getClassName = function (str) { return "gedit-selector-extend-".concat(str); };
+var defaultExtends = [
+    {
+        type: selector_extend_icons_1.SelectorExtendType.LINK,
+        title: '配置链接',
+        category: 1,
+        order: 0,
+        visible: function (node, register) { return (register === null || register === void 0 ? void 0 : register.getDisableKeys().indexOf('link')) === -1; },
+        event: {
+            title: '跳转链接配置',
+            type: 'selectorExtendAttr',
+            children: [
+                {
+                    type: 'text',
+                    key: 'link',
+                    label: '链接',
+                    placeholder: '请输出 url 地址',
+                },
+            ],
+        },
+    },
+    {
+        type: selector_extend_icons_1.SelectorExtendType.TO_TOP,
+        title: '前置一层',
+        category: 2,
+        order: 0,
+    },
+    {
+        type: selector_extend_icons_1.SelectorExtendType.TO_BOTTOM,
+        title: '后置一层',
+        category: 2,
+        order: 1,
+    },
+    {
+        type: selector_extend_icons_1.SelectorExtendType.FLIP_X,
+        title: 'X 轴镜像',
+        category: 2,
+        order: 2,
+        visible: function (node, register) { return (register === null || register === void 0 ? void 0 : register.getDisableKeys().indexOf('flip.x')) === -1; },
+    },
+    {
+        type: selector_extend_icons_1.SelectorExtendType.FLIP_Y,
+        title: 'Y 轴镜像',
+        category: 2,
+        order: 3,
+        visible: function (node, register) { return (register === null || register === void 0 ? void 0 : register.getDisableKeys().indexOf('flip.y')) === -1; },
+    },
+    {
+        type: selector_extend_icons_1.SelectorExtendType.DELETE,
+        title: '删除图层',
+        parentClassName: getClassName('delete'),
+        category: 3,
+        order: 0,
+    },
+];
+var sortData = function (data) {
+    var states = {};
+    data.forEach(function (c) {
+        var _a = c.category, category = _a === void 0 ? 'empty' : _a;
+        states[category] = states[category] || [];
+        states[category].push(c);
+        states[category] = states[category].sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
+    });
+    return Object.keys(states)
+        .sort(function (a, b) { return parseFloat(a || '0') - parseFloat(b || '0'); })
+        .map(function (k) { return states[parseFloat(k)]; });
+};
+var SelectorIcon = function (props) {
+    var item = props.item, onChange = props.onChange, node = props.node;
+    var child = (React.createElement("div", { className: (0, clsx_1.default)(getClassName('icon'), item.className), onMouseDown: function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            if (item.event) {
+                return;
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(item.type);
+        } }, selector_extend_icons_1.selectIcon[item.type]));
+    if (item.event) {
+        return (React.createElement(ui_1.Popover, { content: ui_1.Form.renderBySchema(__assign(__assign({}, item.event), { context: {
+                    node: node,
+                }, onChange: function (key, value) {
+                    var _a;
+                    onChange === null || onChange === void 0 ? void 0 : onChange('updateData', (_a = {},
+                        _a[key] = value,
+                        _a));
+                }, values: node, size: 'middle' })), title: item.event.title || item.title, placement: "right" }, child));
+    }
+    if (item.title) {
+        return (React.createElement(ui_1.Tooltip, { title: item.title, placement: "right" }, child));
+    }
+    return child;
+};
+var SelectorExtendRender = function (props) {
+    var entity = props.entity, register = props.register, context = props.context;
+    var node = entity.node;
+    var _a = ((register === null || register === void 0 ? void 0 : register.decoration) || {}).selectorExtends, selectorExtends = _a === void 0 ? [] : _a;
+    var childData = sortData([]
+        .concat(defaultExtends, selectorExtends)
+        .filter(function (c) { return (c.visible ? c.visible(node, register) : true); }));
+    var onChange = function (type, value) {
+        var _a, _b;
+        var document = context.document;
+        switch (type) {
+            case selector_extend_icons_1.SelectorExtendType.TO_TOP:
+                document.moveUp(node);
+                break;
+            case selector_extend_icons_1.SelectorExtendType.TO_BOTTOM:
+                document.moveDown(node);
+                break;
+            case selector_extend_icons_1.SelectorExtendType.FLIP_X:
+                document.updateNode(node, { flip: __assign(__assign({}, node === null || node === void 0 ? void 0 : node.flip), { x: !((_a = node === null || node === void 0 ? void 0 : node.flip) === null || _a === void 0 ? void 0 : _a.x) }) }, true);
+                break;
+            case selector_extend_icons_1.SelectorExtendType.FLIP_Y:
+                document.updateNode(node, { flip: __assign(__assign({}, node === null || node === void 0 ? void 0 : node.flip), { y: !((_b = node === null || node === void 0 ? void 0 : node.flip) === null || _b === void 0 ? void 0 : _b.y) }) }, true);
+                break;
+            case selector_extend_icons_1.SelectorExtendType.DELETE:
+                document.delNodes(node);
+                break;
+            case 'updateData':
+                console.log(value);
+                document.updateNode(node, value, true);
+                break;
+            default:
+                console.warn("\u65E0\u6548\u7C7B\u578B: ".concat(type, "."));
+                break;
+        }
+    };
+    return (React.createElement("div", { className: getClassName('wrapper') },
+        React.createElement("div", null, childData.map(function (c, i) { return (React.createElement("div", { className: (0, clsx_1.default)(getClassName('icon-wrapper'), c.map(function (d) { return d.parentClassName; }).join(' ')), key: i.toString() }, c.map(function (item) { return (React.createElement(SelectorIcon, { item: item, onChange: onChange, node: node, key: item.type })); }))); }))));
+};
+exports.SelectorExtendRender = SelectorExtendRender;
+//# sourceMappingURL=selector-extend-renderer.js.map

package/lib/browser/playground/selector-extend-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-extend-renderer.js","sourceRoot":"","sources":["../../../src/browser/playground/selector-extend-renderer.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gedit/editor-2d",
-  "version": "0.1.104",
+  "version": "0.1.105",
   "license": "MIT",
   "main": "lib/browser/index",
   "typings": "lib/browser/index.d.ts",
@@ -9,12 +9,13 @@
     "src"
   ],
   "dependencies": {
-    "@gedit/app-config": "^0.1.99",
-    "@gedit/editor": "^0.1.76",
-    "@gedit/playground": "^0.1.84",
-    "@gedit/render-engine-ide": "^0.1.104",
-    "@gedit/workspace-2d": "^0.1.80",
-    "json-stringify-pretty-compact": "^2.0.0"
+    "@gedit/app-config": "^0.1.100",
+    "@gedit/editor": "^0.1.77",
+    "@gedit/playground": "^0.1.85",
+    "@gedit/render-engine-ide": "^0.1.105",
+    "@gedit/workspace-2d": "^0.1.81",
+    "json-stringify-pretty-compact": "^2.0.0",
+    "nanoid": "^3.3.2"
   },
   "geditExtensions": [
     {
@@ -34,5 +35,5 @@
   "nyc": {
     "extends": "../../configs/nyc.json"
   },
-  "gitHead": "22979d48c63462a6f271ffbab8068e2652bb973a"
+  "gitHead": "5f27beb01166079863d9fd1107bb8d4f4c41afe2"
 }

package/src/browser/model/editor2d-document.ts

@@ -96,9 +96,11 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
    */
   getComponentContent(compPath: string, parentNode: Editor2dNode): Editor2dNode[] | undefined {
     const comp = this.componentContents[compPath];
-    if (comp && comp.children) return comp.children.map(c => ({ ...c, parent: parentNode })) as Editor2dNode[];
+    if (comp && comp.children) return comp.children.map(c => ({...c, parent: parentNode})) as Editor2dNode[];
   }
-  createDisplayNode<E extends Editor2dNode = Editor2dNode>(displayType: GameObjectType, parent?: Editor2dNode, position?: PositionSchema, index?: number): E {
+
+  createDisplayNode<E extends Editor2dNode = Editor2dNode>(
+    displayType: GameObjectType, parent?: Editor2dNode, position?: PositionSchema, index?: number, data?: Partial<Editor2dNode>): E {
     let parentNode: Editor2dContainerNode;
     if (!parent || Editor2dNode.isRootNode(parent)) {
       parentNode = this.getNode(Editor2dNode.ROOT_NODE_ID) as Editor2dContainerNode;
@@ -126,7 +128,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
       parentNode.children || [],
       this.engineService.getGameObjectIDERegister(this.engineName, displayType).decoration.name,
       displayType);
-    const node = Editor2dNode.createNode({ ...attrs, name }, displayType);
+    const node = Editor2dNode.createNode({...attrs, ...data, name}, displayType, undefined, Object.keys(this.nodes));
     this.addChildren(node, parentNode, index === undefined ? 0 : index);
     return node as E;
   }
@@ -146,7 +148,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
       parent = parentNode.parent;
     }
     if (parent) {
-      const newNode = Editor2dNode.clone(nodeData as Editor2dNode);
+      const newNode = Editor2dNode.clone(nodeData as Editor2dNode, [], Object.keys(this.nodes));
       if (newNode.position) {
         newNode.position.x = newNode.position.x + 20;
         newNode.position.y = newNode.position.y + 20;

package/src/browser/model/editor2d.ts

@@ -1,6 +1,6 @@
 import { EditorDocumentNode } from '@gedit/editor';
 import { ExpandableTreeNode, SelectableTreeNode, TreeNode } from '@gedit/tree';
-import { deepClone, Disposable, generateUuid, omit, URI } from '@gedit/utils';
+import { deepClone, Disposable, omit, URI } from '@gedit/utils';
 import { ResourceAutoSaveOptions, ResourceAutoSaveService, ResourceChangeEvent } from '@gedit/resource/lib/browser';
 import type { Editor2dDocument } from './editor2d-document';
 import { GameObjectBaseType, GameObjectData, GameObjectType } from '@gedit/render-engine';
@@ -10,6 +10,7 @@ import { WorkspaceResourceService } from '@gedit/workspace-2d';
 import { PlaygroundConfig, SelectorEntityRendererProps } from '@gedit/playground';
 import type { CanvasDraw } from '../playground/canvas-draw';
 import type { PlaygroundContext2d } from '../playground/playground-context';
+import { nanoid } from 'nanoid';
 
 const stringify = require('json-stringify-pretty-compact');
 
@@ -87,8 +88,14 @@ export interface Editor2dContainerNode extends Editor2dNode, ExpandableTreeNode
 export namespace Editor2dNode {
   export const ROOT_NODE_ID = 'root';
   export const GLOBAL_ADD_EVENT = 'global_add_event'; // 全局添加标记事件
-  export function createNodeId(): string {
-    return generateUuid();
+  export function createNodeId(checks?: string[]): string {
+    // 用短id生成减少大小
+    const newId = nanoid(10);
+    // id 冲突，重新生成
+    if (checks && checks.includes(newId)) {
+      return createNodeId(checks);
+    }
+    return newId;
   }
   export function toContainerNode(node: Editor2dNode | Editor2dContainerNode): Editor2dContainerNode {
     if (!node.children) {
@@ -153,9 +160,9 @@ export namespace Editor2dNode {
     }
     return new URI(workspaceURI.path.join(path).toString());
   }
-  export function clone(targetNode: Editor2dNode, omitKeys: string[] = []): Editor2dNode {
+  export function clone(targetNode: Editor2dNode, omitKeys: string[] = [], checks?: string[]): Editor2dNode {
     return deepClone(omitNode(targetNode, ['id', 'selected', ...omitKeys], node => Object.assign(node, {
-      id: createNodeId(),
+      id: createNodeId(checks),
       selected: false
     })));
   }
@@ -163,7 +170,8 @@ export namespace Editor2dNode {
   /**
    * 生成普通节点
    */
-  export function createNode(members: Partial<Editor2dNode> = {}, displayType: GameObjectType, id: string = createNodeId()): Editor2dNode {
+  export function createNode(members: Partial<Editor2dNode> = {}, displayType: GameObjectType, id?: string, checks?: string[]): Editor2dNode {
+    id = id || createNodeId(checks);
     return {
       ...members,
       displayType,

package/src/browser/model/utils/anim.utils.ts

@@ -9,7 +9,7 @@ interface KeysValue {
   key: string;
   name: string;
 }
-
+// 添加进时间轴动画的条件；
 const supportKeys: SchemaType[] = ['integer', 'float', 'color'];
 function readAnimationKeys(
   deco: SchemaDecoration,
@@ -22,6 +22,7 @@ function readAnimationKeys(
     parentName && deco.label ? `${parentName}.${deco.label}` : deco.label;
   currentKey =
     parentKey && currentKey ? `${parentKey}.${currentKey}` : currentKey;
+  // 进时间轴条件，必须带 label, ref: { label: 'xxx', type: 'float' };
   if (deco.properties) {
     Object.keys(deco.properties).forEach((property: string) => {
       readAnimationKeys(

package/src/browser/playground/index.ts

@@ -3,3 +3,6 @@ export * from './playground-context';
 export * from './playground-contribution';
 export * from './canvas-layer';
 export * from './canvas-draw';
+
+export { SelectorExtendType } from './selector-extend-icons';
+export * from './selector-extend-renderer';

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

@@ -6,11 +6,12 @@ import {
   DefaultSelectorEntityRenderer,
   EntityManager,
   PlaygroundConfigEntity,
-  SelectorConfigEntity
+  SelectorConfigEntity,
 } from '@gedit/playground';
 import type { PlaygroundContext2d } from './playground-context';
 import { Rectangle } from '@gedit/math';
 import { GameObject } from '@gedit/render-engine';
+import { SelectorExtendRender } from './selector-extend-renderer';
 
 const numberToFixed4 = (data: {[key: string]: any}) => {
   const d: any = {};
@@ -44,12 +45,15 @@ export class SelectionEntityManager {
     selectionConfigEntity?.customSelectorEntityRenderer(props => {
       const newProps = {...props};
       const entity = newProps.entity as Editor2dEntity;
-      if (this.context.options.extendEntityRenderer) {
-        newProps.extendRenderer = () => this.context.options.extendEntityRenderer!({ ...props, context: this.context });
-      }
-      const deco = entity.node
-        ? this.context.renderEngine.getGameObjectDecoration(entity.gameObject.scene.config.engine, entity.node.displayType)
+
+      const register = entity.node
+        ? this.context.renderEngine.getGameObjectIDERegister(entity.gameObject.scene.config.engine, entity.node.displayType)
         : undefined;
+      const deco = register?.decoration;
+      newProps.extendRenderer = () => <SelectorExtendRender {...props} register={register} context={this.context} />;
+      /* if (this.context.options.extendEntityRenderer) {
+        newProps.extendRenderer = () => this.context.options.extendEntityRenderer!({ ...props, context: this.context });
+      } */
       // 自定义渲染器
       if (deco && deco.selectionRenderer) {
         const Comp = deco.selectionRenderer;

package/src/browser/playground/selector-extend-icons.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable max-len */
+import * as React from 'react';
+import Icon, {
+  ArrowUpOutlined,
+  ArrowDownOutlined,
+  DeleteOutlined,
+  LinkOutlined,
+} from '@ant-design/icons';
+import { GameObjectSelectorExtendType as SelectorExtendType } from '@gedit/render-engine-ide';
+
+export {
+  SelectorExtendType,
+};
+/* const commonIcon = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    fillRule="nonzero"
+    stroke="none"
+  >
+    <path
+      d="M704 64a64 64 0 0 1 64 64v128h128a64 64 0 0 1 64 64v576a64 64 0 0 1-64 64H320a64 64 0 0 1-64-64v-128H128a64 64 0 0 1-64-64V128a64 64 0 0 1 64-64h576z m0 64H128v576h288v64H320v128h576V320h-128v96h-64V128zM416 288v192A96 96 0 0 0 512 576h134.336L565.504 495.168l45.248-45.248 158.4 158.4-158.4 158.4-45.248-45.248L646.848 640H512a160 160 0 0 1-159.68-149.504L352 480v-192h64z"
+      p-id="4758"
+    />
+  </svg>
+); */
+
+const flipX = () => (
+  <svg width="1em" height="1em" viewBox="0 0 14 13">
+    <g
+      id="页面-1"
+      stroke="currentColor"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polygon
+        id="路径-2"
+        points="0 10.9051487 4.6880494 10.9051487 4.6880494 1.4679916e-14"
+      ></polygon>
+      <polygon
+        id="路径-2备份"
+        fill="currentColor"
+        transform="translate(9.344025, 5.452574) scale(-1, 1) translate(-9.344025, -5.452574) "
+        points="7 10.9051487 11.6880494 10.9051487 11.6880494 1.4679916e-14"
+      ></polygon>
+    </g>
+  </svg>
+);
+export const flipY = () => (
+  <svg width="1em" height="1em" viewBox="0 0 13 14">
+    <g
+      id="页面-1"
+      stroke="currentColor"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      transform="scale(-1, 1) rotate(90.000000)"
+    >
+      <polygon points="0 10.9051487 4.6880494 10.9051487 4.6880494 4.80706427e-14" />
+      <polygon
+        fill="currentColor"
+        transform="translate(9.344025, 5.452574) scale(-1, 1) translate(-9.344025, -5.452574) "
+        points="7 10.9051487 11.6880494 10.9051487 11.6880494 4.84992691e-14"
+      />
+    </g>
+  </svg>
+);
+export const selectIcon: { [key: string]: any } = {
+  [SelectorExtendType.TO_TOP]: <ArrowUpOutlined />,
+  [SelectorExtendType.TO_BOTTOM]: <ArrowDownOutlined />,
+  [SelectorExtendType.FLIP_X]: <Icon component={flipX} />,
+  [SelectorExtendType.FLIP_Y]: <Icon component={flipY} />,
+  [SelectorExtendType.DELETE]: <DeleteOutlined />,
+  [SelectorExtendType.LINK]: <LinkOutlined />,
+};

package/src/browser/playground/selector-extend-renderer.tsx

@@ -0,0 +1,212 @@
+import * as React from 'react';
+
+import clsx from 'clsx';
+import { Form, Popover, Tooltip } from '@gedit/ui';
+
+import { selectIcon, SelectorExtendType } from './selector-extend-icons';
+import { GameObjectIDERegister, GameObjectSelectorExtend as SelectorExtend } from '@gedit/render-engine-ide';
+import { PlaygroundContext, SelectorEntityRendererProps, } from '@gedit/playground';
+import type { Editor2dEntity } from './entities/editor2d-entity';
+import { Editor2dNode } from '../model';
+
+const getClassName = (str: string) => `gedit-selector-extend-${str}`;
+
+export interface SelectorExtendProps extends SelectorEntityRendererProps {
+  register?: GameObjectIDERegister;
+  context?: PlaygroundContext;
+}
+
+const defaultExtends: SelectorExtend[] = [
+  {
+    type: SelectorExtendType.LINK,
+    title: '配置链接',
+    category: 1,
+    order: 0,
+    visible: (node: Editor2dNode, register: GameObjectIDERegister) => register?.getDisableKeys().indexOf('link') === -1,
+    event: {
+      title: '跳转链接配置',
+      type: 'selectorExtendAttr',
+      children: [
+        {
+          type: 'text',
+          key: 'link',
+          label: '链接',
+          placeholder: '请输出 url 地址',
+        },
+      ],
+    },
+  },
+  {
+    type: SelectorExtendType.TO_TOP,
+    title: '前置一层',
+    category: 2,
+    order: 0,
+  },
+  {
+    type: SelectorExtendType.TO_BOTTOM,
+    title: '后置一层',
+    category: 2,
+    order: 1,
+  },
+  {
+    type: SelectorExtendType.FLIP_X,
+    title: 'X 轴镜像',
+    category: 2,
+    order: 2,
+    visible: (node: Editor2dNode, register: GameObjectIDERegister) => register?.getDisableKeys().indexOf('flip.x') === -1,
+  },
+  {
+    type: SelectorExtendType.FLIP_Y,
+    title: 'Y 轴镜像',
+    category: 2,
+    order: 3,
+    visible: (node: Editor2dNode, register: GameObjectIDERegister) => register?.getDisableKeys().indexOf('flip.y') === -1,
+  },
+  {
+    type: SelectorExtendType.DELETE,
+    title: '删除图层',
+    parentClassName: getClassName('delete'),
+    category: 3,
+    order: 0,
+  },
+];
+
+const sortData = (data: SelectorExtend[]) => {
+  const states: { [key: string | number]: SelectorExtend[] } = {};
+  data.forEach(c => {
+    const {category = 'empty'} = c;
+    states[category] = states[category] || [];
+    states[category].push(c);
+    states[category] = states[category].sort(
+      (a, b) => (a.order || 0) - (b.order || 0)
+    );
+  });
+  return Object.keys(states)
+    .sort((a, b) => parseFloat(a || '0') - parseFloat(b || '0'))
+    .map(k => states[parseFloat(k)]);
+};
+
+const SelectorIcon = (props: {
+  item: SelectorExtend;
+  onChange: (type: SelectorExtendType | 'updateData', value?: any) => void;
+  node: any;
+}) => {
+  const {item, onChange, node} = props;
+  const child = (
+    <div
+      className={clsx(getClassName('icon'), item.className)}
+      onMouseDown={(e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (item.event) {
+          return;
+        }
+        onChange?.(item.type);
+      }}
+    >
+      {selectIcon[item.type]}
+    </div>
+  );
+  if (item.event) {
+    return (
+      <Popover
+        content={Form.renderBySchema({
+          ...item.event,
+          context: {
+            node,
+          },
+          onChange: (key: string, value: any) => {
+            onChange?.('updateData', {
+              [key]: value,
+            });
+          },
+          values: node,
+          size: 'middle',
+        })}
+        title={item.event.title || item.title}
+        placement="right"
+      >
+        {child}
+      </Popover>
+    );
+  }
+  if (item.title) {
+    return (
+      <Tooltip title={item.title} placement="right">
+        {child}
+      </Tooltip>
+    );
+  }
+  return child;
+};
+
+export const SelectorExtendRender = (props: SelectorExtendProps) => {
+  const {entity, register, context} = props;
+  const {node} = entity as Editor2dEntity;
+  const {selectorExtends = []} = register?.decoration || {};
+
+  const childData = sortData(
+    ([] as SelectorExtend[])
+      .concat(defaultExtends, selectorExtends)
+      .filter(c => (c.visible ? c.visible(node, register) : true))
+  );
+  const onChange = (type: SelectorExtendType | 'updateData', value?: any) => {
+    const {document} = context;
+    switch (type) {
+      case SelectorExtendType.TO_TOP:
+        document.moveUp(node);
+        break;
+      case SelectorExtendType.TO_BOTTOM:
+        document.moveDown(node);
+        break;
+      case SelectorExtendType.FLIP_X:
+        document.updateNode(
+          node,
+          {flip: {...node?.flip, x: !node?.flip?.x}},
+          true
+        );
+        break;
+      case SelectorExtendType.FLIP_Y:
+        document.updateNode(
+          node,
+          {flip: {...node?.flip, y: !node?.flip?.y}},
+          true
+        );
+        break;
+      case SelectorExtendType.DELETE:
+        document.delNodes(node);
+        break;
+      case 'updateData':
+        console.log(value);
+        document.updateNode(node, value, true);
+        break;
+      default:
+        console.warn(`无效类型: ${type}.`);
+        break;
+    }
+  };
+  return (
+    <div className={getClassName('wrapper')}>
+      <div>
+        {childData.map((c, i) => (
+          <div
+            className={clsx(
+              getClassName('icon-wrapper'),
+              c.map(d => d.parentClassName).join(' ')
+            )}
+            key={i.toString()}
+          >
+            {c.map(item => (
+              <SelectorIcon
+                item={item}
+                onChange={onChange}
+                node={node}
+                key={item.type}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/browser/style/index.less

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