easyinspection-mask/src/SvgMask.js

Web Components para captura de fotos com máscaras SVG do EasyInspection

import { LitElement, html, css } from "lit";

// Importação dinâmica dos SVGs
import square from "./masks/square.svg";
import chassiAndMotorMask from "./masks/chassi-and-motor.svg";
import odometerMask from "./masks/odometer.svg";

import smallVehicleFrontMask from "./masks/small-vehicle-front.svg";
import smallVehicleSideLeftMask from "./masks/small-vehicle-side-left.svg";
import smallVehicleSideRightMask from "./masks/small-vehicle-side-right.svg";

import motocycleFrontMask from "./masks/motocycle-front.svg";
import motocycleSideLeftMask from "./masks/motocycle-side-left.svg";
import motocycleSideRightMask from "./masks/motocycle-side-right.svg";

import bigVehicleFrontMask from "./masks/big-vehicle-front.svg";
import busSideLeftMask from "./masks/bus-side-left.svg";
import busideRightMask from "./masks/bus-side-right.svg";
import truckSideLeftMask from "./masks/truck-side-left.svg";
import truckideRightMask from "./masks/truck-side-right.svg";


class SvgMask extends LitElement {
  static properties = {
    maskName: { type: String },
    width: { type: String },
    height: { type: String },
  };

  static styles = css`
    :host {
      display: block;
      position: relative;
    }
    .mask-container {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .mask-content {
      width: 100%;
      height: 100%;
      mask-image: var(--mask-square), var(--mask-image);
      mask-size: cover, var(--mask-width, 100%);
      mask-repeat: no-repeat;
      mask-position: center, center;
      mask-composite: subtract;

      -webkit-mask-image: var(--mask-square), var(--mask-image);
      -webkit-mask-size: cover, var(--mask-width, 100%);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center, center;
      -webkit-mask-composite: source-out;
    }
  `;

  constructor() {
    super();
    this.width = "100%";
    // this.height = "100%";
    this.maskName = "";
  }

  getMaskPath(maskName) {
    const maskMap = {
      square: square,
      "chassi-motor": chassiAndMotorMask,
      odometer: odometerMask,
      "small-vehicle-front": smallVehicleFrontMask,
      "small-vehicle-side-left": smallVehicleSideLeftMask,
      "small-vehicle-side-right": smallVehicleSideRightMask,
      "motocycle-front": motocycleFrontMask,
      "motocycle-side-left": motocycleSideLeftMask,
      "motocycle-side-right": motocycleSideRightMask,
      "big-vehicle-front": bigVehicleFrontMask,
      "bus-side-left": busSideLeftMask,
      "bus-side-right": busideRightMask,
      "truck-side-left": truckSideLeftMask,
      "truck-side-right": truckideRightMask,
    };

    return maskMap[maskName] || "";
  }

  updated() {
    const maskPath = this.getMaskPath(this.maskName);
    const squareMaskPath = this.getMaskPath("square");
    this.style.setProperty(
      "--mask-square",
      squareMaskPath ? `url('${squareMaskPath}')` : "none"
    );
    this.style.setProperty(
      "--mask-image",
      maskPath ? `url('${maskPath}')` : "none"
    );
    this.style.setProperty("--mask-width", this.width);
    // this.style.setProperty("--mask-height", this.height);
  }

  render() {
    return html`
      <div class="mask-container">
        <div class="mask-content">
          <slot></slot>
        </div>
      </div>
    `;
  }
}

customElements.define("svg-mask", SvgMask);