plain-design 1.0.0-beta.1 → 1.0.0-beta.100

package/src/packages/components/TreeCore/createTreeUtils.ts

@@ -1,7 +1,7 @@
 import {iTreeKeyOrNode, iTreeNodeComputedData, iTreeProps} from "./TreeCore.type";
 import {iTreeNode} from "./createTreeNode";
 import {toArray} from "plain-utils/utils/toArray";
-import {iterate as utilsIterate} from "../../utils/iterate";
+import {iterate as utilsIterate} from "plain-utils/utils/iterate";
 import {eTreeDropType} from "./createTreeDraggier";
 
 export function createTreeUtils(

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

@@ -0,0 +1,91 @@
+import {cacheComputed, ComponentPropsType, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "plain-design-composition";
+import {Icon} from "../Icon";
+import {iTreeNode} from "../TreeCore/createTreeNode";
+import './tree-node-with-menu.scss';
+import {Tree} from "../Tree";
+import {useTooltip} from "../useTooltip";
+import {iTreeNodeWithMenuOption} from "./treeNodeWithMenu.utils";
+import {Dropdown} from "../Dropdown";
+import {DropdownOption} from "../DropdownOption";
+
+export const TreeNodeWithMenu = designComponent({
+  name: 'tree-node-with-menu',
+  props: {
+    treeNode: { type: Object as PropType<iTreeNode>, required: true },
+    dropdownOptions: { type: Array as PropType<iTreeNodeWithMenuOption[]> },
+    dropdownAttrs: { type: Object as PropType<ComponentPropsType<typeof Dropdown>> },
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ content: iHTMLDivElement });
+
+    const tree = Tree.use.inject();
+
+    const isDraggable = cacheComputed(() => tree.props.draggable && tree.utils.isAllowDraggable(props.treeNode));
+
+    const classes = useClassCache(() => [
+      getComponentCls('tree-node-with-menu'),
+      {
+        'tree-node-with-menu-draggable': isDraggable.value,
+      }
+    ]);
+
+    const dropdownAttrs = computed(() => {
+      return {
+        trigger: 'hover' as const,
+        placement: 'right-start' as const,
+        ...props.dropdownAttrs,
+      };
+    });
+
+    const handler = {
+      onMousedownDraggier: computed(() => !tree.draggier.value ? undefined : ((e: iMouseEvent) => {
+        tree.draggier.value!.onMousedownDraggier(e, props.treeNode);
+      })),
+    };
+
+    useTooltip({
+      overflow: true,
+      tooltip: () => ({
+        reference: refs.content,
+        message: props.treeNode.label()
+      }),
+    });
+
+    return () => (
+      <div className={classes.value}>
+        <div className="tree-node-with-menu-content" ref={onRef.content}>{props.treeNode.label()}</div>
+        {(() => {
+          let btn = (
+            <div className="tree-node-with-menu-button" onMouseDown={handler.onMousedownDraggier.value}>
+              <Icon icon="pi-drag-dot-vertical"/>
+            </div>
+          );
+          let ret = btn;
+          if (!!props.dropdownOptions?.length && !tree.draggier.value?.isDragging()) {
+            ret = (
+              <Dropdown
+                {...dropdownAttrs.value}
+                v-slots={{
+                  default: () => btn,
+                  popper: () => (
+                    props.dropdownOptions?.map((option, index) => {
+                      const { renderDefault, renderContent, ...leftOption } = option;
+                      const vSlots = {} as any;
+                      if (!!renderDefault) {vSlots.default = () => renderDefault();}
+                      if (!!renderContent) {vSlots.content = () => renderContent();}
+                      return <DropdownOption key={index} {...leftOption} v-slots={vSlots}/>;
+                    })
+                  )
+                }}
+              />
+            );
+          }
+          return ret;
+        })()}
+      </div>
+    );
+  },
+});
+
+export default TreeNodeWithMenu;

package/src/packages/components/TreeNodeWithMenu/tree-node-with-menu.scss

@@ -0,0 +1,39 @@
+@include comp(tree-node-with-menu) {
+  display: flex;
+  align-items: center;
+
+  .tree-node-with-menu-content {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tree-node-with-menu-button {
+    height: 1em;
+    width: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    //transition: all ease 0.3s;
+  }
+
+  &.tree-node-with-menu-draggable {
+    .tree-node-with-menu-button {
+      cursor: row-resize;
+      padding-right: 6px;
+    }
+  }
+}
+
+@include comp(tree-node) {
+  &:not(:hover) {
+    .tree-node-with-menu-button {
+      opacity: 0;
+      width: 0;
+      pointer-events: none;
+    }
+  }
+}

package/src/packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils.ts

@@ -0,0 +1,12 @@
+import {iMouseEvent, RenderNode} from "plain-design-composition";
+
+export interface iTreeNodeWithMenuOption {
+  label?: string,
+  disabled?: boolean,
+  readonly?: boolean,
+  icon?: string,
+  val?: any,
+  onClick?: (e: iMouseEvent) => void
+  renderDefault?: () => RenderNode,
+  renderContent?: () => RenderNode,
+}

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

@@ -110,7 +110,7 @@ export const Upload = designComponent({
       [eUploadStatus.empty]: <Icon icon="pi-info-circle"/>,
     };
     const singleEmptyFile: UploadFile = {
-      name: i18n('file.notUpload').d('未上传'),
+      name: i18n.$it('file.notUpload').d('未上传'),
       status: eUploadStatus.empty,
       id: 'nothing'
     };
@@ -151,7 +151,7 @@ export const Upload = designComponent({
           if (props.max != null) {
             if (f.calcSize > props.max) {
               $message.error(
-                i18n('file.oversize', { filename: file.name, filesize: f.calcSize, max: props.max }).d(`[${file.name}]大小为${f.calcSize}MB，超过最大限制${props.max}MB`)
+                i18n.$it('file.oversize', { filename: file.name, filesize: f.calcSize, max: props.max }).d(`[${file.name}]大小为${f.calcSize}MB，超过最大限制${props.max}MB`)
                 , { time: 5000 });
               return false;
             }
@@ -249,7 +249,7 @@ export const Upload = designComponent({
         // 状态不存在或者状态为success表示需要用户处理删除文件在后端的逻辑，否则其他状态直接前端删除
         if (!file.status || file.status === eUploadStatus.success) {
           if (props.removeConfirm) {
-            await $dialog.confirm(i18n('file.areYouSureToDeleteFile', { name: file.name }).d(`确认要删除文件：${file.name} 吗？`));
+            await $dialog.confirm(i18n.$it('file.areYouSureToDeleteFile', { name: file.name }).d(`确认要删除文件：${file.name} 吗？`));
           }
           if (!!props.beforeRemove) {await props.beforeRemove(file);}
           await props.handleRemove!(file);
@@ -289,7 +289,7 @@ export const Upload = designComponent({
             toArray(uploadFiles).forEach(file => {
               file.status = eUploadStatus.success;
               file.percent = undefined;
-              $notice.success(i18n('file.uploadFileSucceed', { name: file.name }).d(`文件[${file.name}]上传成功！`));
+              $notice.success(i18n.$it('file.uploadFileSucceed', { name: file.name }).d(`文件[${file.name}]上传成功！`));
             });
             dfd.resolve();
             emit.onUploadSuccess({ file: uploadFiles, resp: data });
@@ -298,7 +298,7 @@ export const Upload = designComponent({
             toArray(uploadFiles).forEach(file => file.status = eUploadStatus.error);
             dfd.reject();
             emit.onUploadError(error);
-            $notice.error(i18n('file.uploadFailed').d(`文件上传失败！`));
+            $notice.error(i18n.$it('file.uploadFailed').d(`文件上传失败！`));
           },
         };
 
@@ -339,7 +339,7 @@ export const Upload = designComponent({
         <div className="upload-item-inner">
           {!!custom ? custom() : <>
             {file.status ? renderIcon[file.status] : <Icon icon="pi-file"/>}
-            {file.status === eUploadStatus.ready ? `(${i18n('file.toBeUpload').d('待上传')}) ` : ''}
+            {file.status === eUploadStatus.ready ? `(${i18n.$it('file.toBeUpload').d('待上传')}) ` : ''}
             <div className="upload-item-content" onClick={() => !!props.handlePreview && props.handlePreview(file)}>
               {scopeSlots.default({ item: file, index }, file.name)}
             </div>
@@ -366,8 +366,8 @@ export const Upload = designComponent({
     const singleRender = computed(() => <>
       {editComputed.value.editable && (
         <ButtonGroup>
-          <Button label={i18n('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
-          {!props.autoUpload && <Button label={i18n('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
+          <Button label={i18n.$it('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
+          {!props.autoUpload && <Button label={i18n.$it('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
           {slots.button()}
         </ButtonGroup>
       )}
@@ -378,8 +378,8 @@ export const Upload = designComponent({
         {!props.draggable ? (
           editComputed.value.editable && (
             <ButtonGroup>
-              <Button label={i18n('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
-              {!props.autoUpload && <Button label={i18n('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
+              <Button label={i18n.$it('file.selectFile').d('选择文件')} icon="pi-file" onClick={methods.chooseFile}/>
+              {!props.autoUpload && <Button label={i18n.$it('file.upload').d('上传')} icon="pi-upload" onClick={methods.upload}/>}
               {slots.button()}
             </ButtonGroup>
           )
@@ -388,9 +388,9 @@ export const Upload = designComponent({
             <div className="upload-drop-area" onClick={methods.chooseFile} {...dropHandler}>
               <Icon icon="pi-share-external"/>
               <div>
-                <span>{i18n('file.dropFilesOr').d('拖拽文件至此处，或者')}</span>
+                <span>{i18n.$it('file.dropFilesOr').d('拖拽文件至此处，或者')}</span>
                 <Button mode="text" className="upload-drop-upload-button" onClick={methods.chooseFile}>
-                  <span>{i18n('file.clickToUpload').d('点击上传')}</span>
+                  <span>{i18n.$it('file.clickToUpload').d('点击上传')}</span>
                   <Icon icon="pi-upload"/>
                 </Button>
                 {slots.button()}

package/src/packages/components/VirtualList/createVirtualDraggier.ts

@@ -0,0 +1,375 @@
+import {iElementRect} from "../../utils/getRowEl";
+import {getComponentCls, iMouseEvent, iTouchEvent, reactive, SimpleFunction, StyleProperties} from "plain-design-composition";
+import {doNothing} from "plain-utils/utils/doNothing";
+import {defer, DFD} from "plain-utils/utils/defer";
+import {findParentElement} from "plain-utils/dom/findParentElement";
+import {hasClass} from "plain-utils/dom/hasClass";
+import {getElementRect} from "../../utils/getElementRect";
+import {notNull} from "plain-utils/utils/notNull";
+import {createWebDraggier, iDraggierData} from "../../utils/createDraggier";
+import {delay} from "plain-utils/utils/delay";
+import {PlainScroll} from "../Scroll";
+import {iVirtualList} from "./useVirtualList";
+import {createAutoScrollManager} from "../createAutoScrollManager";
+
+/**
+ * 创建虚拟列表的拖拽移动节点管理对象
+ * @author  韦胜健
+ * @date    2024/5/29 14:55
+ */
+export function createVirtualDraggier(
+  {
+    props,
+    getVirtual,
+    getScroll,
+    dataModel,
+    onDraggierStart,
+    onDraggierMove,
+    onDraggierEnd,
+    onDraggierTap,
+  }: {
+    props: { horizontal: boolean },
+    getVirtual: () => iVirtualList,
+    getScroll: () => PlainScroll | undefined,
+    dataModel: { value: any[] | undefined | null },
+
+    onDraggierStart?: iVirtualDraggierHandler,
+    onDraggierMove?: iVirtualDraggierHandler,
+    onDraggierEnd?: iVirtualDraggierHandler,
+    onDraggierTap?: iVirtualDraggierHandler,
+  }
+) {
+
+  /*管理自动滚动*/
+  const autoScrollManager = createAutoScrollManager(getScroll);
+
+  /*静态变量*/
+  const dragStaticState = createDefaultDraggierStaticState();
+
+  /*响应式变量*/
+  const dragReactiveState = reactive(createDefaultDraggierReactiveState());
+
+  const start = (e: iMouseEvent | iTouchEvent) => {
+
+    /*重置静态变量*/
+    Object.assign(dragReactiveState, createDefaultDraggierReactiveState());
+    /*重置响应式变量*/
+    Object.assign(dragReactiveState, createDefaultDraggierStaticState());
+
+    /*初始化部分静态变量*/
+    dragStaticState.dragElement = findParentElement(e.currentTarget as any, el => el.hasAttribute('data-vid'), true) as HTMLDivElement;
+    if (!dragStaticState.dragElement) {
+      throw new Error(`Can't find [data-vid] elements!`);
+    }
+    dragStaticState.hostElement = findParentElement(dragStaticState.dragElement, el => hasClass(el, getComponentCls('virtual-list')))!;
+    if (!dragStaticState.hostElement) {
+      throw new Error(`Can't find host elements`);
+    }
+    dragStaticState.strutElement = findParentElement(dragStaticState.dragElement, el => hasClass(el, 'virtual-list-strut'))!;
+    if (!dragStaticState.strutElement) {
+      throw new Error(`Can't find strut elements`);
+    }
+
+    dragStaticState.initDragElementRect = getElementRect(dragStaticState.dragElement);
+    dragStaticState.dragElementVid = dragStaticState.dragElement.dataset.vid || '';
+    dragStaticState.dragIndex = notNull(getVirtual().nodes.value.find(i => i.id == dragStaticState.dragElementVid)?.index, -1);
+    if (dragStaticState.dragIndex == -1) {
+      throw new Error(`Can't find index of drag elements`);
+    }
+
+    draggier.start(e);
+  };
+
+  const update = () => {
+
+    const { dragElement, dragElementVid, oldDragElementStyles, strutElement } = dragStaticState;
+
+    if (dragElement.dataset.vid !== dragElementVid) {
+      /*节点复用，应该恢复显示这个节点*/
+      dragElement.style.opacity = oldDragElementStyles.opacity;
+    } else {
+      /*节点的标识不变，继续隐藏*/
+      dragElement.style.opacity = '0';
+    }
+
+    const offsetStart = props.horizontal ?
+      draggier.staticState.moveX - getElementRect(strutElement!).left :
+      draggier.staticState.moveY - getElementRect(strutElement!).top;
+
+    const newPointIndex = getVirtual().nodes.value.findIndex(node => node.start <= offsetStart && node.end > offsetStart);
+    // console.log({ newPointIndex });
+    /*值有效的时候才更新值，新值无效的话，就用老的值，因为如果超出边界的话就会得到无效的新值，此时用老值即可*/
+    if (newPointIndex != null && newPointIndex != -1) {
+      dragReactiveState.pointIndex = newPointIndex || 0;
+    }
+  };
+
+  const getItemStyles = (index: number) => {
+    const { dragIndex, initDragElementRect } = dragStaticState;
+    if (dragReactiveState.pointIndex == null || dragIndex == null) {
+      return;
+    }
+    const styles: StyleProperties = {};
+    styles.transition = 'transform ease 300ms';
+    if (dragReactiveState.pointIndex >= index && index > dragIndex) {
+      styles.transform = props.horizontal ?
+        `translateX(-${initDragElementRect?.width || 0}px)` :
+        `translateY(-${initDragElementRect?.height || 0}px)`;
+    } else if (dragReactiveState.pointIndex <= index && index < dragIndex) {
+      styles.transform = props.horizontal ?
+        `translateX(${initDragElementRect?.width || 0}px)` :
+        `translateY(${initDragElementRect?.height || 0}px)`;
+    } else {
+      styles.transform = props.horizontal ?
+        `translateX(0px)` :
+        `translateY(0px)`;
+    }
+    return styles;
+  };
+
+  const draggier = createWebDraggier({
+    horizontal: props.horizontal,
+    vertical: !props.horizontal,
+    onInit: () => {
+    },
+    onStart: (draggierData) => {
+
+      const { draggierEffects } = draggierData;
+
+      const { dragElement, initDragElementRect, hostElement } = dragStaticState;
+
+      if (!dragElement || !initDragElementRect || !hostElement) {
+        return;
+      }
+
+      const dragElementShadow = dragStaticState.dragElementShadow = dragElement.cloneNode(true) as any;
+
+      if (!dragElementShadow) {
+        return;
+      }
+
+      /*强制启用动画，避免被Scroll禁用*/
+      dragElementShadow.setAttribute('data-force-transition', 'true');
+      dragElementShadow.style.height = initDragElementRect.height + 'px';
+      dragElementShadow.style.width = initDragElementRect.width + 'px';
+      dragElementShadow.style.position = 'fixed';
+      dragElementShadow.style.top = initDragElementRect.top + 'px';
+      dragElementShadow.style.left = initDragElementRect.left + 'px';
+      dragElementShadow.style.pointerEvents = 'none';
+      dragElementShadow.style.transition = 'none';
+
+      /*添加克隆节点*/
+      hostElement.appendChild(dragElementShadow);
+      draggierEffects.push(async () => {
+        if (!dragElementShadow || !hostElement) {
+          return;
+        }
+        await dragReactiveState.endingDefer.promise;
+        await delay(23);
+        hostElement.removeChild(dragElementShadow);
+        dragStaticState.dragElementShadow = null as any;
+      });
+
+      /*隐藏原始对象*/
+      dragStaticState.oldDragElementStyles.opacity = dragElement.style.opacity;
+      dragElement.style.opacity = "0";
+      draggierEffects.push(async () => {
+        if (!dragElement) {
+          return;
+        }
+        await dragReactiveState.endingDefer.promise;
+        dragElement.style.opacity = dragStaticState.oldDragElementStyles.opacity;
+        dragStaticState.dragElement = null as any;
+      });
+
+      /*监听滚动*/
+      dragReactiveState.onScroll = (e: Event) => {
+        update();
+      };
+      draggierEffects.push(() => dragReactiveState.onScroll = doNothing);
+
+      /*拖拽结束的时候停止自动滚动*/
+      draggierEffects.push(() => getScroll()?.methods.stopAutoScroll());
+      draggierEffects.push(async () => {
+        await dragReactiveState.endingDefer.promise;
+        dragReactiveState.pointIndex = null;
+      });
+
+      /*标记拖拽中响应式变量*/
+      dragReactiveState.isDragging = true;
+      draggierEffects.push(async () => {
+        await dragReactiveState.endingDefer.promise;
+        dragReactiveState.isDragging = false;
+      });
+
+      /*操作结束之后的更新数据动作*/
+      draggierEffects.push(async () => {
+        const { strutElement, dragIndex } = dragStaticState;
+        const virtual = getVirtual();
+        if (!initDragElementRect || dragReactiveState.pointIndex == null || !virtual || !dragElementShadow || !strutElement || dragIndex == null) {
+          return;
+        }
+        // console.log('==>>', dragReactiveState.pointIndex);
+        const pointNode = virtual.nodes.value[dragReactiveState.pointIndex];
+        // console.log(pointNode, dragElementShadow);
+        const afterTransition = () => {
+          if (dragReactiveState && dragReactiveState.pointIndex != null && dragIndex != null && dragReactiveState.pointIndex != dragIndex) {
+            const insertIndex = dragReactiveState.pointIndex;
+            const newList = [...dataModel.value || []];
+            const spliceArr = newList.splice(dragIndex, 1);
+            newList.splice(insertIndex, 0, ...spliceArr);
+            dataModel.value = (newList);
+          }
+          dragReactiveState.endingDefer.resolve();
+        };
+
+        const newStart = Math.ceil(
+          (() => {
+            if (props.horizontal) {
+              return dragReactiveState.pointIndex < dragIndex ?
+                (getElementRect(strutElement).left + pointNode.start) :
+                (getElementRect(strutElement).left + pointNode.end - initDragElementRect.width);
+            } else {
+              return dragReactiveState.pointIndex < dragIndex ?
+                (getElementRect(strutElement).top + pointNode.start) :
+                (getElementRect(strutElement).top + pointNode.end - initDragElementRect.height);
+            }
+          })()
+        ) + 'px';
+
+        const styleName = props.horizontal ? 'left' : 'top';
+        if (dragElementShadow.style[styleName] == newStart) {
+          /*位置没有变化，直接更新数据，因为值没有变化，导致就算复制也不会触发transition动画*/
+          afterTransition();
+        } else {
+          /*位置有变化，等transition动画结束之后再更新数据*/
+          dragElementShadow.style.transition = 'all ease 300ms';
+          dragElementShadow.addEventListener('transitionend', async () => {
+            afterTransition();
+          });
+        }
+        dragElementShadow.style[styleName] = newStart;
+      });
+
+      onDraggierStart?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onMove: (draggierData) => {
+
+      const { staticState } = draggierData;
+
+      const { dragElementShadow, initDragElementRect, hostElement, strutElement } = dragStaticState;
+
+      if (!dragElementShadow || !initDragElementRect || !hostElement || !strutElement) {
+        return;
+      }
+
+      const strutRect = getElementRect(strutElement);
+      const hostRect = getElementRect(hostElement);
+
+      const newStart = props.horizontal ?
+        initDragElementRect.left + staticState.durX :
+        initDragElementRect.top + staticState.durY;
+      const minStart = props.horizontal ?
+        getElementRect(hostElement).left :
+        getElementRect(hostElement).top;
+      const maxStart1 = props.horizontal ?
+        strutRect.left + strutRect.width - initDragElementRect.width :
+        strutRect.top + strutRect.height - initDragElementRect.height;
+      const maxStart2 = props.horizontal ?
+        hostRect.left + hostRect.width - initDragElementRect.width :
+        hostRect.top + hostRect.height - initDragElementRect.height;
+      const maxStart = Math.min(maxStart1, maxStart2);
+
+      const resultStart = Math.max(minStart, Math.min(maxStart, newStart));
+
+      if (resultStart == minStart) {
+        autoScrollManager.set(props.horizontal ? 'left' : 'top');
+      } else if (resultStart == maxStart) {
+        autoScrollManager.set(props.horizontal ? 'right' : 'bottom');
+      } else {
+        autoScrollManager.set(null);
+      }
+
+      const styleName = props.horizontal ? 'left' : 'top';
+      dragElementShadow.style[styleName] = resultStart + 'px';
+
+      update();
+
+      onDraggierMove?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onEnd: (draggierData) => {
+      onDraggierEnd?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+    onTap: (draggierData) => {
+      onDraggierTap?.({ ...draggierData, dragStaticState, dragReactiveState });
+    },
+  });
+
+  const emitScroll = (e: any) => {
+    dragReactiveState.onScroll(e);
+  };
+
+  return {
+    dragStaticState,
+    dragReactiveState,
+    start,
+    getItemStyles,
+    emitScroll,
+  };
+}
+
+export interface iDraggierStaticState {
+  /*拖拽节点在所有数据中的索引*/
+  dragIndex: number;
+  /*拖拽元素的节点的 data-vid 标识字符*/
+  dragElementVid: string;
+  /*拖拽元素的dom对象*/
+  dragElement: HTMLElement;
+  /*拖拽元素的拖拽开始时的定位信息*/
+  initDragElementRect: iElementRect;
+  /*拖拽元素的旧的行内样式*/
+  oldDragElementStyles: StyleProperties;
+  /*拖拽元素的克隆元素*/
+  dragElementShadow: HTMLElement;
+  /*宿主滚动容器节点*/
+  hostElement: HTMLElement;
+  /*虚拟滚动strut滚动容器节点*/
+  strutElement: HTMLElement;
+}
+
+export interface iDraggierReactiveState {
+  pointIndex: number | null,
+  onScroll: SimpleFunction,
+  isDragging: boolean,
+  endingDefer: DFD<void>,
+}
+
+export function createDefaultDraggierReactiveState(): iDraggierReactiveState {
+  return {
+    pointIndex: null,
+    onScroll: doNothing,
+    isDragging: false,
+    endingDefer: defer(),
+  };
+}
+
+export function createDefaultDraggierStaticState(): iDraggierStaticState {
+  const fakeEle = null as any;
+  return {
+    dragIndex: -1,
+    dragElementVid: '',
+    dragElement: fakeEle,
+    initDragElementRect: { top: 0, left: 0, right: 0, bottom: 0, height: 0, width: 0 },
+    oldDragElementStyles: {},
+    dragElementShadow: fakeEle,
+    hostElement: fakeEle,
+    strutElement: fakeEle,
+  };
+}
+
+export interface iVirtualDraggierData extends iDraggierData {
+  dragStaticState: iDraggierStaticState,
+  dragReactiveState: iDraggierReactiveState,
+}
+
+export type iVirtualDraggierHandler = (data: iVirtualDraggierData) => void