Image Shared

docs generated using Junie AI

A shared utility package providing core functionality for image-related web components.

Overview

Image Shared provides a collection of base classes, utilities, and helper functions that are used by other image-related packages in the mlbrgn-node-workspace. It serves as the foundation for components like ImageEditor, Image Slider, and ImageUploader.

Key Features

• Base Custom Elements: Provides base classes for creating custom web components

  • BaseCustomElement: Foundation for all custom elements
  • BaseFilesCustomElement: Extends BaseCustomElement with file handling capabilities
  • BaseFormCustomElement: Extends BaseCustomElement with form-related functionality

• Image Utilities:

  • ImageFile: Class for handling image files with validation and processing
  • ImageRepository: Collection management for images
  • ImageRepositoryItem: Individual items in the repository
  • ImageSource: Handles different sources of images

• Geometry Utilities:

  • Area: Class for representing and manipulating rectangular areas
  • Point: Class for representing and manipulating points in 2D space

• Helper Functions:

  • domHelpers: Utilities for DOM manipulation
  • helpers: General utility functions
  • imageHelpers: Image-specific utility functions

• Event Handling:

  • EventBus: Facilitates communication between components

• Logging:

  • Logger: Provides consistent logging functionality

Installation

npm install @mlbrgn/image-shared

Usage

Import the required utilities from the package:

import { 
  BaseCustomElement, 
  ImageFile, 
  Area, 
  EventBus 
} from '@mlbrgn/image-shared';

Creating a Custom Element

import { BaseCustomElement } from '@mlbrgn/image-shared';

export default class MyCustomElement extends BaseCustomElement {
  static shadowTemplate = '<div>My Custom Element</div>';
  static elementLookup = ['#someElement'];

  constructor() {
    super();
    // Your initialization code
  }
}

Working with Images

import { ImageFile, ImageRepository } from '@mlbrgn/image-shared';

// Create a repository to manage images
const repository = new ImageRepository();

// Create an image file
const imageFile = new ImageFile(fileObject, {
  maxWidth: 1920,
  maxHeight: 1080,
  formatsRegex: /\.(jpe?g|png|gif)$/i
});

// Add to repository
repository.add(imageFile);

Development

This package is developed inside the mlbrgn-node-workspace monorepo. Do not run npm run dev or npm install inside this repository.

Clone the monorepo instead: https://github.com/evertjanmlbrgn/mlbrgn-node-workspace