plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/useEditPopperAgent/useEditPopperAgent.tsx

@@ -1,93 +0,0 @@
-import {computed, onBeforeUnmount, reactive} from "plain-design-composition";
-import {useEdit} from "../../use/useEdit";
-import {PopperAgent, SpecificPopperServiceOption} from "./useEditPopperAgent.utils";
-import React from "react";
-
-export type EditPopperAgent = ReturnType<typeof useEditPopperAgent>
-
-export function useEditPopperAgent(
-    {
-        event: {emit},
-        serviceGetter: useService,
-        option,
-    }: {
-        event: { emit: { onBlur: (e: React.FocusEvent) => void, onFocus: (e: React.FocusEvent) => void } },
-        serviceGetter: () => ((o: SpecificPopperServiceOption) => PopperAgent),
-        option: SpecificPopperServiceOption,
-    }) {
-
-    const service = useService()
-    const {editComputed} = useEdit()
-
-    const state = reactive({
-        agent: null as null | PopperAgent,
-        focusCounter: 0,
-    })
-
-    const isShow = computed(() => !!state.agent && state.agent.isShow)
-    const isOpen = computed(() => !!state.agent && state.agent.isOpen)
-
-    const methods = {
-        show: async () => {
-            if (!editComputed.value.editable) return
-            if (isShow.value) return;
-            if (!state.agent) {
-                state.agent = await service(option)
-            }
-            await state.agent.show()
-        },
-        hide: async () => {
-            if (!isShow.value) return
-            await state.agent!.hide()
-        },
-        toggle: async () => {
-            isShow.value ? methods.hide() : methods.show()
-        }
-    }
-
-    const inputHandler = {
-        onClickInput: async () => await methods.toggle(),
-        onBlur: async (e: React.FocusEvent) => {
-            state.focusCounter--
-            if (state.focusCounter === 0) {
-                emit.onBlur(e)
-                await methods.hide()
-            }
-        },
-        onFocus: (e: React.FocusEvent) => {
-            if (state.focusCounter === 0) {
-                emit.onFocus(e)
-            }
-            state.focusCounter = 1
-        },
-        onEsc: async () => {
-            await methods.hide()
-        },
-        onEnter: async (e: KeyboardEvent | React.KeyboardEvent) => {
-            e.stopPropagation()
-            e.preventDefault()
-            await methods.show()
-        }
-    }
-
-    /**
-     * 当前组件示例销毁的时候，解除与service的绑定关系
-     * @author  韦胜健
-     * @date    2020/11/27 10:12
-     */
-    onBeforeUnmount(() => {
-        if (!!state.agent) {
-            state.agent.destroy()
-        }
-    })
-
-    return {
-        methods,
-        inputHandler,
-        state,
-        isShow,
-        isOpen,
-        editComputed,
-    }
-
-}

package/src/packages/useEditPopperAgent/useEditPopperAgent.utils.tsx

@@ -1,36 +0,0 @@
-import {createPopperServiceComponent} from "./createPopperServiceComponent";
-import {ReactNode} from "react";
-
-export interface PopperAgent {
-    state: { option: PopperServiceComponentOption, },
-    isShow: boolean,
-    isOpen: boolean,
-    show: () => void | Promise<void>,
-    hide: () => void | Promise<void>,
-    toggle: () => void | Promise<void>,
-    destroy: () => void | Promise<void>,
-}
-
-interface Attrs {
-    [k: string]: ((this: PopperAgent, ...args: any[]) => void) | string | number | null | undefined | object | boolean | any[]
-}
-
-export interface CreateAgentGetterOption {
-    name: string,
-    render: (attrs: any) => ReactNode,
-    defaultPopperAttrs?: Attrs | (() => Attrs),
-    defaultRenderAttrs?: Attrs | (() => Attrs),
-}
-
-export interface SpecificPopperServiceOption {
-    reference: object | (() => object),
-    popperAttrs?: Attrs | (() => Attrs),
-    renderAttrs?: Attrs | (() => Attrs),
-    hideOnClickBody?: boolean,
-}
-
-export type PopperServiceComponentOption = {
-    defaultOption: Readonly<CreateAgentGetterOption>,
-    serviceOption: SpecificPopperServiceOption,
-    getService?: () => ReturnType<typeof createPopperServiceComponent>["use"]["class"]
-}

package/src/packages/useExternalPlc/index.tsx

@@ -1,3 +0,0 @@
-import {useExternalPlc} from "../PlTable/plc/core/useExternalPlc";
-
-export default useExternalPlc

package/src/packages/useHttp/index.tsx

@@ -1,6 +0,0 @@
-import {iUseHttp} from "./useHttp.utils";
-import {getInitialConfigState} from "../initialize";
-
-export const useHttp: iUseHttp = () => getInitialConfigState("useHttp")()
-
-export default useHttp

package/src/packages/useHttp/useHttp.utils.tsx

@@ -1,20 +0,0 @@
-export type iHttpRequestConfig = {
-    url: string,
-    method: any,
-    query?: any
-    body?: any
-    headers?: any
-} & Record<string, any>
-
-export type tHttpRequest = <DATA>(config: iHttpRequestConfig) => Promise<DATA>
-
-export type tHttp = tHttpRequest & {
-    get: <DATA>(url: string, query?: any, config?: iHttpRequestConfig) => Promise<DATA>,
-    post: <DATA>(url: string, body?: any, config?: iHttpRequestConfig) => Promise<DATA>,
-    put: <DATA>(url: string, body?: any, config?: iHttpRequestConfig) => Promise<DATA>,
-    delete: <DATA>(url: string, body?: any, config?: iHttpRequestConfig) => Promise<DATA>,
-}
-
-export interface iUseHttp {
-    (): tHttp
-}

package/src/packages/useImage/image.service.utils.tsx

@@ -1,160 +0,0 @@
-/**
- * 将url转成image对象
- * @author  韦胜健
- * @date    2021/1/21 11:46
- */
-import {defer} from "plain-utils/utils/defer";
-import $$file from "../$$file";
-
-export function urlToImage(url: string) {
-    const dfd = defer<HTMLImageElement>()
-    const image = new Image()
-    image.setAttribute('crossOrigin', 'anonymous');
-    image.onload = () => dfd.resolve(image)
-    image.onerror = dfd.reject
-    image.src = url
-    return dfd.promise
-}
-
-/**
- * 将image转化为canvas
- * @author  韦胜健
- * @date    2021/1/21 11:50
- */
-export function imageToCanvas(image: HTMLImageElement) {
-    const canvas = document.createElement('canvas') as HTMLCanvasElement
-    const ctx = canvas.getContext('2d')!
-    canvas.width = image.width
-    canvas.height = image.height
-    ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
-    return canvas
-}
-
-/**
- * 将canvas转化为File对象
- * @author  韦胜健
- * @date    2021/1/21 11:50
- * @param   canvas              画布对象
- * @param   type                文件类型，比如 image/jpeg
- * @param   quality             图片压缩质量，0-1
- * @param   filename            文件名称
- */
-export function canvasToFile(canvas: HTMLCanvasElement, type: string, quality: number, filename: string) {
-    const dfd = defer<File | null>()
-    canvas.toBlob(blob => {
-        dfd.resolve(!blob ? null : new File([blob], filename))
-    }, type, quality)
-    return dfd.promise
-}
-
-/**
- * 将canvas转化为base64
- * @author  韦胜健
- * @date    2021/1/21 11:52
- * @param   type            文件类型
- * @param   quality         图片压缩质量，0-1
- */
-export function canvasToDataURL(canvas: HTMLCanvasElement, type: string, quality: number): string {
-    return canvas.toDataURL(type, quality)
-}
-
-
-/**
- * 将file转化为base64
- * @author  韦胜健
- * @date    2021/1/21 11:54
- */
-export const fileToDataURL = $$file.readAsDataURL
-
-/**
- * 将dataURL转化为File对象
- * @author  韦胜健
- * @date    2021/1/21 11:54
- */
-export function dataURLToFile(dataUrl: string) {
-    const arr = dataUrl.split(',');
-    const mime = arr[0].match(/:(.*?);/)![1]
-    const bstr = atob(arr[1]);
-    let n = bstr.length, u8arr = new Uint8Array(n);
-    while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-    }
-    return new Blob([u8arr], {type: mime});
-}
-
-/**
- * 将blob转化为file
- * @author  韦胜健
- * @date    2021/1/21 15:19
- */
-export function blobToFile(blob: Blob, filename: string, option?: FilePropertyBag) {
-    return new File([blob], filename, option)
-}
-
-export const imageCompress = (() => {
-    /**
-     * 根据尺寸压缩图片
-     * @author  韦胜健
-     * @date    2021/1/21 16:11
-     */
-    const compressByMeasure = async (image: HTMLImageElement, config: { maxHeight?: number, maxWidth?: number }, filename: string) => {
-        const canvas = document.createElement('canvas') as HTMLCanvasElement
-        const ctx = canvas.getContext('2d')!
-        let height = image.height, width = image.width;
-        if (!!config.maxHeight && height > config.maxHeight) {
-            width = config.maxHeight / height * width
-            height = config.maxHeight
-        }
-        if (!!config.maxWidth && width > config.maxWidth) {
-            height = config.maxWidth / width * height
-            width = config.maxWidth
-        }
-        canvas.width = width
-        canvas.height = height
-        ctx.drawImage(image, 0, 0, width, height)
-        return canvasToFile(canvas, 'image/png', 1, filename)
-    }
-    /**
-     * 根据图片容量大小压缩图片
-     * @author  韦胜健
-     * @date    2021/1/21 16:11
-     */
-    const compressByMaxSize = async (image: HTMLImageElement, maxSize: number, filename: string) => {
-        const max = maxSize * 1000 * 1000
-        let rate = 1
-        const canvas = document.createElement('canvas') as HTMLCanvasElement
-        const ctx = canvas.getContext('2d')!
-        canvas.height = image.height
-        canvas.width = image.width
-        ctx.drawImage(image, 0, 0, image.width, image.height)
-
-        let file = await canvasToFile(canvas, 'image/png', 1, filename)
-        while (!!file && file.size > max && rate > 0.1) {
-            ctx.clearRect(0, 0, image.width * rate, image.height * rate)
-            rate -= 0.3
-            canvas.height = image.height * rate
-            canvas.width = image.width * rate
-            ctx.drawImage(image, 0, 0, image.width * rate, image.height * rate)
-            file = await canvasToFile(canvas, 'image/png', 1, filename)
-        }
-        return file
-    }
-    return async (url: string, config: { maxSize?: number, maxHeight?: number, maxWidth?: number }): Promise<string | ArrayBuffer | null> => {
-        if (!url) {
-            throw new Error('compress: url is empty!')
-        }
-        /*if (/^https?/.test(url) && url.indexOf('?') === -1) {
-            url += `?timestamp=${Date.now()}`
-        }*/
-        let image = await urlToImage(url)
-        if (!!config.maxHeight || !!config.maxWidth) {
-            let file = await compressByMeasure(image, config, '根据尺寸压缩图片.png')
-            return !file ? null : fileToDataURL(file)
-        }
-        if (!!config.maxSize) {
-            let file = await compressByMaxSize(image, config.maxSize, '根据文件大小压缩图片.png')
-            return !file ? null : fileToDataURL(file)
-        }
-        throw new Error('compress: maxSize, maxHeight, maxWidth is empty!')
-    }
-})();

package/src/packages/useImage/index.tsx

@@ -1,284 +0,0 @@
-import {createDefaultService} from "../PlRoot/createDefaultService";
-import {reactive, onMounted, ref, useStyles, computed, onBeforeUnmount, nextIndex} from "plain-design-composition";
-import PlTransition from "../PlTransition";
-import React from "react";
-import {PlImage} from "../PlImage";
-import PlTooltip from "../PlTooltip";
-import PlIcon from "../PlIcon";
-import {createServiceWithoutContext, createUseService} from "../PlRoot/registryRootService";
-import {createDefaultManager} from "../PlRoot/createDefaultManager";
-import $$file from "../$$file";
-import {imageCompress} from "./image.service.utils";
-import {createPortal} from "react-dom";
-import {createCounter} from "plain-design-composition"
-import {KeyboardService} from "../keyboard";
-
-interface ImageServicePreviewOption {
-    urls: (string | null | undefined)[],
-    current: number,
-}
-
-const nextCount = createCounter("image_preview")
-
-const Service = createDefaultService({
-    name: 'pl-image-preview-service',
-    setup: (option: ImageServicePreviewOption) => {
-
-        const step = {scale: 0.2, rotate: 90,}
-
-        const isShow = ref(false)
-
-        const state = reactive({
-            option,
-            count: nextCount(),
-            adjust: {
-                scale: null as null | number,           // 当前图片缩放大小
-                top: null as null | number,             // 当前图片拖拽top距离
-                left: null as null | number,            // 当前图片拖拽left距离
-                rotate: null as null | number,          // 当前图片旋转距离
-            },
-            mounted: new Promise<void>(resolve => onMounted(resolve)),
-            zIndex: nextIndex(),
-        })
-
-        const imgStyles = useStyles(style => {
-            const {scale, top, left, rotate} = state.adjust
-            let transform: string[] = []
-            if (!!scale) {
-                transform.push(`scale(${scale})`)
-            }
-            if (!!rotate) {
-                transform.push(`rotate(${rotate}deg)`)
-            }
-            if (transform.length > 0) {
-                style.transform = transform.join(' ')
-            }
-            if (!!top) {
-                style.top = `${top}px`
-            }
-            if (!!left) {
-                style.left = `${left}px`
-            }
-        })
-
-        const show = async () => {
-            resetAdjust()
-            state.count = nextCount()
-            await state.mounted
-            isShow.value = true
-            state.zIndex = nextIndex()
-
-            setTimeout(() => {
-                const activeElement = document.activeElement as HTMLElement
-                if (!!activeElement) activeElement.blur()
-            })
-        }
-
-        const hide = () => isShow.value = false
-
-        const resetAdjust = () => state.adjust = {
-            scale: null as null | number,           // 当前图片缩放大小
-            top: null as null | number,             // 当前图片拖拽top距离
-            left: null as null | number,            // 当前图片拖拽left距离
-            rotate: null as null | number,          // 当前图片旋转距离
-        }
-
-        const service = async (option: ImageServicePreviewOption) => {
-            state.option = option
-            await show()
-            return hide
-        }
-
-        const isMultipleImages = computed(() => state.option.urls.length > 1)
-
-        const buttons = [
-            {
-                label: '逆时针旋转90°',
-                icon: 'el-icon-rotate-left',
-                onClick: () => {
-                    let {rotate} = state.adjust
-                    rotate = (rotate == null ? 0 : rotate) + step.rotate;
-                    (rotate === 360) && (rotate = 0);
-                    state.adjust.rotate = rotate
-                }
-            },
-            {
-                label: '顺时针旋转90°',
-                icon: 'el-icon-rotate-right',
-                onClick: () => {
-                    let {rotate} = state.adjust
-                    rotate = (rotate == null ? 0 : rotate) - step.rotate;
-                    (rotate === -360) && (rotate = 0);
-                    state.adjust.rotate = rotate
-                }
-            },
-            {
-                label: '放大',
-                icon: 'el-icon-zoom-in',
-                onClick: () => {
-                    let {scale} = state.adjust
-                    state.adjust.scale = (scale == null ? 1 : scale) + step.scale
-                }
-            },
-            {
-                label: '缩小',
-                icon: 'el-icon-zoom-out',
-                onClick: () => {
-                    let {scale} = state.adjust
-                    state.adjust.scale = (scale == null ? 1 : scale) - step.scale
-                }
-            },
-            {
-                label: '上一张',
-                icon: 'el-icon-arrow-left',
-                show: () => isMultipleImages.value,
-                onClick: () => {
-                    resetAdjust()
-                    let current = state.option.current - 1
-                    if (current < 0) current = state.option.urls.length - 1
-                    state.option.current = current
-                },
-            },
-            {
-                label: '下一张',
-                icon: 'el-icon-arrow-right',
-                show: () => isMultipleImages.value,
-                onClick: () => {
-                    resetAdjust()
-                    let current = state.option.current + 1
-                    if (current > state.option.urls.length - 1) current = 0
-                    state.option.current = current
-                },
-            },
-            {
-                label: '重置',
-                icon: 'el-icon-refresh',
-                onClick: resetAdjust,
-            },
-            {
-                label: '关闭',
-                icon: 'el-icon-close',
-                onClick: hide,
-            },
-        ]
-
-        const dragImg = (() => {
-            let freezeState = {
-                startTop: 0,
-                startLeft: 0,
-                startX: 0,
-                startY: 0,
-            }
-            const mousedown = (e: MouseEvent) => {
-                freezeState = {
-                    startTop: state.adjust.top || 0,
-                    startLeft: state.adjust.left || 0,
-                    startX: e.clientX,
-                    startY: e.clientY,
-                }
-                document.addEventListener('mousemove', mousemove)
-                document.addEventListener('mouseup', mouseup)
-            }
-            const mousemove = (e: MouseEvent) => {
-                state.adjust.left = e.clientX - freezeState.startX + freezeState.startLeft
-                state.adjust.top = e.clientY - freezeState.startY + freezeState.startTop
-            }
-            const mouseup = (e: MouseEvent) => {
-                document.removeEventListener('mousemove', mousemove)
-                document.removeEventListener('mouseup', mouseup)
-            }
-            const dragstart = (e: DragEvent) => {
-                e.stopPropagation()
-                e.preventDefault()
-            }
-            return {
-                mousedown,
-                dragstart,
-                imgStyles,
-            }
-        })();
-
-        const handler = {
-            stopPropagation: (e: React.MouseEvent) => e.stopPropagation(),
-            onDblclickImg: hide,
-            onClickMask: hide,
-        }
-
-        onBeforeUnmount(KeyboardService.listen({esc: () => {isShow.value && hide()}}))
-
-        return {
-            refer: {
-                isShow,
-                isOpen: isShow,
-                service,
-            },
-            render: () => (
-                createPortal(<PlTransition name="pl-image-preview" show={isShow.value}>
-                        <div className="pl-image-preview-service" style={{zIndex: state.zIndex}} onClick={handler.onClickMask}>
-                            <div className="pl-image-preview-service-img-wrapper">
-                                <PlTransition switch name={'pl-transition-scale'} key={state.count}>
-                                    {/*不加这个div，switch动画没有效果，真是奇怪。PlButton可以，PlCard可以，就PlImage不行*/}
-                                    <div style={{display: 'inline-block'}} key={state.option.urls[state.option.current]}>
-                                        <PlImage
-                                            style={imgStyles.value}
-                                            previewOnClick={false}
-                                            className="pl-image-preview-service-img"
-                                            src={state.option.urls[state.option.current]}
-                                            key={state.option.urls[state.option.current]}
-                                            {...{
-                                                onClick: handler.stopPropagation,
-                                                onDoubleClick: handler.onDblclickImg,
-                                                onMouseDown: dragImg.mousedown,
-                                                onDragStart: dragImg.dragstart,
-                                            }}
-                                        />
-                                    </div>
-                                </PlTransition>
-                            </div>
-                            {isMultipleImages.value && <div className="pl-image-preview-service-indicator">
-                                {state.option.urls.map((item, index) => <div className={`pl-image-preview-service-indicator-item ${index === state.option.current ? 'pl-image-preview-service-indicator-item-active' : ''}`} key={index}/>)}
-                            </div>}
-                            <div className="pl-image-preview-service-button-group" onClick={handler.stopPropagation}>
-                                {buttons.map(btn => {
-                                    if (!!btn.show && !btn.show()) {
-                                        return null
-                                    }
-                                    return (
-                                        <PlTooltip tooltip={btn.label} key={btn.label}>
-                                            <div className="pl-image-preview-service-button" key={btn.label} onClick={() => !!btn.onClick && btn.onClick()}>
-                                                <PlIcon icon={btn.icon}/>
-                                            </div>
-                                        </PlTooltip>
-                                    )
-                                })}
-                            </div>
-                        </div>
-                    </PlTransition>,
-                    document.querySelector('.pl-root-service-container') as HTMLElement)
-            )
-        }
-    }
-})
-
-const useImage = createUseService({
-    name: 'image',
-    managerComponent: createDefaultManager('pl-image-manager', Service),
-    createService: (getManager) => {
-        const preview = (urls: string | (string | null | undefined)[], current?: number) => {
-            let option: ImageServicePreviewOption = {
-                urls: !!urls && Array.isArray(urls) ? urls : [urls],
-                current: current == null ? 0 : current,
-            };
-            getManager().then(manager => manager.service(option))
-        }
-        return {
-            choose: $$file.chooseImage,
-            compress: imageCompress,
-            preview,
-        }
-    },
-})
-
-export const $$image = createServiceWithoutContext(useImage)
-
-export default useImage