大圖組件功能點(diǎn)及主要功能點(diǎn)技術(shù)實(shí)現(xiàn)說明

• 大圖頭部組件：圖片標(biāo)題，退出大圖

• 大圖主體-輪播圖組件：單擊查看圖片，當(dāng)前圖定位到輪播圖中部，滾動(dòng)選擇圖片

• 借用插件react-virtualized-auto-sizer實(shí)現(xiàn)虛擬列表優(yōu)化長列表，父元素resize，子元素自動(dòng)調(diào)節(jié)填充個(gè)數(shù)

• 借用插件react-window實(shí)現(xiàn)指定滾動(dòng)偏移

• 主要代碼

 <div
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={styles.slider}
    >
      <div className={styles.sliderBody}>
        <AutoSizer>
          {({ height }) => {
            OneScreenHeight.current = height
            return (
              <FixedSizeList
                ref={listRef}
                className="List"
                height={height}
                itemCount={itemList.length}
                itemSize={ITEM_HEIGHT}
                width={SLIDER_WIDTH}
                style={{ overflow: showScroll }}
                initialScrollOffset={
                  selectedItemIndex * ITEM_HEIGHT > height
                    ? selectedItemIndex * ITEM_HEIGHT
                    : 0
                }
                itemData={{
                  itemList,
                  dispatch,
                  selectedItem
                }}
              >
                {Row}
              </FixedSizeList>
            )
          }}
        </AutoSizer>
      </div>

      <div className={styles.sliderFooter}>
        {selectedItemIndex + 1}/{itemList.length}
      </div>
    </div>

• 大圖主體-mainBody組件： 展示1000*1000的大圖或原圖，支持放大縮小拖拽

• 借用Matrix實(shí)現(xiàn)圖片的放大，縮小和位移
  主要代碼

  useEffect(() => {
    // 圖片在容器X軸或Y軸上可移動(dòng)的距離發(fā)生變化，會(huì)引發(fā)兩種情況
    // 1、canMoveX或canMoveY為0，則清空位移
    // 2、因?yàn)楸壤s小導(dǎo)致圖片在容器內(nèi)偏移，那么我們糾正位置，讓圖片貼近相鄰的容器邊，不要縮進(jìn)去
    setMatrix((preMatrix) => ({
      ...preMatrix,
      e: getMoveXY(preMatrix.e, draggable.canMoveX),
      f: getMoveXY(preMatrix.f, draggable.canMoveY)
    }))
    if (draggable.canMoveX === 0) {
      setMoveX(0)
    }
    if (draggable.canMoveY === 0) {
      setMoveY(0)
    }
  }, [draggable.canMoveX, draggable.canMoveY])

  useEffect(() => {
    // 用戶拖拽X軸產(chǎn)生位移
    setMatrix((preMatrix) => ({
      ...preMatrix,
      e: moveX
    }))
  }, [moveX])

  useEffect(() => {
    // 用戶拖拽Y軸產(chǎn)生位移
    setMatrix((preMatrix) => ({
      ...preMatrix,
      f: moveY
    }))
  }, [moveY])

• 自己動(dòng)手實(shí)現(xiàn)一個(gè)取消promise的函數(shù)makePromiseCancelable在快速切換圖片時(shí)，取消上一張圖片請(qǐng)求
  取消promise的代碼
  如果時(shí)angualr,就可以直接用rxjs了，但是rxjs和react匹配度不高。。。

export default function makePromiseCancelable(promise: Promise<any>) {
  // 創(chuàng)建函數(shù)作用域上層標(biāo)識(shí)，為true設(shè)置promise.reject
  let hasCanceled = false
  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then((val:any) =>
      hasCanceled ? reject(new Error('isCanceled')) : resolve(val)
    )
    promise.catch((error) =>
      hasCanceled ? reject(new Error('isCanceled')) : reject(error)
    )
  })

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled = true
    }
  }
}

export interface cancelPromise {
  promise?: Promise<unknown>
  cancel:()=>void
}

圖片請(qǐng)求的主要代碼，這樣，用戶快速單擊不同的圖片，上一次圖片請(qǐng)求
還沒回來就會(huì)被取消了~~~
主要還是因?yàn)閞eact和rxjs結(jié)合很少見
要是angular就可以直接使用rxjs的switchMap 來處理

  const getImageUrl = (
    url: any,
    options: { width: number, height: number }
  ) => {
    const cancelGetImageUrlPromiseObj = makePromiseCancelable(
      getSignedPicUrl(url, options)
    )
    cancelGetImageUrlPromiseObj.promise
      .then((imageUrl) => {
        setImageUrl(imageUrl as string)
      })
      .catch((err) => {
        console.log(err)
      })
    prePromiseObj.current && prePromiseObj.current.cancel()
    prePromiseObj.current = cancelGetImageUrlPromiseObj
  }

  useEffect(() => {
    const options = showOriginal
      ? { width: 0, height: 0 }
      : { width: 1000, height: 1000 }

    const curVersion = versions[versionIndex]

    if (curVersion && curVersion.id) {
      dispatch({
        type: 'bigPicture/updateSelectedVersion',
        payload: {
          selectedVersionId: curVersion.id
        }
      })

      getImageUrl(curVersion.url, options)
    }
  }, [versionIndex])

  useEffect(() => {
    if (showOriginal) {
      setOriginLoading(true)
    }
    const options = showOriginal
      ? { width: 0, height: 0 }
      : { width: 1000, height: 1000 }

    getImageUrl(selectedItem.url, options)
  }, [selectedItem.url, showOriginal])

• 大圖主體-詳情欄組件：展示圖片詳情，標(biāo)簽，版本

<div onContextMenu={(e) => e.preventDefault()}>
      {!isPickPicture && onBigPictureModalClose ? (
        <ScanPictureHeader
          bigPicture={bigPicture}
          onBigPictureModalClose={onBigPictureModalClose}
        />
      ) : null}

      <div className={styles.body}>
        <section style={{ flexDirection: direction }} className={styles.left}>
          <Slider dispatch={dispatch} bigPicture={bigPicture} />
          <MainBody
            dispatch={dispatch}
            bigPicture={bigPicture}
            renderSlot={renderSlot}
            hiddenDetailButton={isPickPicture}
            toolBarStyle={toolBarStyle}
          />
        </section>

        {bigPicture.showItemTool ? (
          <div className={styles.right}>
            <SingleItemInfo resourceNode={selectedItem} />
          </div>
        ) : null}
      </div>
    </div>

• 輪播圖需要單擊切換mainBody的圖片顯示，mainBody有左右按鈕也可以切換輪播圖的上下張，這兩個(gè)組件共同維護(hù)一份數(shù)據(jù)存在bigPictureModel中，這個(gè)model中本應(yīng)該維護(hù)的數(shù)據(jù)：

• selectedItem: ResourceNode， selectedItemIndex: number， itemList: ResourceNode[]

• 但因?yàn)?，歷史版本直接復(fù)用ResourceList的大圖組件，里面有字段isHistoryVersion，控制大圖打開時(shí)候，獲取版本的請(qǐng)求，為歷史版本增加

• isHistoryVersion?: boolean

• versions: Version[] // 當(dāng)前選擇的版本

• selectedCurrentVersion: Version // 當(dāng)前單擊選中的版本

• selectedVersion: Version

• 另外，展示詳情欄或者進(jìn)入原圖模式是多個(gè)組件需要共享和修改的數(shù)據(jù)，避免層層傳遞參數(shù)和回調(diào)，所以增加 showItemTool:boolean， showOriginal:boolean進(jìn)行維護(hù)

• 大圖常規(guī)使用場(chǎng)景

• image

• 選片使用場(chǎng)景

• image

• 歷史版本使用場(chǎng)景

• image

• 以圖搜圖使用場(chǎng)景

• image

大圖組件食用說明

• 如果想要使用大圖，直接引入組件 <BigPicture/> 傳入對(duì)應(yīng)props即可，props屬性如下：

• itemList: ResourceNode[] 大圖資源列表，必填項(xiàng)

• selectedItemId: string 默認(rèn)選中圖片id，必填項(xiàng)

• visible: boolean 是否掛載大圖內(nèi)部內(nèi)容，必填項(xiàng)

• onClose?: (item: ResourceNode) => void 關(guān)閉回調(diào)

• urlLocation?: boolean 是否需要url定位，默認(rèn)需要

• displayMode?: DisplayMode 展示模式，彈窗展示或不用彈窗，默認(rèn)使用彈窗

• showHeader?: boolean 是否展示頭部，默認(rèn)展示

• showSlider?: boolean 是否展示輪播圖及左右切換按鈕，默認(rèn)展示

• sliderPosition?: SliderPosition 輪播圖展示位置，默認(rèn)在左側(cè)

• canShowItemTool?:boolean 是否有詳情欄功能，默認(rèn)有

• canShowOriginal?:boolean 是否有原圖功能，默認(rèn)有

• defaultShowItemTool?:boolean 初始時(shí)，是否展開詳情欄，默認(rèn)不展開

• defaultItemToolTab?: string 初始時(shí)，展開詳情欄，默認(rèn)選中tab，默認(rèn)選中詳情tab

• defaultShowOriginal?:boolean 初始時(shí)，是否進(jìn)入原圖，默認(rèn)不進(jìn)入

• toolbarRenderSlot?:((current: ResourceNode) => React.ReactNode)[] 工具欄可插入的功能，默認(rèn)空

• toolBarStyle?: CSSProperties 工具欄顯示位置

• 其中關(guān)于urlLocation增加以下說明：

• url的定位需要監(jiān)聽url變化，url的監(jiān)聽寫在了BigPicture內(nèi)，如果要使用大圖的url定位，BigPicture需要一直掛載在你的組件內(nèi)部

• 如果urlLocation傳為true，那么上下切換圖片，都是通過改變url來定位到當(dāng)前url中pictureId選中的圖片。如果urlLocation為false，那么上下切換圖片，只會(huì)修改Dva中的對(duì)應(yīng)的selectItem相關(guān)數(shù)據(jù)

• 主要代碼

 const preQuery = history.location.query
      history.push({
        pathname: history.location.pathname,
        query: {
          ...preQuery,
          pictureId: `${item.id}`,
          modal: `${true}`
        }
      })

// 此時(shí)你需要監(jiān)聽url參數(shù)變化，model為true的時(shí)候，提供當(dāng)前圖片的id及列表去打開大圖

  useEffect(() => {
    if (urlQuery && urlQuery.modal && itemList.length > 0) {
      dispatch({
        type: 'bigPicture/updateState',
        payload: {
          selectedItemId: urlQuery.pictureId,
          itemList,
        }
      })

      setBigPictureModalVisible(true)
    }
  }, [urlQuery, itemList])

最后展示一下他的使用

666.gif