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

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

@@ -1,125 +1,125 @@
-import './color-sv-panel.scss';
-import {computed, designComponent, getComponentCls, iMouseEvent, reactive, useRefs, useStyles, watch} from "@peryl/react-compose";
-import {unit} from "@peryl/utils/unit";
-import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
-import {enableUserSelect} from "@peryl/utils/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>
-      )
-    };
-  },
-});
+import './color-sv-panel.scss';
+import {computed, designComponent, getComponentCls, iMouseEvent, reactive, useRefs, useStyles, watch} from "@peryl/react-compose";
+import {unit} from "@peryl/utils/unit";
+import {disabledUserSelect} from "@peryl/utils/disabledUserSelect";
+import {enableUserSelect} from "@peryl/utils/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);
+}

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

@@ -1,22 +1,22 @@
-@include prefix(color-slider) {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  border-radius: plv(box-size-small-border-radius);
-
-  .color-slider-thumb {
-    position: relative;
-    pointer-events: none;
-    z-index: 1;
-    margin: 0 1px;
-    display: inline-block;
-    background-color: white;
-    box-sizing: border-box;
-  }
-
-  &.color-slider-disabled {
-    cursor: not-allowed;
-  }
-}
+@include prefix(color-slider) {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  border-radius: plv(box-size-small-border-radius);
+
+  .color-slider-thumb {
+    position: relative;
+    pointer-events: none;
+    z-index: 1;
+    margin: 0 1px;
+    display: inline-block;
+    background-color: white;
+    box-sizing: border-box;
+  }
+
+  &.color-slider-disabled {
+    cursor: not-allowed;
+  }
+}

package/src/packages/components/ColorPicker/sub/color-sv-panel.scss

@@ -1,55 +1,55 @@
-@include prefix(color-sv-panel) {
-  position: relative;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
-  cursor: pointer;
-  display: inline-block;
-  border-radius: plv(box-size-small-border-radius);
-
-  &:before, &:after, & span {
-    pointer-events: none;
-  }
-
-  &, &:before, &:after {
-    border-radius: plv(box-size-small-border-radius);
-  }
-
-  &:before, &:after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    content: '';
-  }
-
-  &:before {
-    background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
-  }
-
-  &:after {
-    background: linear-gradient(to top, black, rgba(255, 255, 255, 0));
-  }
-
-  .color-sv-thumb {
-    display: inline-block;
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    left: 0;
-    top: 0;
-    z-index: 1;
-
-    &:after {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      border-radius: 10px;
-      border: solid 2px white;
-      position: absolute;
-      top: -5px;
-      left: -5px;
-      content: '';
-      box-sizing: border-box;
-    }
-  }
-}
+@include prefix(color-sv-panel) {
+  position: relative;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  display: inline-block;
+  border-radius: plv(box-size-small-border-radius);
+
+  &:before, &:after, & span {
+    pointer-events: none;
+  }
+
+  &, &:before, &:after {
+    border-radius: plv(box-size-small-border-radius);
+  }
+
+  &:before, &:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    content: '';
+  }
+
+  &:before {
+    background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
+  }
+
+  &:after {
+    background: linear-gradient(to top, black, rgba(255, 255, 255, 0));
+  }
+
+  .color-sv-thumb {
+    display: inline-block;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    left: 0;
+    top: 0;
+    z-index: 1;
+
+    &:after {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 10px;
+      border: solid 2px white;
+      position: absolute;
+      top: -5px;
+      left: -5px;
+      content: '';
+      box-sizing: border-box;
+    }
+  }
+}

package/src/packages/components/ColorPicker/useColorPanelEditor.tsx

@@ -1,119 +1,119 @@
-import {computed, reactive, watch} from "@peryl/react-compose";
-import {PlainColor} from "./utils/PlainColor";
-import {iColorPublicPropsType} from "./utils/color-picker.utils";
-
-export function useColorPanelEditor(
-  {
-    getColor,
-    onChange,
-    props,
-  }: {
-    getColor: () => PlainColor,
-    onChange: (color: PlainColor) => void,
-    props: iColorPublicPropsType,
-  }
-) {
-
-  const state = reactive({
-    editValue: (() => {
-      const { r, g, b, a, hex } = getColor();
-      return {
-        r, g, b, a, hex
-      };
-    })()
-  });
-
-  watch(() => getColor(), color => {
-    const { r, g, b, a, hex } = color;
-    state.editValue = { r, g, b, a, hex };
-  });
-
-  const handler = {
-    onHexChange: (e: any) => {
-      let hex = e.target.value;
-      state.editValue.hex = hex;
-      if (hex.length < 6) {
-        return;
-      }
-      if (hex.indexOf('#') === -1) {
-        hex = '#' + hex;
-      }
-      let color: PlainColor;
-      try {
-        color = new PlainColor(hex);
-      } catch (e) {
-        color = new PlainColor('#000000');
-      }
-      onChange(color);
-    },
-    onRChange: (e: any) => {
-      state.editValue.r = e.target.value || 0;
-      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
-        return;
-      }
-      onChange(getColor().useRgba({ r: state.editValue.r }));
-    },
-    onGChange: (e: any) => {
-      state.editValue.g = e.target.value || 0;
-      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
-        return;
-      }
-      onChange(getColor().useRgba({ g: state.editValue.g }));
-    },
-    onBChange: (e: any) => {
-      state.editValue.b = e.target.value || 0;
-      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
-        return;
-      }
-      onChange(getColor().useRgba({ b: state.editValue.b }));
-    },
-    onAlphaChange: (e: any) => {
-      let val = e.target.value;
-      state.editValue.a = val;
-      if (!val.trim()) {
-        return;
-      }
-      if (val.charAt(val.length - 1) === '.') {
-        return;
-      }
-      onChange(getColor().useRgba({ a: val }));
-    },
-    onInputFocus: (e: any) => {
-      const el = e.target as HTMLInputElement;
-      const length = el.value.length;
-      el.setSelectionRange(0, length, 'backward');
-    },
-  };
-
-  const renderContent = computed(() => {
-    const { r, g, b, a, hex } = state.editValue;
-    return () => (
-      <div className="color-panel-editor">
-        <div>
-          <input type="text" value={hex.replace('#', '')} onInput={handler.onHexChange} onFocus={handler.onInputFocus}/>
-          <span>HEX</span>
-        </div>
-        <div>
-          <input type="text" value={r} onInput={handler.onRChange} onFocus={handler.onInputFocus}/>
-          <span>R</span>
-        </div>
-        <div>
-          <input type="text" value={g} onInput={handler.onGChange} onFocus={handler.onInputFocus}/>
-          <span>G</span>
-        </div>
-        <div>
-          <input type="text" value={b} onInput={handler.onBChange} onFocus={handler.onInputFocus}/>
-          <span>B</span>
-        </div>
-        <div>
-          <input type="text" value={a} onInput={handler.onAlphaChange} readOnly={!props.enableAlpha} onFocus={handler.onInputFocus}/>
-          <span>A</span>
-        </div>
-      </div>
-    );
-  });
-
-  return {
-    renderContent,
-  };
-}
+import {computed, reactive, watch} from "@peryl/react-compose";
+import {PlainColor} from "./utils/PlainColor";
+import {iColorPublicPropsType} from "./utils/color-picker.utils";
+
+export function useColorPanelEditor(
+  {
+    getColor,
+    onChange,
+    props,
+  }: {
+    getColor: () => PlainColor,
+    onChange: (color: PlainColor) => void,
+    props: iColorPublicPropsType,
+  }
+) {
+
+  const state = reactive({
+    editValue: (() => {
+      const { r, g, b, a, hex } = getColor();
+      return {
+        r, g, b, a, hex
+      };
+    })()
+  });
+
+  watch(() => getColor(), color => {
+    const { r, g, b, a, hex } = color;
+    state.editValue = { r, g, b, a, hex };
+  });
+
+  const handler = {
+    onHexChange: (e: any) => {
+      let hex = e.target.value;
+      state.editValue.hex = hex;
+      if (hex.length < 6) {
+        return;
+      }
+      if (hex.indexOf('#') === -1) {
+        hex = '#' + hex;
+      }
+      let color: PlainColor;
+      try {
+        color = new PlainColor(hex);
+      } catch (e) {
+        color = new PlainColor('#000000');
+      }
+      onChange(color);
+    },
+    onRChange: (e: any) => {
+      state.editValue.r = e.target.value || 0;
+      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
+        return;
+      }
+      onChange(getColor().useRgba({ r: state.editValue.r }));
+    },
+    onGChange: (e: any) => {
+      state.editValue.g = e.target.value || 0;
+      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
+        return;
+      }
+      onChange(getColor().useRgba({ g: state.editValue.g }));
+    },
+    onBChange: (e: any) => {
+      state.editValue.b = e.target.value || 0;
+      if (e.target.value.charAt(e.target.value.length - 1) === '.') {
+        return;
+      }
+      onChange(getColor().useRgba({ b: state.editValue.b }));
+    },
+    onAlphaChange: (e: any) => {
+      let val = e.target.value;
+      state.editValue.a = val;
+      if (!val.trim()) {
+        return;
+      }
+      if (val.charAt(val.length - 1) === '.') {
+        return;
+      }
+      onChange(getColor().useRgba({ a: val }));
+    },
+    onInputFocus: (e: any) => {
+      const el = e.target as HTMLInputElement;
+      const length = el.value.length;
+      el.setSelectionRange(0, length, 'backward');
+    },
+  };
+
+  const renderContent = computed(() => {
+    const { r, g, b, a, hex } = state.editValue;
+    return () => (
+      <div className="color-panel-editor">
+        <div>
+          <input type="text" value={hex.replace('#', '')} onInput={handler.onHexChange} onFocus={handler.onInputFocus}/>
+          <span>HEX</span>
+        </div>
+        <div>
+          <input type="text" value={r} onInput={handler.onRChange} onFocus={handler.onInputFocus}/>
+          <span>R</span>
+        </div>
+        <div>
+          <input type="text" value={g} onInput={handler.onGChange} onFocus={handler.onInputFocus}/>
+          <span>G</span>
+        </div>
+        <div>
+          <input type="text" value={b} onInput={handler.onBChange} onFocus={handler.onInputFocus}/>
+          <span>B</span>
+        </div>
+        <div>
+          <input type="text" value={a} onInput={handler.onAlphaChange} readOnly={!props.enableAlpha} onFocus={handler.onInputFocus}/>
+          <span>A</span>
+        </div>
+      </div>
+    );
+  });
+
+  return {
+    renderContent,
+  };
+}