@type-dom/ui 0.0.10 → 0.1.1

package/src/components/data/td-image-viewer/td-image-viewer.class.js

@@ -1,265 +1,424 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdImageViewer = void 0;
-const framework_1 = require("@type-dom/framework");
+const lodash_1 = require("lodash");
+const signals_1 = require("@type-dom/signals");
 const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_z_index_1 = require("../../../hooks/use-z-index");
+const use_locale_1 = require("../../../hooks/use-locale");
+const aria_1 = require("../../../constants/aria");
+const td_teleport_class_1 = require("../../base/td-teleport/td-teleport.class");
 const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
-const td_image_viewer_style_1 = require("./td-image-viewer.style");
-class TdImageViewer extends ui_abstract_1.UI {
+const td_focus_trap_class_1 = require("../../feedback/td-focus-trap/td-focus-trap.class");
+const td_image_viewer_const_1 = require("./td-image-viewer.const");
+require("./style/index");
+class TdImageViewer extends framework_1.TypeFragment {
     constructor(params = {}) {
-        super(params, 'fragment');
-        this.loading = false;
+        super();
         this.className = 'TdImageViewer';
-        this.transform = {
-            scale: 1,
-            deg: 0,
-            offsetX: 0,
-            offsetY: 0,
-            enableTransition: false
-        };
-        this.modes = {
+        this.addEmits(td_image_viewer_const_1.imageViewerEmits);
+        this.assignProps(td_image_viewer_const_1.imageViewerProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a;
+        console.warn('TdImageViewer setup . ');
+        const modes = {
             CONTAIN: {
                 name: 'contain',
-                // icon:  markRaw(FullScreen),
-                icon: new td_icon_class_1.TdIcon({
-                    svgObj: new svgs_1.ElFullScreenSvg()
-                })
+                icon: new svgs_1.ElFullScreenSvg(),
             },
             ORIGINAL: {
                 name: 'original',
-                // icon: markRaw(ScaleToOriginal),
-                icon: new td_icon_class_1.TdIcon({
-                    svgObj: new svgs_1.ElScaleToOriginalSvg()
-                })
-            }
+                icon: new svgs_1.ElScaleToOriginalSvg(),
+            },
         };
-        this.mode = this.modes.CONTAIN;
-        this.wrapper = new framework_1.Div();
-        this.transition = new framework_1.Transition({
-            slot: this.wrapper,
+        const props = this.props;
+        const emit = this.emit;
+        const { t } = (0, use_locale_1.useLocale)();
+        const ns = (0, use_namespace_1.useNamespace)('image-viewer');
+        const { nextZIndex } = (0, use_z_index_1.useZIndex)();
+        const wrapper = (0, signals_1.signal)();
+        const imgRefs = (0, signals_1.signal)([]);
+        const scopeEventListener = (0, signals_1.effectScope)();
+        const loading = (0, signals_1.signal)(true);
+        const activeIndex = (0, signals_1.signal)(props.initialIndex);
+        const mode = (0, signals_1.signal)(modes.CONTAIN);
+        const transform = (0, signals_1.signal)({
+            // signal is object, then effect reset object .
+            scale: 1,
+            deg: 0,
+            offsetX: 0,
+            offsetY: 0,
+            enableTransition: false,
         });
-        this.teleport = new framework_1.Teleport({
-            to: document.body,
+        const zIndex = (0, signals_1.signal)((_a = props.zIndex) !== null && _a !== void 0 ? _a : nextZIndex());
+        const isSingle = (0, signals_1.computed)(() => {
+            const { urlList } = props;
+            return urlList && urlList.length <= 1;
         });
-        this.teleport.addChild(this.transition);
-        // this.mount(document.body);
-        // this.attr.addName('wrapper');
-        // todo transition 如何设置样式 ？？？ developing ......
-        this.wrapper.style.addObj({
-            position: 'fixed',
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-            zIndex: 2000
+        const isFirst = (0, signals_1.computed)(() => {
+            return activeIndex.get() === 0;
         });
-        this.wrapper.addChildren(new framework_1.Div({
-            name: 'mask',
-            events: {
-                click: (evt, element) => {
-                    //
-                    element === null || element === void 0 ? void 0 : element.style.hide();
-                }
+        const isLast = (0, signals_1.computed)(() => {
+            return activeIndex.get() === props.urlList.length - 1;
+        });
+        const currentImg = (0, signals_1.computed)(() => {
+            console.warn('currentImg . ');
+            return props.urlList && props.urlList[activeIndex.get() || 0];
+        });
+        const arrowPrevKls = (0, signals_1.computed)(() => [
+            ns.e('btn'),
+            ns.e('prev'),
+            ns.is('disabled', !props.infinite && isFirst.get()),
+        ]);
+        const arrowNextKls = (0, signals_1.computed)(() => [
+            ns.e('btn'),
+            ns.e('next'),
+            ns.is('disabled', !props.infinite && isLast.get()),
+        ]);
+        // only when set transform, imgStyle will change; it is different from vue's reactivity.
+        const imgStyle = (0, signals_1.computed)(() => {
+            console.warn('imgStyle . ');
+            console.warn('imgStyle transform.get() is ', transform.get());
+            const { scale, deg, offsetX, offsetY, enableTransition } = transform.get();
+            let translateX = offsetX / scale;
+            let translateY = offsetY / scale;
+            const radian = (deg * Math.PI) / 180;
+            const cosRadian = Math.cos(radian);
+            const sinRadian = Math.sin(radian);
+            translateX = translateX * cosRadian + translateY * sinRadian;
+            translateY = translateY * cosRadian - (offsetX / scale) * sinRadian;
+            const style = {
+                transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
+                transition: enableTransition ? 'transform .3s' : '',
+            };
+            if (mode.get().name === modes.CONTAIN.name) {
+                style.maxWidth = style.maxHeight = '100%';
             }
-        }), 
-        // <!-- CLOSE -->
-        new framework_1.Span({
-            name: 'close',
-            styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), { 
-                //   close
-                top: '40px', right: '40px', width: '40px', height: '40px', fontSize: '40px' }),
-            events: {
-                click: (evt, element) => {
-                    element === null || element === void 0 ? void 0 : element.style.hide();
+            return style;
+        });
+        function hide() {
+            console.warn('hide . ');
+            unregisterEventListener();
+            emit('close');
+        }
+        function registerEventListener() {
+            const keydownHandler = (0, lodash_1.throttle)((e) => {
+                switch (e.code) {
+                    // ESC
+                    case aria_1.EVENT_CODE.esc:
+                        props.closeOnPressEscape && hide();
+                        break;
+                    // SPACE
+                    case aria_1.EVENT_CODE.space:
+                        toggleMode();
+                        break;
+                    // LEFT_ARROW
+                    case aria_1.EVENT_CODE.left:
+                        prev();
+                        break;
+                    // UP_ARROW
+                    case aria_1.EVENT_CODE.up:
+                        handleActions('zoomIn');
+                        break;
+                    // RIGHT_ARROW
+                    case aria_1.EVENT_CODE.right:
+                        next();
+                        break;
+                    // DOWN_ARROW
+                    case aria_1.EVENT_CODE.down:
+                        handleActions('zoomOut');
+                        break;
                 }
-            },
-            childNodes: [
-                new td_icon_class_1.TdIcon({
-                    svgObj: new svgs_1.ElCloseSvg(),
-                    styleObj: {
-                        fontSize: 'inherit',
-                        cursor: 'pointer'
-                    }
-                })
-            ]
-        }));
-        const urlList = (params === null || params === void 0 ? void 0 : params.urlList) || [];
-        this.isSingle = urlList.length <= 1;
-        // <!-- ARROW -->
-        if (!this.isSingle) {
-            this.wrapper.addChildren(new framework_1.Span({
-                styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), td_image_viewer_style_1.$prev),
-                events: {
-                    click: () => {
-                        //   todo prev
+            });
+            const mousewheelHandler = (0, lodash_1.throttle)((e) => {
+                const delta = e.deltaY || e.deltaX;
+                handleActions(delta < 0 ? 'zoomIn' : 'zoomOut', {
+                    zoomRate: props.zoomRate,
+                    enableTransition: false,
+                });
+            });
+            scopeEventListener.run(() => {
+                (0, framework_1.useEventListener)(document, 'keydown', keydownHandler);
+                (0, framework_1.useEventListener)(document, 'wheel', mousewheelHandler);
+            });
+        }
+        function unregisterEventListener() {
+            scopeEventListener.stop();
+        }
+        function handleImgLoad() {
+            console.warn('handleImgLoad . ');
+            loading.set(false);
+        }
+        function handleImgError(e) {
+            console.warn('handleImgError . ');
+            loading.set(false);
+            e.target.alt = t('el.image.error');
+        }
+        function handleMouseDown(e) {
+            if (loading.get() || e.button !== 0 || !wrapper.get())
+                return;
+            transform.get().enableTransition = false;
+            const { offsetX, offsetY } = transform.get();
+            const startX = e.pageX;
+            const startY = e.pageY;
+            const dragHandler = (0, lodash_1.throttle)((ev) => {
+                transform.set(Object.assign(Object.assign({}, transform.get()), { offsetX: offsetX + ev.pageX - startX, offsetY: offsetY + ev.pageY - startY }));
+            });
+            const removeMousemove = (0, framework_1.useEventListener)(document, 'mousemove', dragHandler);
+            (0, framework_1.useEventListener)(document, 'mouseup', () => {
+                removeMousemove();
+            });
+            e.preventDefault();
+        }
+        function reset() {
+            transform.set({
+                scale: 1,
+                deg: 0,
+                offsetX: 0,
+                offsetY: 0,
+                enableTransition: false,
+            });
+        }
+        function toggleMode() {
+            if (loading.get())
+                return;
+            const modeNames = (0, utils_1.keysOf)(modes);
+            const modeValues = Object.values(modes);
+            const currentMode = mode.get().name;
+            const index = modeValues.findIndex((i) => i.name === currentMode);
+            const nextIndex = (index + 1) % modeNames.length;
+            mode.set(modes[modeNames[nextIndex]]);
+            reset();
+        }
+        function setActiveItem(index) {
+            console.error('setActiveItem . index is ', index);
+            const len = props.urlList.length;
+            activeIndex.set((index + len) % len);
+        }
+        function prev() {
+            if (isFirst.get() && !props.infinite)
+                return;
+            setActiveItem(activeIndex.get() - 1);
+        }
+        function next() {
+            console.error('next . ');
+            if (isLast.get() && !props.infinite)
+                return;
+            setActiveItem(activeIndex.get() + 1);
+        }
+        function handleActions(action, options = {}) {
+            console.error('handleActions . action is ', action);
+            if (loading.get())
+                return;
+            const { minScale, maxScale } = props;
+            const { zoomRate, rotateDeg, enableTransition } = Object.assign({ zoomRate: props.zoomRate, rotateDeg: 90, enableTransition: true }, options);
+            switch (action) {
+                case 'zoomOut':
+                    if (transform.get().scale > minScale) {
+                        transform.get().scale = Number.parseFloat((transform.get().scale / zoomRate).toFixed(3));
                     }
-                },
-                childNodes: [
-                    new td_icon_class_1.TdIcon({
-                        svgObj: new svgs_1.ElArrowLeftSvg()
-                    })
-                ]
-            }), new framework_1.Span({
-                styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), td_image_viewer_style_1.$next),
-                events: {
-                    click: () => {
-                        //   todo next
+                    break;
+                case 'zoomIn':
+                    if (transform.get().scale < maxScale) {
+                        transform.get().scale = Number.parseFloat((transform.get().scale * zoomRate).toFixed(3));
                     }
-                },
-                childNodes: [
-                    new td_icon_class_1.TdIcon({
-                        svgObj: new svgs_1.ElArrowRightSvg()
-                    })
-                ]
-            }));
+                    break;
+                case 'clockwise':
+                    transform.get().deg += rotateDeg;
+                    // transform.set({ ...transform.get(), deg: transform.get().deg })
+                    emit('rotate', transform.get().deg);
+                    break;
+                case 'anticlockwise':
+                    transform.get().deg -= rotateDeg;
+                    // transform.set({ ...transform.get(), deg: transform.get().deg })
+                    emit('rotate', transform.get().deg);
+                    break;
+            }
+            transform.get().enableTransition = enableTransition;
+            // must distracture, otherwise will not trigger effect
+            transform.set(Object.assign({}, transform.get())); // add by me to trigger effect
         }
-        // <!-- ACTIONS -->
-        this.wrapper.addChild(new framework_1.Div({
-            styleObj: Object.assign(Object.assign({}, td_image_viewer_style_1.$btn), td_image_viewer_style_1.$actions),
-            childNodes: [
-                new framework_1.Div({
-                    styleObj: td_image_viewer_style_1.$actionsInner,
-                    childNodes: [
-                        new td_icon_class_1.TdIcon({
-                            svgObj: new svgs_1.ElZoomOutSvg(),
-                            events: {
-                                click: (evt, ele) => {
-                                    this.handleActions('zoomOut');
-                                }
-                            }
-                        }),
-                        new td_icon_class_1.TdIcon({
-                            svgObj: new svgs_1.ElZoomInSvg(),
-                            events: {
-                                click: (evt, ele) => {
-                                    this.handleActions('zoomIn');
-                                }
-                            }
-                        }),
-                        new framework_1.I({}),
-                        new td_icon_class_1.TdIcon({
-                            // ？？？
-                            // svgObj: this.mode.icon,
-                            slot: this.mode.icon,
-                            events: {
-                                click: (evt, ele) => {
-                                    this.toggleMode();
-                                }
-                            }
-                        }),
-                        new framework_1.I({}),
-                        new td_icon_class_1.TdIcon({
-                            svgObj: new svgs_1.ElRefreshLeftSvg(),
-                            events: {
-                                click: (evt, ele) => {
-                                    this.handleActions('anticlockwise');
-                                }
-                            }
-                        }),
-                        new td_icon_class_1.TdIcon({
-                            svgObj: new svgs_1.ElRefreshRightSvg(),
-                            events: {
-                                click: (evt, ele) => {
-                                    this.handleActions('clockwise');
-                                }
-                            }
-                        })
-                    ]
-                })
-            ]
-        }));
-        // <!-- CANVAS -->
-        const imgList = [];
-        urlList.forEach((url, index) => {
-            imgList.push(new framework_1.Img({
-                attrObj: {
-                    src: url
-                },
-                styleObj: Object.assign({ display: index === this.activeIndex ? 'block' : 'none' }, this.imgStyle)
-            }));
-        });
-        this.wrapper.addChild(new framework_1.Div({
-            childNodes: imgList
-        }));
-        this.props = this.useParams(params);
-    }
-    get imgStyle() {
-        const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
-        let translateX = offsetX / scale;
-        let translateY = offsetY / scale;
-        switch (deg % 360) {
-            case 90:
-            case -270:
-                [translateX, translateY] = [translateY, -translateX];
-                break;
-            case 180:
-            case -180:
-                [translateX, translateY] = [-translateX, -translateY];
-                break;
-            case 270:
-            case -90:
-                [translateX, translateY] = [-translateY, translateX];
-                break;
+        function onFocusoutPrevented(event) {
+            var _a;
+            if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.focusReason) === 'pointer') {
+                event === null || event === void 0 ? void 0 : event.preventDefault();
+            }
         }
-        const style = {
-            transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
-            transition: enableTransition ? 'transform .3s' : ''
-        };
-        if (this.mode.name === this.modes.CONTAIN.name) {
-            style.maxWidth = style.maxHeight = '100%';
+        function onCloseRequested() {
+            if (props.closeOnPressEscape) {
+                hide();
+            }
         }
-        return style;
-    }
-    toggleMode() {
-        if (this.loading)
-            return;
-        const modeNames = (0, utils_1.keysOf)(this.modes);
-        const modeValues = Object.values(this.modes);
-        const currentMode = this.mode.name;
-        const index = modeValues.findIndex((i) => i.name === currentMode);
-        const nextIndex = (index + 1) % modeNames.length;
-        this.mode = this.modes[modeNames[nextIndex]];
-        this.reset();
-    }
-    reset() {
-        this.transform = {
-            scale: 1,
-            deg: 0,
-            offsetX: 0,
-            offsetY: 0,
-            enableTransition: false
-        };
-    }
-    handleActions(action, options = {}) {
-        if (this.loading)
-            return;
-        // const { minScale, maxScale } = this.props;
-        const minScale = this.props.minScale || 0.2;
-        const maxScale = this.props.maxScale || 7;
-        const { zoomRate, rotateDeg, enableTransition } = Object.assign({ zoomRate: this.props.zoomRate || 1.2, rotateDeg: 90, enableTransition: true }, options);
-        switch (action) {
-            case 'zoomOut':
-                if (this.transform.scale > minScale) {
-                    this.transform.scale = Number.parseFloat((this.transform.scale / zoomRate).toFixed(3));
+        (0, signals_1.watch)(currentImg, () => {
+            (0, framework_1.nextTick)(() => {
+                // todo imgRefs.get()[0] has error , can not get nothing ;
+                //      then loading always is true;
+                const $img = imgRefs.get()[0];
+                if (!($img === null || $img === void 0 ? void 0 : $img.complete)) {
+                    // loading.set(true) // todo reopen
                 }
-                break;
-            case 'zoomIn':
-                if (this.transform.scale < maxScale) {
-                    this.transform.scale = Number.parseFloat((this.transform.scale * zoomRate).toFixed(3));
-                }
-                break;
-            case 'clockwise':
-                this.transform.deg += rotateDeg;
-                // emit('rotate', this.transform.deg)
-                break;
-            case 'anticlockwise':
-                this.transform.deg -= rotateDeg;
-                // emit('rotate', this.transform.deg)
-                break;
-        }
-        this.transform.enableTransition = enableTransition;
+            });
+        });
+        (0, signals_1.watch)(activeIndex, (val) => {
+            reset();
+            emit('switch', val);
+        });
+        (0, framework_1.onMounted)(() => {
+            registerEventListener();
+        });
+        this.setActiveItem = setActiveItem;
+        console.error('then image-viewer add TdTeleport');
+        this.addChild(new td_teleport_class_1.TdTeleport({
+            to: 'body',
+            disabled: !props.teleported,
+            slot: new framework_1.Transition({
+                name: 'viewer-fade',
+                appear: true,
+                slot: new framework_1.Div({
+                    // vIf: props.vIf,  // parent element convert to down real element;
+                    refDom: wrapper,
+                    attrObj: {
+                        tabindex: '-1',
+                        class: ns.e('wrapper'),
+                    },
+                    styleObj: {
+                        zIndex: zIndex.get(),
+                    },
+                    slot: new td_focus_trap_class_1.TdFocusTrap({
+                        loop: true,
+                        trapped: true,
+                        focusTrapEl: wrapper,
+                        focusStartEl: 'container',
+                        emits: {
+                            focusoutPrevented: onFocusoutPrevented,
+                            releaseRequested: onCloseRequested,
+                        },
+                        slot: () => {
+                            var _a;
+                            return [
+                                new framework_1.Div({
+                                    class: ns.e('mask'),
+                                    events: {
+                                        click: (evt, ele) => {
+                                            if ((evt === null || evt === void 0 ? void 0 : evt.target) === (ele === null || ele === void 0 ? void 0 : ele.dom)) {
+                                                props.hideOnClickModal && hide();
+                                            }
+                                        },
+                                    },
+                                }),
+                                // <!-- CLOSE -->
+                                new framework_1.Span({
+                                    class: [ns.e('btn'), ns.e('close')],
+                                    events: {
+                                        click: hide,
+                                    },
+                                    slot: new td_icon_class_1.TdIcon({
+                                        slot: new svgs_1.ElCloseSvg(),
+                                    }),
+                                }),
+                                // <!-- ARROW -->
+                                new framework_1.Fragment({
+                                    // vIf: isSingle,
+                                    slot: [
+                                        new framework_1.Span({
+                                            class: arrowPrevKls,
+                                            events: {
+                                                click: prev,
+                                            },
+                                            slot: new td_icon_class_1.TdIcon({
+                                                slot: new svgs_1.ElArrowLeftSvg(),
+                                            }),
+                                        }),
+                                        new framework_1.Span({
+                                            class: arrowNextKls,
+                                            events: {
+                                                click: next,
+                                            },
+                                            slot: new td_icon_class_1.TdIcon({
+                                                slot: new svgs_1.ElArrowRightSvg(),
+                                            }),
+                                        }),
+                                    ],
+                                }),
+                                // <!-- ACTIONS -->
+                                new framework_1.Div({
+                                    class: [ns.e('btn'), ns.e('actions')],
+                                    slot: new framework_1.Div({
+                                        class: ns.e('actions__inner'),
+                                        slot: [
+                                            new td_icon_class_1.TdIcon({
+                                                events: {
+                                                    click: () => handleActions('zoomOut'),
+                                                },
+                                                slot: new svgs_1.ElZoomOutSvg(),
+                                            }),
+                                            new td_icon_class_1.TdIcon({
+                                                events: {
+                                                    click: () => handleActions('zoomIn'),
+                                                },
+                                                slot: new svgs_1.ElZoomInSvg(),
+                                            }),
+                                            new framework_1.I({
+                                                class: ns.e('actions__divider'),
+                                            }),
+                                            new td_icon_class_1.TdIcon({
+                                                events: {
+                                                    click: toggleMode,
+                                                },
+                                                slot: (0, signals_1.computed)(() => mode.get().icon),
+                                            }),
+                                            new framework_1.I({
+                                                class: ns.e('actions__divider'),
+                                            }),
+                                            new td_icon_class_1.TdIcon({
+                                                events: {
+                                                    click: () => handleActions('anticlockwise'),
+                                                },
+                                                slot: new svgs_1.ElRefreshLeftSvg(),
+                                            }),
+                                            new td_icon_class_1.TdIcon({
+                                                events: {
+                                                    click: () => handleActions('clockwise'),
+                                                },
+                                                slot: new svgs_1.ElRefreshRightSvg(),
+                                            }),
+                                        ],
+                                    }),
+                                }),
+                                // <!-- CANVAS -->
+                                new framework_1.Div({
+                                    class: ns.e('canvas'),
+                                    slot: (_a = props.urlList) === null || _a === void 0 ? void 0 : _a.map((url, i) => new framework_1.Img({
+                                        vShow: (0, signals_1.computed)(() => i === activeIndex.get()),
+                                        // refDom: ((el) => (imgRefs.get()[i] = el as HTMLImageElement)), // todo ??? how todo
+                                        attrObj: {
+                                            src: url || '',
+                                            class: ns.e('img'),
+                                            crossorigin: props.crossorigin,
+                                        },
+                                        styleObj: imgStyle,
+                                        emits: {
+                                            load: handleImgLoad,
+                                            error: handleImgError,
+                                            mousedown: handleMouseDown,
+                                        },
+                                    })),
+                                }),
+                                new framework_1.Fragment({
+                                    slot: props.slot,
+                                }),
+                                // ...arraySlot(props.slot),
+                            ];
+                        },
+                    }),
+                }),
+            }),
+        }));
     }
 }
 exports.TdImageViewer = TdImageViewer;