plain-design 1.0.0-beta.3 → 1.0.0-beta.5

package/src/packages/components/ColorPicker/sub/ColorHueSlider.tsx

@@ -1,17 +1,17 @@
-import {designComponent, getComponentCls} from 'plain-design-composition';
-import './color-hue-slider.scss';
-import {ColorSlider} from "./ColorSlider";
-
-export const ColorHueSlider = designComponent({
-  name: 'color-hue-slider',
-  props: {},
-  inheritPropsType: ColorSlider,
-  setup() {
-    return () => (
-      <ColorSlider
-        className={getComponentCls('color-hue-slider')}
-        total={360}
-      />
-    );
-  },
-});
+import {designComponent, getComponentCls} from 'plain-design-composition';
+import './color-hue-slider.scss';
+import {ColorSlider} from "./ColorSlider";
+
+export const ColorHueSlider = designComponent({
+  name: 'color-hue-slider',
+  props: {},
+  inheritPropsType: ColorSlider,
+  setup() {
+    return () => (
+      <ColorSlider
+        className={getComponentCls('color-hue-slider')}
+        total={360}
+      />
+    );
+  },
+});

package/src/packages/components/ColorPicker/sub/ColorSlider.tsx

@@ -1,160 +1,163 @@
-import {computed, designComponent, getComponentCls, iMouseEvent, useClasses, useModel, useMounted, useRefs, useStyles} from "plain-design-composition";
-import {EditProps, useEdit} from "../../../uses/useEdit";
-import {unit} from "plain-utils/string/unit";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
-import './color-slider.scss';
-
-export const ColorSlider = designComponent({
-  name: 'color-slider',
-  props: {
-    ...EditProps,
-    modelValue: { type: Number, default: 0 },                     // 绑定值
-    background: { type: String },                                 // 背景
-    size: { type: Number, default: 10 },                          // 高度
-    thumbSize: { type: Number, default: 4 },                      // 高度
-    total: { type: Number, required: true },                      // 总数
-  },
-  emits: {
-    onUpdateModelValue: (val: number) => true,
-  },
-  slots: ['default'],
-  inheritPropsType: HTMLDivElement,
-  setup({ props, event: { emit }, slots }) {
-
-    /**
-     * 双向绑定值
-     * @author  韦胜健
-     * @date    2022.12.10 22:59
-     */
-    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-
-    const { editComputed } = useEdit();
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement, });
-
-    /**
-     * 总长度
-     * @author  韦胜健
-     * @date    2022.12.10 22:59
-     */
-    const totalLength = (() => {
-      const isMounted = useMounted();
-      return computed((): number => {
-        if (!isMounted.value) {return 0;}
-        return !!refs.el ? (refs.el.offsetWidth - props.thumbSize! - 2) : 0;
-      });
-    })();
-
-    /**
-     * 当前绑定值转换成百分比
-     * @author  韦胜健
-     * @date    2022.12.10 22:59
-     */
-    const percent = computed(() => (model.value || 0) / props.total);
-
-    /**
-     * 根节点样式
-     * @author  韦胜健
-     * @date    2022.12.11 13:46
-     */
-    const classes = useClasses(() => [
-      getComponentCls('color-slider'),
-      {
-        'color-slider-disabled': editComputed.value.disabled
-      }
-    ]);
-
-    /**
-     * 根节点行内样式
-     * @author  韦胜健
-     * @date    2022.12.10 22:59
-     */
-    const styles = useStyles((styles) => {
-      styles.height = unit(props.size);
-    });
-
-    /**
-     * 指示器行内样式
-     * @author  韦胜健
-     * @date    2022.12.10 23:00
-     */
-    const thumbStyles = useStyles((styles) => {
-      const length = percent.value * totalLength.value;
-      styles.transform = `translateX(${length}px)`;
-      styles.height = `calc(${unit(props.size)} - 2px)`;
-      styles.width = unit(props.thumbSize);
-    });
-
-    const utils = {
-      /**
-       * 设置值
-       * @author  韦胜健
-       * @date    2022.12.10 23:00
-       */
-      setOffsetX: (offsetX: number) => {
-        let val = Number(((offsetX / totalLength.value) * props.total).toFixed(0));
-        model.value = Math.max(0, Math.min(props.total, val));
-      },
-    };
-
-    const draggier = (() => {
-      const { effects: draggierEffects } = createEffects();
-      let staticState = null as null | {
-        start: {
-          x: number,
-          y: number,
-          offsetX: number
-        }
-      };
-      const handler = {
-        onMousedown: (e: iMouseEvent) => {
-          utils.setOffsetX(e.nativeEvent.offsetX);
-          staticState = {
-            start: {
-              x: e.clientX,
-              y: e.clientY,
-              offsetX: e.nativeEvent.offsetX,
-            }
-          };
-          draggierEffects.push(() => staticState = null);
-          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();});
-        },
-        onMousemove: (e: MouseEvent) => {
-          if (!staticState) {return;}
-          const durX = e.clientX - staticState.start.x;
-          const newOffsetX = durX + staticState.start.offsetX;
-          utils.setOffsetX(newOffsetX);
-        },
-        onMouseup: () => {
-          draggierEffects.clear();
-        },
-      };
-      return { onMousedown: handler.onMousedown };
-    })();
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => (
-        <div
-          className={classes.value}
-          style={styles.value}
-          onMouseDown={editComputed.value.editable ? draggier.onMousedown : undefined}
-          ref={onRef.el}
-        >
-          {!editComputed.value.disabled && <span className="color-slider-thumb" style={thumbStyles.value}/>}
-          {slots.default()}
-        </div>
-      )
-    };
-  },
-});
+import {computed, designComponent, getComponentCls, iMouseEvent, useClasses, useModel, useMounted, useRefs, useStyles} from "plain-design-composition";
+import {EditProps, useEdit} from "../../../uses/useEdit";
+import {unit} from "plain-utils/string/unit";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
+import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import './color-slider.scss';
+import {ClientZoom} from "../../ClientZoom";
+
+export const ColorSlider = designComponent({
+  name: 'color-slider',
+  props: {
+    ...EditProps,
+    modelValue: { type: Number, default: 0 },                     // 绑定值
+    background: { type: String },                                 // 背景
+    size: { type: Number, default: 10 },                          // 高度
+    thumbSize: { type: Number, default: 4 },                      // 高度
+    total: { type: Number, required: true },                      // 总数
+  },
+  emits: {
+    onUpdateModelValue: (val: number) => true,
+  },
+  slots: ['default'],
+  inheritPropsType: HTMLDivElement,
+  setup({ props, event: { emit }, slots }) {
+
+    /**
+     * 双向绑定值
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
+
+    const { editComputed } = useEdit();
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement, });
+
+    /**
+     * 总长度
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const totalLength = (() => {
+      const isMounted = useMounted();
+      return computed((): number => {
+        if (!isMounted.value) {return 0;}
+        return !!refs.el ? (refs.el.offsetWidth - props.thumbSize! - 2) : 0;
+      });
+    })();
+
+    /**
+     * 当前绑定值转换成百分比
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const percent = computed(() => (model.value || 0) / props.total);
+
+    /**
+     * 根节点样式
+     * @author  韦胜健
+     * @date    2022.12.11 13:46
+     */
+    const classes = useClasses(() => [
+      getComponentCls('color-slider'),
+      {
+        'color-slider-disabled': editComputed.value.disabled
+      }
+    ]);
+
+    /**
+     * 根节点行内样式
+     * @author  韦胜健
+     * @date    2022.12.10 22:59
+     */
+    const styles = useStyles((styles) => {
+      styles.height = unit(props.size);
+    });
+
+    /**
+     * 指示器行内样式
+     * @author  韦胜健
+     * @date    2022.12.10 23:00
+     */
+    const thumbStyles = useStyles((styles) => {
+      const length = percent.value * totalLength.value;
+      styles.transform = `translateX(${length}px)`;
+      styles.height = `calc(${unit(props.size)} - 2px)`;
+      styles.width = unit(props.thumbSize);
+    });
+
+    const utils = {
+      /**
+       * 设置值
+       * @author  韦胜健
+       * @date    2022.12.10 23:00
+       */
+      setOffsetX: (offsetX: number) => {
+        let val = Number(((offsetX / totalLength.value) * props.total).toFixed(0));
+        model.value = Math.max(0, Math.min(props.total, val));
+      },
+    };
+
+    const draggier = (() => {
+      const { effects: draggierEffects } = createEffects();
+      let staticState = null as null | {
+        start: {
+          x: number,
+          y: number,
+          offsetX: number
+        }
+      };
+      const handler = {
+        onMousedown: (e: iMouseEvent) => {
+          const { clientX, clientY, offsetX } = ClientZoom.getClientPosition(e);
+          utils.setOffsetX(offsetX);
+          staticState = {
+            start: {
+              x: clientX,
+              y: clientY,
+              offsetX: offsetX,
+            }
+          };
+          draggierEffects.push(() => staticState = null);
+          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();});
+        },
+        onMousemove: (e: MouseEvent) => {
+          if (!staticState) {return;}
+          const { clientX } = ClientZoom.getClientPosition(e);
+          const durX = clientX - staticState.start.x;
+          const newOffsetX = durX + staticState.start.offsetX;
+          utils.setOffsetX(newOffsetX);
+        },
+        onMouseup: () => {
+          draggierEffects.clear();
+        },
+      };
+      return { onMousedown: handler.onMousedown };
+    })();
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div
+          className={classes.value}
+          style={styles.value}
+          onMouseDown={editComputed.value.editable ? draggier.onMousedown : undefined}
+          ref={onRef.el}
+        >
+          {!editComputed.value.disabled && <span className="color-slider-thumb" style={thumbStyles.value}/>}
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});

package/src/packages/components/ColorPicker/sub/ColorSvPanel.tsx

@@ -1,122 +1,125 @@
-import './color-sv-panel.scss';
-import {computed, designComponent, getComponentCls, iMouseEvent, reactive, useRefs, useStyles, watch} from "plain-design-composition";
-import {unit} from "plain-utils/string/unit";
-import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
-import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
-import {getRgbColor} from "../../../utils/color.utils";
-import Color from 'color';
-
-export const ColorSvPanel = designComponent({
-  name: 'color-sv-panel',
-  props: {
-    hue: { type: Number, default: 360 },                      // 色相
-    saturation: { type: Number },                             // 饱和度
-    modelValue: { type: Number },                             // 亮度
-    width: { type: Number, default: 200 },          // 面板宽度
-    height: { type: Number, default: 150 },         // 面板高度
-    disable: { type: Boolean },                               // 是否禁用sv panel
-  },
-  inheritPropsType: HTMLDivElement,
-  emits: {
-    onChange: (val: any) => true,
-    onDblclick: (e: iMouseEvent) => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    const { refs, onRef } = useRefs({ el: HTMLDivElement });
-
-    const state = reactive({
-      val: props.modelValue == null ? null : 100 - Number(props.modelValue),
-      saturation: props.saturation,
-      startX: 0,
-      startY: 0,
-      tempSaturation: 0,
-      tempValue: 0,
-    });
-
-    const styles = useStyles(() => {
-      const color = Color({ h: props.hue, v: 100, s: 100 });
-      return {
-        width: unit(props.width),
-        height: unit(props.height),
-        backgroundColor: getRgbColor(color),
-      };
-    });
-
-    const thumbStyles = computed(() => {
-      let { val, saturation } = state;
-      val = val == null ? 50 : val;
-      saturation = saturation == null ? 50 : saturation;
-      return {
-        transform: `translate3d(${saturation * (props.width as number) / 100}px,${val * (props.height as number) / 100}px,0)`,
-      };
-    });
-
-    const methods = {
-      updatePosition: (x: number, y: number, isMouseDown = true): void => {
-        const durX = Number((x / (props.width as number) * 100).toFixed(0));
-        const durY = Number((y / (props.height as number) * 100).toFixed(0));
-
-        state.saturation = (isMouseDown ? 0 : state.tempSaturation) + durX;
-        state.val = (isMouseDown ? 0 : state.tempValue) + durY;
-        state.saturation = Math.max(0, Math.min(100, state.saturation));
-        state.val = Math.max(0, Math.min(100, state.val));
-
-        emit.onChange({ hue: props.hue, saturation: state.saturation, value: 100 - state.val });
-      },
-    };
-
-    const handler = {
-      mousedown: (e: iMouseEvent) => {
-        document.body.addEventListener('mousemove', handler.mousemove);
-        document.body.addEventListener('mouseup', handler.mouseup);
-        disabledUserSelect();
-        methods.updatePosition(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
-        state.startX = e.clientX;
-        state.startY = e.clientY;
-        state.tempSaturation = state.saturation as number;
-        state.tempValue = state.val as number;
-      },
-      mousemove: (e: MouseEvent) => {
-        methods.updatePosition(e.clientX - state.startX, e.clientY - state.startY, false);
-      },
-      mouseup: () => {
-        document.body.removeEventListener('mousemove', handler.mousemove);
-        document.body.removeEventListener('mouseup', handler.mouseup);
-        enableUserSelect();
-      },
-    };
-
-    watch(() => props.modelValue, (val) => {
-      if (val == null) {
-        state.val = null;
-        return;
-      }
-      if (state.val !== 100 - val) state.val = 100 - val;
-    });
-    watch(() => props.saturation, (val) => {
-      if (val == null) {
-        state.saturation = undefined;
-        return;
-      }
-      if (state.saturation !== val) state.saturation = val;
-    });
-
-    return {
-      refer: {
-        refs,
-      },
-      render: () => (
-        <div
-          className={getComponentCls('color-sv-panel')}
-          style={styles.value}
-          onMouseDown={props.disable ? undefined : handler.mousedown}
-          ref={onRef.el}
-          onDoubleClick={emit.onDblclick}
-        >
-          <span className="color-sv-thumb" style={thumbStyles.value}/>
-        </div>
-      )
-    };
-  },
-});
+import './color-sv-panel.scss';
+import {computed, designComponent, getComponentCls, iMouseEvent, reactive, useRefs, useStyles, watch} from "plain-design-composition";
+import {unit} from "plain-utils/string/unit";
+import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
+import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {getRgbColor} from "../../../utils/color.utils";
+import Color from 'color';
+import {ClientZoom} from "../../..";
+
+export const ColorSvPanel = designComponent({
+  name: 'color-sv-panel',
+  props: {
+    hue: { type: Number, default: 360 },                      // 色相
+    saturation: { type: Number },                             // 饱和度
+    modelValue: { type: Number },                             // 亮度
+    width: { type: Number, default: 200 },          // 面板宽度
+    height: { type: Number, default: 150 },         // 面板高度
+    disable: { type: Boolean },                               // 是否禁用sv panel
+  },
+  inheritPropsType: HTMLDivElement,
+  emits: {
+    onChange: (val: any) => true,
+    onDblclick: (e: iMouseEvent) => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+
+    const state = reactive({
+      val: props.modelValue == null ? null : 100 - Number(props.modelValue),
+      saturation: props.saturation,
+      startX: 0,
+      startY: 0,
+      tempSaturation: 0,
+      tempValue: 0,
+    });
+
+    const styles = useStyles(() => {
+      const color = Color({ h: props.hue, v: 100, s: 100 });
+      return {
+        width: unit(props.width),
+        height: unit(props.height),
+        backgroundColor: getRgbColor(color),
+      };
+    });
+
+    const thumbStyles = computed(() => {
+      let { val, saturation } = state;
+      val = val == null ? 50 : val;
+      saturation = saturation == null ? 50 : saturation;
+      return {
+        transform: `translate3d(${saturation * (props.width as number) / 100}px,${val * (props.height as number) / 100}px,0)`,
+      };
+    });
+
+    const methods = {
+      updatePosition: (x: number, y: number, isMouseDown = true): void => {
+        const durX = Number((x / (props.width as number) * 100).toFixed(0));
+        const durY = Number((y / (props.height as number) * 100).toFixed(0));
+
+        state.saturation = (isMouseDown ? 0 : state.tempSaturation) + durX;
+        state.val = (isMouseDown ? 0 : state.tempValue) + durY;
+        state.saturation = Math.max(0, Math.min(100, state.saturation));
+        state.val = Math.max(0, Math.min(100, state.val));
+
+        emit.onChange({ hue: props.hue, saturation: state.saturation, value: 100 - state.val });
+      },
+    };
+
+    const handler = {
+      mousedown: (e: iMouseEvent) => {
+        document.body.addEventListener('mousemove', handler.mousemove);
+        document.body.addEventListener('mouseup', handler.mouseup);
+        disabledUserSelect();
+        const { offsetX, offsetY, clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(offsetX, offsetY);
+        state.startX = clientX;
+        state.startY = clientY;
+        state.tempSaturation = state.saturation as number;
+        state.tempValue = state.val as number;
+      },
+      mousemove: (e: MouseEvent) => {
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
+        methods.updatePosition(clientX - state.startX, clientY - state.startY, false);
+      },
+      mouseup: () => {
+        document.body.removeEventListener('mousemove', handler.mousemove);
+        document.body.removeEventListener('mouseup', handler.mouseup);
+        enableUserSelect();
+      },
+    };
+
+    watch(() => props.modelValue, (val) => {
+      if (val == null) {
+        state.val = null;
+        return;
+      }
+      if (state.val !== 100 - val) state.val = 100 - val;
+    });
+    watch(() => props.saturation, (val) => {
+      if (val == null) {
+        state.saturation = undefined;
+        return;
+      }
+      if (state.saturation !== val) state.saturation = val;
+    });
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div
+          className={getComponentCls('color-sv-panel')}
+          style={styles.value}
+          onMouseDown={props.disable ? undefined : handler.mousedown}
+          ref={onRef.el}
+          onDoubleClick={emit.onDblclick}
+        >
+          <span className="color-sv-thumb" style={thumbStyles.value}/>
+        </div>
+      )
+    };
+  },
+});

package/src/packages/components/ColorPicker/sub/color-alpha-slider.scss

@@ -1,8 +1,8 @@
-@include prefix(color-alpha-slider) {
-  background-size: 10px 10px;
-  .color-alpha-shadow {
-    pointer-events: none;
-    border-radius: plv(box-size-small-border-radius);
-    @include inset;
-  }
-}
+@include prefix(color-alpha-slider) {
+  background-size: 10px 10px;
+  .color-alpha-shadow {
+    pointer-events: none;
+    border-radius: plv(box-size-small-border-radius);
+    @include inset;
+  }
+}

package/src/packages/components/ColorPicker/sub/color-hue-slider.scss

@@ -1,3 +1,3 @@
-@include prefix(color-hue-slider) {
-  background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
-}
+@include prefix(color-hue-slider) {
+  background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
+}