comptree

src/modules/editor/components/CompUI/basicUI/Text/TextToolbar.tsx

@@ -13,7 +13,7 @@ import { Button, Divider } from "ant-design-vue";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
 
-import ToolbarsUI from "../../formItems/ToolbarsUI";
+import ToolbarsUI from "./TextToolbarUI";
 import {
   AlignComp,
   FontFamily,

src/modules/editor/components/CompUI/basicUI/Text/TextToolbarUI.tsx

@@ -0,0 +1,170 @@
+import { css, cx } from "@linaria/core";
+import { Tooltip } from "ant-design-vue";
+import _ from "lodash";
+import { computed, defineComponent } from "vue";
+import { any, array, bool, func } from "vue-types";
+
+export interface ColumnItem {
+  label?: string;
+  component?: ((...args: any[]) => any) | Record<string, any>;
+  dataIndex?: string;
+  setterIndex?: string;
+  props?: { [name: string]: any };
+  itemProps?: { [name: string]: any };
+  getValue?: (v: any, data?: any) => any;
+  isDisable?: (value: any, data: any) => boolean;
+  isLoading?: (value: any, data: any) => boolean;
+  isVisible?: (value: any, data: any) => boolean;
+  changeExtra?: (data: any) => any;
+  children?: ColumnItem[];
+}
+
+export default defineComponent({
+  props: {
+    columns: array<ColumnItem>().isRequired,
+    editor: any(),
+    data: any().isRequired,
+    disabled: bool(),
+    onChange: func(),
+    onChangeEnd: func(),
+  },
+  setup(props) {
+    return () => <FormUI {...props} />;
+  },
+});
+
+const FormUI = (props: {
+  columns: ColumnItem[];
+  data: any;
+  editor: any;
+  disabled?: boolean;
+  onChange?: (...arg: any) => void;
+  onChangeEnd?: (...arg: any) => void;
+}) => {
+  const { columns, ...restProps } = props;
+  return (
+    <>
+      {columns?.map((column: ColumnItem, index: number) => {
+        if (!column.dataIndex) {
+          return renderUI({ props: restProps, column, index });
+        }
+        return renderFormItem({ column, ...restProps, index });
+      })}
+    </>
+  );
+};
+
+const renderUI = ({ props, column, index }: any) => {
+  const component = column.component;
+  if (component instanceof Function) {
+    const params: any = {
+      ...props,
+      column,
+      key: index,
+      children: FormUI({ ...props, columns: column.children }),
+    };
+    return component(params);
+  } else {
+    return (
+      <component {...props} column={column} key={index}>
+        <FormUI {...props} columns={column.children} />
+      </component>
+    );
+  }
+};
+
+export const renderFormItem = (props: {
+  column: ColumnItem;
+  index?: number;
+  data: any;
+  editor: any;
+  disabled?: boolean;
+  onChange?: (...arg: any) => void;
+  onChangeEnd?: (...arg: any) => void;
+}) => {
+  const { column, data, index, onChange, onChangeEnd } = props;
+
+  // const compValue = computed(() => {
+  //   const { data, column } = props;
+  //   if (!column.dataIndex) return;
+  //   const itemValue = _.get(data, column.dataIndex);
+  //   return column.getValue ? column.getValue(itemValue) : itemValue;
+  // });
+
+  const editor = props.editor;
+  const compValue = editor ? editor.commands.get(column.dataIndex) : "";
+  // console.log(column.dataIndex, compValue.value);
+
+  // const compValue = computed(() => {
+  //   const { data, column } = props;
+  //   if (!column.dataIndex) return;
+  //   const itemValue = _.get(data, column.dataIndex);
+  //   return column.getValue ? column.getValue(itemValue, data) : itemValue;
+  // });
+
+  const changeVal = (value: any, ...args: any[]) => {
+    const { column } = props;
+    let params = {
+      dataIndex: column.dataIndex,
+      setterIndex: column.setterIndex,
+      value,
+      ...args,
+    };
+    if (column.changeExtra) params = column.changeExtra?.(params);
+    onChange?.(params);
+    return params;
+  };
+
+  const changeValEnd = (value: any, ...args: any[]) => {
+    const params = changeVal(value, ...args);
+    onChangeEnd?.(params);
+  };
+
+  // const isVisible = column.isVisible?.(compValue.value, data);
+  // if (column.isVisible && !isVisible) return null;
+
+  // const disabled = props.disabled || column.isDisable?.(compValue.value, data);
+
+  const component = column.component;
+
+  return (
+    <div
+      key={index}
+      class={formItemStyles}
+      {...column.itemProps}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {column.label ? (
+        <Tooltip title={column.label} placement="top">
+          <component
+            value={compValue.value}
+            {...column.props}
+            loading={column.isLoading?.(compValue.value, data)}
+            onChange={changeVal}
+            onChangeEnd={changeValEnd}
+          />
+        </Tooltip>
+      ) : (
+        <component
+          value={compValue.value}
+          {...column.props}
+          loading={column.isLoading?.(compValue.value, data)}
+          onChange={changeVal}
+          onChangeEnd={changeValEnd}
+        />
+      )}
+    </div>
+  );
+};
+
+const formItemStyles = css`
+  height: 100%;
+  margin: 0 6px;
+  &.disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export function useFormColumns(columns: ColumnItem[]) {
+  return columns;
+}

src/modules/editor/components/CompUI/formItems/ToolbarsUI.tsx

@@ -91,16 +91,16 @@ export const renderFormItem = (props: {
   //   return column.getValue ? column.getValue(itemValue) : itemValue;
   // });
 
-  const editor = props.editor;
-  const compValue = editor ? editor.commands.get(column.dataIndex) : "";
+  // const editor = props.editor;
+  // const compValue = editor ? editor.commands.get(column.dataIndex) : "";
   // console.log(column.dataIndex, compValue.value);
 
-  // const compValue = computed(() => {
-  //   const { data, column } = props;
-  //   if (!column.dataIndex) return;
-  //   const itemValue = _.get(data, column.dataIndex);
-  //   return column.getValue ? column.getValue(itemValue, data) : itemValue;
-  // });
+  const compValue = computed(() => {
+    const { data, column } = props;
+    if (!column.dataIndex) return;
+    const itemValue = _.get(data, column.dataIndex);
+    return column.getValue ? column.getValue(itemValue, data) : itemValue;
+  });
 
   const changeVal = (value: any, ...args: any[]) => {
     const { column } = props;

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -29,7 +29,7 @@ export const CompTree = defineComponent({
 
         function getCompChildren(ids: string[], revert = false): TreeItem[] {
           if (revert) ids = ids.reverse();
-          
+
           return ids.map((id) => {
             const comp = helper.findComp(id) as DesignComp;
             return {
@@ -39,7 +39,10 @@ export const CompTree = defineComponent({
                 compUICtrl.state.components.get(comp.compKey)?.name ||
                 "未命名",
               value: comp.id,
-              children: getCompChildren(comp.getChildIds(), true),
+              children: getCompChildren(
+                comp.getChildIds(),
+                comp.compKey == "Container" ? true : false
+              ),
             };
           });
         }
@@ -97,12 +100,30 @@ export const CompTree = defineComponent({
       actions.pickComp("");
       if (!info.dropToGap) {
         parentComp?.children.default == parentComp?.children.default || [];
-        parentComp?.children.default?.unshift(currComp?.id);
+        if (currComp.compKey == "Container") {
+          parentComp?.children.default?.unshift(currComp?.id);
+        } else {
+          parentComp?.children.default?.push(currComp?.id);
+        }
         if (currParent?.id != parentComp.id) {
           sortCompInCard(parentComp, 0);
         }
       } else {
-        parentComp?.children.default?.splice(info.dropPosition, 0, currComp.id);
+        if (currComp.compKey == "Container") {
+          parentComp?.children.default?.splice(
+            info.dropPosition,
+            0,
+            currComp.id
+          );
+        } else {
+          const len = parentComp?.children.default.length;
+          parentComp?.children.default?.splice(
+            len - info.dropPosition,
+            0,
+            currComp.id
+          );
+        }
+
         if (currParent?.id != parentComp.id) {
           sortCompInCard(parentComp, info.dropPosition);
         }