@gedit/editor-2d 0.1.102 → 0.1.106

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=');;

package/src/browser/style/selector-extend.less

@@ -0,0 +1,47 @@
+@selectExtend: gedit-selector-extend;
+
+@extendLineColor: #0F0F11;
+
+.@{selectExtend} {
+  &-wrapper {
+    position: absolute;
+    top: 50%;
+    right: -40px;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 0;
+  }
+  &-icon {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border-bottom: var(--g-border-width) solid @extendLineColor;
+    cursor: pointer;
+    color: #979797;
+    font-size: 16px;
+    &:last-child {
+      border-bottom: none;
+    }
+    &-wrapper {
+      border-radius: 8px;
+      border: var(--g-border-width) solid @extendLineColor;
+      background-color: var(--g-panelTitle-activeBackground);
+      margin-bottom: 6px;
+      overflow: hidden;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &-delete {
+    background-color: #EF4E4D;
+    border-color: #C42F2F;
+    .@{selectExtend}-icon {
+      color: #FFC4C4;
+    }
+  }
+}