, styleString: string) => {
- const [styleKey, styleValue] = styleString.split(':');
- if (styleKey) {
- result[styleKey] = styleValue;
- }
- return result;
- }, styleObject);
- }
- return styleObject;
- });
-
- function onClickDeleteButton(payload: MouseEvent, schemaToRemove: ComponentSchema) {
- if (parent && parent.schema[contentKey.value]) {
- const indexToRemove = parent.schema[contentKey.value].findIndex(
- (contentItem: ComponentSchema) => contentItem.id === schemaToRemove.id
- );
- // 如果仍然存在子级，点击子级事件，展示属性面板
- if (indexToRemove > -1) {
- const childrenSize = parent.schema[contentKey.value].length;
- const nextSchema = parent.schema[contentKey.value][indexToRemove % childrenSize];
- const designerItem = parent.designerItemElementRef.value.querySelector(
- `#${nextSchema.id}-design-item`
- );
- parent.schema[contentKey.value].splice(indexToRemove, 1);
-
- // 此处删除子组件schame后，会自动选中第一个元素但属性面板不更新，暂时绕过此问题，使用emit removeComponent方式来解决
- canvasChanged.value++;
- context.emit('removeComponent');
- context.emit('selectionChange');
- }
- }
-
- }
-
- function onClickAddButton(payload: MouseEvent) {
- if (componentInstance.value.addNewChildComponentSchema) {
- const resolveContext = {
- componentType: childType.value,
- label: childLabel.value,
- parentComponentInstance: componentInstance.value,
- targetPosition: -1
- } as DraggingResolveContext;
- const childComponentSchema = componentInstance.value.addNewChildComponentSchema(resolveContext);
- schema.value[contentKey.value].push(childComponentSchema);
- context.emit('addComponent');
- }
- }
-
- function renderAddButton() {
- return (
- canAdd.value && (
- {
- onClickAddButton(payload);
- }}>
-
-
- )
- );
- }
-
- function renderDeleteButton(componentSchema: ComponentSchema) {
- return (
- canDelete.value && (
-
- onClickDeleteButton(payload as MouseEvent, componentSchema),
- ['stop'])}>
-
-
- )
- );
- }
- function renderMoveButton() {
- return (
- canMove.value && (
-
-
-
- )
- );
- }
-
- function renderIconPanel(componentSchema: ComponentSchema) {
- return (
-
-
- {renderAddButton()}
- {renderMoveButton()}
- {renderDeleteButton(componentSchema)}
-
-
- {renderIconPanel(schema.value)}
- {context.slots.default && context.slots.default()}
-
- );
- };
- }
-});
-export default FDesignerInnerItem;
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-item.component.tsx b/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-item.component.tsx
deleted file mode 100644
index 04e847449278377e6c580da191f46605d8969f4f..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-item.component.tsx
+++ /dev/null
@@ -1,340 +0,0 @@
-
-import { Ref, SetupContext, computed, defineComponent, inject, onMounted, provide, ref, watch, onBeforeUnmount } from 'vue';
-import { DesignerItemPropsType, designerItemProps } from '../composition/props/designer-item.props';
-import { componentMap, componentPropsConverter } from './maps';
-import { UseDragula } from '../composition/types';
-import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from '../types';
-import FDesignerPlaceholder from './designer-placeholder.component';
-import { canvasChanged, setPositionOfButtonGroup } from '../composition/designer-canvas-changed';
-import { getCustomClass } from '@/components/common';
-
-const FDesignerItem = defineComponent({
- name: 'FDesignerItem',
- props: designerItemProps,
- emits: ['selectionChange'],
- setup(props: DesignerItemPropsType, context) {
- const id = ref(`${props.modelValue.id}-component`);
- const canMove = ref(props.canMove);
- const canDelete = ref(props.canDelete);
- const canNested = ref(false);
- const schema = ref(props.modelValue);
- const componentId = ref(props.componentId || '');
- const designComponentStyle = ref('');
- const designComponentClass = ref('');
- const designCustomClass = ref(props.customClass);
- const designerItemElementRef = ref();
- const useDragulaComposition = inject('canvas-dragula');
- const componentInstance = ref() as Ref;
- const parent = inject('design-item-context');
- const designItemContext = { designerItemElementRef, componentInstance, schema: schema.value, parent, setupContext: context as SetupContext };
- provide('design-item-context', designItemContext);
- const useFormSchema = inject('useFormSchema');
-
- const designerItemClass = computed(() => {
- const componentClass = props.modelValue.appearance ? (props.modelValue.appearance.class as string) || '' : '';
- const customButtons = componentInstance.value?.getCustomButtons && componentInstance.value.getCustomButtons();
- let classObject = {
- 'farris-component': true,
- // 受position-relative影响，整个容器的高度不能被撑起
- 'flex-fill': schema.value.id === 'root-component',
- 'position-relative': canMove.value && canDelete.value || (customButtons?.length),
- 'farris-nested': canNested.value,
- 'can-move': canMove.value,
- 'd-none': designerItemElementRef.value && (designerItemElementRef.value as HTMLElement).classList.contains('d-none'),
- 'dgComponentSelected': designerItemElementRef.value && (designerItemElementRef.value as HTMLElement).classList.contains('dgComponentSelected'),
- 'dgComponentFocused': designerItemElementRef.value && (designerItemElementRef.value as HTMLElement).classList.contains('dgComponentFocused'),
- } as Record;
- classObject[`farris-component-${schema.value.type}`] = true;
- classObject = getCustomClass(classObject, componentClass);
- classObject = getCustomClass(classObject, designComponentClass.value);
- classObject = getCustomClass(classObject, designCustomClass.value);
- return classObject;
- });
-
- const desginerItemStyle = computed(() => {
- const styleObject = {} as Record;
- const componentStyle = props.modelValue.appearance ? (props.modelValue.appearance.style as string) || '' : '';
- if (componentStyle) {
- componentStyle.split(';').reduce((result: Record, styleString: string) => {
- const [styleKey, styleValue] = styleString.split(':');
- result[styleKey] = styleValue;
- return result;
- }, styleObject);
- }
- if (designComponentStyle.value) {
- designComponentStyle.value.split(';').reduce((result: Record, styleString: string) => {
- const [styleKey, styleValue] = styleString.split(':');
- if (styleKey) {
- result[styleKey] = styleValue;
- }
- return result;
- }, styleObject);
- }
- return styleObject;
- });
-
- function onClickDeleteButton(payload: MouseEvent, schemaToRemove: ComponentSchema) {
- if (payload) {
- payload.preventDefault();
- payload.stopPropagation();
- }
-
- // 连同所属组件一起删除，使用场景如data-grid、form控件等。
- if (componentInstance.value.triggerBelongedComponentToDeleteWhenDeleted) {
- const belongedComponentInstance = componentInstance.value.getBelongedComponentInstance(componentInstance);
- if (belongedComponentInstance && belongedComponentInstance.parent) {
- const belongedComponentInstanceParent = ref(belongedComponentInstance?.parent) as any;
- const indexToRemove = belongedComponentInstanceParent.value.contents.findIndex(
- (contentItem: ComponentSchema) => contentItem.id === belongedComponentInstance.schema.id
- );
- belongedComponentInstanceParent.value?.contents?.splice(indexToRemove, 1);
-
- canvasChanged.value++;
- }
- return;
- }
- componentInstance.value.onRemoveComponent();
- let parentContext = parent;
- let locatePredicate: any = (contentItem: ComponentSchema) => contentItem.id === schemaToRemove.id;
- if (schemaToRemove.type === 'component') {
- parentContext = parent?.parent;
- locatePredicate = (contentItem: ComponentSchema) => contentItem.component === schemaToRemove.id;
-
- }
- if (parentContext && parentContext.schema.contents) {
- const indexToRemove = parentContext.schema.contents.findIndex(locatePredicate);
- parentContext.schema.contents.splice(indexToRemove, 1);
-
- canvasChanged.value++;
- context.emit('selectionChange');
-
- }
-
- }
-
- function renderDeleteButton(componentSchema: ComponentSchema) {
- return (
- canDelete.value && (
- {
- onClickDeleteButton(payload, componentSchema);
- }}>
-
-
- )
- );
- }
-
- function renderMoveButton() {
- return (
- canMove.value && (
-
-
-
- )
- );
- }
-
- function renderCustomButtons() {
- const customButtons = componentInstance.value?.getCustomButtons && componentInstance.value.getCustomButtons();
-
- return (
- customButtons &&
- !!customButtons.length &&
- customButtons.map((buttonConfig: any) => {
- return (
- buttonConfig.onClick && buttonConfig.onClick(payload)}>
-
-
- );
- })
- );
- }
-
- function renderIconPanel(componentSchema: ComponentSchema) {
- return (
-
-
- {renderDeleteButton(componentSchema)}
- {renderMoveButton()}
- {renderCustomButtons()}
-
-
- {renderIconPanel(schema.value)}
- {renderContent(schema.value)}
-
- );
- };
- }
-});
-export default FDesignerItem;
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-placeholder.component.tsx b/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-placeholder.component.tsx
deleted file mode 100644
index 5dd90cb489ae5a2637354f7ce168bebeaffd8096..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-placeholder.component.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { SetupContext, computed, defineComponent } from 'vue';
-import { DesignerPlaceholderPropsType, designerPlaceholderProps } from '../composition/props/designer-placeholder.props';
-
-export default defineComponent({
- name: 'FDesignerPlaceholder',
- props: designerPlaceholderProps,
- emits: [],
- setup(props: DesignerPlaceholderPropsType) {
- const designerPlaceholderClass = computed(() => {
- const classObject = {
- 'drag-and-drop-alert': true,
- 'no-drag': true,
- 'w-100': true
- } as Record;
- return classObject;
- });
-
- const designerPlaceholderStyle = computed(() => {
- const styleObject = {
- 'height': '60px',
- 'display': 'flex',
- 'justify-content': 'center',
- 'align-items': 'center',
- 'margin': 0,
- 'padding': '.75rem 1.25rem',
- 'border': '1px solid transparent',
- 'border-radius': '3px',
- 'color': '#315585',
- 'background-color': '#dfedff',
- 'border-color': '#d2e6ff',
- } as Record;
- return styleObject;
- });
-
- return () => (
-
- 拖拽组件到这里
-
- );
- }
-});
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-template-item.component.tsx b/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-template-item.component.tsx
deleted file mode 100644
index 9df082c1b83fdb4e00db0ecec29594280820e066..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-template-item.component.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { computed, defineComponent, ref } from 'vue';
-import { DesignerItemPropsType, designerItemProps } from '../composition/props/designer-item.props';
-import { canvasChanged } from '../composition/designer-canvas-changed';
-
-const FDesignerTemplateItem = defineComponent({
- name: 'FDesignerTemplateItem',
- props: designerItemProps,
- emits: ['selectionChange'],
- setup(props: DesignerItemPropsType, context) {
- const designerItemElementRef = ref();
-
- const designerItemClass = computed(() => {
- const classObject = {
- 'farris-component': true
- } as Record;
- return classObject;
- });
-
- function onClickDesignerItem(payload: MouseEvent) {
-
- if (payload) {
- payload.preventDefault();
- payload.stopPropagation();
- }
- const designerItemElement = designerItemElementRef.value as HTMLElement;
- if (designerItemElement) {
- const currentSelectedElements = document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf;
-
- // 重复点击
- const duplicateClick =
- currentSelectedElements &&
- currentSelectedElements.length === 1 &&
- currentSelectedElements[0] === designerItemElementRef.value;
- if (!duplicateClick) {
- Array.from(currentSelectedElements).forEach((element: HTMLElement) => element.classList.remove('dgComponentSelected'));
- Array.from(currentSelectedElements).forEach((element: HTMLElement) => element.classList.remove('dgComponentFocused'));
-
- designerItemElement.classList.add('dgComponentFocused');
- }
- }
- canvasChanged.value++;
- }
-
- return () => {
- return (
-
- {context.slots.default && context.slots.default()}
-
- );
- };
- }
-});
-export default FDesignerTemplateItem;
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/components/maps.ts b/packages/mobile-ui-vue/components/designer-canvas/src/components/maps.ts
deleted file mode 100644
index c44e05d5c1bce00efd3df046344d350403ea97d5..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/components/maps.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { CheckboxGroup, ContentContainer, DatePicker, FormItem, PageHeaderContainer, Picker, RadioGroup, Switch } from "@/components";
-import Button from "@/components/button";
-import Component from "@/components/component";
-import FloatContainer from "@/components/float-container";
-import Form from "@/components/form";
-import InputGroup from "@/components/input-group";
-import ListView from "@/components/list-view";
-import Navbar from "@/components/navbar";
-import PageBodyContainer from "@/components/page-body-container";
-import PageContainer from "@/components/page-container";
-import PageFooterContainer from "@/components/page-footer-container";
-import Textarea from "@/components/textarea";
-
-const componentMap: Record = {};
-const componentPropsConverter: Record = {};
-const componentPropertyConfigConverter: Record = {};
-
-
-let hasLoaded = false;
-/**
- * 加载设计时组件
- */
-function loadDesignerRegister() {
- if (!hasLoaded) {
- hasLoaded = true;
- Button.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- PageContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- PageHeaderContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- PageBodyContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- PageFooterContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- Navbar.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- Component.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- ListView.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- Form.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- InputGroup.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- FloatContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- ContentContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- FormItem.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- DatePicker.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- Textarea.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- RadioGroup.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- Switch.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- Picker.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
- CheckboxGroup.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter);
-
- }
-}
-
-export { componentMap, componentPropsConverter, componentPropertyConfigConverter, loadDesignerRegister };
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/class/control.css b/packages/mobile-ui-vue/components/designer-canvas/src/composition/class/control.css
deleted file mode 100644
index 9044cd61f76655fb7d387bb70f82e0a3516a5b7d..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/class/control.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/** 筛选方案 **/
-.f-section-scheme {
- background: #fff;
- margin: 0.5625rem 0.5rem 0;
-}
-
-/** 标签页tabs **/
-.farris-component-tabs .farris-tabs-content.f-utils-fill-flex-column .farris-component-tab-page:has(.farris-tab-page-active) {
- display: flex !important;
- overflow: hidden;
- flex-shrink: 1;
- flex-grow: 1;
- flex-basis: 0;
- flex-direction: column !important;
-}
-
-/** 布局容器 ResponseLayout **/
-.response-layout {
- border: dotted 2px #e8e8e8;
-
-}
-
-.response-layout .response-layout-item {
- border-right: dotted 2px #e8e8e8;
-
-}
-
-.response-layout .response-layout-item:not(:last-child) {
- padding-right: 8px !important;
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/class/designer-canvas.css b/packages/mobile-ui-vue/components/designer-canvas/src/composition/class/designer-canvas.css
deleted file mode 100644
index d92b16e7338c8c4ca9b74ef734ddb3feecb7054a..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/class/designer-canvas.css
+++ /dev/null
@@ -1,284 +0,0 @@
-.form-group-in-canvas .f-cmp-inputgroup .f-state-readonly .input-group-append{
- display: flex !important;
-}
-.component-btn-group {
- flex-direction: row-reverse;
- position: absolute;
- z-index: 800;
- background: #fff;
- display: none;
- top: -26px;
- right: 0;
-}
-
-.component-btn-group > div {
- position: fixed;
-}
-
-.farris-component {
- /* border: dotted 2px transparent; */
-}
-
-.farris-component.farris-nested {
- padding: 10px !important;
- border: dotted 2px #e8e8e8;
-}
-
-.farris-component.farris-nested.dgComponentFocused {
- /* padding: 10px; */
- border: dotted 2px #388fff;
-}
-
-.farris-component.can-move {
- padding: 2px;
-}
-
-.farris-component.dgComponentSelected > .component-btn-group {
- display: flex;
-}
-
-.component-btn-group .component-settings-button {
- display: flex;
- cursor: pointer;
- float: right;
- margin-left: 4px;
- padding: 0;
- font-size: 10px;
- line-height: 1.2em;
- border-radius: 2px 2px 0px 0px;
- width: 24px !important;
- height: 24px !important;
- color: #fff !important;
- background: #388fff !important;
-}
-
-.component-btn-group .component-settings-button .f-icon {
- font-size: 18px;
- margin: 0 auto;
- line-height: 20px;
-}
-
-.component-btn-group .component-settings-button .f-icon.f-icon-yxs_move {
- cursor: move;
-}
-
-.farris-component-content-container .drag-container {
- display: inherit;
- flex-direction: inherit;
- flex-shrink: 1;
- flex-grow: 1;
- flex-basis: 0%;
- flex-wrap: inherit;
- justify-content: inherit;
- align-items: inherit;
- width: 100%;
- overflow: inherit;
- height: inherit;
-}
-
-/* gu-mirror被添加到镜像中 */
-.gu-mirror {
- position: fixed !important;
- margin: 0 !important;
- z-index: 9999 !important;
- opacity: 0.8;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
- filter: alpha(opacity=80);
-}
-
-.gu-mirror.undroppable .component-settings-button .f-icon-yxs_move {
- cursor: no-drop;
-}
-
-.component-btn-group .component-settings-button .f-icon.f-icon-yxs_delete {
- color: #fff !important;
- background: #388fff !important;
-}
-
-.gu-hide {
- display: none !important;
-}
-
-/** 拖拽时镜像元素的父级元素 */
-.gu-unselectable {
- -webkit-user-select: none !important;
- -moz-user-select: none !important;
- -ms-user-select: none !important;
- user-select: none !important;
-}
-
-/* 当拖动源元素的镜像时，gu-transit被添加到源元素中。只是增加了透明度。 */
-.gu-transit {
- opacity: 0.2;
- -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
- filter: alpha(opacity=20);
-}
-
-/* 拖拽经过某区域时，为区域增加底色 */
-.drag-over:not(.no-drop) {
- background-color: #f3f8ff !important;
-}
-
-/** 拖拽区域内的元素不显示按钮区域 */
-.gu-unselectable .farris-component.dgComponentSelected > .component-btn-group {
- display: none;
-}
-
-/** 拖拽区域内的镜像元素显示按钮区域 */
-.gu-unselectable .gu-mirror.farris-component.dgComponentSelected > .component-btn-group {
- display: flex;
-}
-
-/** 拖拽过程中的源元素不显示按钮区域 */
-.gu-transit.farris-component.dgComponentSelected > .component-btn-group {
- display: none;
-}
-
-/* 镜像元素为fixed定位 */
-.gu-mirror.farris-component.dgComponentSelected {
- position: fixed !important;
-}
-
-/* 镜像元素的按钮区域定位 */
-.gu-mirror.farris-component.dgComponentSelected > .component-btn-group > div {
- position: relative;
- top: 0 !important;
- left: 0 !important;
-}
-
-/** 镜像元素的按钮区域设置宽度。是为了适配控件本身宽度比较小，但是操作按钮比较多时，按钮被换行的问题 */
-.gu-mirror.farris-component.dgComponentSelected > .component-btn-group {
- width: max-content;
-}
-
-.dgComponentFocused {
- border-top: 2px dotted #388fff !important;
- border-left: 2px dotted #388fff !important;
- border-right: 2px dotted #388fff !important;
- border-bottom: 2px dotted #388fff !important;
-}
-
-.dgComponentSelected {
- border-top: 2px solid #388fff !important;
- border-left: 2px solid #388fff !important;
- border-right: 2px solid #388fff !important;
- border-bottom: 2px solid #388fff !important;
-}
-
-.editorDiv {
- background-color: #dbe6f7;
- overflow-x: auto;
-}
-
-.editorPanel {
- position: relative;
- height: 100%;
- min-width: 900px;
-}
-
-/** 卡片区块 **/
-.editorDiv .f-struct-like-card {
- display: block;
-}
-
-/** 解决farristab 开启内容填充后切换标签页导致内部列表不显示的问题**/
-.editorDiv .farris-tabs.f-tabs-content-fill .f-struct-is-subgrid .f-grid-is-sub {
- width: 100%;
-}
-
-/** 解决在模态框中弹出右键菜单 菜单不显示的问题**/
-.ide-framework .cdk-overlay-container {
- z-index: 1100;
-}
-.editorDiv .f-struct-wrapper {
- margin-bottom: 15px;
-}
-
-.f-struct-wrapper + .f-struct-wrapper {
- position: relative;
- display: inherit;
- margin-bottom: 15px;
-}
-
-.f-page-is-mainsubcard .f-page-main .f-struct-wrapper {
- background: #fff;
-}
-
-/** 解决带导航的列表和带导航的卡片模板中，不显示右侧区域的问题 */
-.editorDiv .f-page-navigate .f-page {
- position: absolute !important;
-}
-
-/** 解决带导航的列表和带导航的卡片模板中，右侧区域滚动条位置问题 */
-.editorDiv .f-page-navigate .f-page.f-page-card .f-page-main > .drag-container {
- display: block;
- overflow: unset;
-}
-
-/* 解决OA模板（带页头的导航类模板） 中，右侧滚动条位置问题 */
-.editorDiv .f-page.f-page-navigate.f-page-is-listnav-with-header .f-page-main .f-page-content-main {
- display: block;
-}
-
-/** 解决在弹窗中使用smoothDnd时不显示镜像元素的问题 */
-.smooth-dnd-ghost {
- z-index: 1100 !important;
-}
-
-/** 解决零代码设计器中OA类卡片表单滚动条位置问题 */
-.editorDiv .farris-oa-page.f-page-card .f-page-main {
- display: block !important;
- overflow: auto !important;
-}
-
-/** 解决带筛选方案的列表表单中，选中表格组件后没有上边线的问题 */
-.editorDiv .f-page-has-scheme .f-page-main.farris-component {
- margin-top: 0;
-}
-
-/** 解决表单设计器中顶层工具栏的下拉面板被属性面板(z-index:850)遮挡的问题 */
-.dropdown-menu.show {
- z-index: 860;
-}
-
-/** 解决拟物风下从从表区域的下拉箭头错位的问题 */
-.f-struct-subsub-wrapper {
- padding-top: 0 !important;
-}
-
-/** 新拖拽 */
-.gu-mirror.undroppable {
- cursor: no-drop;
-}
-
-.gu-insertion {
- position: fixed;
- z-index: 840 !important;
- pointer-events: none !important;
- background-color: #388fff;
- height: 4px;
- overflow: hidden;
-}
-
-/* 在designer canvas中还原嵌套页面样式，解决desinger和canvas各自f-page样式冲突 */
-.editorPanel .f-page::before {
- display: initial !important;
-}
-
-.editorPanel .f-page .f-page-main {
- margin-right: 0.5rem !important;
- margin-left: 0.5rem !important;
- margin-bottom: 0.5rem !important;
-}
-
-.editorPanel .f-page.f-page-is-listnav .f-page-main {
- margin-top: 0.5rem !important;
-}
-
-.editorPanel .f-page .f-page-main .f-page-main {
- margin: 0 !important;
-}
-
-.editorPanel .f-page.f-page-has-scheme .f-page-header{
- margin: 0 .5rem;
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/designer-canvas-changed.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/designer-canvas-changed.ts
deleted file mode 100644
index 11ada793acc2a6cb1f85d72862c14502e86f102e..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/designer-canvas-changed.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import { ref } from "vue";
-
-/** 用于响应画布发生变更 */
-export const canvasChanged = ref(0);
-
-/**
- * 判断DOM 是否在可视区域内
- * @param el 元素
- * @param containerEl 容器
- */
-function isElementInViewport(el: HTMLElement, containerEl: HTMLElement) {
- const container = containerEl.getBoundingClientRect();
- const box = el.getBoundingClientRect();
- const top = box.top >= container.top;
- const bottom = box.top <= container.bottom;
- return (top && bottom);
-}
-
-function setPositionForSelectedElement(selectElement: HTMLElement) {
- const toolbar = selectElement.querySelector('.component-btn-group') as HTMLElement;
- if (!toolbar) {
- return;
- }
- toolbar.style.display = '';
- const toolbarRect = toolbar.getBoundingClientRect();
- const divPanel = toolbar.querySelector('div') as HTMLElement;
- if (divPanel) {
- const divPanelRect = divPanel.getBoundingClientRect();
- divPanel.style.top = toolbarRect.top + 'px';
-
- // 若操作按钮的最左边比画布最左边还要靠左，那么操作按钮就以控件的最左边为界
- let left = toolbarRect.left - divPanelRect.width;
- const editorDiv = document.querySelector('.editorDiv');
- if (editorDiv) {
- const editorDivRect = editorDiv.getBoundingClientRect();
- if (left < editorDivRect.left) {
- const elementRect = selectElement.getBoundingClientRect();
- ({ left } = elementRect);
- }
- }
- divPanel.style.left = left + 'px';
- }
-}
-
-/**
- * 定位画布中已选控件的操作按钮的位置
- * @param canvasElement 画布父容器
- */
-export function setPositionOfButtonGroup(canvasElement: HTMLElement) {
- if (!canvasElement) {
- return;
- }
- let selectElement: HTMLElement;
- if (canvasElement.className.includes('dgComponentSelected')) {
- selectElement = canvasElement;
- } else {
- selectElement = canvasElement.querySelector('.dgComponentSelected') as HTMLElement;
- }
- if (!selectElement) {
- return;
- }
-
- const selectDomRect = selectElement.getBoundingClientRect();
- if (selectDomRect.width === 0 && selectDomRect.height === 0) {
- return;
- }
- const toolbar = selectElement.querySelector('.component-btn-group') as HTMLElement;
- if (toolbar) {
-
- const isInView = isElementInViewport(selectElement, canvasElement);
- if (!isInView) {
- toolbar.style.display = 'none';
- return;
- }
- // 计算位置
- setPositionForSelectedElement(selectElement);
- }
-}
-
-
-/**
- * 定位页面中选中控件的操作按钮位置。
- * 场景：控件内部点击收折或者切换显示内容后，需要重新计算页面中下方选中控件的按钮位置。
- * 例如点击section控件的收折图标后，需要重新计算section下方已选控件的操作按钮位置
- */
-export function setPositionOfSelectedComponentBtnGroup(canvasElement: HTMLElement) {
- const selectElement = document.querySelector('.dgComponentSelected') as HTMLElement;
- if (!selectElement) {
- return;
- }
- const selectedElementRect = selectElement.getBoundingClientRect();
- const elementRect = canvasElement.getBoundingClientRect();
-
- const toolbar = selectElement.querySelector('.component-btn-group') as HTMLElement;
- if (toolbar) {
- const toolbarRect = toolbar.getBoundingClientRect();
- const isBelow = elementRect.top < selectedElementRect.top;
-
- // 选中控件已显示并且在基准位置的下方
- if (toolbarRect.top !== 0 && isBelow) {
- setPositionForSelectedElement(selectElement);
- }
- }
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/entity/builder-element.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/entity/builder-element.ts
deleted file mode 100644
index b071db8858797c51e878802f1839262cb96a72ec..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/entity/builder-element.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * 设计器DOM元素结构
- */
-export interface BuilderHTMLElement extends Element{
- /** 记录各子元素对应的控件schema json的集合，用于container类dom节点 */
- childrenContents?: any[];
-
- /** 记录element对应的component实例，用于单个component节点 */
- componentInstance?: any;
-
- component?: any;
-};
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/create-design-builder.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/create-design-builder.ts
deleted file mode 100644
index 7d950952527e3328b380d4731abfe5eab6551f28..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/create-design-builder.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { SetupContext } from 'vue';
-import { DesignerOutlineProps } from '../../../../designer-outline/src/designer-outline.props';
-
-/** 创建设计器 */
-export function createDesigner(props: DesignerOutlineProps, context: SetupContext) {
-
- function createDesignBuilder(domJson: any) {
- // 画布渲染过程中，可能会在控件上补充属性，这种变更用户不感知，所以不需要通知IDE框架
- // window.suspendChangesOnForm = true;
-
- const elements = document.getElementsByClassName('editorPanel');
- let rootElement;
- if (elements && elements.length) {
- rootElement = elements[0];
- }
-
- // if (!DesignerBuilder) {
- // return;
- // }
-
- // addServiceToDevkit();
- // const designerHost = addServiceToUI();
-
- const childComponents = domJson.module.components.slice(1);
- const rootComponent = domJson.module.components[0];
- const designerSchema = {
- contents: [rootComponent]
- };
- // designBuilder = new DesignerBuilder(rootElement, designerSchema, childComponents, AllComponents, designerHost);
- // designBuilder.instance.ready.then(() => {
- // onBuilderReady();
-
- // 加载控件工具箱
- // controlBox.getDisplayedControls();
-
- // 设计器渲染完毕，开始监听DOM变更
- // window.suspendChangesOnForm = false;
- // });
-
- // designBuilder.instance.on('change', () => {
- // onComponentChanged();
- // });
- // designBuilder.instance.on('removeComponent', () => {
- // updatePropertyPanel(null);
- // onComponentChanged();
- // });
- }
-
- return {
- };
-
-};
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/drag-resolve.tsx b/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/drag-resolve.tsx
deleted file mode 100644
index 491c53d94b19f9bd19489c1c842c534e1ba32515..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/drag-resolve.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { ModalFunctions } from "../../../../modal/src/composition/type";
-import { ComponentBindingSourceContext, DesignerHostService, DesignerHTMLElement, DraggingResolveContext } from "../types";
-import { DesignViewModelField, FormVariable } from "../../../../common/entity/entity-schema";
-import { merge } from "lodash-es";
-import { DgControl } from "../dg-control";
-import { DesignerComponentInstance } from "@/components";
-
-export function dragResolveService(designerHostService: DesignerHostService) {
- /** 弹窗实例 */
- let modalEditorRef: ModalFunctions;
- /** 拖拽上下文 */
- let componentResolveContext: DraggingResolveContext;
-
- /**
- * 获取拖拽上下文信息
- */
- function getComponentResolveContext(sourceElement: DesignerHTMLElement, sourceContainer: DesignerHTMLElement, targetContainer: DesignerHTMLElement)
- : DraggingResolveContext {
-
- const resolveContext: DraggingResolveContext = {
- componentType: String(sourceElement.getAttribute('data-controltype')),
- componentFeature: String(sourceElement.getAttribute('data-feature')),
- componentCategory: String(sourceElement.getAttribute('data-category')),
- label: String(sourceElement.getAttribute('data-controlTypeName')),
- sourceType: String(sourceElement.getAttribute('data-sourceType') || 'move'),
- parentComponentInstance: targetContainer.componentInstance.value,
- sourceElement,
- sourceContainer,
- targetContainer,
- bindingSourceContext: null
- };
-
- // 现有控件移动位置：从控件实例上获取控件类型
- if (sourceElement.componentInstance) {
- resolveContext.componentType = sourceElement.componentInstance.value.schema?.type;
- // resolveContext.componentCategory = sourceElement.componentInstance.value.category;
- }
-
- return resolveContext;
- }
- /**
- * 选择绑定实体后事件
- */
- function onSubmitEntitySelctor(bindingSourceContext: ComponentBindingSourceContext) {
- componentResolveContext.bindingSourceContext = bindingSourceContext;
-
- if (modalEditorRef?.modalRef?.value.close) {
- modalEditorRef?.modalRef?.value.close();
- }
- }
- /**
- * 取消绑定实体
- */
- function onCancelEntitySelector() {
- componentResolveContext.bindingSourceContext = undefined;
- if (modalEditorRef?.modalRef?.value.close) {
- modalEditorRef?.modalRef?.value.close();
- }
- }
- /**
- * 选择绑定实体窗口
- */
- function renderEntityComponent() {
- const { componentType } = componentResolveContext;
- const FEntityBindingSelector = designerHostService.uiProviderService.getUiComponent('FEntityBindingSelector');
- return () => (<> );
- }
- /**
- * 弹出实体绑定窗口
- */
- function triggerBindingEntity() {
- return new Promise((resolve, reject) => {
- modalEditorRef = designerHostService.modalService.open({
- title: '选择绑定',
- width: 800,
- height: 600,
- fitContent: false,
- showButtons: false,
- render: renderEntityComponent(),
- rejectCallback:()=>{
- componentResolveContext.bindingSourceContext = undefined;
- },
- closedCallback: () => {
- resolve(componentResolveContext);
- },
- draggable: true
- });
- });
- }
- /**
- * 取消绑定字段后事件
- */
- function onCancelFieldSelector() {
- componentResolveContext.bindingSourceContext = undefined;
- if (modalEditorRef?.modalRef?.value.close) {
- modalEditorRef?.modalRef?.value.close();
- }
- }
- /**
- * 获取控件拖拽后的分组信息，以便于后续记录到视图模型
- */
- function getFieldGroupInfo(parentComponentInstance: DesignerComponentInstance) {
- let groupId = '';
- let groupName = '';
- if (DgControl['field-set'] && parentComponentInstance.schema.type === DgControl['field-set'].type) {
- groupId = parentComponentInstance.schema.id;
- groupName = parentComponentInstance.schema.title;
- }
- return { groupId, groupName };
- }
- /**
- * 选择绑定字段后事件
- */
- function onSubmitFieldSelctor(data: { selectedData: any, bindingType: any }) {
- if (!data || !data.selectedData || !data.bindingType) {
- return;
- }
- const { selectedData, bindingType } = data;
- // 若添加到小分组内，需要向vm保存groupId和groupName
- const { groupId, groupName } = getFieldGroupInfo(componentResolveContext.parentComponentInstance);
- const bindingSourceContext: ComponentBindingSourceContext = { bindingType: 'field' };
-
- if (bindingType === 'Form') {
- // 绑定字段
- const entityField = selectedData as DesignViewModelField;
- bindingSourceContext.entityFieldNode = entityField;
-
- bindingSourceContext.designViewModelField = merge({}, entityField, { groupId, groupName });
-
- componentResolveContext.bindingSourceContext = bindingSourceContext;
- } else {
- // 绑定变量
- const varibleField = selectedData as FormVariable;
- bindingSourceContext.variableFieldNode = merge({}, varibleField, { groupId, groupName });
- componentResolveContext.bindingSourceContext = bindingSourceContext;
- }
-
- if (modalEditorRef?.modalRef?.value.close) {
- modalEditorRef?.modalRef?.value.close();
- }
- }
- /**
- * 绑定字段弹窗
- */
- function renderFieldComponent() {
- const { parentComponentInstance } = componentResolveContext;
- const viewModelId = designerHostService.formSchemaUtils.getViewModelIdByComponentId(parentComponentInstance?.belongedComponentId);
- const editorParams = {
- viewModelId,
- designerHostService,
- disableOccupiedFields: true,
- componentSchema: { editor: { type: componentResolveContext.componentType } }
- };
- const bindingSettings = { enable: false };
-
- const FBindingSelectorContainer = designerHostService.uiProviderService.getUiComponent('FBindingSelectorContainer');
-
- return () => (<> );
- }
- /**
- * 弹出绑定字段的窗口
- */
- function triggerBindingField() {
- return new Promise((resolve, reject) => {
- modalEditorRef = designerHostService.modalService.open({
- title: '选择绑定',
- width: 800,
- height: 600,
- fitContent: false,
- showButtons: false,
- render: renderFieldComponent(),
- rejectCallback:()=>{
- componentResolveContext.bindingSourceContext = undefined;
- },
- closedCallback: () => {
- resolve(componentResolveContext);
- },
- draggable: true
- });
- });
- }
- /**
- * 生成控件schema结构
- */
- function resolveComponentSchema() {
- const { parentComponentInstance } = componentResolveContext;
- const componentSchema = parentComponentInstance.addNewChildComponentSchema(componentResolveContext, designerHostService);
- componentResolveContext.componentSchema = componentSchema;
- }
- /**
- * 解析拖拽元素，并根据场景展示不同的绑定窗口
- */
- async function resolveBindingSource() {
- const { componentCategory } = componentResolveContext;
-
- switch (componentCategory) {
- case 'input': {
- await triggerBindingField();
- break;
- }
- case 'dataCollection': {
- await triggerBindingEntity();
- break;
- }
-
- }
- }
- /**
- * 根据拖拽元素解析并创建控件
- */
- async function resolveComponentCreationContextByDrop(sourceElement: DesignerHTMLElement, sourceContainer: DesignerHTMLElement, targetContainer: DesignerHTMLElement): Promise {
- componentResolveContext = getComponentResolveContext(sourceElement, sourceContainer, targetContainer);
-
- await resolveBindingSource();
-
- // 若返回 undefined 代表终止后续生成
- if (componentResolveContext.bindingSourceContext === undefined) {
- return null;
- } else {
- resolveComponentSchema();
- return componentResolveContext;
- }
-
- }
-
- return {
- getComponentResolveContext,
- resolveComponentCreationContextByDrop
- };
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/use-designer-inner-component.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/use-designer-inner-component.ts
deleted file mode 100644
index d0858e6471694097110dcac44adcdcfe1709e3ea..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/use-designer-inner-component.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import { inject, Ref, ref } from "vue";
-import { DesignerHostService, DesignerHTMLElement, DraggingResolveContext, UseDesignerRules } from "../types";
-import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from "../../types";
-import { getSchemaByType } from '../../../../dynamic-resolver/src/schema-resolver';
-
-export function useDesignerInnerComponent(
- elementRef: Ref,
- designItemContext: DesignerItemContext,
- designerRules?: UseDesignerRules
-): Ref {
- const styles = (designerRules && designerRules.getStyles && designerRules.getStyles()) || '';
- const componentInstance = ref();
- /**
- * 校验组件是否支持移动
- */
- function checkCanMoveComponent(): boolean {
- if (designerRules && designerRules.checkCanMoveComponent) {
- return designerRules.checkCanMoveComponent();
- }
- return true;
- }
-
- /**
- * 校验组件是否支持选中父级
- */
- function checkCanSelectParentComponent(): boolean {
- return false;
- }
-
- /**
- * 校验组件是否支持删除
- */
- function checkCanDeleteComponent() {
- if (designerRules && designerRules.checkCanDeleteComponent) {
- return designerRules.checkCanDeleteComponent();
- }
- return true;
- }
-
- /**
- * 校验组件是否支持添加子元素
- */
- function checkCanAddComponent() {
- if (designerRules && designerRules.checkCanAddComponent) {
- return designerRules.checkCanAddComponent();
- }
- return true;
- }
-
- /**
- * 判断在可视化区域中是否隐藏容器间距和线条
- */
- function hideNestedPaddingInDesginerView() {
- return true;
- }
-
- /**
- * 获取组件在表单DOM中所属的Component的实例
- * @param componentInstance 组件实例
- */
- function getBelongedComponentInstance(componentInstance?: Ref): DesignerComponentInstance | null {
- if (!componentInstance || !componentInstance.value) {
- return null;
- }
- const parent = ref(componentInstance?.value.parent) as Ref;
- const grandParent = getBelongedComponentInstance(parent);
- if (grandParent) {
- return grandParent;
- }
- return null;
- }
-
- function getDraggableDesignItemElement(context: DesignerItemContext = designItemContext): Ref | null {
- const { componentInstance, designerItemElementRef } = context;
- if (!componentInstance || !componentInstance.value) {
- return null;
- }
- if (componentInstance.value.canMove || componentInstance.value.canAdd || componentInstance.value.canDelete) {
- return designerItemElementRef;
- }
- return getDraggableDesignItemElement(context.parent);
- }
-
- /**
- * 判断是否可以接收拖拽新增的子级控件
- * @param data 新控件的类型、所属分类
- * @returns boolean
- */
- function canAccepts(draggingContext: DraggingResolveContext) {
- return !!designerRules && designerRules.canAccepts(draggingContext);
- }
-
- function getDraggingDisplayText() {
- return designItemContext?.schema.label || designItemContext?.schema.title || designItemContext?.schema.name;
- }
-
- /**
- * 控件可以拖拽到的最外层容器，用于限制控件向外层容器拖拽的范围。不写则不限制
- */
- function getDragScopeElement(): HTMLElement | undefined {
- return undefined;
- }
-
- /**
- * 移动控件后事件：在可视化设计器中，将现有的控件移动到容器中
- * @param element 移动的源DOM结构
- */
- function onAcceptMovedChildElement(element: DesignerHTMLElement, sourceContainer?: DesignerHTMLElement) {
- if (!element || !sourceContainer) {
- return;
- }
- if (designerRules?.onAcceptMovedChildElement) {
- designerRules.onAcceptMovedChildElement(element, sourceContainer);
- }
- }
-
- function addNewChildComponentSchema(resolveContext: DraggingResolveContext) {
- const { componentType } = resolveContext;
- const designerHostServer = inject('designer-host-service') as DesignerHostService;
- let componentSchema = getSchemaByType(componentType, resolveContext, designerHostServer) as ComponentSchema;
- if (designerRules && designerRules.onResolveNewComponentSchema) {
- componentSchema = designerRules.onResolveNewComponentSchema(resolveContext, componentSchema);
- }
-
- const typePrefix = componentType.toLowerCase().replace(/-/g, '_');
- if (componentSchema && !componentSchema.id && componentSchema.type === componentType) {
- componentSchema.id = `${typePrefix}_${Math.random().toString().slice(2, 6)}`;
- }
- return componentSchema;
- }
-
- /**
- * 移动内部控件后事件：在可视化设计器中，将现有的控件移动到容器中
- * @param element 移动的源DOM结构
- */
- function onChildElementMovedOut(element: HTMLElement) {
-
- }
-
- /** 属性面板属性 */
- function getPropConfig(...args) {
- if (designerRules && designerRules.getPropsConfig) {
- return designerRules.getPropsConfig(...args);
- }
- return [];
- }
- function onRemoveComponent() {
-
- }
- /**
- * 控件属性变更后事件
- */
- function onPropertyChanged(event: any) {
- if (designerRules && designerRules.onPropertyChanged) {
- return designerRules.onPropertyChanged(event);
- }
- }
- componentInstance.value = {
- canMove: checkCanMoveComponent(),
- canSelectParent: checkCanSelectParentComponent(),
- canAdd: checkCanAddComponent(),
- canDelete: checkCanDeleteComponent(),
- canNested: !hideNestedPaddingInDesginerView(),
- contents: [],
- elementRef,
- parent: designItemContext.parent?.componentInstance,
- schema: designItemContext.schema,
- styles,
- canAccepts,
- getBelongedComponentInstance,
- getDraggableDesignItemElement,
- getDraggingDisplayText,
- getPropConfig,
- getDragScopeElement,
- onAcceptMovedChildElement,
- onChildElementMovedOut,
- addNewChildComponentSchema,
- onRemoveComponent,
- triggerBelongedComponentToMoveWhenMoved: !!designerRules && designerRules.triggerBelongedComponentToMoveWhenMoved || ref(false),
- triggerBelongedComponentToDeleteWhenDeleted: !!designerRules && designerRules.triggerBelongedComponentToDeleteWhenDeleted || ref(false),
- onPropertyChanged
- } as DesignerComponentInstance;
-
- return componentInstance as Ref;
-
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/use-dragula.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/use-dragula.ts
deleted file mode 100644
index 1b8b01052bc27ae976cbb2ac0d1ab8ed2e1b9c21..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/use-dragula.ts
+++ /dev/null
@@ -1,358 +0,0 @@
-import dragula from '@farris/designer-dragula';
-import { DesignerHostService, DesignerHTMLElement, DraggingResolveContext, UseDragula } from '../types';
-import { findIndex } from 'lodash-es';
-import { ref } from 'vue';
-import { canvasChanged } from '../designer-canvas-changed';
-import { ComponentSchema } from '../../types';
-import { dragResolveService } from './drag-resolve';
-
-export function useDragula(designerHostService: DesignerHostService): UseDragula {
-
- let dragulaInstance: any;
-
- /**
- * 判断是否可以接收拖拽的新控件
- * @param el 拖拽的新控件元素
- * @param target 目标位置
- * @returns boolean
- */
- function checkCanAcceptDrops(
- element: DesignerHTMLElement,
- target: DesignerHTMLElement,
- sourceContainer: DesignerHTMLElement
- ): boolean {
- if (!!element.contains(target) || target.classList.contains('no-drop')) {
- return false;
- }
- const result = true;
- if (element.componentInstance && element.componentInstance.value.getDragScopeElement) {
- const dragScopEle = element.componentInstance.value.getDragScopeElement();
- if (dragScopEle) {
- if (!dragScopEle.contains(target)) {
- return false;
- }
- }
- }
- if (target.componentInstance && target.componentInstance.value.canAccepts) {
- const dragResolveUtil = dragResolveService(designerHostService);
- const draggingContext = dragResolveUtil.getComponentResolveContext(element, sourceContainer, target);
-
- return target.componentInstance.value.canAccepts(draggingContext);
- }
- return result;
- }
-
- /**
- * 判断DOM 是否在可视区域内
- * @param el 元素
- * @param containerEl 容器
- */
- function isElementInViewport(element: HTMLElement, sourceContainer: HTMLElement) {
- const container = sourceContainer.getBoundingClientRect();
- const box = element.getBoundingClientRect();
- const top = box.top >= container.top;
- const bottom = box.top < container.bottom;
- return (top && bottom);
- }
-
- /**
- * 拖拽过程若中产生了页面的上下滚动，需要将已选控件的操作按钮上下移动相等的距离。
- * @param formElement 滚动父容器
- * @param scrollDirection 滚动方向
- * @param scrollHeight 滚动距离
- */
- function scrollInDragging(formElement: HTMLElement, scrollHeight: number) {
- const selectedDom = formElement.querySelector('.dgComponentSelected') as HTMLElement;
- if (!selectedDom || scrollHeight === 0) {
- return;
- }
- if (isElementInViewport(selectedDom, formElement)) {
- const toolbar = selectedDom.querySelector('.component-btn-group');
- if (toolbar) {
- const divPanel = toolbar.querySelector('div');
- if (divPanel && divPanel.style.top) {
- const top = Number.parseFloat(divPanel.style.top);
- divPanel.style.top = (top - scrollHeight) + 'px';
- }
- }
- }
- }
-
- /**
- * 将新控件json添加到新容器schema json中
- * @param target 目标容器元素
- * @param sourceControlSchema 新控件的JSON schema结构
- * @param sibling 目标位置的下一个同级元素
- */
- function addNewControlToTarget(
- target: DesignerHTMLElement,
- sourceControlSchema: ComponentSchema | null,
- sibling: DesignerHTMLElement
- ): number {
- let index = -1;
- if (!sourceControlSchema) {
- return -1;
- }
- if (target.componentInstance.value.contents) {
- if (sibling && sibling.componentInstance) {
- if (!sibling.getAttribute('data-noattach')) {
- // 定位目标位置
- const siblingComponentSchema = sibling.componentInstance.value.schema;
- let locatePredicate: any = { id: siblingComponentSchema.id };
- if (siblingComponentSchema.type === 'component') {
- locatePredicate = { component: siblingComponentSchema.id };
- }
-
- index = findIndex(target.componentInstance.value.contents, locatePredicate);
- index = (index === -1) ? 0 : index;
- } else {
- index = Number(sibling.getAttribute('data-position'));
- }
- if (index !== -1) {
- target.componentInstance.value.contents.splice(index, 0, sourceControlSchema);
- }
- } else {
- target.componentInstance.value.contents.push(sourceControlSchema);
- }
- }
- return index;
- }
-
- /**
- * 从控件工具箱中拖拽新建控件
- * @param element 拖拽的元素
- * @param target 目标容器元素
- * @param source 原容器元素
- * @param sibling 目标位置的下一个同级元素
- */
- function createControlFromOutside(
- element: DesignerHTMLElement,
- target: DesignerHTMLElement,
- source: DesignerHTMLElement,
- sibling: DesignerHTMLElement
- ) {
- const dragResolveUtil = dragResolveService(designerHostService);
- dragResolveUtil.resolveComponentCreationContextByDrop(element, source, target).then(componentResolveContext => {
- if (!componentResolveContext) {
- return;
- }
- const sourceControlSchema = componentResolveContext.componentSchema;
- if (sourceControlSchema) {
- addNewControlToTarget(target, sourceControlSchema, sibling);
- }
- });
- // 移除拷贝生成的源DOM
- if (target.contains(element)) {
- target.removeChild(element);
- }
- }
- /**
- * 在现有的表单中拖拽移动控件位置
- * @param element 拖拽的元素
- * @param target 目标容器元素
- * @param source 源容器元素
- * @param sibling 目标位置的下一个同级元素
- */
- function dragBetweenCurrentForm(
- element: DesignerHTMLElement,
- target: DesignerHTMLElement,
- source: DesignerHTMLElement,
- sibling: DesignerHTMLElement
- ) {
- let sourceControlSchema;
- let index = -1;
- // Form、DataGrid等控件在拖拽时，需要连同所属Component一起拖拽。
- if (element.componentInstance && element.componentInstance.value.triggerBelongedComponentToMoveWhenMoved) {
- const cmpInstance = element.componentInstance.value.getBelongedComponentInstance(element.componentInstance);
- if (cmpInstance) {
- // 将拖拽元素替换为所属Component
- element = ref(cmpInstance.elementRef).value.parentElement as DesignerHTMLElement;
- // 将源容器元素替换为所属Component的父级元素
- source = element.parentElement as DesignerHTMLElement;
- }
-
- }
- const elementComponentSchema = element.componentInstance && element.componentInstance.value.schema;
-
- let locatePredicate: any = { id: elementComponentSchema && elementComponentSchema.id };
- if (elementComponentSchema.type === 'component') {
- locatePredicate = { component: elementComponentSchema && elementComponentSchema.id };
- }
-
- index = findIndex(source.componentInstance.value.contents, locatePredicate);
-
- // 从源容器schema json中移除
- if (index !== -1 && source.componentInstance.value.contents) {
- sourceControlSchema = source.componentInstance.value.contents.splice(index, 1);
- sourceControlSchema = sourceControlSchema[0];
- }
-
- addNewControlToTarget(target, sourceControlSchema as ComponentSchema, sibling);
-
- // 源容器的控件被移除掉
- if (source.componentInstance && source.componentInstance.value.onChildElementMovedOut) {
- source.componentInstance.value.onChildElementMovedOut(element);
- }
-
- // 目标容器接收新控件
- if (target.componentInstance && target.componentInstance.value.onAcceptMovedChildElement) {
- target.componentInstance.value.onAcceptMovedChildElement(element, source);
- }
- }
-
- /**
- * 拖拽结束
- * @param element 拖拽的元素
- * @param target 目标容器元素
- * @param source 原容器元素
- * @param sibling 目标位置的下一个同级元素
- */
- function onDrop(element: DesignerHTMLElement, target: DesignerHTMLElement, source: DesignerHTMLElement, sibling: DesignerHTMLElement) {
- if (!target) {
- return;
- }
- if (element.contains(target)) {
- return;
- }
- const sourceType = element.getAttribute('data-sourceType');
-
- switch (sourceType) {
- case 'control': case 'field': case 'entity': {
- createControlFromOutside(element, target, source, sibling);
- break;
- }
- default: {
- if (source.componentInstance.value.contents) {
- dragBetweenCurrentForm(element, target, source, sibling);
- } else {
- // 移除拷贝生成的源DOM
- if (target.contains(element)) {
- target.removeChild(element);
- }
- }
- }
- }
- canvasChanged.value++;
-
- }
-
- function initializeDragula(containerElement: DesignerHTMLElement) {
- if (dragulaInstance) {
- dragulaInstance.destroy();
- }
-
- if (!dragula) {
- return;
- }
-
- dragulaInstance = dragula([], {
- // 镜像容器
- mirrorContainer: containerElement,
- direction: 'mixed',
- revertOnSpill: true,
- // 判断是否可移动
- moves(element: DesignerHTMLElement, container: DesignerHTMLElement, handle: DesignerHTMLElement): boolean {
- let moves = true;
-
- // 包含no-drag样式的元素不允许拖动
- if (element.classList.contains('no-drag')) {
- moves = false;
- }
- // 为防止误操作，可视化区域的控件只能通过移动图标来拖拽
- if (element.componentInstance) {
- moves = !!handle.getAttribute('data-dragging-icon');
- }
- return moves;
- },
- // 判断是否可拷贝
- copy(element: HTMLElement): boolean {
- // 工具箱里的div需要配置drag-copy
- return element.classList.contains('drag-copy');
- },
- // 获取镜像元素的文本内容
- getMirrorText(element: DesignerHTMLElement): string {
- if (element.componentInstance && element.componentInstance.value.getDraggingDisplayText) {
- return element.componentInstance.value.getDraggingDisplayText();
- }
- return element.innerText || '控件';
- },
- // 判断目标区域是否可接收拖拽的控件
- accepts(element: DesignerHTMLElement, target: DesignerHTMLElement, source: DesignerHTMLElement): boolean {
- const canAccept = checkCanAcceptDrops(element, target, source);
- const guMirrotElement = containerElement.lastElementChild as Element;
- if (canAccept) {
- guMirrotElement.className = guMirrotElement.className.replace('undroppable', '');
- } else if (!guMirrotElement.className.includes('undroppable')) {
- guMirrotElement.className += ' undroppable';
- }
- return canAccept;
- }
- }).on('over', (el: DesignerHTMLElement, container: DesignerHTMLElement) => {
- container.className += ' drag-over';
- }).on('out', (el: DesignerHTMLElement, container: DesignerHTMLElement) => {
- container.className = container.className.replace('drag-over', '').replace(' ', '');
- }).on('drop', (
- element: DesignerHTMLElement, target: DesignerHTMLElement, source: DesignerHTMLElement, sibling: DesignerHTMLElement
- ) => {
- onDrop(element, target, source, sibling);
- }).on('dragend', (element: HTMLElement, scrollHeight: number) => {
- scrollInDragging(element, scrollHeight);
- });
- }
-
- /**
- * 子组件JSON结构和当前组件的实例添加到DOM中并注册拖拽容器。节点class= 'builder-components...'
- * @param element dom元素
- * @param childrenComponents 容器内的子组件实例集合
- * @param childrenContents 子组件JSON schema集合
- * @param component 容器组件实例
- * @returns 容器类组件的子组件集合
- */
- function attachComponents(element: HTMLElement, component: Record) {
-
- // don't attach if no element was found or component doesn't participate in drag'n'drop.
- if (!element) {
- return;
- }
- if (component.noDragDrop) {
- return element;
- }
- // 获取容器中的子组件集合节点
- const containerElement: HTMLElement = element.querySelector(`[data-dragref='${component.id}-container']`) || element;
-
- // 将容器添加到拖拽列表中，dragula控件会监听容器中元素的拖动事件
- if (dragulaInstance && containerElement) {
- // containerElement 为页面中的容器节点的builder-components层级
- dragulaInstance.containers.push(containerElement);
- }
- }
-
- /**
- * 将工具箱各容器添加到dragula的拖拽列表中
- */
- function attachToolbox() {
- if (!dragulaInstance) {
- return;
- }
- const controlPanels = document.getElementsByClassName('controlCategory');
- if (!controlPanels) {
- return;
- }
-
- dragulaInstance.containers = dragulaInstance.containers.filter(
- (element: HTMLElement) => !element.className.includes('controlCategory')
- );
-
- Array.from(controlPanels).forEach((panelElement) => {
- dragulaInstance.containers.push(panelElement);
- });
-
- }
-
- function getDragulaInstance() {
- return dragulaInstance;
- }
-
- return { attachComponents, initializeDragula,getDragulaInstance };
-
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-canvas.props.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-canvas.props.ts
deleted file mode 100644
index e07d95a7ac998de22c81ccbd545eb0443f2ada7e..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-canvas.props.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ExtractPropTypes } from 'vue';
-
-export const designerCanvasProps = {
- /**
- * 组件值
- */
- modelValue: { type: Object, default: {} },
- componentId: { type: String, default: '' },
- components: { type: Array, default: null },
-
-} as Record;
-
-export type DesignerCanvasPropsType = ExtractPropTypes;
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-inner-item.props.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-inner-item.props.ts
deleted file mode 100644
index 9c449ec8854f48ad5dc61f0a6dbfcb9ec2a0dfd2..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-inner-item.props.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ExtractPropTypes } from "vue";
-
-export const designerInnerItemProps = {
- id: { type: String, default: '' },
- componentId: { type: String, default: '' },
- canAdd: { type: Boolean, default: false },
- canDelete: { type: Boolean, default: false },
- canMove: { type: Boolean, default: false },
- contentKey: { type: String, default: 'contents' },
- childLabel: { type: String, default: '' },
- childType: { type: String, default: '' },
- /**
- * 组件值
- */
- modelValue: { type: Object },
-} as Record;
-
-export type DesignerInnerItemPropsType = ExtractPropTypes;
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-item.props.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-item.props.ts
deleted file mode 100644
index a674600f00b8102af205824a112d4e6dc8db5238..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-item.props.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ExtractPropTypes } from "vue";
-
-export const designerItemProps = {
- id: { type: String, default: '' },
- componentId: { type: String, default: '' },
- type: { type: String, default: '' },
- canDelete: { type: Boolean, default: true },
- canMove: { type: Boolean, default: true },
- canSelectParent: { type: Boolean, default: true },
- customButtons: { type: Array, default: [] },
- customClass: { type: String, default: '' },
- customStyle: { type: String, default: '' },
- /**
- * 组件值
- */
- modelValue: { type: Object },
- ignore: { type: Boolean, default: false }
-} as Record;
-
-export type DesignerItemPropsType = ExtractPropTypes;
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-placeholder.props.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-placeholder.props.ts
deleted file mode 100644
index 3bde9b168af28b319722ce0dc732bcf312a9455b..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/props/designer-placeholder.props.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ExtractPropTypes } from "vue";
-
-export const designerPlaceholderProps = {
- id: { type: String }
-};
-
-export type DesignerPlaceholderPropsType = ExtractPropTypes;
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/drag-drop-rules.schema.json b/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/drag-drop-rules.schema.json
deleted file mode 100644
index f524134d361ffe176334dc26ae2eb8e6a665c0cf..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/drag-drop-rules.schema.json
+++ /dev/null
@@ -1,646 +0,0 @@
-{
- "$schema": "https://json-schema.org/draft/2020-12/schema",
- "$id": "https://farris-design.gitee.io/dragging-rules.schema.json",
- "title": "Dragging Rules",
- "description": "The rules of designer canvas",
- "type": "object",
- "properties": {
- "f-page": {
- "description": "The root class of page designed by farris.",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-page-header": {
- "description": "The class of page header designed by farris.",
- "type": "string"
- },
- "f-page-main": {
- "description": "The class of page body designed by farris.",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-struct-like-card": {
- "description": "",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-struct-form": {
- "description": "The class of form component which has a hierarchical structure of component -> section -> respnse-form.",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-section-form": {
- "description": "The class of section which has wrapped a reponse-form component.",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-form-layout": {
- "description": "The class of reponse form",
- "type": "object",
- "properties": {
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": true
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": false
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": false
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- },
- "f-struct-wrapper": {
- "description": "",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-section-tabs": {
- "description": "The class of section which has wrapped sub-grid tabs.",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-tabs-in-card": {
- "description": "The class of tabs which contains sub-grid.",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-struct-data-grid-in-card": {
- "description": "The class of sub-grid component",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-grid-is-sub": {
- "description": "The class of sub-grid",
- "type": "object",
- "properties": {
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": true
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": false
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": false
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- },
- "f-section-in-main": {
- "description": "The class of section which has wrapped a reponse-form component.",
- "type": "object",
- "properties": {
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": true
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": false
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": false
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": true
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "object",
- "const": {
- "allOf": [
- {
- "sibling": 0,
- "parent": {
- "f-page-main": true
- }
- }
- ]
- }
- }
- }
- }
- }
- },
- "f-struct-data-grid": {
- "description": "",
- "type": "object",
- "properties": {
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "object",
- "const": true
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- },
- "f-page-main-content": {
- "description": "",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-page-content-nav": {
- "description": "",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-struct-data-grid-in-nav": {
- "description": "",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-page-content-nav-extend": {
- "description": "",
- "type": "object"
- },
- "f-section-in-nav": {
- "description": "",
- "type": "object",
- "properties": {
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": false
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": true
- },
- "fixed": {
- "type": "boolean",
- "const": false
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- }
- }
- },
- "f-page-content-main": {
- "description": "",
- "type": "object",
- "properties": {}
- }
- }
- }
- }
- },
- "f-page-content": {
- "description": "",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-page-content-nav": {
- "description": "",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-list-nav": {
- "description": "",
- "type": "object"
- },
- "f-list-nav-left": {
- "description": "",
- "type": "object"
- },
- "f-struct-data-grid-in-nav": {
- "description": "",
- "type": "object",
- "properties": {
- "contents": {
- "type": "object",
- "properties": {
- "f-section-form": {
- "description": "",
- "type": "object",
- "properties": {
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- },
- "f-section-grid": {
- "description": "",
- "type": "object",
- "properties": {
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- },
- "f-page-content-main": {
- "description": "",
- "type": "object",
- "properties": {
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": false
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "object",
- "const": {
- "anyOf": [
- {
- "children": 0
- },
- {
- "children": {
- "length": {
- "not": 1
- },
- "f-struct-like-card": true
- }
- },
- {
- "children": {
- "scroll-spy": false,
- "f-page-content": false,
- "f-struct-like-card": false
- }
- }
- ]
- }
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- },
- "f-page-footer": {
- "description": "The class of page footer designed by farris.",
- "type": "string"
- }
- }
- },
- "rules": {
- "type": "object",
- "properties": {
- "canAccept": {
- "type": "boolean",
- "const": false
- },
- "fixed": {
- "type": "boolean",
- "const": true
- },
- "hidePadding": {
- "type": "boolean",
- "const": true
- }
- }
- }
- }
- },
- "f-page-is-managelist": {
- "description": "The root class of mangement list page.",
- "type": "string"
- },
- "f-page-card": {
- "description": "",
- "type": "object"
- },
- "f-page-is-mainsubcard": {
- "description": "",
- "type": "object"
- }
- }
-}
\ No newline at end of file
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-drag-drop-rules.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-drag-drop-rules.ts
deleted file mode 100644
index 7af83dea3ad9450ebf4e74b64c2708c7d6335e03..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-drag-drop-rules.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-import dragAndDropRules from './drag-drop-rules.schema.json';
-
-interface DragDropRule {
- canAccept: boolean;
- fixed: boolean;
- hidePadding: boolean;
- [index: string]: boolean;
-}
-
-interface Expression {
- target: string;
- operator: string;
- param: any;
- value: any;
-}
-
-interface DragAndDropContext {
- children: any;
- parent: any;
- slibing: any;
- [index: string]: any;
-}
-
-export type CalculateFunction = (target: string, param: any, value: any, context: DragAndDropContext) => boolean;
-
-export type RuleFunction = (context: DragAndDropContext) => DragDropRule;
-
-export interface UseDragAndDropRule {
- getRuleValue: (componentToken: string, context: DragAndDropContext) => DragDropRule;
-}
-
-const ruleMap = new Map();
-
-export function useDragAndDropRules(): UseDragAndDropRule {
-
- function judgingElementCount(target: string, param: any, value: any, context: DragAndDropContext) {
- if (typeof value === 'number') {
- return context[target]?.length === value;
- }
- if (typeof value === 'object') {
- const compare = Object.keys(value)[0];
- const targetValue = value[compare];
- if (compare === 'not') {
- return Number(context[target].length) !== Number(targetValue);
- }
- if (compare === 'moreThan') {
- return Number(context[target].length) >= Number(targetValue);
- }
- if (compare === 'lessThan') {
- return Number(context[target].length) <= Number(targetValue);
- }
- }
- return false;
- }
-
- function hasChildren(target: string, param: any, value: any, context: DragAndDropContext) {
- if (typeof value === 'boolean') {
- return context.childrenClassList.includes(param) === Boolean(value);
- }
- return false;
- }
-
- function hasParent(target: string, param: any, value: any, context: DragAndDropContext) {
- if (typeof value === 'boolean') {
- return context.parentClassList.includes(param) === Boolean(value);
- }
- return false;
- }
-
- function hasSibling(target: string, param: any, value: any, context: DragAndDropContext) {
- if (typeof value === 'boolean') {
- return context.parentClassList.includes(param) === Boolean(value);
- }
- return false;
- }
-
- const expressionCalculateFunctions = new Map([
- ['length', judgingElementCount],
- ['hasChildren', hasChildren],
- ['hasSibling', hasSibling],
- ['hasParent', hasParent]
- ]);
-
- function parseExpression(token: string, expression: Record): Expression[] {
- const target = token;
- if (typeof expression === 'number') {
- return [{ target, operator: 'length', param: null, value: Number(expression) }];
- }
- if (typeof expression === 'object') {
- return Object.keys(expression).map((key: string) => {
- if (key === 'length') {
- return { target, operator: 'length', param: null, value: expression[key] };
- }
- const param = key;
- const value = expression[key];
- const operator = token === 'children' ? 'hasChildren' : (token === 'parent' ? 'hasParent' : 'hasSibling');
- return { target, operator, param, value };
- });
- }
- return [];
- }
-
- function calculateExpression(expression: Expression, context: DragAndDropContext) {
- if (expressionCalculateFunctions.has(expression.operator)) {
- const calculateFunction = expressionCalculateFunctions.get(expression.operator);
- return calculateFunction && calculateFunction(expression.target, expression.param, expression.value, context) || false;
- }
- return false;
- }
-
- function calculate(expression: Record, context: DragAndDropContext): boolean {
- const expressionTokens = Object.keys(expression);
-
- const parsedExpression = expressionTokens.reduce((expressions: Expression[], token: string) => {
- const result = parseExpression(token, expression[token]);
- expressions.push(...result);
- return expressions;
- }, []);
- const result = parsedExpression.reduce((parsingResult: boolean, expression: Expression) => {
- return parsingResult && calculateExpression(expression, context);
- }, true);
-
- return result;
- }
-
- function parseValueSchema(valueSchema: Record, context: DragAndDropContext): boolean {
- const schemaKeys = Object.keys(valueSchema);
- const allOf = schemaKeys.includes('allOf');
- const anyOf = schemaKeys.includes('anyOf');
- const hasLogicalOperatorsInSchemaKey = allOf || anyOf;
- const logicalOperator = hasLogicalOperatorsInSchemaKey ? (allOf ? 'allOf' : 'anyOf') : 'allOf';
- const expressions = (hasLogicalOperatorsInSchemaKey ? valueSchema[logicalOperator] : [valueSchema]) as Record[];
- const expressionValues = expressions.map((expression: Record) => calculate(expression, context));
- const result = allOf ? !expressionValues.includes(false) : expressionValues.includes(true);
- return result;
- }
-
- function resolveRuleValue(ruleValueSchema: Record, context: DragAndDropContext): boolean {
- const valueSchema = ruleValueSchema.const;
- if (!valueSchema) {
- return false;
- }
- if (typeof valueSchema === 'boolean') {
- return valueSchema;
- }
- if (typeof valueSchema === 'object') {
- return parseValueSchema(valueSchema, context);
- }
- return false;
- }
-
- function generateRuleFunction(rulesSchema: Record): RuleFunction {
- return (context: DragAndDropContext) => {
- const rulesInstance = { canAccept: true, fixed: false, hidePadding: false } as DragDropRule;
- rulesSchema && rulesSchema.properties &&
- Object.keys(rulesSchema.properties).reduce((compoentRulesMap: DragDropRule, ruleItemKey: string) => {
- const ruleItemSchema = rulesSchema.properties[ruleItemKey];
- compoentRulesMap[ruleItemKey] = resolveRuleValue(ruleItemSchema, context);
- return compoentRulesMap;
- }, rulesInstance);
- return rulesInstance;
- };
- }
-
- function resolveComponentRule(componentToken: string, componentSchema: Record, ruleMap: Map) {
- if (componentSchema.type === 'object' && componentSchema.properties) {
- const { rules: rulesSchema, contents } = componentSchema.properties;
- ruleMap.set(componentToken, generateRuleFunction(rulesSchema));
- if (contents) {
- Object.keys(contents.properties).forEach((subComponentToken: string) =>
- resolveComponentRule(subComponentToken, contents.properties[subComponentToken], ruleMap)
- );
- }
- }
- }
-
- function resolveRuleSchema() {
- const { properties: componentsSchema } = dragAndDropRules as Record;
- Object.keys(componentsSchema).forEach((componentToken: string) => {
- resolveComponentRule(componentToken, componentsSchema[componentToken], ruleMap);
- });
- }
-
- function getRuleValue(componentToken: string, context: DragAndDropContext): DragDropRule {
- const rulesInstance = { canAccept: true, fixed: false, hidePadding: true } as DragDropRule;
- if (ruleMap.has(componentToken)) {
- const ruleFuntions = ruleMap.get(componentToken) as RuleFunction;
- return ruleFuntions(context);
- }
- return rulesInstance;
- }
-
- resolveRuleSchema();
-
- return { getRuleValue };
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-dragula-common-rule.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-dragula-common-rule.ts
deleted file mode 100644
index 7f6131d69135a84bbe457b8f63572c3598340a36..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-dragula-common-rule.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { DgControl } from "../dg-control";
-import { DesignerHostService, DraggingResolveContext } from "../types";
-
-export function useDragulaCommonRule() {
-
- /**
- * 容器类控件的基础控制规则
- */
- function basalDragulaRuleForContainer(draggingContext: DraggingResolveContext, designerHostService?: DesignerHostService): boolean {
- if (!draggingContext) {
- return false;
- }
-
- /** 目标容器的组件实例 */
- const targetCmpInstance = draggingContext.targetContainer?.componentInstance &&
- draggingContext.targetContainer.componentInstance.value;
-
- if (!targetCmpInstance) {
- return false;
- }
- const targetContainerType = targetCmpInstance.schema.type;
- const belongedComponent = designerHostService?.formSchemaUtils.getComponentById(targetCmpInstance.belongedComponentId);
-
- // 限制输入类控件的可接收容器
- if (draggingContext.componentCategory === 'input' || draggingContext.componentType === 'form-group') {
- if (![DgControl['response-layout-item'].type, DgControl['response-form'].type].includes(targetContainerType)) {
- return false;
- }
- }
-
- // 限制标签页区域、分组面板的可接收容器
- if (draggingContext.componentType === DgControl.tabs.type || draggingContext.componentType === DgControl.section.type) {
- const belongedComponentType = belongedComponent?.componentType;
- if (belongedComponentType !== 'frame') {
- return false;
- }
- if (![DgControl['content-container'].type, DgControl['splitter-pane'].type, DgControl['response-layout-item'].type].includes(targetContainerType)) {
- return false;
- }
- }
- // 限制筛选方案
- if (draggingContext.componentType === DgControl['query-solution'].type) {
- return false;
- }
- return true;
- }
-
- return {
- basalDragulaRuleForContainer
- };
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-template-rule.ts b/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-template-rule.ts
deleted file mode 100644
index 93c1c87835d2f8ac2f0d07ad33aa969e4d5f06b7..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/rule/use-template-rule.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { DesignerItemContext } from "../../types";
-import { DesignerHostService } from "../types";
-
-export interface DragDropRule {
- canAccept: boolean;
- canMove: boolean;
- canDelete: boolean;
- [index: string]: boolean;
-}
-
-/**
- * 解析模板拖拽控制规则
- */
-export class UseTemplateDragAndDropRules {
- public getTemplateRule(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): DragDropRule {
-
- const formSchemaUtils = designerHostService?.formSchemaUtils;
- const dragTemplateRules = formSchemaUtils?.getFormTemplateRule();
- const dragDropRule = { canAccept: true, canDelete: true, canMove: true };
- if (!dragTemplateRules) {
- return dragDropRule;
- }
- const componentContext = this.getComponentContext(designItemContext);
- const { componentClassList } = componentContext;
-
- componentClassList.forEach(componentClass => {
- if (!componentClass || !dragTemplateRules[componentClass]) {
- return;
- }
-
- const { canMove: moveRule, canDelete: deleteRule, canAccept: acceptRule } = dragTemplateRules[componentClass];
- dragDropRule.canMove = dragDropRule.canMove && this.resolveRuleValue(moveRule, componentContext);
- dragDropRule.canDelete = dragDropRule.canDelete && this.resolveRuleValue(deleteRule, componentContext);
- dragDropRule.canAccept = dragDropRule.canAccept && this.resolveRuleValue(acceptRule, componentContext);
- });
-
- return dragDropRule;
- }
-
- private resolveRuleValue(ruleSchema: any, componentContext: any): boolean {
-
- if (typeof ruleSchema === 'boolean') {
- return ruleSchema;
- } else {
- return this.parseRuleValueSchema(ruleSchema, componentContext);
- }
- }
-
- private parseRuleValueSchema(ruleSchema: any, componentContext: any) {
- const invalidContext = ruleSchema.invalidContext || [];
- let isMatched = true;
- for (const ruleContext of invalidContext) {
-
- // 判断子级节点是否匹配
- if (ruleContext.firstLevelChild) {
- if (ruleContext.firstLevelChild.class) {
- const { firstLevelChildClassList } = componentContext;
- if (firstLevelChildClassList && !firstLevelChildClassList.includes(ruleContext.firstLevelChild.class)) {
- isMatched = false;
- continue;
- }
- }
- if (ruleContext.firstLevelChild.type) {
- const { firstLevelChildSchema } = componentContext;
- if (!firstLevelChildSchema || firstLevelChildSchema.type !== ruleContext.firstLevelChild.type) {
- isMatched = false;
- continue;
- }
- }
-
- }
- // 判断孙子节点是否匹配
- if (ruleContext.secondLevelChild) {
- if (ruleContext.secondLevelChild.class) {
- const { secondLevelChildClassList } = componentContext;
- if (secondLevelChildClassList && !secondLevelChildClassList.includes(ruleContext.secondLevelChild.class)) {
- isMatched = false;
- continue;
- }
- }
- if (ruleContext.secondLevelChild.type) {
- const { secondLevelChildSchema } = componentContext;
- if (!secondLevelChildSchema || secondLevelChildSchema.type !== ruleContext.secondLevelChild.type) {
- isMatched = false;
- continue;
- }
- }
-
- }
- // 判断父级节点是否匹配
- if (ruleContext.parent) {
- if (ruleContext.parent.class) {
- const { parentClassList } = componentContext;
- if (parentClassList && !parentClassList.includes(ruleContext.parent.class)) {
- isMatched = false;
- continue;
- }
- }
- if (ruleContext.parent.type) {
- const { parentSchema } = componentContext;
- if (parentSchema && parentSchema.type !== ruleContext.parent.type) {
- isMatched = false;
- continue;
- }
- }
- }
- isMatched = true;
- break;
- }
- return !isMatched;
-
- }
- public getComponentContext(designItemContext: DesignerItemContext) {
- const component = designItemContext.schema;
-
- // 控件本身
- const componentClass = component.appearance && component.appearance.class || '';
- const componentClassList = componentClass.split(' ') || [];
-
- // 控件子级节点
- const childContents = component.contents || [];
- const firstLevelChildSchema = childContents.length ? childContents[0] : null;
- const firstLevelChildClass = firstLevelChildSchema && firstLevelChildSchema.appearance ? firstLevelChildSchema.appearance.class : '';
- const firstLevelChildClassList = firstLevelChildClass ? firstLevelChildClass.split(' ') : [];
-
- // 控件孙子级节点
- const secondLevelChildSchema = firstLevelChildSchema?.contents?.length ? firstLevelChildSchema?.contents[0] : null;
- const secondLevelChildClass = secondLevelChildSchema && secondLevelChildSchema.appearance ? secondLevelChildSchema.appearance.class : '';
- const secondLevelChildClassList = secondLevelChildClass ? secondLevelChildClass.split(' ') : [];
-
- // 控件父级节点
- const parentSchema = component.type === 'component' ? designItemContext.parent?.parent?.schema : designItemContext.parent?.schema;
- const parentClass = parentSchema && parentSchema.appearance && parentSchema.appearance.class || '';
- const parentClassList = parentClass ? parentClass.split(' ') : [];
-
- return {
- componentClass,
- componentClassList,
- childContents,
- firstLevelChildSchema,
- firstLevelChildClass,
- firstLevelChildClassList,
- secondLevelChildSchema,
- secondLevelChildClass,
- secondLevelChildClassList,
- parentSchema,
- parentClass,
- parentClassList
- };
- }
-}
diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/designer-canvas.component.tsx b/packages/mobile-ui-vue/components/designer-canvas/src/designer-canvas.component.tsx
deleted file mode 100644
index 841bb50d40135d43cc3f57444b00e860c5cee959..0000000000000000000000000000000000000000
--- a/packages/mobile-ui-vue/components/designer-canvas/src/designer-canvas.component.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-
-import { computed, defineComponent, inject, onMounted, onUnmounted, provide, ref, watch } from 'vue';
-import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from './types';
-import { canvasChanged, setPositionOfButtonGroup } from './composition/designer-canvas-changed';
-import { designerCanvasProps, DesignerCanvasPropsType } from './composition/props/designer-canvas.props';
-import { useDragula } from './composition/function/use-dragula';
-import { DesignerHostService, UseDragula } from './composition/types';
-import FDesignerItem from './components/designer-item.component';
-import './composition/class/designer-canvas.css';
-import './composition/class/control.css';
-import { loadDesignerRegister } from './components/maps';
-import { FM_MODAL_SERVICE_TOKEN } from '../../modal';
-import { FM_UI_PROVIDER_SERVICE_TOKEN } from '@/components/common';
-
-export default defineComponent({
- name: 'FDesignerCanvas',
- props: designerCanvasProps,
- emits: ['init', 'selectionChange', 'canvasChanged'],
- setup(props: DesignerCanvasPropsType, context) {
- const schema = ref();
- const componentSchema = ref();
- const designerCanvasElementRef = ref();
- const designerCanvasContainerElementRef = ref();
- const designerItemElementRef = ref();
- const componentInstance = ref();
- const componentId = ref(props.componentId);
- let resizeObserver: ResizeObserver | null;
- let resizeObserverTimer;
-
- const designerHostService = {
- eventsEditorUtils: inject('eventsEditorUtils'),
- formSchemaUtils: inject('useFormSchema'),
- formMetadataConverter: inject('formMetadataConverter'),
- designViewModelUtils: inject('designViewModelUtils'),
- controlCreatorUtils: inject('controlCreatorUtils'),
- metadataService: inject('Meatdata_Http_Service_Token'),
- schemaService: inject('schemaService'),
- useFormCommand: inject('useFormCommand'),
- modalService: inject(FM_MODAL_SERVICE_TOKEN),
- formStateMachineUtils: inject('useFormStateMachine'),
- uiProviderService: inject(FM_UI_PROVIDER_SERVICE_TOKEN),
-
- };
- provide('designer-host-service', designerHostService);
-
- const useDragulaComposition = useDragula(designerHostService);
- loadDesignerRegister();
-
- provide('canvas-dragula', useDragulaComposition);
- provide('design-item-context', {
- designerItemElementRef,
- componentInstance,
- schema: componentSchema.value,
- parent: undefined
- });
-
- const designerCanvasClass = computed(() => {
- const classObject = {
- 'd-flex': true,
- 'flex-fill': true,
- 'flex-column': true
- } as Record;
- return classObject;
- });
-
- /**
- * 用于在设计器里
- * @param designerItem
- */
- function updateDesignerItem(item: any, compId: string) {
- schema.value = item;
- componentId.value = compId;
- }
-
- watch(canvasChanged, () => {
- setPositionOfButtonGroup(designerCanvasElementRef.value);
-
- context.emit('canvasChanged');
- }, { flush: 'post' });
-
- /**
- * 监听画布尺寸变化，重新计算操作图标位置
- */
- function registerResizeListenner() {
- resizeObserver = new ResizeObserver(() => {
- if (resizeObserverTimer) {
- clearTimeout(resizeObserverTimer);
- }
-
- resizeObserverTimer = setTimeout(() => {
- setPositionOfButtonGroup(designerCanvasElementRef.value);
- });
- });
- resizeObserver.observe(designerCanvasElementRef.value);
- }
-
- function onSelectionChange(schemaType: string, schemaValue: ComponentSchema, cmpId: string, componentInst: DesignerComponentInstance) {
- context.emit('selectionChange', schemaType, schemaValue, cmpId, componentInst);
- }
-
- /**
- * 监听画布父容器横向滚动条的滚动，重新计算操作图标位置
- */
- function registerEditorPanelScrollEvent() {
- designerCanvasContainerElementRef.value.addEventListener('scroll', (e) => {
- setPositionOfButtonGroup(designerCanvasElementRef.value);
- });
- }
- onMounted(() => {
- if (designerCanvasElementRef.value) {
- useDragulaComposition.initializeDragula(designerCanvasElementRef.value);
- }
- schema.value = props.modelValue;
- context.emit('init', useDragulaComposition);
- registerResizeListenner();
- registerEditorPanelScrollEvent();
- });
-
- onUnmounted(() => {
- if (resizeObserver) {
- resizeObserver.unobserve(designerCanvasElementRef.value);
- resizeObserver.disconnect();
- resizeObserver = null;
- }
- });
-
- context.expose({
- updateDesignerItem
- });
-
- return () => {
- return (
-
-
-
- {schema.value && }
-
-
-
- {category.items.map((toolboxItem: any) => renderControlTile(toolboxItem, category))}
-
- );
- }
-
- function renderCategoryCard(category: ToolboxCategory) {
- return (
- !category.hideInControlBox && (
-
- {renderCategoryCardHeader(category)}
- {renderCategoryCardBody(category)}
-
- )
- );
- }
-
- /**
- * 将工具箱各容器添加到dragula的拖拽列表中
- */
- function attachToolboxToDragulaContainer(dragulaInstance: any) {
- if (!dragulaInstance) {
- return;
- }
- const controlPanels = document.getElementsByClassName('controlCategory');
- if (!controlPanels) {
- return;
- }
-
- dragulaInstance.containers = dragulaInstance.containers.filter(
- (element: HTMLElement) => !element.className.includes('controlCategory')
- );
-
- Array.from(controlPanels).forEach((panelElement) => {
- dragulaInstance.containers.push(panelElement);
- });
-
- }
-
- watch(
- () => props.dragula,
- (newValue: any) => {
- dragularCompostion.value = newValue;
- if (dragularCompostion.value?.getDragulaInstance) {
- attachToolboxToDragulaContainer(dragularCompostion.value?.getDragulaInstance());
- }
- }
- );
-
- return () => {
- return (
-
-
- {controlCategoryList.value.map((category: any) => {
- return renderCategoryCard(category);
- })}
-
-