import { QLabel , QPixmap , AspectRatioMode , TransformationMode , QSize , NodeWidget , } from '@nodegui/nodegui' ; import { getLoadedPixmap } from '../../utils/image' ; import { Prop , PropSetters } from '../../renderer/patchProp' ; import { TextProps , textPropsSetters } from '../Text/VNText' ; import { VNWidget } from '../config' ; /**
 * The image widget allows users to create and render native image elements in the app.
 * It is based on [NodeGui's QLabel](https://docs.nodegui.org/docs/api/generated/classes/qlabel) along with [NodeGui's QPixmap](https://docs.nodegui.org/docs/api/generated/classes/qpixmap)
 *
 * ## Usage
 *
 * ```html
 * <template>
 *  <vn-view><vn-image :src="'https://via.placeholder.com/150'" /></vn-view>
 * </template>
 *
 * <script>
 *  export default { }
 * </script>
 * ```
 *
 * ## What it looks like?
 *
 * ![image-demo](/img/vn-image.png)
 *
 * ## Props and styling
 *
 * You can find all the props `vn-image` accepts listed below.
 * Apart from this, you can take a look at the [styling](/docs/guides/3-styling)
 * and [event handling](/docs/guides/5-handle-events) docs
 */ export interface ImageProps extends TextProps { src ? : string ; aspectRatioMode ? : AspectRatioMode ; transformationMode ? : TransformationMode ; buffer ? : Buffer ; } export const imagePropsSetters = { ... textPropsSetters , src : ( widget , _ , nextValue ) => { if ( ! nextValue ) { return ; } getLoadedPixmap ( nextValue ) . then ( ( pixmap ) => widget . setPixmap ( pixmap ) ) . catch ( console . warn ) ; } , buffer : ( widget , _ , nextValue ) => { const pixMap = new QPixmap ( ) ; pixMap . loadFromData ( nextValue ) ; widget . setPixmap ( pixMap ) ; } , aspectRatioMode : ( widget , _ , nextValue ) => { widget . setAspectRatioMode ( nextValue ) ; } , transformationMode : ( widget , _ , nextValue ) => { widget . setTransformationMode ( nextValue ) ; } , } ; internal export class VNImage extends QLabel implements VNWidget < ImageProps > { originalPixmap ? : QPixmap ; aspectRatioMode ? : AspectRatioMode ; transformationMode ? : TransformationMode ; setPixmap = ( pixmap ) => { super . setPixmap ( pixmap ) ; this . originalPixmap = pixmap ; } ; setAspectRatioMode ( mode ) { this . aspectRatioMode = mode ; this . scalePixmap ( this . size ( ) ) ; } setTransformationMode ( mode ) { this . transformationMode = mode ; this . scalePixmap ( this . size ( ) ) ; } scalePixmap ( size ) { if ( ! this . originalPixmap ) return ; super . setPixmap ( this . originalPixmap . scaled ( size . width ( ) , size . height ( ) , this . aspectRatioMode , this . transformationMode ) ) ; } insertChild ( ) { throw new Error ( 'Cannot add child to image elements' ) ; } patchProp ( key , prevValue , nextValue ) { const propSetter = imagePropsSetters [ key ] ; if ( propSetter !== undefined ) { propSetter ( this , prevValue as never , nextValue as never ) ; } } removeChild ( ) { throw new Error ( 'Cannot remove/add child to image elements' ) ; } insertBefore ( ) { throw new Error ( 'Cannot add child to image elements' ) ; } getNextSibling ( ) { throw new Error ( 'image cannot have children' ) ; } }