@gct-paas/design 0.1.4-dev.9 → 0.1.5-dev.1

package/es/hooks/design-view/widget/useSelectedWidget.mjs

@@ -1,219 +1,228 @@
-import { TreeHelper, FIELD_TYPE, FormComponents, BuiltinType, PanelEnum } from '@gct-paas/core';
-import { getCompPos, commonStyle } from '@gct-paas/schema';
-import { isEmpty, has, get, isArray } from 'lodash-es';
-import { ref, computed } from 'vue';
-import { useScope } from '../layout/useScope.mjs';
-import { usePage } from '../page/usePage.mjs';
-import { subTableModalState, subTableModalId, widgetInfo } from '../design-state.mjs';
-import { useWidgetQuery } from './useWidgetQuery.mjs';
-
-const fieldFormEvents = {};
-const fieldFormEditors = {};
-const fieldFormStyles = {};
-const selectedConfig = ref({ mode: "move" });
-const selectedParentChildren = ref([]);
-const selectedParentWidgets = ref([]);
-const selectedWidget = ref({});
-const selectedModal = ref({});
-const focusFormWidget = ref({});
-const hoverWidget = ref({});
+import { designRegister } from "../../../utils/design-view/index.mjs";
+import { commonStyle } from "../../../schema/common-config/common-style.mjs";
+import "../../../schema/index.mjs";
+import { subTableModalId, subTableModalState, widgetInfo } from "../design-state.mjs";
+import { useScope } from "../layout/useScope.mjs";
+import { usePage } from "../page/usePage.mjs";
+import { useWidgetQuery } from "./useWidgetQuery.mjs";
+import { get, has, isArray, isEmpty } from "lodash-es";
+import { BuiltinType, FIELD_TYPE, FormComponents, PanelEnum, TreeHelper } from "@gct-paas/core";
+import { computed, ref } from "vue";
+import { FieldEditorOverrideRegistry, getCompPos } from "@gct-paas/schema";
+//#region src/hooks/design-view/widget/useSelectedWidget.ts
+var selectedConfig = ref({ mode: "move" });
+var selectedParentChildren = ref([]);
+var selectedParentWidgets = ref([]);
+var selectedWidget = ref({});
+var selectedModal = ref({});
+var focusFormWidget = ref({});
+var hoverWidget = ref({});
 function useSelectedWidget() {
-  const { setScope, getScope, scopeData } = useScope();
-  const { togglePanel } = usePage();
-  const { allWidget } = useWidgetQuery();
-  const selectedRef = computed(() => {
-    if (!isEmpty(selectedModal.value) && isEmpty(selectedWidget.value)) {
-      return selectedModal.value;
-    } else {
-      return selectedWidget.value;
-    }
-  });
-  const selectedParentRef = computed(() => {
-    if (!selectedRef.value.id) {
-      return void 0;
-    }
-    return selectedParentWidgets.value[selectedParentWidgets.value.length - 1];
-  });
-  const selectedParentsRef = computed(() => {
-    if (!selectedRef.value.id) {
-      return [];
-    }
-    return selectedParentWidgets.value;
-  });
-  const selectedParentChildrenRef = computed(() => {
-    if (!selectedRef.value.id) {
-      return [];
-    }
-    return selectedParentChildren.value;
-  });
-  const selectedConfigRef = computed(() => {
-    return selectedConfig.value;
-  });
-  function setSelectedConfig(config) {
-    selectedConfig.value = config;
-  }
-  const setSelectedParentChildrenRef = (widgets) => {
-    selectedParentChildren.value = widgets;
-  };
-  const selectModalRef = computed(() => {
-    if (subTableModalState.value) {
-      const modalInfo = TreeHelper.findNode(scopeData.value, (node) => {
-        return getCompPos(node, FIELD_TYPE.MASTERSLAVE, FormComponents.Form) && node.preLocation === subTableModalId.value;
-      });
-      if (!modalInfo) {
-        return selectedRef.value;
-      }
-      return modalInfo;
-    }
-    return selectedRef.value;
-  });
-  const focusFormRef = computed(() => {
-    if ([
-      FormComponents.Form,
-      FormComponents.RdoForm,
-      FormComponents.MedProRdoForm,
-      FormComponents.CardList,
-      BuiltinType.MODAL,
-      FormComponents.FormProcess
-    ].includes(selectedRef.value.type)) {
-      return selectedRef.value;
-    }
-    return focusFormWidget.value;
-  });
-  const hoverRef = computed(() => {
-    return hoverWidget.value;
-  });
-  function setHoverWidget(widget = {}) {
-    hoverWidget.value = widget;
-  }
-  function setSelectedParentWidgets(widgets) {
-    selectedParentWidgets.value = widgets;
-  }
-  const setSelectedModal = (modal) => {
-    selectedModal.value = modal;
-    selectedWidget.value = {};
-    togglePanel(PanelEnum.WIDGET);
-  };
-  const resetSelectedModal = () => {
-    selectedModal.value = {};
-  };
-  const setSelectedWidget = (widget, scope) => {
-    selectedWidget.value = widget;
-    selectedModal.value = {};
-    if (scope) {
-      setScope(scope);
-    }
-    togglePanel(PanelEnum.WIDGET);
-  };
-  const resetSelectedWidget = (scope) => {
-    selectedWidget.value = {};
-    selectedParentWidgets.value = [];
-    selectedConfig.value = { mode: "move" };
-    focusFormWidget.value = {};
-    selectedParentChildren.value = [];
-    setScope(scope ? scope : getScope());
-  };
-  const selectedStyle = computed(() => {
-    if (!selectedRef.value.style) {
-      selectedRef.value.style = {};
-    }
-    return selectedRef.value.style || commonStyle;
-  });
-  const selectedProps = computed(() => {
-    return selectedRef.value.props;
-  });
-  const selectedEvents = computed({
-    get() {
-      return selectedRef.value.events;
-    },
-    set(val) {
-      selectedRef.value.events = val;
-    }
-  });
-  const selectedAllEvents = computed(() => {
-    const { type } = selectedRef.value;
-    const widgetEvents = widgetInfo.value.events;
-    const eventConfig = widgetEvents[type] || fieldFormEvents[type] || [];
-    if (typeof eventConfig === "function") {
-      return eventConfig(selectedRef.value);
-    } else {
-      return eventConfig;
-    }
-  });
-  const selectedAllPropEditors = computed(() => {
-    const { type } = selectedRef.value;
-    const widgetPropsEditors = widgetInfo.value.propEditors;
-    let preCompInfo;
-    if (has(selectedRef.value, "preLocation")) {
-      const { scopeData: scopeData2 } = useScope();
-      preCompInfo = TreeHelper.findNode(scopeData2.value, (widget) => {
-        return widget.id === get(selectedRef.value, "preLocation");
-      });
-    }
-    return widgetPropsEditors[type] && isArray(widgetPropsEditors[type]) ? widgetPropsEditors[type] : fieldFormEditors[type]?.(selectedRef.value, preCompInfo);
-  });
-  const selectedAllStyleEditors = computed(() => {
-    const { type } = selectedRef.value;
-    return widgetInfo.value.styleEditors[type] || fieldFormStyles[type]?.(selectedRef.value);
-  });
-  const selectedAllDesingerConfig = computed(() => {
-    return widgetInfo.value.designerConfig[selectedRef.value.type];
-  });
-  const setFocusFormContainer = (formId) => {
-    focusFormWidget.value = formId && allWidget.value.find((e) => e.id === formId) || {};
-  };
-  const focusFormContainer = computed(() => {
-    if (subTableModalState.value && focusFormRef.value.type === BuiltinType.MODAL) {
-      return {
-        isFocus: true
-      };
-    }
-    if (focusFormRef.value && focusFormRef.value?.props?.model) {
-      return {
-        isFocus: true,
-        formModelKey: focusFormRef.value?.props?.model,
-        formId: focusFormRef.value?.id,
-        nodeType: focusFormRef.value.props?.nodeType,
-        // 工作流节点类型
-        /**子表关联父模型 */
-        refParentModelkey: focusFormRef.value.props?.refParentModelkey
-      };
-    }
-    return {
-      isFocus: false,
-      formModelKey: "",
-      formId: "",
-      nodeType: ""
-    };
-  });
-  return {
-    setSelectedModal,
-    resetSelectedModal,
-    setSelectedWidget,
-    resetSelectedWidget,
-    selectedAllPropEditors,
-    selectedAllStyleEditors,
-    selectedAllEvents,
-    selectedEvents,
-    selectedProps,
-    selectedStyle,
-    selectedWidget,
-    selectedRef,
-    selectModalRef,
-    focusFormContainer,
-    selectedAllDesingerConfig,
-    setFocusFormContainer,
-    focusFormRef,
-    hoverRef,
-    setHoverWidget,
-    selectedParentRef,
-    setSelectedParentWidgets,
-    selectedParentsRef,
-    selectedParentChildrenRef,
-    setSelectedParentChildrenRef,
-    selectedConfigRef,
-    setSelectedConfig
-  };
+	const { setScope, getScope, scopeData } = useScope();
+	const { togglePanel } = usePage();
+	const { allWidget } = useWidgetQuery();
+	/**被选中的对象 Widget或者Modal */
+	const selectedRef = computed(() => {
+		if (!isEmpty(selectedModal.value) && isEmpty(selectedWidget.value)) return selectedModal.value;
+		else return selectedWidget.value;
+	});
+	const selectedParentRef = computed(() => {
+		if (!selectedRef.value.id) return;
+		return selectedParentWidgets.value[selectedParentWidgets.value.length - 1];
+	});
+	const selectedParentsRef = computed(() => {
+		if (!selectedRef.value.id) return [];
+		return selectedParentWidgets.value;
+	});
+	const selectedParentChildrenRef = computed(() => {
+		if (!selectedRef.value.id) return [];
+		return selectedParentChildren.value;
+	});
+	const selectedConfigRef = computed(() => {
+		return selectedConfig.value;
+	});
+	function setSelectedConfig(config) {
+		selectedConfig.value = config;
+	}
+	const setSelectedParentChildrenRef = (widgets) => {
+		selectedParentChildren.value = widgets;
+	};
+	const selectModalRef = computed(() => {
+		if (subTableModalState.value) {
+			const modalInfo = TreeHelper.findNode(scopeData.value, (node) => {
+				return getCompPos(node, FIELD_TYPE.MASTERSLAVE, FormComponents.Form) && node.preLocation === subTableModalId.value;
+			});
+			if (!modalInfo) return selectedRef.value;
+			return modalInfo;
+		}
+		return selectedRef.value;
+	});
+	const focusFormRef = computed(() => {
+		if ([
+			FormComponents.Form,
+			FormComponents.RdoForm,
+			FormComponents.MedProRdoForm,
+			FormComponents.CardList,
+			BuiltinType.MODAL,
+			FormComponents.FormProcess
+		].includes(selectedRef.value.type)) return selectedRef.value;
+		return focusFormWidget.value;
+	});
+	const hoverRef = computed(() => {
+		return hoverWidget.value;
+	});
+	function setHoverWidget(widget = {}) {
+		hoverWidget.value = widget;
+	}
+	function setSelectedParentWidgets(widgets) {
+		selectedParentWidgets.value = widgets;
+	}
+	/**设置模态框选中 */
+	const setSelectedModal = (modal) => {
+		selectedModal.value = modal;
+		selectedWidget.value = {};
+		togglePanel(PanelEnum.WIDGET);
+	};
+	const resetSelectedModal = () => {
+		selectedModal.value = {};
+	};
+	/**
+	* 设置组件选中
+	* @param widget 组件JSON
+	* @param scope 组件所在域
+	* @param widgetItemFlag 是否是行内编辑/部件的组件(如在子表中)
+	*/
+	const setSelectedWidget = (widget, scope) => {
+		selectedWidget.value = widget;
+		selectedModal.value = {};
+		if (scope) setScope(scope);
+		togglePanel(PanelEnum.WIDGET);
+	};
+	const resetSelectedWidget = (scope) => {
+		selectedWidget.value = {};
+		selectedParentWidgets.value = [];
+		selectedConfig.value = { mode: "move" };
+		focusFormWidget.value = {};
+		selectedParentChildren.value = [];
+		setScope(scope ? scope : getScope());
+	};
+	/**被选择的组件的样式 */
+	const selectedStyle = computed(() => {
+		if (!selectedRef.value.style) selectedRef.value.style = {};
+		return selectedRef.value.style || commonStyle;
+	});
+	/**被选择的组件/弹框的属性 */
+	const selectedProps = computed(() => {
+		return selectedRef.value.props;
+	});
+	/**被选择的组件/弹框已经配置的事件 */
+	const selectedEvents = computed({
+		get() {
+			return selectedRef.value.events;
+		},
+		set(val) {
+			selectedRef.value.events = val;
+		}
+	});
+	/**被选择的组件/弹框拥有的所有事件 */
+	const selectedAllEvents = computed(() => {
+		const { type } = selectedRef.value;
+		const widgetEvents = widgetInfo.value.events;
+		if (widgetEvents[type] && isArray(widgetEvents[type])) return widgetEvents[type];
+		const provider = designRegister.value.getProvider(type);
+		if (!provider) {
+			console.warn(`selectedAllEvents 未找到组件 ${type} 的设计器项配置信息，请确保该组件已正确注册`);
+			return [];
+		}
+		if (selectedRef.value.props.fieldReadonly) return (provider.events || []).filter((event) => event.name === "onClick");
+		const overrideEvents = FieldEditorOverrideRegistry.get(type)?.events;
+		const defaultEvents = provider.events || [];
+		return overrideEvents?.(selectedRef.value, defaultEvents) || defaultEvents;
+	});
+	/**被选择的组件/弹框拥有的所有属性编辑器的描述集合 */
+	const selectedAllPropEditors = computed(() => {
+		const { type } = selectedRef.value;
+		const widgetPropsEditors = widgetInfo.value.propEditors;
+		let preCompInfo;
+		if (has(selectedRef.value, "preLocation")) {
+			const { scopeData } = useScope();
+			preCompInfo = TreeHelper.findNode(scopeData.value, (widget) => {
+				return widget.id === get(selectedRef.value, "preLocation");
+			});
+		}
+		if (widgetPropsEditors[type] && isArray(widgetPropsEditors[type])) return widgetPropsEditors[type];
+		const provider = designRegister.value.getProvider(type);
+		if (!provider) {
+			console.warn(`selectedAllPropEditors 未找到组件 ${type} 的设计器项配置信息，请确保该组件已正确注册`);
+			return [];
+		}
+		const overridePropEditor = FieldEditorOverrideRegistry.get(type)?.propEditor;
+		const defaultPropEditors = provider.propEditors || [];
+		return overridePropEditor?.(selectedRef.value, defaultPropEditors, preCompInfo) || defaultPropEditors;
+	});
+	/**被选择的组件/弹框拥有的所有样式编辑器的描述集合 */
+	const selectedAllStyleEditors = computed(() => {
+		const { type } = selectedRef.value;
+		if (widgetInfo.value.styleEditors[type] && isArray(widgetInfo.value.styleEditors[type])) return widgetInfo.value.styleEditors[type];
+		const provider = designRegister.value.getProvider(type);
+		if (!provider) {
+			console.warn(`selectedAllStyleEditors 未找到组件 ${type} 的设计器项配置信息，请确保该组件已正确注册`);
+			return [];
+		}
+		const overrideStyleEditor = FieldEditorOverrideRegistry.get(type)?.styleEditor;
+		const defaultStyleEditors = provider.styleEditors || [];
+		return overrideStyleEditor?.(selectedRef.value, defaultStyleEditors) || defaultStyleEditors;
+	});
+	/**被选择的组件所有设计相关配置信息集合 */
+	const selectedAllDesingerConfig = computed(() => {
+		return widgetInfo.value.designerConfig[selectedRef.value.type];
+	});
+	const setFocusFormContainer = (formId) => {
+		focusFormWidget.value = formId && allWidget.value.find((e) => e.id === formId) || {};
+	};
+	return {
+		setSelectedModal,
+		resetSelectedModal,
+		setSelectedWidget,
+		resetSelectedWidget,
+		selectedAllPropEditors,
+		selectedAllStyleEditors,
+		selectedAllEvents,
+		selectedEvents,
+		selectedProps,
+		selectedStyle,
+		selectedWidget,
+		selectedRef,
+		selectModalRef,
+		focusFormContainer: computed(() => {
+			if (subTableModalState.value && focusFormRef.value.type === BuiltinType.MODAL) return { isFocus: true };
+			if (focusFormRef.value && focusFormRef.value?.props?.model) return {
+				isFocus: true,
+				formModelKey: focusFormRef.value?.props?.model,
+				formId: focusFormRef.value?.id,
+				nodeType: focusFormRef.value.props?.nodeType,
+				refParentModelkey: focusFormRef.value.props?.refParentModelkey
+			};
+			return {
+				isFocus: false,
+				formModelKey: "",
+				formId: "",
+				nodeType: ""
+			};
+		}),
+		selectedAllDesingerConfig,
+		setFocusFormContainer,
+		focusFormRef,
+		hoverRef,
+		setHoverWidget,
+		selectedParentRef,
+		setSelectedParentWidgets,
+		selectedParentsRef,
+		selectedParentChildrenRef,
+		setSelectedParentChildrenRef,
+		selectedConfigRef,
+		setSelectedConfig
+	};
 }
-
+//#endregion
 export { useSelectedWidget };

package/es/hooks/design-view/widget/useWidget.d.ts

@@ -78,10 +78,6 @@ export declare const widgetWrapperProps: {
     action: {
         type: PropType<(id: string) => boolean>;
     };
-    /** 是否为新版设计器 */
-    isNewDesigner: {
-        type: BooleanConstructor;
-    };
     deleteCallback: {
         type: FunctionConstructor;
     };
@@ -102,6 +98,5 @@ export declare const widgetProps: {
     formData: {
         type: ObjectConstructor;
     };
-    isNewDesigner: BooleanConstructor;
 };
 export {};