plain-design 1.0.0-beta.31 → 1.0.0-beta.32

package/src/packages/components/StackCard/index.tsx

@@ -0,0 +1,260 @@
+import {CSSProperties, designComponent, getComponentCls, iHTMLDivElement, isReact, mergeAttrs, onBeforeUnmount, onMounted, PropType, reactive, useClasses, useModel, useRefs} from "plain-design-composition";
+import './stack-card.scss';
+import {findReactElement} from "../../utils/findReactElement";
+import StackCardItem from "../StackCardItem";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {addElementListener} from "plain-utils/dom/addElementListener";
+import {delay} from "plain-utils/utils/delay";
+
+export const StackCard = designComponent({
+  name: 'stack-card',
+  props: {
+    modelValue: { type: [String, Number] },                                                         // 双向绑定值，当前显示哪一个子节点
+    leftBufferCount: { type: Number },                                                              // 左侧显示元素个数
+    rightBufferCount: { type: Number },                                                             // 右侧显示元素个数
+    stackItemWidth: { type: Number, default: 24 },                                                  // 每一张折叠卡片横向偏移距离
+    stackItemHeight: { type: Number, default: 12 },                                                 //每一张折叠卡片纵向向偏移距离
+    scaleRate: { type: Number, default: 0.1 },                                                      // 缩放比例
+    verticalOffset: { type: Boolean },                                                              // 开启纵向偏移
+    verticalAlign: { type: String as PropType<'top' | 'center' | 'bottom'>, default: 'center' },    // 纵向对齐方式
+  },
+  emits: {
+    onUpdateModelValue: (val?: string | number) => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, event: { emit } }) {
+
+    const { effects } = createEffects();
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement, container: iHTMLDivElement });
+
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: async () => {await utils.resetData();} });
+
+    const classes = useClasses(() => [
+      getComponentCls('stack-card'),
+      {
+        'stack-card-touching': draggier.draggierState.touching
+      }
+    ]);
+
+    const draggier = (() => {
+
+      const draggierState = reactive({ left: 0, touching: false, });
+
+      const touchstart = (e: TouchEvent | MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        let staticState = {
+          startLeft: draggierState.left,
+          startX: 'touches' in e ? e.touches[0].clientX : e.clientX,
+        };
+        const { effects: draggierEffects } = createEffects();
+
+        const touchmove = (e: TouchEvent | MouseEvent) => {
+          let durX = Math.ceil(('touches' in e ? e.touches[0].clientX : e.clientX) - staticState.startX);
+          if (!draggierState.touching) {
+            if (Math.abs(durX) > 10) {
+              draggierState.touching = true;
+              draggierEffects.push(() => {
+                draggierState.touching = false;
+                if (!!renderData) {
+                  /**
+                   * 设置滚动位置为最近的子节点
+                   * @author  韦胜健
+                   * @date    2024/1/4 21:12
+                   */
+                  const { closestItem, itemsList, itemValList } = renderData;
+                  draggierState.left = itemsList.find(i => i.index === closestItem.index)!.startLeft;
+                  const newVal = itemValList[closestItem.index];
+                  if (newVal != model.value) {model.value = newVal;}
+                }
+              });
+            }
+          }
+          if (!draggierState.touching) {return;}
+          /*实时设置滚动位置*/
+          durX = Math.ceil(durX / 3);
+          draggierState.left = -durX + staticState.startLeft;
+        };
+
+        draggierEffects.push(addElementListener(document.body, 'mousemove', touchmove));
+        draggierEffects.push(addElementListener(document.body, 'mouseup', draggierEffects.clear));
+        draggierEffects.push(addElementListener(document.body, 'touchmove', touchmove));
+        draggierEffects.push(addElementListener(document.body, 'touchend', draggierEffects.clear));
+      };
+
+      return { draggierState, touchstart };
+    })();
+
+    const utils = {
+      /**
+       * 重新计算当前渲染信息数据
+       * @author  韦胜健
+       * @date    2024/1/4 21:13
+       */
+      resetData: async () => {
+        await delay();
+        const activeIndex = model.value == null ? -1 : renderData.itemValList.indexOf(model.value);
+        if (activeIndex === -1) {return;}
+        const newItem = renderData.itemsList.find(i => i.index === activeIndex);
+        if (!!newItem) {
+          draggier.draggierState.left = renderData.itemsList.find(i => i.index === activeIndex)!.startLeft;
+        }
+      },
+    };
+
+    onMounted(() => {
+      refs.el!.addEventListener('touchstart', draggier.touchstart);
+      refs.el!.addEventListener('mousedown', draggier.touchstart);
+      utils.resetData();
+    });
+
+    onBeforeUnmount(effects.clear);
+
+    let renderData = {
+      /*子节点信息，listLeft为子节点相对于o位置的偏移量*/
+      itemsList: [] as { index: number, startLeft: number, endLeft: number }[],
+      /*子节点的val数组*/
+      itemValList: [] as (string | number)[],
+      /*子节点转换为循环列表的信息，distance为循环列表中元素距离选中元素的偏移量*/
+      listData: [] as { index: number, startLeft: number, endLeft: number, distance: number }[],
+      /*最靠近选中元素的节点数据*/
+      closestItem: {} as { index: number, startLeft: number, endLeft: number },
+    };
+
+    return () => {
+
+      const content = slots.default() as any;
+      /*从内容解析出来StackCardItem的数量及其props*/
+      const items: any[] = !content ? [] : findReactElement(content, (i: any) => i.type?.name === StackCardItem.name) || [];
+      const itemValList = items.map((i, index) => i.props?.val == null ? index : i.props?.val);
+      const total = items.length;
+
+      let leftBufferCount = props.leftBufferCount == null ? Math.ceil(total / 2) : props.leftBufferCount;
+      let rightBufferCount = props.rightBufferCount == null ? Math.ceil(total / 2) : props.rightBufferCount;
+
+      const elStyles = {} as CSSProperties;
+      elStyles.paddingLeft = `${(leftBufferCount) * props.stackItemWidth}px`;
+      elStyles.paddingRight = `${(rightBufferCount - 1) * props.stackItemWidth}px`;
+      if (!!props.verticalOffset) {
+        elStyles.paddingBottom = `${Math.max(leftBufferCount, rightBufferCount - 1) * props.stackItemHeight}px`;
+      }
+
+      let itemStyles: CSSProperties[] = [];
+
+      /*实际中拖拽的left距离，与item的startLeft匹配，item的startLeft实际上是item的中心距离*/
+      let pointLeft = draggier.draggierState.left;
+      /*拖拽的left距离向右偏移半个stackItemWidth得到offsetPointLeft, 通过offsetPointLeft在item的startLeft到endLeft之间的位置找到closetItem*/
+      let offsetPointLeft = Math.floor(props.stackItemWidth / 2 + pointLeft);
+      /*计算每个item的startLeft以及endLeft*/
+      const itemsList: { index: number, startLeft: number, endLeft: number; }[] = itemValList.map((_, index) => ({ index, startLeft: index * props.stackItemWidth, endLeft: (index + 1) * props.stackItemWidth, }));
+
+      /*总长度*/
+      const maxEndLeft = itemsList[itemsList.length - 1]?.endLeft;
+
+      /*修正left，超出maxListLeft或者小于0时，循环计算left使其落在0到maxListLeft的范围*/
+      if (!!itemsList.length && !!maxEndLeft) {
+        while (offsetPointLeft > maxEndLeft) {
+          offsetPointLeft -= maxEndLeft;
+          pointLeft -= maxEndLeft;
+        }
+        while (offsetPointLeft < 0) {
+          offsetPointLeft += maxEndLeft;
+          pointLeft += maxEndLeft;
+        }
+      }
+
+      /*找到最靠近的位置*/
+      const closestItem = itemsList.reduce((prev, item) => {
+        if (item.startLeft <= offsetPointLeft && item.endLeft >= offsetPointLeft) {
+          return { distance: Math.abs(item.startLeft - pointLeft), item };
+        } else {
+          return prev;
+        }
+      }, { distance: Infinity, item: null } as { distance: number, item: { index: number, startLeft: number, endLeft: number } | null }).item!;
+
+      /*循环列表前半部分*/
+      const leftItemsList = itemsList.slice(0, closestItem.index);
+      /*循环列表后半部分*/
+      const rightItemsList = itemsList.slice(closestItem.index);
+
+      /*根据左侧右侧预留的空位填补前后列表*/
+      while (leftItemsList.length - rightItemsList.length > 1) {rightItemsList.push(leftItemsList.shift()!);}
+      while (rightItemsList.length - leftItemsList.length > 1) {leftItemsList.unshift(rightItemsList.pop()!);}
+      while (leftItemsList.length > leftBufferCount) {
+        const shiftItem = leftItemsList.shift()!;
+        if (rightItemsList.length < rightBufferCount) {
+          rightItemsList.push(shiftItem);
+        }
+      }
+      while (rightItemsList.length > rightBufferCount) {
+        const popItem = rightItemsList.pop()!;
+        if (leftItemsList.length < leftBufferCount) {
+          leftItemsList.unshift(popItem);
+        }
+      }
+
+      /*此时后半部分的第一个元素就是选中的元素，索引就是前半部分列表的最后一个位置+1*/
+      const activeIndex = leftItemsList.length;
+      /*根据最靠近left的节点来计算当前的少量偏移*/
+      const offsetLeft = closestItem.startLeft - pointLeft;
+      /*计算循环列表中每个节点距离选中节点的偏移距离*/
+      const list = [...leftItemsList, ...rightItemsList].map((item, index) => ({
+        ...item,
+        distance: (index - activeIndex) * props.stackItemWidth,
+        zIndex: 0,
+      }));
+      /*先排序，然后根据顺序设置zIndex，最靠近left的节点zIndex最大*/
+      list.sort((a, b) => Math.abs(a.distance) - Math.abs(b.distance)).forEach((i, index) => {
+        i.zIndex = total - index;
+      });
+      /*计算子节点样式*/
+      itemStyles = itemsList.map((_, index) => {
+        const item = list.find(i => i.index === index);
+        if (!item) {
+          /*不在前部分列表后部分列表的元素，可能是因为预留位置不足，这里不做显示*/
+          return {
+            opacity: 0,
+            transition: 'none'
+          };
+        }
+        /*元素的偏移距离*/
+        const left = item.distance + offsetLeft;
+        /*根据偏移距离实时计算缩放大小，越靠近left，越接近1*/
+        const scale = Math.max(0, 1 - Number((Math.abs(left) / props.stackItemWidth * props.scaleRate).toFixed(2)));
+        return {
+          transform: `translate3d(${left}px,${props.verticalOffset ? `${left / props.stackItemWidth * props.stackItemHeight}px` : 0},0) scale(${scale})`,
+          transformOrigin: `${left > 0 ? 'right' : 'left'} ${props.verticalAlign}`,
+          zIndex: item.zIndex,
+          // opacity: total - item.zIndex === 0 ? 1 : 0.75,
+        };
+      });
+
+      renderData = {
+        itemsList,
+        closestItem,
+        listData: list,
+        itemValList,
+      };
+
+      return (
+        <div className={classes.value} style={elStyles} ref={onRef.el}>
+          <div className="stack-card-container" ref={onRef.container}>
+            {items.map((Item: any, index: number) => {
+              const ItemComp = isReact ? Item.type : Item;
+              return (
+                <ItemComp
+                  {...mergeAttrs({ style: itemStyles[index] || {} }, Item.props)}
+                  key={index}
+                />
+              );
+            })}
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+export default StackCard;

package/src/packages/components/StackCard/stack-card.scss

@@ -0,0 +1,28 @@
+@include comp(stack-card) {
+  display: block;
+  box-sizing: border-box;
+
+  .stack-card-container {
+    position: relative;
+    @include comp(stack-card-item) {
+      transition: transform linear 100ms, opacity linear 300ms;
+
+      &:not(:first-child) {
+        position: absolute;
+        inset: 0;
+      }
+      &:first-child {
+        position: relative;
+      }
+
+      & > img {
+        width: 100%;
+      }
+    }
+  }
+
+  &:not(.stack-card-touching) {
+    @include comp(stack-card-item) {
+    }
+  }
+}

package/src/packages/components/StackCardItem/index.tsx

@@ -0,0 +1,23 @@
+import {designComponent, getComponentCls, useClasses} from "plain-design-composition";
+
+export const StackCardItem = designComponent({
+  name: 'stack-card-item',
+  props: {
+    val: { type: [String, Number] },
+  },
+  slots: ['default'],
+  setup({ props, slots, event: { emit } }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('stack-card-item')
+    ]);
+
+    return () => (
+      <div className={classes.value}>
+        {slots.default()}
+      </div>
+    );
+  },
+});
+
+export default StackCardItem;

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx

@@ -281,7 +281,7 @@ export const PlcOperation = designComponent({
      * @author  韦胜健
      * @date    2022.11.25 19:20
      */
-    effects.push(table.hooks.onVirtualPageIndexChange.use(({ start }) => {state.virtualRowStart = start;}));
+    effects.push(table.hooks.onVirtualPageIndexChange.use(({ startIndex }) => {state.virtualRowStart = startIndex;}));
 
     onBeforeUnmount(() => effects.clear());
 

package/src/packages/components/Table/standard/PlcTree/RenderPlcTreeNode.tsx

@@ -80,6 +80,7 @@ export const RenderPlcTreeNode = designComponent({
             {props.treeCore.props.multiple && (
               <div className={`tree-node-checker plc-tree-button`}>
                 <Checkbox
+                  key={props.treeNode.id}
                   checkStatus={checkStatus.value}
                   disabled={!props.treeNode.isCheckAble()}
                   onClick={handler.onClickCheckbox}
@@ -89,7 +90,7 @@ export const RenderPlcTreeNode = designComponent({
             {props.treeCore.props.draggable && (
               <div
                 className={classnames(['tree-node-draggier', 'plc-tree-button', { 'tree-node-draggier-disable': !props.treeCore.utils.isAllowDraggable(props.treeNode) }])}
-                onMouseDown={handler.onMousedownDraggier.value}
+                onMouseDown={props.treeNode.empty ? undefined : handler.onMousedownDraggier.value}
               >
                 <Icon icon="pi-menu"/>
               </div>

package/src/packages/components/Table/table/body/row.tsx

@@ -34,7 +34,7 @@ export const PltRow = designComponent({
       render: () => {
         return props.table.hooks.onRenderRow.exec({
           content: (
-            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} {...handler}>
+            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} data-idx={String(props.node.state.index == null ? "" : props.node.state.index)} {...handler}>
               {(props.table.bodyPlcList.value?.map((plc) => <PltCell key={plc.plcKey} table={props.table} node={props.node} plc={plc}/>))}
             </tr>
           ),

package/src/packages/components/Table/table/use/useTableDraggier.row.tsx

@@ -191,7 +191,7 @@ export function useTableDraggierRow(
 
     const start = (e: iMouseEvent, node: iTableNode) => {
       const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
-      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
+      const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.idx == node.state.index.toString())!;
       const rowRect = rowEl.getBoundingClientRect();
       staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
       /*清理状态*/

package/src/packages/components/Table/table/utils/createTableHooks.ts

@@ -19,7 +19,7 @@ export const createTableHooks = () => {
     /*是否可以开启虚拟滚动*/
     onEnableVirtual: createSyncHooks<(data: boolean) => void>(),
     /*当虚拟滚动的pageIndex变化的时候触发动作*/
-    onVirtualPageIndexChange: createHooks<(data: { pageIndex: number, start: number }) => void>(),
+    onVirtualPageIndexChange: createHooks<(data: { pageIndex: number, startIndex: number }) => void>(),
     /*点击行动作*/
     onClickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
     /*双击行动作*/

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -131,7 +131,7 @@ export const RenderTreeNode = designComponent({
           {tree.props.draggable && !tree.props.customDraggier && (
             <div
               className={classnames(['tree-node-draggier', { 'tree-node-draggier-disable': !tree.utils.isAllowDraggable(props.treeNode) }])}
-              onMouseDown={handler.onMousedownDraggier.value}
+              onMouseDown={props.treeNode.empty ? undefined : handler.onMousedownDraggier.value}
             >
               <Icon icon="pi-menu"/>
             </div>
@@ -139,6 +139,7 @@ export const RenderTreeNode = designComponent({
           {tree.props.multiple && (
             <div className="tree-node-checker">
               <Checkbox
+                key={props.treeNode.id}
                 checkStatus={checkStatus.value}
                 disabled={!props.treeNode.isCheckAble()}
                 onClick={handler.onClickCheckbox}

package/src/packages/components/Tree/index.tsx

@@ -26,6 +26,7 @@ export const Tree = designComponent({
     scroll: { type: Boolean },                            // 是否使用滚动容器
     innerAttrs: { type: Object as PropType<PlainObject> },// inner 节点属性类型
     contentWrap: { type: Boolean },                       // 节点内容是否换行显示，默认不换行
+    virtualRowType: { type: String as PropType<'virtualIndex' | 'realIndex'> }, // 虚拟滚动的行渲染类型，virtualIndex意思为使用虚拟的行索引作为key渲染行，好处是虚拟滚动时完全复用行组件实例；realIndex意味着虚拟滚动时新的行会重新初始化
     ...TreePropsOptions,
   },
   emits: {
@@ -94,7 +95,7 @@ export const Tree = designComponent({
                     {{
                       content: ({ data }: { data: { item: iTreeNode, index: number, vIndex: number, vid: string }[] }) => (
                         <div className="tree-node-list">
-                          {data.map(({ item, vid }, flatIndex) => <RenderTreeNode key={flatIndex} treeNode={item} dataVid={vid} multiple={props.multiple}/>)}
+                          {data.map(({ item, vid, index }, vIndex) => <RenderTreeNode key={(props.virtualRowType === 'realIndex') ? index : vIndex} treeNode={item} dataVid={vid} multiple={props.multiple}/>)}
                         </div>
                       )
                     }}

package/src/packages/components/VirtualList/index.tsx

@@ -11,12 +11,14 @@ export const VirtualList = designComponent({
     size: { type: Number, require: true, default: 40 },           // 每一行高度
     dynamicSize: { type: Boolean },                               // 标识列表中的每一行高度不是固定的，但是还是需要提供 size 属性，而且size属性不能与每一行的高度差距太多；
     disabled: { type: Boolean },                                  // 禁用虚拟滚动
-    width: { type: [String, Number] },                            // 当需要横向滚动是，需要指定内容宽度
+    horizontal: { type: Boolean },                                // 启用横向虚拟滚动
+    width: { type: [String, Number] },                            // 纵向虚拟滚动需要横向滚动时，需要指定内容宽度
+    height: { type: [String, Number] },                           // 横向虚拟滚动需要纵向滚动时，需要指定内容高度
   },
   emits: {
     onScroll: (e: Event) => true,
     onRefScroll: (scroll: typeof Scroll.use.class | null) => true,
-    onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
+    onPageIndexChange: (data: { pageIndex: number, startIndex: number, endIndex: number }) => true,
   },
   scopeSlots: {
     default: (scope: { item: any, index: number, vid: string, vIndex: number }) => {},
@@ -43,7 +45,14 @@ export const VirtualList = designComponent({
       render: () => {
         const { list } = virtual.offsetData.value;
         return (
-          <Scroll scrollX={!!props.width} onScroll={virtual.handler.onScroll} ref={onRefScroll as any} className={virtual.classes.value} disableTransitionWhenScroll>
+          <Scroll
+            scrollX={!!props.width || props.horizontal}
+            scrollY={!!props.height || !props.horizontal}
+            onScroll={virtual.handler.onScroll}
+            ref={onRefScroll as any}
+            className={virtual.classes.value}
+            disableTransitionWhenScroll
+          >
             <div className="virtual-list-strut" style={virtual.strutStyles.value}>
               <div className="virtual-list-content" style={virtual.contentStyles.value} ref={onRef.content}>
                 {scopeSlots.content.isExist() ?