SImple module for modV to load images

image.js

export default {
    meta: {
      name: 'Image',
      type: '2d',
    },
  
    props: {
      images: {
        type: 'enum',
        enum: [
          /**
           * Your images go in here. 
           * 
           * The label is visible in modV when using the Image module.
           * The value is the name of the image inside the "media/<project>/images" folder
           * If you are using the "default" project the folder will be "media/default/images"
           *
           * How to find the media folder?
           * https://modv.js.org/guide/mediaManager.html#location
           */
          { 
            label: 'Tim Pietrusky', 
            value: 'timpietrusky.jpeg' 
          },
          { 
            label: 'modV rocks', 
            value: 'modv.png' 
          },
        ],
        set(value) {
          this.image.crossOrigin = 'Anonymous';
          this.image.src = `http://localhost:3133/default/image/${value}`;
        },
      },
  
      scale: {
        type: 'float',
        default: 1,
        min: 0,
        max: 1,
      },
    },
  
    data: {
      image: new Image(),
    },
  
    draw({ canvas, context }) {
      const { width, height } = canvas;
      const { scale } = this;
  
      context.drawImage(
        this.image,
        (width / 2) - ((this.image.width * scale) / 2),
        (height / 2) - ((this.image.height * scale) / 2),
        this.image.width * scale,
        this.image.height * scale,
      );
    },
  };