chore: fix conflicts

2026-01-13 01:21:58 +00:00 · 2021-01-25 10:42:46 +08:00 · 2021-01-25 10:42:46 +08:00 · 95a8356803
commit 95a8356803
parent 1b142cd8da 88e128e3d5
7 changed files with 163 additions and 42 deletions
--- a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx
@ -73,6 +73,14 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
  render() {
    const { host } = this.props;
    const { current } = this;
+    
+    const canHoverHook = current?.componentMeta.getMetadata()?.experimental?.callbacks?.onHoverHook;
+    const canHover = (canHoverHook && typeof canHoverHook === 'function') ? canHoverHook(current) : true;
+
+    if (!canHover) {
+      return null;
+    }
+
    if (!current || host.viewport.scrolling || host.liveEditing.editing) {
      return null;
    }
--- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
@ -82,7 +82,7 @@ export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost;
    const { node } = this.props;
    const { designer } = this.host;

-    if (!instances || instances.length < 1) {
+    if (!instances || instances.length < 1 || this.dragging) {
      return null;
    }
    return (
@ -114,9 +114,15 @@ export class BoxResizingInstance extends Component<{
  // private outline: any;
  private willUnbind: () => any;

-  private outlineRight: any;
-
-  private outlineLeft: any;
+  // outline of eight direction
+  private outlineN: any;
+  private outlineE: any;
+  private outlineS: any;
+  private outlineW: any;
+  private outlineNE: any;
+  private outlineNW: any;
+  private outlineSE: any;
+  private outlineSW: any;

  private dragEngine: DragResizeEngine;

@ -204,29 +210,33 @@ export class BoxResizingInstance extends Component<{
      this.willUnbind();
    }

-    if (!this.outlineRight && !this.outlineLeft) {
+    if (
+      !this.outlineN &&
+      !this.outlineE &&
+      !this.outlineS &&
+      !this.outlineW &&
+      !this.outlineNE &&
+      !this.outlineNW &&
+      !this.outlineSE &&
+      !this.outlineSW
+    ) {
      return;
    }

    const unBind: any[] = [];
+    const node = this.props.observed.node;

    unBind.push(
-      this.dragEngine.from(this.outlineRight, 'e', () => {
-        // if (!this.hoveringLine.hasOutline()) {
-        //   return null;
-        // }
-        // return this.hoveringLine.getCurrentNode();
-        return this.props.observed.node;
-      }),
-    );
-    unBind.push(
-      this.dragEngine.from(this.outlineLeft, 'w', () => {
-        return this.props.observed.node;
-        // if (!this.hoveringLine.hasOutline()) {
-        //   return null;
-        // }
-        // return this.hoveringLine.getCurrentNode();
-      }),
+      ...[
+        this.dragEngine.from(this.outlineN, 'n', () => node),
+        this.dragEngine.from(this.outlineE, 'e', () => node),
+        this.dragEngine.from(this.outlineS, 's', () => node),
+        this.dragEngine.from(this.outlineW, 'w', () => node),
+        this.dragEngine.from(this.outlineNE, 'ne', () => node),
+        this.dragEngine.from(this.outlineNW, 'nw', () => node),
+        this.dragEngine.from(this.outlineSE, 'se', () => node),
+        this.dragEngine.from(this.outlineSW, 'sw', () => node),
+      ],
    );

    this.willUnbind = () => {
@ -252,29 +262,36 @@ export class BoxResizingInstance extends Component<{
      triggerVisible = metaData.experimental.getResizingHandlers(node);
    }

-    const className = classNames('lc-borders lc-resize-box');
+    const baseSideClass = 'lc-borders lc-resize-side';
+    const baseCornerClass = 'lc-borders lc-resize-corner';

    return (
      <div>
-        {triggerVisible.includes('w') && (
+        {triggerVisible.includes('n') && (
          <div
-            ref={(ref) => {
-              this.outlineLeft = ref;
-            }}
-            className={className}
+            ref={(ref) => { this.outlineN = ref; }}
+            className={classNames(baseSideClass, 'n')}
            style={{
-              height: offsetHeight,
-              transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
-              width: 20,
+              height: 20,
+              transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`,
+              width: offsetWidth,
+            }}
+          />
+        )}
+        {triggerVisible.includes('ne') && (
+          <div
+            ref={(ref) => { this.outlineNE = ref; }}
+            className={classNames(baseCornerClass, 'ne')}
+            style={{
+              transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop - 3}px)`,
+              cursor: 'nesw-resize',
            }}
          />
        )}
        {triggerVisible.includes('e') && (
          <div
-            className={className}
-            ref={(ref) => {
-              this.outlineRight = ref;
-            }}
+            className={classNames(baseSideClass, 'e')}
+            ref={(ref) => { this.outlineE = ref; }}
            style={{
              height: offsetHeight,
              transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
@ -282,6 +299,58 @@ export class BoxResizingInstance extends Component<{
            }}
          />
        )}
+        {triggerVisible.includes('se') && (
+          <div
+            ref={(ref) => { this.outlineSE = ref; }}
+            className={classNames(baseCornerClass, 'se')}
+            style={{
+              transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop + offsetHeight - 5}px)`,
+              cursor: 'nwse-resize',
+            }}
+          />
+        )}
+        {triggerVisible.includes('s') && (
+          <div
+            ref={(ref) => { this.outlineS = ref; }}
+            className={classNames(baseSideClass, 's')}
+            style={{
+              height: 20,
+              transform: `translate(${offsetLeft}px, ${offsetTop + offsetHeight - 10}px)`,
+              width: offsetWidth,
+            }}
+          />
+        )}
+        {triggerVisible.includes('sw') && (
+          <div
+            ref={(ref) => { this.outlineSW = ref; }}
+            className={classNames(baseCornerClass, 'sw')}
+            style={{
+              transform: `translate(${offsetLeft - 3}px, ${offsetTop + offsetHeight - 5}px)`,
+              cursor: 'nesw-resize',
+            }}
+          />
+        )}
+        {triggerVisible.includes('w') && (
+          <div
+            ref={(ref) => { this.outlineW = ref; }}
+            className={classNames(baseSideClass, 'w')}
+            style={{
+              height: offsetHeight,
+              transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
+              width: 20,
+            }}
+          />
+        )}
+        {triggerVisible.includes('nw') && (
+          <div
+            ref={(ref) => { this.outlineNW = ref; }}
+            className={classNames(baseCornerClass, 'nw')}
+            style={{
+              transform: `translate(${offsetLeft - 3}px, ${offsetTop - 3}px)`,
+              cursor: 'nwse-resize',
+            }}
+          />
+        )}
      </div>
    );
  }
--- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
@ -46,6 +46,12 @@ export class BorderSelectingInstance extends Component<{
      dragging,
    });

+    const hideSelectTools = observed.node.componentMeta.getMetadata().experimental?.hideSelectTools;
+
+    if (hideSelectTools) {
+      return null;
+    }
+
    return (
      <div className={className} style={style}>
        {!dragging && <Toolbar observed={observed} />}
--- a/packages/designer/src/builtin-simulator/bem-tools/borders.less
+++ b/packages/designer/src/builtin-simulator/bem-tools/borders.less
@ -49,10 +49,19 @@
    }
  }

-  &.lc-resize-box {
+  &.lc-resize-corner {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border: 1px solid #197aff;
+    background: #fff;
+    pointer-events: auto;
+    z-index: 2;
+  }
+
+  &.lc-resize-side {
    border-width: 0;
    z-index: 1;
-    cursor: ew-resize;
    pointer-events: auto;
    align-items: center;
    justify-content: center;
@ -61,13 +70,32 @@
    &:after {
      content: "";
      display: block;
-      height: calc(100% - 20px);
-      min-height: 50%;
-      width: 4px;
-      background: #738397;
+      border: 1px solid #197aff;
+      background: #fff;
+      // background: #738397;
      border-radius: 2px;
      // animation: flashing 1.5s infinite linear;
    }
+
+    &.e,
+    &.w {
+      cursor: ew-resize;
+      &:after {
+        width: 4px;
+        // height: calc(100% - 20px);
+        min-height: 50%;
+      }
+    }
+
+    &.n,
+    &.s {
+      cursor: ns-resize;
+      &:after {
+        // width: calc(100% - 20px);
+        min-width: 50%;
+        height: 4px;
+      }
+    }
  }

  // &&-hovering {
--- a/packages/designer/src/designer/drag-ghost/index.tsx
+++ b/packages/designer/src/designer/drag-ghost/index.tsx
@ -37,7 +37,7 @@ export default class DragGhost extends Component<{ designer: Designer }> {
        this.y = e.globalY;
        if (isSimulatorHost(e.sensor)) {
          const container = e.sensor.getDropContainer(e);
-          if (container.container.componentMeta.getMetadata().experimental?.isAbsoluteLayoutContainer) {
+          if (container?.container.componentMeta.getMetadata().experimental?.isAbsoluteLayoutContainer) {
            this.isAbsoluteLayoutContainer = true;
            return;
          }
--- a/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts
+++ b/packages/editor-preset-vision/src/bundle/upgrade-metadata.ts
@ -137,6 +137,7 @@ export interface OldPrototypeConfig {

  isContainer?: boolean; // => configure.component.isContainer
  isAbsoluteLayoutContainer?: boolean; // => meta.experimental.isAbsoluteLayoutContainer 是否是绝对定位容器
+  hideSelectTools?: boolean; // => meta.experimental.hideSelectTools
  isModal?: boolean; // => configure.component.isModal
  isFloating?: boolean; // => configure.component.isFloating
  descriptor?: string; // => configure.component.descriptor
@ -144,6 +145,7 @@ export interface OldPrototypeConfig {
  // alias to canDragging
  canDraging?: boolean; // => onDrag
  canDragging?: boolean; // => ?
+  canHovering?: ((dragment: Node) => boolean) | boolean;

  canSelecting?: boolean; // => onClickHook
  canOperating?: boolean; // => disabledActions
@ -596,6 +598,7 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
    transducers,
    isContainer,
    isAbsoluteLayoutContainer,
+    hideSelectTools,
    rectSelector,
    isModal,
    isFloating,
@ -614,6 +617,7 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
    canDraging,
    canDragging, // handleDragging
    canSelecting, // onClickHook
+    canHovering,
    // events
    didDropOut, // onNodeRemove
    didDropIn, // onNodeAdd
@ -686,6 +690,7 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
  // 未考虑清楚的，放在实验性段落
  const experimental: any = {
    isAbsoluteLayoutContainer,
+    hideSelectTools,
  };
  if (context) {
    // for prototype.getContextInfo
@ -743,7 +748,7 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
  if (canResizing) {
    // TODO: enhance
    experimental.getResizingHandlers = (currentNode: any) => {
-      const directs = ['n', 'w', 's', 'e'];
+      const directs = ['n', 'e', 's', 'w', 'ne', 'nw', 'se', 'sw'];
      if (canResizing === true) {
        return directs;
      }
@ -766,6 +771,9 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
    }
    callbacks.onClickHook = () => v;
  }
+  if (canHovering != null) {
+    callbacks.onHoverHook = typeof canHovering === 'boolean' ? () => canHovering : canHovering;
+  }
  if (didDropIn) {
    callbacks.onNodeAdd = didDropIn;
  }
--- a/packages/types/src/metadata.ts
+++ b/packages/types/src/metadata.ts
@ -66,6 +66,7 @@ export interface Experimental {
  callbacks?: Callbacks;
  initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]);
  isAbsoluteLayoutContainer: boolean;
+  hideSelectTools?: boolean;

  // 样式 及 位置，handle上必须有明确的标识以便事件路由判断，或者主动设置事件独占模式
  // NWSE 是交给引擎计算放置位置，ReactElement 必须自己控制初始位置
@ -183,6 +184,7 @@ export interface Callbacks {
  // onLocateHook?: (e: any, currentNode: any) => any;
  // onAcceptHook?: (currentNode: any, locationData: any) => any;
  onMoveHook?: (currentNode: any) => boolean; // thinkof 限制性拖拽
+  onHoverHook?: (currentNode: any) => boolean;
  onChildMoveHook?: (childNode: any, currentNode: any) => boolean;

  // events