flex-image-viewer 1.0.0

package/dist/FlexImageViewer/Thumbnail/index.js

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useInViewport } from "ahooks";
+import { useViewerDispatch, useViewerState } from "../../context/ViewerContext.js";
+import ThumbnailIamge from "../../components/ThumbnailIamge.js";
+function ThumbnailItem(props) {
+    const { file, idx, currentIdx, angle, getThumbnail, onClick, onRef } = props;
+    const ref = useRef(null);
+    const [inViewport] = useInViewport(ref, {
+        threshold: 0
+    });
+    const [rendered, setRendered] = useState(idx === currentIdx);
+    useEffect(()=>{
+        onRef(ref.current, idx);
+        return ()=>onRef(null, idx);
+    }, [
+        idx,
+        onRef
+    ]);
+    useEffect(()=>{
+        if ((inViewport || idx === currentIdx) && !rendered) setRendered(true);
+    }, [
+        inViewport,
+        idx,
+        currentIdx,
+        rendered
+    ]);
+    return /*#__PURE__*/ jsx("li", {
+        ref: ref,
+        className: currentIdx === idx ? 'flex-image-viewer-thumbnail-active' : '',
+        onClick: onClick,
+        "aria-label": `缩略图 ${idx + 1}`,
+        role: "button",
+        tabIndex: 0,
+        children: rendered && /*#__PURE__*/ jsx(ThumbnailIamge, {
+            file: file,
+            angle: angle,
+            getThumbnail: getThumbnail
+        })
+    }, idx);
+}
+function Thumbnail(props) {
+    const { getThumbnail } = props;
+    const state = useViewerState();
+    const dispatch = useViewerDispatch();
+    const thumbnails = state.files;
+    const imageOptions = state.imageOptions;
+    const visible = state.thumbnailVisible;
+    const current = state.currentIndex;
+    const itemRefs = useRef(new Map());
+    const handleRef = useCallback((el, idx)=>{
+        if (el) itemRefs.current.set(idx, el);
+        else itemRefs.current.delete(idx);
+    }, []);
+    useEffect(()=>{
+        if (!thumbnails || 0 === thumbnails.length) return;
+        const index = current - 1;
+        const targetElement = itemRefs.current.get(index);
+        if (targetElement) targetElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+            inline: 'nearest'
+        });
+    }, [
+        current,
+        thumbnails
+    ]);
+    const index = current - 1;
+    return /*#__PURE__*/ jsx("nav", {
+        className: `flex-image-viewer-thumbnail ${visible ? 'visible' : ''}`,
+        "aria-label": "缩略图导航",
+        children: /*#__PURE__*/ jsx("div", {
+            children: /*#__PURE__*/ jsx("ul", {
+                children: thumbnails?.map((item, idx)=>/*#__PURE__*/ jsx(ThumbnailItem, {
+                        file: item,
+                        idx: idx,
+                        currentIdx: index,
+                        angle: imageOptions?.[idx]?.angle,
+                        getThumbnail: getThumbnail,
+                        onClick: ()=>dispatch({
+                                type: 'SET_CURRENT_INDEX',
+                                payload: idx + 1
+                            }),
+                        onRef: handleRef
+                    }, idx))
+            })
+        })
+    });
+}
+export default Thumbnail;

package/dist/FlexImageViewer/index.css

@@ -0,0 +1,582 @@
+:root {
+  --fiv-color-primary: #1890ff;
+  --fiv-color-bg-overlay: #00000080;
+  --fiv-color-bg-panel: #202020;
+  --fiv-color-bg-dark: #515151e6;
+  --fiv-color-bg-dark-hover: #51515180;
+  --fiv-color-bg-light: #fff;
+  --fiv-color-bg-disabled: #f5f5f5;
+  --fiv-color-bg-thumbnail: #0000001a;
+  --fiv-color-bg-selected: #e6f7ff;
+  --fiv-color-bg-hover: #f5f5f5;
+  --fiv-color-text-primary: #333;
+  --fiv-color-text-inverse: #fff;
+  --fiv-color-text-muted: #ffffffd9;
+  --fiv-color-text-disabled: #00000040;
+  --fiv-color-border: #d9d9d9;
+  --fiv-color-border-hover: #40a9ff;
+  --fiv-color-border-active: var(--fiv-color-primary);
+  --fiv-shadow-focus: 0 0 0 2px #1890ff33;
+  --fiv-shadow-dropdown: 0 2px 8px #00000026;
+  --fiv-spacing-xs: 2px;
+  --fiv-spacing-sm: 4px;
+  --fiv-spacing-md: 6px;
+  --fiv-spacing-lg: 8px;
+  --fiv-spacing-xl: 10px;
+  --fiv-spacing-2xl: 12px;
+  --fiv-spacing-3xl: 16px;
+  --fiv-spacing-4xl: 20px;
+  --fiv-size-tool: 30px;
+  --fiv-size-icon-sm: 12px;
+  --fiv-size-icon-md: 20px;
+  --fiv-size-icon-lg: 24px;
+  --fiv-size-thumbnail-width: 90px;
+  --fiv-size-thumbnail-height: 68px;
+  --fiv-size-info-panel-width: 300px;
+  --fiv-size-header-height: 36px;
+  --fiv-size-footer-height: 36px;
+  --fiv-size-footer-with-thumbnail: 160.88px;
+  --fiv-size-info-toggle: 16px;
+  --fiv-size-info-toggle-height: 30px;
+  --fiv-size-percent-input: 30px;
+  --fiv-size-percent-control-height: 24px;
+  --fiv-size-percent-dropdown-max: 200px;
+  --fiv-border-radius-sm: 3px;
+  --fiv-border-radius-md: 4px;
+  --fiv-animation-duration-fast: .3s;
+  --fiv-animation-ease: ease;
+  --fiv-z-index-modal: 1000;
+  --fiv-scrollbar-size: 6px;
+  --fiv-scrollbar-track: #0000001a;
+  --fiv-scrollbar-thumb: #ffffff4d;
+  --fiv-scrollbar-thumb-hover: #ffffff80;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --fiv-color-bg-light: #1f1f1f;
+    --fiv-color-bg-disabled: #2c2c2c;
+    --fiv-color-bg-selected: #1890ff33;
+    --fiv-color-bg-hover: #ffffff14;
+    --fiv-color-text-primary: #ffffffd9;
+    --fiv-color-text-disabled: #ffffff4d;
+    --fiv-color-border: #434343;
+    --fiv-color-border-hover: var(--fiv-color-primary);
+    --fiv-shadow-dropdown: 0 2px 8px #00000073;
+  }
+}
+
+.flex-image-viewer {
+  --fiv-layout-footer-offset: calc(var(--fiv-size-header-height) + var(--fiv-size-footer-height));
+  --fiv-layout-info-offset: 0px;
+  flex-direction: column;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.flex-image-viewer.with-thumbnail {
+  --fiv-layout-footer-offset: var(--fiv-size-footer-with-thumbnail);
+}
+
+.flex-image-viewer.with-info {
+  --fiv-layout-info-offset: var(--fiv-size-info-panel-width);
+}
+
+.flex-image-viewer-main {
+  height: calc(100% - var(--fiv-layout-footer-offset));
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+}
+
+.flex-image-viewer-content {
+  width: calc(100% - var(--fiv-layout-info-offset));
+}
+
+div.rc-tooltip-inner {
+  min-height: auto;
+}
+
+.flex-image-viewer-container {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.flex-image-viewer-image {
+  transform-origin: center;
+}
+
+.flex-image-viewer-modal {
+  background-color: var(--fiv-color-bg-overlay);
+  z-index: var(--fiv-z-index-modal);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: fixed;
+  inset: 0;
+}
+
+.flex-image-viewer-percent-select {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+  display: inline-block;
+  position: relative;
+}
+
+.flex-image-viewer-percent-select-control {
+  border: 1px solid var(--fiv-color-border);
+  border-radius: var(--fiv-border-radius-md);
+  padding: 0 var(--fiv-spacing-lg);
+  cursor: pointer;
+  transition: all var(--fiv-animation-duration-fast);
+  color: var(--fiv-color-text-inverse);
+  height: var(--fiv-size-percent-control-height);
+  line-height: var(--fiv-size-percent-control-height);
+  align-items: center;
+  display: flex;
+}
+
+.flex-image-viewer-percent-select:hover .flex-image-viewer-percent-select-control {
+  border-color: var(--fiv-color-border-hover);
+}
+
+.flex-image-viewer-percent-select-open .flex-image-viewer-percent-select-control {
+  border-color: var(--fiv-color-border-hover);
+  box-shadow: var(--fiv-shadow-focus);
+}
+
+.flex-image-viewer-percent-select-input {
+  color: var(--fiv-color-text-inverse);
+  width: var(--fiv-size-percent-input);
+  text-align: right;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  font-size: 14px;
+}
+
+.flex-image-viewer-percent-select-input[readonly] {
+  cursor: pointer;
+  color: var(--fiv-color-text-inverse);
+  background-color: #0000;
+}
+
+.flex-image-viewer-percent-select-input-editing {
+  cursor: text;
+}
+
+.flex-image-viewer-percent-select-suffix {
+  color: var(--fiv-color-text-inverse);
+  pointer-events: none;
+  padding: 0 var(--fiv-spacing-xs);
+  font-size: 14px;
+}
+
+.flex-image-viewer-percent-select-arrow {
+  color: var(--fiv-color-text-inverse);
+  transition: transform var(--fiv-animation-duration-fast);
+  padding: 0 var(--fiv-spacing-sm);
+}
+
+div.flex-image-viewer-percent-select-arrow .flex-image-viewer-percent-select-arrow-icon {
+  font-size: var(--fiv-size-icon-sm);
+}
+
+.flex-image-viewer-percent-select-arrow-open {
+  transform: rotate(180deg);
+}
+
+.flex-image-viewer-percent-select-dropdown {
+  width: 100%;
+  margin-bottom: var(--fiv-spacing-sm);
+  background: var(--fiv-color-bg-light);
+  border: 1px solid var(--fiv-color-border);
+  border-radius: var(--fiv-border-radius-md);
+  box-shadow: var(--fiv-shadow-dropdown);
+  z-index: var(--fiv-z-index-modal);
+  max-height: var(--fiv-size-percent-dropdown-max);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  overflow-y: auto;
+}
+
+.flex-image-viewer-percent-select-options {
+  padding: var(--fiv-spacing-sm) 0;
+}
+
+.flex-image-viewer-percent-select-option {
+  padding: 5px var(--fiv-spacing-2xl);
+  color: var(--fiv-color-text-primary);
+  cursor: pointer;
+  transition: background-color var(--fiv-animation-duration-fast);
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14px;
+  display: flex;
+}
+
+.flex-image-viewer-percent-select-option:hover {
+  background-color: var(--fiv-color-bg-hover);
+}
+
+.flex-image-viewer-percent-select-option-selected {
+  background-color: var(--fiv-color-bg-selected);
+  color: var(--fiv-color-primary);
+  font-weight: 500;
+}
+
+.flex-image-viewer-percent-select-check {
+  color: var(--fiv-color-primary);
+  font-weight: bold;
+}
+
+div.flex-image-viewer-percent-select-check .flex-image-viewer-percent-select-check-icon {
+  font-size: 8px;
+}
+
+.flex-image-viewer-percent-select-disabled .flex-image-viewer-percent-select-control {
+  background-color: var(--fiv-color-bg-disabled);
+  border-color: var(--fiv-color-border);
+  cursor: not-allowed;
+}
+
+.flex-image-viewer-percent-select-disabled .flex-image-viewer-percent-select-input {
+  cursor: not-allowed;
+  color: var(--fiv-color-text-disabled);
+}
+
+.flex-image-viewer-content {
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  display: flex;
+  position: relative;
+}
+
+.flex-image-viewer-content-tool-left, .flex-image-viewer-content-tool-right {
+  width: var(--fiv-size-tool);
+  padding: 0 var(--fiv-spacing-md);
+  z-index: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+.flex-image-viewer-content-tool-left > span, .flex-image-viewer-content-tool-right > span {
+  width: var(--fiv-size-tool);
+  height: var(--fiv-size-tool);
+  border-radius: var(--fiv-border-radius-md);
+  background-color: var(--fiv-color-bg-dark);
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+  display: none;
+}
+
+.flex-image-viewer-content-tool-left:hover > span, .flex-image-viewer-content-tool-right:hover > span {
+  display: flex;
+}
+
+.flex-image-viewer-content-tool-left > span:hover, .flex-image-viewer-content-tool-right > span:hover {
+  background-color: var(--fiv-color-bg-dark-hover);
+}
+
+.flex-image-viewer-content-tool-left svg, .flex-image-viewer-content-tool-right svg {
+  font-size: var(--fiv-size-icon-md);
+  color: var(--fiv-color-text-inverse);
+}
+
+.flex-image-viewer-content-tool-left {
+  left: 0;
+}
+
+.flex-image-viewer-content-tool-right {
+  right: 0;
+}
+
+.flex-image-viewer-content-image {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+}
+
+.flex-image-viewer-header {
+  background-color: var(--fiv-color-bg-overlay);
+  padding: var(--fiv-spacing-md) var(--fiv-spacing-xl) var(--fiv-spacing-md) var(--fiv-spacing-4xl);
+  color: var(--fiv-color-text-muted);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.flex-image-viewer-header-title {
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+}
+
+.flex-image-viewer-header-count {
+  letter-spacing: var(--fiv-spacing-sm);
+}
+
+.flex-image-viewer-header-name {
+  padding: 0 var(--fiv-spacing-xl);
+}
+
+.flex-image-viewer-footer {
+  background-color: var(--fiv-color-bg-overlay);
+  padding: var(--fiv-spacing-md) var(--fiv-spacing-xl) var(--fiv-spacing-md) var(--fiv-spacing-4xl);
+  color: var(--fiv-color-text-muted);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.flex-image-viewer-footer-title {
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+}
+
+.flex-image-viewer-footer-size {
+  margin-right: var(--fiv-spacing-xl);
+}
+
+.flex-image-viewer-footer-size, .flex-image-viewer-footer-memory {
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+}
+
+.flex-image-viewer-footer-size svg, .flex-image-viewer-footer-memory svg {
+  margin-right: var(--fiv-spacing-sm);
+}
+
+.flex-image-viewer-actions {
+  justify-content: end;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+.flex-image-viewer-actions .flex-image-viewer-action-item {
+  padding: 0 var(--fiv-spacing-xl);
+  height: var(--fiv-size-percent-control-height);
+  list-style: none;
+}
+
+.flex-image-viewer-actions .flex-image-viewer-action-item .flex-image-viewer-icon {
+  font-size: var(--fiv-size-icon-lg);
+  cursor: pointer;
+}
+
+.flex-image-viewer-actions .flex-image-viewer-action-item .flex-image-viewer-icon:hover {
+  color: var(--fiv-color-text-inverse);
+}
+
+.flex-image-viewer-info {
+  background-color: var(--fiv-color-bg-panel);
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 100%;
+  transition: width var(--fiv-animation-duration-fast) var(--fiv-animation-ease),
+    opacity var(--fiv-animation-duration-fast) var(--fiv-animation-ease),
+    visibility var(--fiv-animation-duration-fast) var(--fiv-animation-ease);
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+}
+
+.flex-image-viewer-info.visible {
+  width: var(--fiv-size-info-panel-width);
+  opacity: 1;
+  visibility: visible;
+  width: auto;
+}
+
+.flex-image-viewer-info-tool {
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  display: flex;
+}
+
+.flex-image-viewer-info-tool span {
+  width: var(--fiv-size-info-toggle);
+  height: var(--fiv-size-info-toggle-height);
+  background-color: var(--fiv-color-bg-dark);
+  cursor: pointer;
+  color: var(--fiv-color-text-inverse);
+  border-top-right-radius: var(--fiv-border-radius-md);
+  border-bottom-right-radius: var(--fiv-border-radius-md);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.flex-image-viewer-info-tool span:hover {
+  background-color: var(--fiv-color-bg-dark-hover);
+}
+
+.flex-image-viewer-info ul {
+  height: 100%;
+  padding: var(--fiv-spacing-xl) var(--fiv-spacing-xl) var(--fiv-spacing-xl) 0;
+  box-sizing: border-box;
+  flex: 1;
+  margin: 0;
+}
+
+.flex-image-viewer-info ul li {
+  color: var(--fiv-color-text-inverse);
+  padding: var(--fiv-spacing-sm) 0;
+  justify-content: flex-start;
+  font-size: 14px;
+  list-style: none;
+  display: flex;
+}
+
+.flex-image-viewer-info ul li span {
+  min-width: 60px;
+}
+
+.flex-image-viewer-info ul li p {
+  flex: 1;
+  margin: 0;
+}
+
+.flex-image-viewer-thumbnail {
+  background-color: var(--fiv-color-bg-thumbnail);
+  opacity: 0;
+  visibility: hidden;
+  height: 0;
+  transition: height var(--fiv-animation-duration-fast) var(--fiv-animation-ease),
+    opacity var(--fiv-animation-duration-fast) var(--fiv-animation-ease),
+    visibility var(--fiv-animation-duration-fast) var(--fiv-animation-ease);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+}
+
+.flex-image-viewer-thumbnail.visible {
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+}
+
+.flex-image-viewer-thumbnail ul {
+  padding: var(--fiv-spacing-md);
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0;
+  display: flex;
+}
+
+.flex-image-viewer-thumbnail > div {
+  scroll-behavior: smooth;
+  overflow-x: auto;
+}
+
+.flex-image-viewer-thumbnail > div::-webkit-scrollbar {
+  height: var(--fiv-scrollbar-size);
+}
+
+.flex-image-viewer-thumbnail > div::-webkit-scrollbar-track {
+  background: var(--fiv-scrollbar-track);
+}
+
+.flex-image-viewer-thumbnail > div::-webkit-scrollbar-thumb {
+  background: var(--fiv-scrollbar-thumb);
+  border-radius: var(--fiv-border-radius-sm);
+}
+
+.flex-image-viewer-thumbnail > div::-webkit-scrollbar-thumb:hover {
+  background: var(--fiv-scrollbar-thumb-hover);
+}
+
+.flex-image-viewer-thumbnail ul li {
+  width: var(--fiv-size-thumbnail-width);
+  height: var(--fiv-size-thumbnail-height);
+  border-radius: var(--fiv-border-radius-md);
+  background-color: var(--fiv-color-bg-dark);
+  cursor: pointer;
+  margin: 0 var(--fiv-spacing-md);
+  border: 2px solid var(--fiv-color-bg-dark);
+  flex: none;
+  list-style: none;
+  overflow: hidden;
+}
+
+.flex-image-viewer-thumbnail ul li.flex-image-viewer-thumbnail-active {
+  border-color: var(--fiv-color-border-active);
+}
+
+.flex-image-viewer-thumbnail ul li:hover {
+  background-color: var(--fiv-color-bg-dark-hover);
+}
+
+.flex-image-viewer-thumbnail-container {
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+
+.flex-image-viewer-thumbnail-image {
+  transform-origin: center;
+}
+
+.flex-image-viewer-error {
+  background-color: var(--fiv-color-bg-dark);
+  color: var(--fiv-color-text-muted);
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.flex-image-viewer-error:before {
+  content: "图片加载失败";
+}
+
+.flex-image-viewer-loading {
+  z-index: 2;
+  border: 3px solid #fff3;
+  border-top-color: var(--fiv-color-primary);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  animation: 1s linear infinite flex-image-viewer-spin;
+  position: absolute;
+}
+
+@keyframes flex-image-viewer-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+