plain-design 1.0.0-beta.145 → 1.0.0-beta.147

package/src/packages/components/Slider/useSlider.single.tsx

@@ -1,148 +1,148 @@
-import {iSliderPublicParams} from "./slider.utils";
-import {createEffectsOfReaction, useModel, useStyles} from "@peryl/react-compose";
-import {unit} from "@peryl/utils/unit";
-import {useSliderDotDraggier} from "./useSliderDotDragier";
-
-export function useSliderSingle(
-  {
-    props,
-    event,
-    hooks,
-    totalLength,
-    utils,
-    editComputed,
-  }: iSliderPublicParams) {
-
-  const { effects, effectComputed } = createEffectsOfReaction();
-
-  const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, { autoEmit: props.emitImmediate }, effects);
-
-  /**
-   * 当前百分比
-   * @author  韦胜健
-   * @date    2022.12.10 15:42
-   */
-  const percent = effectComputed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
-
-  /**
-   * 进度条行内样式
-   * @author  韦胜健
-   * @date    2022.12.10 15:42
-   */
-  const progressStyles = useStyles((styles) => {
-    if (!totalLength.value) {return;}
-    let percentValue = percent.value;
-    if (percentValue === 1) {
-      /*当没有缩放或者缩放为1时，奇怪的是progress会缩小一点，这里让其不能等于1*/
-      percentValue = 0.99;
-    }
-    if (!props.vertical) {
-      styles.transform = `scaleX(${percentValue})`;
-      styles.transformOrigin = props.alignEnd ? 'right' : 'left';
-    } else {
-      styles.transform = `scaleY(${percentValue})`;
-      styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
-    }
-  }, effects);
-
-  /**
-   * 指示器行内样式
-   * @author  韦胜健
-   * @date    2022.12.10 15:42
-   */
-  const dotStyles = useStyles((styles) => {
-    styles.width = unit(props.size);
-    styles.height = unit(props.size);
-    let length = Number(!props.alignEnd ? percent.value : 1 - Number(percent.value)) * totalLength.value;
-    if (!props.vertical) {
-      styles.transform = `translateX(${length}px)`;
-    } else {
-      styles.transform = `translateY(${length}px)`;
-    }
-  }, effects);
-
-  /**
-   * 指示器拖拽行为
-   * @author  韦胜健
-   * @date    2022.12.10 15:42
-   */
-  const dotDraggier = useSliderDotDraggier(
-    hooks,
-    () => Number(percent.value),
-    ({ durY, durX, state: percent }) => {
-      const durValue = !props.vertical ? durX : durY;
-      const newPercent = Math.max(0, Math.min(1, percent + (durValue * (props.alignEnd ? -1 : 1) / totalLength.value)));
-      let newValue = Number((newPercent * props.total).toFixed(props.integer ? 0 : 2));
-      model.value = utils.checkValue(newValue);
-    }
-  );
-
-  /**
-   * 指示器显示的tooltip文本
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  const tooltipLabel = effectComputed(() => {
-    let ret = model.value;
-    return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
-  });
-
-  /**
-   * 拖拽的时候一直显示tooltip
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  effects.push(hooks.onClasses.use(classList => {
-    if (dotDraggier.isDragging.value) {
-      classList.push('slider-dragging');
-    }
-  }));
-
-  /**
-   * 拖拽结束的时候处理emitImmediate
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  effects.push(hooks.onDragend.use(() => {
-    if (!props.emitImmediate && model.value !== props.modelValue) {
-      event.emit.onUpdateModelValue(model.value);
-    }
-  }));
-
-  /**
-   * 渲染progress
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  effects.push(hooks.onRender.use(list => {
-    list.push({
-      seq: 1,
-      key: 'progress',
-      render: () => (
-        <div className="slider-progress" style={progressStyles.value}/>
-      )
-    });
-  }));
-
-  /**
-   * 渲染指示器
-   * @author  韦胜健
-   * @date    2022.12.10 15:43
-   */
-  effects.push(hooks.onRender.use(list => {
-    list.push({
-      seq: 2,
-      key: 'dot',
-      render: () => (
-        <div className="slider-dot-wrapper">
-          <div className="slider-dot" style={dotStyles.value}>
-            {!!props.tooltip && <span className="slider-dot-tooltip">{tooltipLabel.value}</span>}
-            <div className="slider-dot-inner" onMouseDown={editComputed.value.editable ? dotDraggier.onMousedown : undefined}/>
-          </div>
-        </div>
-      )
-    });
-  }));
-
-  return effects.clear;
-}
+import {iSliderPublicParams} from "./slider.utils";
+import {createEffectsOfReaction, useModel, useStyles} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {useSliderDotDraggier} from "./useSliderDotDragier";
+
+export function useSliderSingle(
+  {
+    props,
+    event,
+    hooks,
+    totalLength,
+    utils,
+    editComputed,
+  }: iSliderPublicParams) {
+
+  const { effects, effectComputed } = createEffectsOfReaction();
+
+  const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, { autoEmit: props.emitImmediate }, effects);
+
+  /**
+   * 当前百分比
+   * @author  韦胜健
+   * @date    2022.12.10 15:42
+   */
+  const percent = effectComputed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
+
+  /**
+   * 进度条行内样式
+   * @author  韦胜健
+   * @date    2022.12.10 15:42
+   */
+  const progressStyles = useStyles((styles) => {
+    if (!totalLength.value) {return;}
+    let percentValue = percent.value;
+    if (percentValue === 1) {
+      /*当没有缩放或者缩放为1时，奇怪的是progress会缩小一点，这里让其不能等于1*/
+      percentValue = 0.99;
+    }
+    if (!props.vertical) {
+      styles.transform = `scaleX(${percentValue})`;
+      styles.transformOrigin = props.alignEnd ? 'right' : 'left';
+    } else {
+      styles.transform = `scaleY(${percentValue})`;
+      styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
+    }
+  }, effects);
+
+  /**
+   * 指示器行内样式
+   * @author  韦胜健
+   * @date    2022.12.10 15:42
+   */
+  const dotStyles = useStyles((styles) => {
+    styles.width = unit(props.size);
+    styles.height = unit(props.size);
+    let length = Number(!props.alignEnd ? percent.value : 1 - Number(percent.value)) * totalLength.value;
+    if (!props.vertical) {
+      styles.transform = `translateX(${length}px)`;
+    } else {
+      styles.transform = `translateY(${length}px)`;
+    }
+  }, effects);
+
+  /**
+   * 指示器拖拽行为
+   * @author  韦胜健
+   * @date    2022.12.10 15:42
+   */
+  const dotDraggier = useSliderDotDraggier(
+    hooks,
+    () => Number(percent.value),
+    ({ durY, durX, state: percent }) => {
+      const durValue = !props.vertical ? durX : durY;
+      const newPercent = Math.max(0, Math.min(1, percent + (durValue * (props.alignEnd ? -1 : 1) / totalLength.value)));
+      let newValue = Number((newPercent * props.total).toFixed(props.integer ? 0 : 2));
+      model.value = utils.checkValue(newValue);
+    }
+  );
+
+  /**
+   * 指示器显示的tooltip文本
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  const tooltipLabel = effectComputed(() => {
+    let ret = model.value;
+    return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
+  });
+
+  /**
+   * 拖拽的时候一直显示tooltip
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  effects.push(hooks.onClasses.use(classList => {
+    if (dotDraggier.isDragging.value) {
+      classList.push('slider-dragging');
+    }
+  }));
+
+  /**
+   * 拖拽结束的时候处理emitImmediate
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  effects.push(hooks.onDragend.use(() => {
+    if (!props.emitImmediate && model.value !== props.modelValue) {
+      event.emit.onUpdateModelValue(model.value);
+    }
+  }));
+
+  /**
+   * 渲染progress
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  effects.push(hooks.onRender.use(list => {
+    list.push({
+      seq: 1,
+      key: 'progress',
+      render: () => (
+        <div className="slider-progress" style={progressStyles.value}/>
+      )
+    });
+  }));
+
+  /**
+   * 渲染指示器
+   * @author  韦胜健
+   * @date    2022.12.10 15:43
+   */
+  effects.push(hooks.onRender.use(list => {
+    list.push({
+      seq: 2,
+      key: 'dot',
+      render: () => (
+        <div className="slider-dot-wrapper">
+          <div className="slider-dot" style={dotStyles.value}>
+            {!!props.tooltip && <span className="slider-dot-tooltip">{tooltipLabel.value}</span>}
+            <div className="slider-dot-inner" onMouseDown={editComputed.value.editable ? dotDraggier.onMousedown : undefined}/>
+          </div>
+        </div>
+      )
+    });
+  }));
+
+  return effects.clear;
+}

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

@@ -1,66 +1,66 @@
-import {createEffects} from "@peryl/utils/createEffects";
-import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
-import {enableUserSelect} from "@peryl/utils/enableUserSelect";
-import {iMouseEvent, reactive} from "@peryl/react-compose";
-import {iSliderHooks} from "./slider.utils";
-import {ClientZoom} from "../ClientZoom";
-
-export function useSliderDotDraggier<InitialState>(
-  hooks: iSliderHooks,
-  getInitialState: () => InitialState,
-  handleDraggier: (data: { durX: number, durY: number, state: InitialState }) => void,
-) {
-
-  const { effects: draggierEffects } = createEffects();
-
-  let staticState = null as null | {
-    start: {
-      x: number,
-      y: number
-    },
-    state: InitialState,
-  };
-
-  const isDragging = reactive({ value: false });
-
-  const handler = {
-    onMousedown: (e: iMouseEvent) => {
-      const { clientX, clientY } = ClientZoom.getClientPosition(e);
-      staticState = {
-        start: {
-          x: clientX,
-          y: clientY,
-        },
-        state: getInitialState(),
-      };
-      window.addEventListener('mousemove', handler.onMousemove);
-      window.addEventListener('mouseup', handler.onMouseup);
-      draggierEffects.push(() => {window.removeEventListener('mousemove', handler.onMousemove);});
-      draggierEffects.push(() => {window.removeEventListener('mouseup', handler.onMouseup);});
-
-      disabledUserSelect();
-      draggierEffects.push(() => enableUserSelect());
-
-      isDragging.value = true;
-      draggierEffects.push(() => {isDragging.value = false;});
-
-      draggierEffects.push(() => hooks.onDragend.exec(undefined));
-    },
-    onMousemove: (e: MouseEvent) => {
-      if (!staticState) {return;}
-      const { clientX, clientY } = ClientZoom.getClientPosition(e);
-      const durX = clientX - staticState.start.x;
-      const durY = clientY - staticState.start.y;
-      handleDraggier({
-        durX,
-        durY,
-        state: staticState.state,
-      });
-    },
-    onMouseup: () => {
-      draggierEffects.clear();
-    },
-  };
-
-  return { onMousedown: handler.onMousedown, isDragging };
-}
+import {createEffects} from "@peryl/utils/createEffects";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/enableUserSelect";
+import {iMouseEvent, reactive} from "@peryl/react-compose";
+import {iSliderHooks} from "./slider.utils";
+import {ClientZoom} from "../ClientZoom";
+
+export function useSliderDotDraggier<InitialState>(
+  hooks: iSliderHooks,
+  getInitialState: () => InitialState,
+  handleDraggier: (data: { durX: number, durY: number, state: InitialState }) => void,
+) {
+
+  const { effects: draggierEffects } = createEffects();
+
+  let staticState = null as null | {
+    start: {
+      x: number,
+      y: number
+    },
+    state: InitialState,
+  };
+
+  const isDragging = reactive({ value: false });
+
+  const handler = {
+    onMousedown: (e: iMouseEvent) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      staticState = {
+        start: {
+          x: clientX,
+          y: clientY,
+        },
+        state: getInitialState(),
+      };
+      window.addEventListener('mousemove', handler.onMousemove);
+      window.addEventListener('mouseup', handler.onMouseup);
+      draggierEffects.push(() => {window.removeEventListener('mousemove', handler.onMousemove);});
+      draggierEffects.push(() => {window.removeEventListener('mouseup', handler.onMouseup);});
+
+      disabledUserSelect();
+      draggierEffects.push(() => enableUserSelect());
+
+      isDragging.value = true;
+      draggierEffects.push(() => {isDragging.value = false;});
+
+      draggierEffects.push(() => hooks.onDragend.exec(undefined));
+    },
+    onMousemove: (e: MouseEvent) => {
+      if (!staticState) {return;}
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
+      const durX = clientX - staticState.start.x;
+      const durY = clientY - staticState.start.y;
+      handleDraggier({
+        durX,
+        durY,
+        state: staticState.state,
+      });
+    },
+    onMouseup: () => {
+      draggierEffects.clear();
+    },
+  };
+
+  return { onMousedown: handler.onMousedown, isDragging };
+}