ImageKnife/entry/src/main/ets/pages/testReusePhotoPage.ets

/*
 * Copyright (C) 2024 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { ImageKnifeComponent, ImageKnifeOption, ScaleType } from '@ohos/libraryimageknife'

class CommonDataSource <T> implements IDataSource {
  private dataArray: T[] = []
  private listeners: DataChangeListener[] = []

  constructor(element: []) {
    this.dataArray = element
  }

  public getData(index: number) {
    return this.dataArray[index]
  }

  public totalCount(): number {
    return this.dataArray.length
  }

  public addData(index: number, data: T[]): void {
    this.dataArray = this.dataArray.concat(data)
    this.notifyDataAdd(index)
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach((listener: DataChangeListener) => {
      listener.onDataAdd(index)
    })
  }
}

@Entry
@Component
struct TestReusePhotoPage {
  @State hotCommendList: CommonDataSource<string> = new CommonDataSource<string>([])
  private data: Array<string> = [
    "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
    "http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
    "http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
    "http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
    "http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
    "http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
    "http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
    "http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
    "http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
    "http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
    "http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
    "http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
    "http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
    "http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
    "http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
    "http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
    "http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
    "http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
    "http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
    "http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
    "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
    'https://img-blog.csdnimg.cn/20191215043500229.png',
    'https://img-blog.csdn.net/20140514114029140',
    'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp'
  ]

  aboutToAppear() {
    this.hotCommendList.addData(this.hotCommendList.totalCount(), this.data)
    AppStorage.set("image_size",1)
  }

  build() {
    Column() {
      Button("up").onClick(()=>{
        AppStorage.set("image_size",1.6)
      })
      Button("down").onClick(()=>{
        AppStorage.set("image_size",0.9)
      })
      List() {
        LazyForEach(this.hotCommendList, (item: string) => {
          ListItem() {
            ReuseComponent({ url: item }).width("100%").height("100%")
          }.width(200).height(200).backgroundColor(Color.Orange)
        })
      }
      .width("100%")
      .height("100%")
      .backgroundColor(0xFAEEE0)
    }.width("100%").height("100%")
  }
}

@Reusable
@Component
struct ReuseComponent {
  @Prop url: string = ""
  imgSize: number = 100
  @StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
  scaleAble: boolean = true
  @State calcImgSize: number = 100
  aboutToReuse(params: Record<string, string>) {
    this.url = params.url
  }
  aboutToAppear(){
    this.setImageSize()
  }
  updateImageSize() {
    this.setImageSize()
  }

  setImageSize() {
    if (!this.scaleAble) {
      this.calcImgSize = this.imgSize
    } else if (this.image_size < 0.9) {
      this.calcImgSize = this.imgSize * 0.9
    } else if (this.image_size > 1.6) {
      this.calcImgSize = this.imgSize * 1.6
    } else {
      this.calcImgSize = this.imgSize * this.image_size
    }
  }

  build() {
    Column() {
      ImageKnifeComponent({
        imageKnifeOption:{
          loadSrc: this.url,
          mainScaleType: ScaleType.FIT_XY,
          placeholderSrc: $r('app.media.icon_loading'),
          placeholderScaleType: ScaleType.FIT_XY,
          errorholderSrc: $r('app.media.icon_failed'),
          errorholderSrcScaleType: ScaleType.FIT_XY
        }
      }).width(this.calcImgSize).height(this.calcImgSize)
    }.width("100%").height("100%")
  }
}

@Component
struct PhotoComponent {
  @Watch("updateTheUrl") @Prop url: string = ""
  imgSize: number = 100
  @State imageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
  @StorageProp("image_size") @Watch("updateImageSize") image_size: number = 0
  scaleAble: boolean = true
  @State calcImgSize: number = 100

  updateImageSize() {
    this.setImageSize()
  }

  setImageSize() {
    if (!this.scaleAble) {
      this.calcImgSize = this.imgSize
    } else if (this.image_size < 0.9) {
      this.calcImgSize = this.imgSize * 0.9
    } else if (this.image_size > 1.6) {
      this.calcImgSize = this.imgSize * 1.6
    } else {
      this.calcImgSize = this.imgSize * this.image_size
    }
  }

  updateTheUrl() {
    this.imageKnifeOption = {
      loadSrc: this.url,
      mainScaleType: ScaleType.FIT_XY,
      placeholderSrc: $r('app.media.icon_loading'),
      placeholderScaleType: ScaleType.FIT_XY,
      errorholderSrc: $r('app.media.icon_failed'),
      errorholderSrcScaleType: ScaleType.FIT_XY
    }
  }

  build() {
    Column() {
      ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
    }.width(this.calcImgSize).height(this.calcImgSize)
  }
}