plain-design 1.0.0-beta.2 → 1.0.0-beta.20

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

@@ -0,0 +1,67 @@
+import {designComponent, getComponentCls, iHTMLDivElement, onMounted, PropType, useClassCache, useModel, useRefs, useStyleCache} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import Layout from "../Layout";
+import {eLayoutSectionPosition} from "../Layout/layout.utils";
+import {useLayoutSectionResizer} from "./useLayoutSectionResizer";
+
+export const LayoutSection = designComponent({
+  name: 'layout-section',
+  props: {
+    position: { type: String as PropType<typeof eLayoutSectionPosition.TYPE>, default: eLayoutSectionPosition.center },
+    modelValue: { type: Number },
+    collapse: { type: Boolean }
+  },
+  emits: {
+    onUpdateModelValue: (val?: number) => true,
+    onUpdateCollapse: (val?: boolean) => true,
+  },
+  slots: ['default'],
+  setup({ props, slots, event }) {
+
+    const layout = Layout.use.inject();
+
+    const { refs, onRef } = useRefs({ el: iHTMLDivElement });
+
+    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
+
+    const collapseModel = useModel(() => props.collapse, event.emit.onUpdateCollapse);
+
+    const classes = useClassCache(() => [
+      getComponentCls('layout-section'),
+      `layout-section-position-${props.position}`,
+      {
+        'layout-section-fixed': !!model.value,
+        'layout-section-collapse': collapseModel.value,
+      }
+    ]);
+
+    const styles = useStyleCache(style => {
+      if (!!model.value) {
+        if (layout.props.vertical) {
+          style.height = unit(model.value);
+        } else {
+          style.width = unit(model.value);
+        }
+      }
+    });
+
+    const resizer = useLayoutSectionResizer({ props, model, collapseModel });
+
+    onMounted(() => {
+      if (!props.modelValue && props.position !== eLayoutSectionPosition.center) {
+        model.value = (layout.props.vertical ? refs.el!.offsetHeight : refs.el!.offsetWidth) + 1;
+      }
+    });
+
+    return () => (
+      <div className={classes.value} ref={onRef.el} style={styles.value}>
+        <div className="layout-section-inner">
+          {slots.default()}
+        </div>
+        {resizer.render()}
+      </div>
+    );
+  },
+});
+
+export default LayoutSection;

package/src/packages/components/LayoutSection/useLayoutSectionResizer.tsx

@@ -0,0 +1,184 @@
+import Icon from "../Icon";
+import {eLayoutSectionPosition} from "../Layout/layout.utils";
+import {cacheComputed, computed, getComponentCls, iHTMLDivElement, iMouseEvent, useRefs} from "plain-design-composition";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../../utils/ClientZoom";
+
+export function useLayoutSectionResizer(
+  {
+    model,
+    collapseModel,
+    props
+  }: {
+    model: { value?: number },
+    collapseModel: { value?: boolean },
+    props: { position: typeof eLayoutSectionPosition.TYPE }
+  }
+) {
+
+  const { refs, onRef } = useRefs({ sep: iHTMLDivElement });
+
+  const isVertical = computed(() => props.position === eLayoutSectionPosition.top || props.position === eLayoutSectionPosition.bottom);
+
+  const icon = cacheComputed(() => {
+    switch (props.position) {
+      case "center":
+        return null;
+      case "left":
+        return collapseModel.value ? 'pi-caret-right' : 'pi-caret-left';
+      case "right":
+        return collapseModel.value ? 'pi-caret-left' : 'pi-caret-right';
+      case "top":
+        return collapseModel.value ? 'pi-caret-down' : 'pi-caret-up';
+      case "bottom":
+        return collapseModel.value ? 'pi-caret-up' : 'pi-caret-down';
+    }
+    return null;
+  });
+
+  const draggier = computed(() => {
+    return isVertical.value ? (() => {
+      const { effects } = createEffects();
+
+      let staticState = null as null | {
+        startY: number,
+        moveY: number,
+        startValue: number,
+        shadowEl: HTMLDivElement,
+      };
+
+      const onMousedown = (e: iMouseEvent) => {
+
+        const { clientY } = ClientZoom.getClientPosition(e);
+
+        const shadowEl = (() => {
+          const rect = refs.sep!.getBoundingClientRect();
+          const el = document.createElement('div');
+          el.style.height = '1px';
+          el.style.position = 'fixed';
+          el.style.left = `${rect.left}px`;
+          el.style.top = `${clientY}px`;
+          el.style.width = `${rect.width}px`;
+          el.style.zIndex = "10";
+          el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
+          document.body.appendChild(el);
+          effects.push(() => {
+            document.body.removeChild(el);
+          });
+          return el;
+        })();
+
+        staticState = {
+          startY: clientY,
+          moveY: clientY,
+          startValue: model.value!,
+          shadowEl,
+        };
+
+        window.addEventListener('mousemove', onMousemove);
+        window.addEventListener('mouseup', effects.clear);
+        effects.push(() => {
+          if (!staticState) {return;}
+          let durY = staticState!.moveY - staticState!.startY;
+          if (props.position === eLayoutSectionPosition.bottom) {
+            durY = -durY;
+          }
+          model.value = staticState.startValue + durY;
+          staticState = null;
+          window.removeEventListener('mousemove', onMousemove);
+          window.removeEventListener('mouseup', effects.clear);
+        });
+      };
+
+      const onMousemove = (e: MouseEvent) => {
+        if (!staticState) {return;}
+        const { clientY } = ClientZoom.getClientPosition(e);
+        staticState.moveY = clientY;
+        staticState.shadowEl.style.top = `${clientY}px`;
+      };
+
+      return {
+        onMousedown
+      };
+    })() : (() => {
+      const { effects } = createEffects();
+
+      let staticState = null as null | {
+        startX: number,
+        moveX: number,
+        startValue: number,
+        shadowEl: HTMLDivElement,
+      };
+
+      const onMousedown = (e: iMouseEvent) => {
+
+        const { clientX } = ClientZoom.getClientPosition(e);
+
+        const shadowEl = (() => {
+          const rect = refs.sep!.getBoundingClientRect();
+          const el = document.createElement('div');
+          el.style.width = '1px';
+          el.style.position = 'fixed';
+          el.style.top = `${rect.top}px`;
+          el.style.left = `${clientX}px`;
+          el.style.height = `${rect.height}px`;
+          el.style.zIndex = "10";
+          el.style.backgroundColor = `var(--${getComponentCls('primary-6')})`;
+          document.body.appendChild(el);
+          effects.push(() => {
+            document.body.removeChild(el);
+          });
+          return el;
+        })();
+
+        staticState = {
+          startX: clientX,
+          moveX: clientX,
+          startValue: model.value!,
+          shadowEl,
+        };
+
+        window.addEventListener('mousemove', onMousemove);
+        window.addEventListener('mouseup', effects.clear);
+        effects.push(() => {
+          if (!staticState) {return;}
+          let durX = staticState!.moveX - staticState!.startX;
+          if (props.position === eLayoutSectionPosition.right) {
+            durX = -durX;
+          }
+          model.value = staticState.startValue + durX;
+          staticState = null;
+          window.removeEventListener('mousemove', onMousemove);
+          window.removeEventListener('mouseup', effects.clear);
+        });
+      };
+
+      const onMousemove = (e: MouseEvent) => {
+        if (!staticState) {return;}
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState.moveX = clientX;
+        staticState.shadowEl.style.left = `${clientX}px`;
+      };
+
+      return {
+        onMousedown
+      };
+    })();
+  });
+
+  const toggleCollapse = () => collapseModel.value = !collapseModel.value;
+
+  const render = () => {
+    return (
+      !icon.value ? null :
+        <>
+          {!collapseModel.value && <div className="layout-section-separator" onMouseDown={draggier.value.onMousedown} ref={onRef.sep}/>}
+          <div className="layout-section-collapse-btn" onClick={toggleCollapse}>
+            <Icon icon={icon.value}/>
+          </div>
+        </>
+    );
+  };
+
+  return { render };
+}

package/src/{pages/index/PageThemeUtils.tsx → packages/components/PageThemeUtils/index.tsx}

@@ -1,8 +1,8 @@
 import {computed, getComponentCls, reactive} from "plain-design-composition";
-import {iApplicationConfiguration} from "../../packages";
-import {DeepPartial} from "../../packages/utils/type";
-import {createCache} from "../../packages/utils/createCache";
-import {ThemeShape, ThemeSize} from "../../packages/uses/useStyle";
+import {createCache} from "../../utils/createCache";
+import {ThemeShape, ThemeSize} from "../../uses/useStyle";
+import {DeepPartial} from "../../utils/type";
+import {iApplicationConfiguration} from "../Application/utils/application.utils";
 
 export const PageThemeUtils = (() => {
 
@@ -123,3 +123,5 @@ export const ThemePrimaryColors: Record<string, { label: string, primary: string
   purple: { label: '酱紫', primary: '#722ed1', },
   magenta: { label: '洋红', primary: '#eb2f96', },
 };
+
+export default PageThemeUtils;

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

@@ -1,4 +1,4 @@
-import {ComponentPropsType, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
+import {ComponentPropsType, Fragment, computed, designComponent, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
 import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
 import {Reference} from "../Reference";
 import {usePopup} from "../usePopup";
@@ -139,7 +139,9 @@ export const Popup = designComponent({
     const reference = computed(() => {
       let reference: any = props.reference || state.getReference();
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -155,7 +157,9 @@ export const Popup = designComponent({
     const stickyReference = computed(() => {
       let reference: any = props.stickyReference;
       if (!!reference) {
-        if (typeof reference === "function") {reference = reference();}
+        if (typeof reference === "function") {
+          reference = reference();
+        }
         if (!!reference && !!reference.$el) {
           reference = reference.$el;
         }
@@ -266,12 +270,16 @@ export const Popup = designComponent({
         },
         /*开启之前检查，如果已经禁用则禁止显示*/
         beforeShow: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeShow?.();
         },
         /*关闭之前检查，如果已经禁用则禁止关闭*/
         beforeHide: () => {
-          if (props.disabled || props.readonly) {return false;}
+          if (props.disabled || props.readonly) {
+            return false;
+          }
           return props.beforeHide?.();
         },
 
@@ -284,7 +292,7 @@ export const Popup = designComponent({
               {(slots.head.isExist() || !!props.title) && (
                 <div className="popper-head">{slots.head(typeof props.title === "function" ? props.title() : props.title)}</div>
               )}
-              {slots.popper(typeof props.message === "function" ? props.message() : props.message)}
+              <Fragment key="popper">{slots.popper(typeof props.message === "function" ? props.message() : props.message)}</Fragment>
             </div>
           );
 
@@ -346,14 +354,18 @@ export const Popup = designComponent({
      */
     if (!!model.value) {
       const unwatch = watch(() => reference.value, reference => {
-        if (!reference) {return;}
+        if (!reference) {
+          return;
+        }
         unwatch();
         $popup.show(state.getOption());
       });
     }
 
     onBeforeUnmount(
-      watch(() => props.watchData, () => {$popup.update(state.getOption());})
+      watch(() => props.watchData, () => {
+        $popup.update(state.getOption());
+      })
     );
 
     const refresh = () => {

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

@@ -5,6 +5,7 @@ import {Icon} from "../Icon";
 import './rate.scss';
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {ClientZoom} from "../ClientZoom";
 
 export const Rate = designComponent({
   name: 'rate',
@@ -79,7 +80,8 @@ export const Rate = designComponent({
 
     const methods = {
       reset: (e: MouseEvent | iMouseEvent) => {
-        let dur = e.clientX - (elLeft.value || 0);
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let dur = clientX - (elLeft.value || 0);
         let start = 0;
         let end = totalWidth.value;
         let step = end / props.count;

package/src/packages/components/Scroll/HorizontalScrollbar.tsx

@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {Scroll} from "./index";
 import {delay} from "plain-utils/utils/delay";
 import Tooltip from "../Tooltip";
+import {ClientZoom} from "../ClientZoom";
 
 export const HorizontalScrollbar = designComponent({
   props: {
@@ -41,15 +42,17 @@ export const HorizontalScrollbar = designComponent({
         state.scrollLeft = (e.target as HTMLElement).scrollLeft;
       },
       onMousedown: (e: iMouseEvent) => {
+        const { clientX } = ClientZoom.getClientPosition(e);
         scroll.freezeState.isDragging = true;
         dragState.left = left.value;
-        dragState.clientX = e.clientX;
+        dragState.clientX = clientX;
         document.addEventListener('mousemove', handler.onMousemove);
         document.addEventListener('mouseup', handler.onMouseup);
         disabledUserSelect();
       },
       onMousemove: (e: MouseEvent) => {
-        let deltaX = e.clientX - dragState.clientX;
+        const { clientX } = ClientZoom.getClientPosition(e);
+        let deltaX = clientX - dragState.clientX;
         const left = dragState.left + deltaX;
         let scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
         scrollLeft = Math.max(0, Math.min(scrollLeft, scroll.state.contentWidth - scroll.state.hostWidth));
@@ -66,7 +69,8 @@ export const HorizontalScrollbar = designComponent({
         enableUserSelect();
 
         if (scroll.props.scrollAfterDragEnd) {
-          let deltaX = e.clientX - dragState.clientX;
+          const { clientX } = ClientZoom.getClientPosition(e);
+          let deltaX = clientX - dragState.clientX;
           const left = dragState.left + deltaX;
           scroll.refs.wrapper!.scrollLeft = left * (scroll.state.contentWidth - scroll.state.hostWidth) / (scroll.state.hostWidth - width.value);
         }

package/src/packages/components/Scroll/VerticalScrollbar.tsx

@@ -5,6 +5,7 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {Scroll} from "./index";
 import {delay} from "plain-utils/utils/delay";
 import Tooltip from "../Tooltip";
+import {ClientZoom} from "../ClientZoom";
 
 export const VerticalScrollbar = designComponent({
   props: {
@@ -46,15 +47,17 @@ export const VerticalScrollbar = designComponent({
         state.scrollTop = (e.target as HTMLElement).scrollTop;
       },
       onMousedown: (e: iMouseEvent) => {
+        const { clientY } = ClientZoom.getClientPosition(e);
         scroll.freezeState.isDragging = true;
         dragState.top = top.value;
-        dragState.clientY = e.clientY;
+        dragState.clientY = clientY;
         document.addEventListener('mousemove', handler.onMousemove);
         document.addEventListener('mouseup', handler.onMouseup);
         disabledUserSelect();
       },
       onMousemove: (e: MouseEvent) => {
-        let deltaY = e.clientY - dragState.clientY;
+        const { clientY } = ClientZoom.getClientPosition(e);
+        let deltaY = clientY - dragState.clientY;
         let top = dragState.top + deltaY;
         let scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
         scrollTop = Math.max(0, Math.min(scrollTop, scroll.state.contentHeight - scroll.state.hostHeight));
@@ -72,7 +75,8 @@ export const VerticalScrollbar = designComponent({
         enableUserSelect();
 
         if (scroll.props.scrollAfterDragEnd) {
-          let deltaY = e.clientY - dragState.clientY;
+          const { clientY } = ClientZoom.getClientPosition(e);
+          let deltaY = clientY - dragState.clientY;
           let top = dragState.top + deltaY;
           scroll.refs.wrapper!.scrollTop = top * (scroll.state.contentHeight - scroll.state.hostHeight) / (scroll.state.hostHeight - height.value);
         }

package/src/packages/components/Slider/useSliderDotDragier.tsx

@@ -3,6 +3,7 @@ import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {iMouseEvent, reactive} from "plain-design-composition";
 import {iSliderHooks} from "./slider.utils";
+import {ClientZoom} from "../ClientZoom";
 
 export function useSliderDotDraggier<InitialState>(
   hooks: iSliderHooks,
@@ -24,10 +25,11 @@ export function useSliderDotDraggier<InitialState>(
 
   const handler = {
     onMousedown: (e: iMouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         state: getInitialState(),
       };
@@ -46,8 +48,9 @@ export function useSliderDotDraggier<InitialState>(
     },
     onMousemove: (e: MouseEvent) => {
       if (!staticState) {return;}
-      const durX = e.clientX - staticState.start.x;
-      const durY = e.clientY - staticState.start.y;
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      const durX = clientX - staticState.start.x;
+      const durY = clientY - staticState.start.y;
       handleDraggier({
         durX,
         durY,

package/src/packages/components/StepGroup/step-group.scss

@@ -1,12 +1,12 @@
 @include prefix(step-group) {
   .#{componentName(step)} {
     .step-title {
-      font-size: 16px;
+      font-size: plv(font-size-normal);
       color: plv(text-1);
     }
 
     .step-content {
-      font-size: 14px;
+      font-size: plv(font-size-small);
     }
 
     .step-dot {
@@ -21,7 +21,7 @@
     .step-icon {
       width: 32px;
       height: 32px;
-      font-size: 16px;
+      font-size: plv(font-size-normal);
       line-height: 32px;
       text-align: center;
       border-radius: 32px;
@@ -304,7 +304,7 @@
       .step-icon {
         width: 20px;
         height: 20px;
-        font-size: 12px;
+        font-size: plv(font-size-small);
         line-height: 20px;
         text-align: center;
         border-radius: 20px;
@@ -328,11 +328,11 @@
     }
 
     .step-title {
-      font-size: 14px;
+      font-size: plv(font-size-normal);
     }
 
     .step-content {
-      font-size: 12px;
+      font-size: plv(font-size-small);
     }
 
     &.step-group-vertical {

package/src/packages/components/TabGroup/TabsInner.tsx

@@ -1,12 +1,14 @@
-import {designComponent, mergeAttrs, nextTick, PropType, reactive, useStyles, watch} from "plain-design-composition";
+import {designComponent, mergeAttrs, nextTick, PropType, reactive, RenderNode, useStyles, watch} from "plain-design-composition";
 import {PlTabComponent} from "../Tab";
 
 export const TabsInner = designComponent({
   props: {
     item: { type: Object as PropType<PlTabComponent>, required: true },
     active: { type: Boolean },
+    render: { type: Function as PropType<() => RenderNode>, required: true }
   },
-  setup({ props }) {
+  slots: ['default'],
+  setup({ props, slots }) {
 
     const state = reactive({
       show: false,
@@ -50,7 +52,7 @@ export const TabsInner = designComponent({
           { class: 'inner-tab', style: styles.value },
           props.item.attrs
         )}>
-          {!!state.init && props.item.slots.default()}
+          {!!state.init && props.render()}
         </div>
       )
     };

package/src/packages/components/TabGroup/header/horizontal/tabs-header-horizontal.scss

@@ -14,7 +14,6 @@
 
     .tabs-header-item {
       display: inline-block;
-      font-size: 14px;
     }
 
     &.tabs-header-show-more {

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

@@ -6,10 +6,12 @@ import {TabsHeaderHorizontal} from "./header/horizontal/TabsHeaderHorizontal";
 import {TabsHeaderVertical} from "./header/vertical/TabsHeaderVertical";
 import Tab from "../Tab";
 import Icon from "../Icon";
+import {StyleProps, useStyle} from "../../uses/useStyle";
 
 export const TabGroup = designComponent({
   name: 'tab-group',
   props: {
+    ...StyleProps,
     modelValue: { type: [String, Number] },                   // 双向绑定值，控制当前显示的tab
     closeable: { type: Boolean },                             // 是否显示关闭按钮，会派发onClose事件
     fitHeight: { type: Boolean },                             // 适配高度
@@ -21,6 +23,7 @@ export const TabGroup = designComponent({
   slots: ['default', 'operator'],
   setup({ props, event: { emit }, slots }) {
 
+    const { styleComputed } = useStyle();
     const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
     const items = TabCollector.parent();
 
@@ -53,6 +56,7 @@ export const TabGroup = designComponent({
       getComponentCls('tab-group'),
       `tabs-head-position-${props.headPosition}`,
       `tabs-head-type-${props.headType}`,
+      `tab-group-size-${styleComputed.value.size}`,
       {
         'tabs-fit-height': props.fitHeight
       },
@@ -97,7 +101,7 @@ export const TabGroup = designComponent({
         const body = (
           <div className="tabs-body">
             {[...tabs.value].sort((a, b) => String(a.val).localeCompare(String(b.val))).map((tab, index) => (
-              <TabsInner item={tab.item} key={index} active={tab.active}/>
+              <TabsInner item={tab.item} key={index} active={tab.active} render={() => tab.item.slots.default()}/>
             ))}
           </div>
         );

package/src/packages/components/TabGroup/tabs.scss

@@ -33,4 +33,7 @@
       margin-left: 4px;
     }
   }
+
+  @include sizeMixin(tab-group, (font-size)) {
+  }
 }

package/src/packages/components/Table/table/head/useHeadCellResize.ts

@@ -4,6 +4,7 @@ import {Table} from "../../index";
 import {tPlcType} from "../../plc/utils/plc.utils";
 import {addClass} from "plain-utils/dom/addClass";
 import {getComponentCls, iMouseEvent} from "plain-design-composition";
+import {ClientZoom} from "../../../ClientZoom";
 
 /**
  * 处理表头拖拽调整宽度的功能
@@ -21,6 +22,8 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
   const handler = {
     mousedown: (e: iMouseEvent) => {
 
+      const { clientX } = ClientZoom.getClientPosition(e);
+
       const tableEl = table.refs.el!;
 
       e.preventDefault();
@@ -29,7 +32,7 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
       window.addEventListener('mousemove', handler.mousemove);
       window.addEventListener('mouseup', handler.mouseup);
       disabledUserSelect();
-      state.startX = e.clientX;
+      state.startX = clientX;
 
       state.indicatorEl = document.createElement('div');
 
@@ -55,14 +58,16 @@ export function useHeadCellResize(table: typeof Table.use.class, getPlc: () => t
       document.body.appendChild(state.indicatorEl);
     },
     mousemove: (e: MouseEvent) => {
-      state.indicatorEl!.style.transform = `translate3d(${e.clientX}px,0,0)`;
+      const { clientX } = ClientZoom.getClientPosition(e);
+      state.indicatorEl!.style.transform = `translate3d(${clientX}px,0,0)`;
     },
     mouseup: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
       window.removeEventListener('mousemove', handler.mousemove);
       window.removeEventListener('mouseup', handler.mouseup);
       enableUserSelect();
       document.body.removeChild(state.indicatorEl!);
-      state.endX = e.clientX;
+      state.endX = clientX;
       let durWidth = state.endX - state.startX!;
       getPlc().setDurWidth(durWidth);
     }