@antsoo-lib/components 0.1.11 → 0.1.12

package/src/vc-image/src/Preview.tsx

@@ -1,422 +0,0 @@
-import {
-  cloneVNode,
-  computed,
-  defineComponent,
-  onMounted,
-  onUnmounted,
-  reactive,
-  shallowRef,
-  watch,
-} from 'vue'
-import type { PropType, VNode } from 'vue'
-
-import type { MouseEventHandler, WheelEventHandler } from '../../_util/EventInterface'
-import KeyCode from '../../_util/KeyCode'
-import classnames from '../../_util/classNames'
-import Dialog from '../../vc-dialog'
-import { dialogPropTypes } from '../../vc-dialog/IDialogPropTypes'
-import type { IDialogChildProps } from '../../vc-dialog/IDialogPropTypes'
-import addEventListener from '../../vc-util/Dom/addEventListener'
-import { getOffset } from '../../vc-util/Dom/css'
-import { warning } from '../../vc-util/warning'
-import { context } from './PreviewGroup'
-import getFixScaleEleTransPosition from './getFixScaleEleTransPosition'
-import useFrameSetState from './hooks/useFrameSetState'
-
-export interface PreviewProps extends Omit<IDialogChildProps, 'onClose' | 'mask'> {
-  onClose?: (e: Element) => void
-  src?: string
-  alt?: string
-  rootClassName?: string
-  icons?: {
-    rotateLeft?: VNode
-    rotateRight?: VNode
-    zoomIn?: VNode
-    zoomOut?: VNode
-    close?: VNode
-    left?: VNode
-    right?: VNode
-    flipX?: VNode
-    flipY?: VNode
-  }
-}
-
-const initialPosition = {
-  x: 0,
-  y: 0,
-}
-export const previewProps = {
-  ...dialogPropTypes(),
-  src: String,
-  alt: String,
-  rootClassName: String,
-  icons: {
-    type: Object as PropType<PreviewProps['icons']>,
-    default: () => ({}) as PreviewProps['icons'],
-  },
-}
-const Preview = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'Preview',
-  inheritAttrs: false,
-  props: previewProps,
-  emits: ['close', 'afterClose'],
-  setup(props, { emit, attrs }) {
-    const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = reactive(
-      props.icons,
-    )
-
-    const scale = shallowRef(1)
-    const rotate = shallowRef(0)
-    const flip = reactive({ x: 1, y: 1 })
-    const [position, setPosition] = useFrameSetState<{
-      x: number
-      y: number
-    }>(initialPosition)
-
-    const onClose = () => emit('close')
-    const imgRef = shallowRef<HTMLImageElement>()
-    const originPositionRef = reactive<{
-      originX: number
-      originY: number
-      deltaX: number
-      deltaY: number
-    }>({
-      originX: 0,
-      originY: 0,
-      deltaX: 0,
-      deltaY: 0,
-    })
-    const isMoving = shallowRef(false)
-    const groupContext = context.inject()
-    const { previewUrls, current, isPreviewGroup, setCurrent } = groupContext
-    const previewGroupCount = computed(() => previewUrls.value.size)
-    const previewUrlsKeys = computed(() => Array.from(previewUrls.value.keys()))
-    const currentPreviewIndex = computed(() => previewUrlsKeys.value.indexOf(current.value))
-    const combinationSrc = computed(() => {
-      return isPreviewGroup.value ? previewUrls.value.get(current.value) : props.src
-    })
-    const showLeftOrRightSwitches = computed(
-      () => isPreviewGroup.value && previewGroupCount.value > 1,
-    )
-    const lastWheelZoomDirection = shallowRef({ wheelDirection: 0 })
-
-    const onAfterClose = () => {
-      scale.value = 1
-      rotate.value = 0
-      flip.x = 1
-      flip.y = 1
-      setPosition(initialPosition)
-      emit('afterClose')
-    }
-
-    const onZoomIn = (isWheel?: boolean) => {
-      if (!isWheel) {
-        scale.value++
-      } else {
-        scale.value += 0.5
-      }
-
-      setPosition(initialPosition)
-    }
-    const onZoomOut = (isWheel?: boolean) => {
-      if (scale.value > 1) {
-        if (!isWheel) {
-          scale.value--
-        } else {
-          scale.value -= 0.5
-        }
-      }
-      setPosition(initialPosition)
-    }
-
-    const onRotateRight = () => {
-      rotate.value += 90
-    }
-
-    const onRotateLeft = () => {
-      rotate.value -= 90
-    }
-
-    const onFlipX = () => {
-      flip.x = -flip.x
-    }
-
-    const onFlipY = () => {
-      flip.y = -flip.y
-    }
-
-    const onSwitchLeft: MouseEventHandler = (event) => {
-      event.preventDefault()
-      // Without this mask close will abnormal
-      event.stopPropagation()
-      if (currentPreviewIndex.value > 0) {
-        setCurrent(previewUrlsKeys.value[currentPreviewIndex.value - 1])
-      }
-    }
-
-    const onSwitchRight: MouseEventHandler = (event) => {
-      event.preventDefault()
-      // Without this mask close will abnormal
-      event.stopPropagation()
-      if (currentPreviewIndex.value < previewGroupCount.value - 1) {
-        setCurrent(previewUrlsKeys.value[currentPreviewIndex.value + 1])
-      }
-    }
-
-    const wrapClassName = classnames({
-      [`${props.prefixCls}-moving`]: isMoving.value,
-    })
-    const toolClassName = `${props.prefixCls}-operations-operation`
-    const iconClassName = `${props.prefixCls}-operations-icon`
-    const tools = [
-      {
-        icon: close,
-        onClick: onClose,
-        type: 'close',
-      },
-      {
-        icon: zoomIn,
-        onClick: () => onZoomIn(),
-        type: 'zoomIn',
-      },
-      {
-        icon: zoomOut,
-        onClick: () => onZoomOut(),
-        type: 'zoomOut',
-        disabled: computed(() => scale.value === 1),
-      },
-      {
-        icon: rotateRight,
-        onClick: onRotateRight,
-        type: 'rotateRight',
-      },
-      {
-        icon: rotateLeft,
-        onClick: onRotateLeft,
-        type: 'rotateLeft',
-      },
-      {
-        icon: flipX,
-        onClick: onFlipX,
-        type: 'flipX',
-      },
-      {
-        icon: flipY,
-        onClick: onFlipY,
-        type: 'flipY',
-      },
-    ]
-
-    const onMouseUp: MouseEventHandler = () => {
-      if (props.visible && isMoving.value) {
-        const width = imgRef.value.offsetWidth * scale.value
-        const height = imgRef.value.offsetHeight * scale.value
-        const { left, top } = getOffset(imgRef.value)
-        const isRotate = rotate.value % 180 !== 0
-
-        isMoving.value = false
-
-        const fixState = getFixScaleEleTransPosition(
-          isRotate ? height : width,
-          isRotate ? width : height,
-          left,
-          top,
-        )
-        if (fixState) {
-          setPosition({ ...fixState })
-        }
-      }
-    }
-
-    const onMouseDown: MouseEventHandler = (event) => {
-      // Only allow main button
-      if (event.button !== 0) return
-      event.preventDefault()
-      // Without this mask close will abnormal
-      event.stopPropagation()
-      originPositionRef.deltaX = event.pageX - position.x
-      originPositionRef.deltaY = event.pageY - position.y
-      originPositionRef.originX = position.x
-      originPositionRef.originY = position.y
-      isMoving.value = true
-    }
-
-    const onMouseMove: MouseEventHandler = (event) => {
-      if (props.visible && isMoving.value) {
-        setPosition({
-          x: event.pageX - originPositionRef.deltaX,
-          y: event.pageY - originPositionRef.deltaY,
-        })
-      }
-    }
-
-    const onWheelMove: WheelEventHandler = (event) => {
-      if (!props.visible) return
-      event.preventDefault()
-      const wheelDirection = event.deltaY
-      lastWheelZoomDirection.value = { wheelDirection }
-    }
-
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (!props.visible || !showLeftOrRightSwitches.value) return
-
-      event.preventDefault()
-      if (event.keyCode === KeyCode.LEFT) {
-        if (currentPreviewIndex.value > 0) {
-          setCurrent(previewUrlsKeys.value[currentPreviewIndex.value - 1])
-        }
-      } else if (event.keyCode === KeyCode.RIGHT) {
-        if (currentPreviewIndex.value < previewGroupCount.value - 1) {
-          setCurrent(previewUrlsKeys.value[currentPreviewIndex.value + 1])
-        }
-      }
-    }
-
-    const onDoubleClick = () => {
-      if (props.visible) {
-        if (scale.value !== 1) {
-          scale.value = 1
-        }
-        if (position.x !== initialPosition.x || position.y !== initialPosition.y) {
-          setPosition(initialPosition)
-        }
-      }
-    }
-
-    let removeListeners = () => {}
-    onMounted(() => {
-      watch(
-        [() => props.visible, isMoving],
-        () => {
-          removeListeners()
-          let onTopMouseUpListener: { remove: any }
-          let onTopMouseMoveListener: { remove: any }
-
-          const onMouseUpListener = addEventListener(window, 'mouseup', onMouseUp, false)
-          const onMouseMoveListener = addEventListener(window, 'mousemove', onMouseMove, false)
-          const onScrollWheelListener = addEventListener(window, 'wheel', onWheelMove, {
-            passive: false,
-          })
-          const onKeyDownListener = addEventListener(window, 'keydown', onKeyDown, false)
-
-          try {
-            // Resolve if in iframe lost event
-            /* istanbul ignore next */
-            if (window.top !== window.self) {
-              onTopMouseUpListener = addEventListener(window.top, 'mouseup', onMouseUp, false)
-              onTopMouseMoveListener = addEventListener(window.top, 'mousemove', onMouseMove, false)
-            }
-          } catch (error) {
-            /* istanbul ignore next */
-            warning(false, `[vc-image] ${error}`)
-          }
-
-          removeListeners = () => {
-            onMouseUpListener.remove()
-            onMouseMoveListener.remove()
-            onScrollWheelListener.remove()
-            onKeyDownListener.remove()
-
-            /* istanbul ignore next */
-            if (onTopMouseUpListener) onTopMouseUpListener.remove()
-            /* istanbul ignore next */
-            if (onTopMouseMoveListener) onTopMouseMoveListener.remove()
-          }
-        },
-        { flush: 'post', immediate: true },
-      )
-      watch([lastWheelZoomDirection], () => {
-        const { wheelDirection } = lastWheelZoomDirection.value
-        if (wheelDirection > 0) {
-          onZoomOut(true)
-        } else if (wheelDirection < 0) {
-          onZoomIn(true)
-        }
-      })
-    })
-    onUnmounted(() => {
-      removeListeners()
-    })
-
-    return () => {
-      const { visible, prefixCls, rootClassName } = props
-      return (
-        <Dialog
-          {...attrs}
-          transitionName={props.transitionName}
-          maskTransitionName={props.maskTransitionName}
-          closable={false}
-          keyboard
-          prefixCls={prefixCls}
-          onClose={onClose}
-          afterClose={onAfterClose}
-          visible={visible}
-          wrapClassName={wrapClassName}
-          rootClassName={rootClassName}
-          getContainer={props.getContainer}
-        >
-          <div class={[`${props.prefixCls}-operations-wrapper`, rootClassName]}>
-            <ul class={`${props.prefixCls}-operations`}>
-              {tools.map(({ icon: IconType, onClick, type, disabled }) => (
-                <li
-                  class={classnames(toolClassName, {
-                    [`${props.prefixCls}-operations-operation-disabled`]:
-                      disabled && disabled?.value,
-                  })}
-                  onClick={onClick}
-                  key={type}
-                >
-                  {cloneVNode(IconType, { class: iconClassName })}
-                </li>
-              ))}
-            </ul>
-          </div>
-          <div
-            class={`${props.prefixCls}-img-wrapper`}
-            style={{
-              transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
-            }}
-          >
-            <img
-              onMousedown={onMouseDown}
-              onDblclick={onDoubleClick}
-              ref={imgRef}
-              class={`${props.prefixCls}-img`}
-              src={combinationSrc.value}
-              alt={props.alt}
-              style={{
-                transform: `scale3d(${flip.x * scale.value}, ${flip.y * scale.value}, 1) rotate(${
-                  rotate.value
-                }deg)`,
-              }}
-            />
-          </div>
-          {showLeftOrRightSwitches.value && (
-            <div
-              class={classnames(`${props.prefixCls}-switch-left`, {
-                [`${props.prefixCls}-switch-left-disabled`]: currentPreviewIndex.value <= 0,
-              })}
-              onClick={onSwitchLeft}
-            >
-              {left}
-            </div>
-          )}
-          {showLeftOrRightSwitches.value && (
-            <div
-              class={classnames(`${props.prefixCls}-switch-right`, {
-                [`${props.prefixCls}-switch-right-disabled`]:
-                  currentPreviewIndex.value >= previewGroupCount.value - 1,
-              })}
-              onClick={onSwitchRight}
-            >
-              {right}
-            </div>
-          )}
-        </Dialog>
-      )
-    }
-  },
-})
-
-export default Preview

package/src/vc-image/src/PreviewGroup.tsx

@@ -1,212 +0,0 @@
-import type { ComputedRef, PropType, Ref } from 'vue'
-import {
-  computed,
-  defineComponent,
-  inject,
-  provide,
-  reactive,
-  ref,
-  shallowRef,
-  watch,
-  watchEffect,
-} from 'vue'
-
-import useMergedState from '../../_util/hooks/useMergedState'
-import { mergeDefaultValue } from './Image'
-import type { ImagePreviewType } from './Image'
-import Preview from './Preview'
-import type { PreviewProps } from './Preview'
-
-export interface PreviewGroupPreview extends Omit<
-  ImagePreviewType,
-  'icons' | 'mask' | 'maskClassName'
-> {
-  /**
-   * If Preview the show img index
-   * @default 0
-   */
-  current?: number
-}
-
-export interface GroupConsumerProps {
-  previewPrefixCls?: string
-  icons?: PreviewProps['icons']
-  preview?: boolean | PreviewGroupPreview
-}
-
-interface PreviewUrl {
-  url: string
-  canPreview: boolean
-}
-
-export interface GroupConsumerValue extends GroupConsumerProps {
-  isPreviewGroup?: Ref<boolean | undefined>
-  previewUrls: ComputedRef<Map<number, string>>
-  setPreviewUrls: (id: number, url: string, canPreview?: boolean) => void
-  current: Ref<number>
-  setCurrent: (current: number) => void
-  setShowPreview: (isShowPreview: boolean) => void
-  setMousePosition: (mousePosition: null | { x: number; y: number }) => void
-  registerImage: (id: number, url: string, canPreview?: boolean) => () => void
-  rootClassName?: string
-}
-const previewGroupContext = Symbol('previewGroupContext')
-export const context = {
-  provide: (val: GroupConsumerValue) => {
-    provide(previewGroupContext, val)
-  },
-  inject: () => {
-    return inject<GroupConsumerValue>(previewGroupContext, {
-      isPreviewGroup: shallowRef(false),
-      previewUrls: computed(() => new Map()),
-      setPreviewUrls: () => {},
-      current: ref(null),
-      setCurrent: () => {},
-      setShowPreview: () => {},
-      setMousePosition: () => {},
-      registerImage: null,
-      rootClassName: '',
-    })
-  },
-}
-
-export const imageGroupProps = () => ({
-  previewPrefixCls: String,
-  preview: {
-    type: [Boolean, Object] as PropType<boolean | ImagePreviewType>,
-    default: true as boolean | ImagePreviewType,
-  },
-  icons: {
-    type: Object as PropType<PreviewProps['icons']>,
-    default: () => ({}),
-  },
-})
-
-const Group = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'PreviewGroup',
-  inheritAttrs: false,
-  props: imageGroupProps(),
-  setup(props, { slots }) {
-    const preview = computed<PreviewGroupPreview>(() => {
-      const defaultValues = {
-        visible: undefined,
-        onVisibleChange: () => {},
-        getContainer: undefined,
-        current: 0,
-      }
-      return typeof props.preview === 'object'
-        ? mergeDefaultValue(props.preview, defaultValues)
-        : defaultValues
-    })
-    const previewUrls = reactive(new Map<number, PreviewUrl>())
-    const current = ref<number>()
-
-    const previewVisible = computed(() => preview.value.visible)
-    const getPreviewContainer = computed(() => preview.value.getContainer)
-    const onPreviewVisibleChange = (val, preval) => {
-      preview.value.onVisibleChange?.(val, preval)
-    }
-    const [isShowPreview, setShowPreview] = useMergedState(!!previewVisible.value, {
-      value: previewVisible,
-      onChange: onPreviewVisibleChange,
-    })
-
-    const mousePosition = ref<{ x: number; y: number }>(null)
-    const isControlled = computed(() => previewVisible.value !== undefined)
-    const previewUrlsKeys = computed(() => Array.from(previewUrls.keys()))
-    const currentControlledKey = computed(() => previewUrlsKeys.value[preview.value.current])
-    const canPreviewUrls = computed(
-      () =>
-        new Map<number, string>(
-          Array.from(previewUrls)
-            .filter(([, { canPreview }]) => !!canPreview)
-            .map(([id, { url }]) => [id, url]),
-        ),
-    )
-
-    const setPreviewUrls = (id: number, url: string, canPreview = true) => {
-      previewUrls.set(id, {
-        url,
-        canPreview,
-      })
-    }
-    const setCurrent = (val: number) => {
-      current.value = val
-    }
-    const setMousePosition = (val: null | { x: number; y: number }) => {
-      mousePosition.value = val
-    }
-
-    const registerImage = (id: number, url: string, canPreview = true) => {
-      const unRegister = () => {
-        previewUrls.delete(id)
-      }
-      previewUrls.set(id, {
-        url,
-        canPreview,
-      })
-      return unRegister
-    }
-
-    const onPreviewClose = (e: any) => {
-      e?.stopPropagation()
-      setShowPreview(false)
-      setMousePosition(null)
-    }
-
-    watch(
-      currentControlledKey,
-      (val) => {
-        setCurrent(val)
-      },
-      {
-        immediate: true,
-        flush: 'post',
-      },
-    )
-    watchEffect(
-      () => {
-        if (isShowPreview.value && isControlled.value) {
-          setCurrent(currentControlledKey.value)
-        }
-      },
-      {
-        flush: 'post',
-      },
-    )
-
-    context.provide({
-      isPreviewGroup: shallowRef(true),
-      previewUrls: canPreviewUrls,
-      setPreviewUrls,
-      current,
-      setCurrent,
-      setShowPreview,
-      setMousePosition,
-      registerImage,
-    })
-
-    return () => {
-      const { ...dialogProps } = preview.value
-      return (
-        <>
-          {slots.default && slots.default()}
-          <Preview
-            {...dialogProps}
-            ria-hidden={!isShowPreview.value}
-            visible={isShowPreview.value}
-            prefixCls={props.previewPrefixCls}
-            onClose={onPreviewClose}
-            mousePosition={mousePosition.value}
-            src={canPreviewUrls.value.get(current.value)}
-            icons={props.icons}
-            getContainer={getPreviewContainer.value}
-          />
-        </>
-      )
-    }
-  },
-})
-
-export default Group

package/src/vc-image/src/getFixScaleEleTransPosition.ts

@@ -1,61 +0,0 @@
-import { getClientSize } from '../../vc-util/Dom/css'
-
-function fixPoint(key: 'x' | 'y', start: number, width: number, clientWidth: number) {
-  const startAddWidth = start + width
-  const offsetStart = (width - clientWidth) / 2
-
-  if (width > clientWidth) {
-    if (start > 0) {
-      return {
-        [key]: offsetStart,
-      }
-    }
-    if (start < 0 && startAddWidth < clientWidth) {
-      return {
-        [key]: -offsetStart,
-      }
-    }
-  } else if (start < 0 || startAddWidth > clientWidth) {
-    return {
-      [key]: start < 0 ? offsetStart : -offsetStart,
-    }
-  }
-  return {}
-}
-
-/**
- * Fix positon x,y point when
- *
- * Ele width && height < client
- * - Back origin
- *
- * - Ele width | height > clientWidth | clientHeight
- * - left | top > 0 -> Back 0
- * - left | top + width | height < clientWidth | clientHeight -> Back left | top + width | height === clientWidth | clientHeight
- *
- * Regardless of other
- */
-export default function getFixScaleEleTransPosition(
-  width: number,
-  height: number,
-  left: number,
-  top: number,
-): null | { x: number; y: number } {
-  const { width: clientWidth, height: clientHeight } = getClientSize()
-
-  let fixPos = null
-
-  if (width <= clientWidth && height <= clientHeight) {
-    fixPos = {
-      x: 0,
-      y: 0,
-    }
-  } else if (width > clientWidth || height > clientHeight) {
-    fixPos = {
-      ...fixPoint('x', left, width, clientWidth),
-      ...fixPoint('y', top, height, clientHeight),
-    }
-  }
-
-  return fixPos
-}