ui.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css">

<style>

  body {
    padding: 2em;
  }
  div {
    margin: 0em;
  }
  input {
    display: block;
  }

  /* Optional styling for the container element */
  #table-container {
    max-height: 350px;
    overflow-y: auto;
  }

  /* Styling for the table */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* Styling for table header cells */
  th, tr:nth-last-child(1) {
    background-color: #f2f2f2;
    font-weight: bold;
    padding: 8px;
    text-align: left;
    font-size: 11px;
  }

  /* Styling for table data cells */
  td {
    border: 1px solid #ddd;
    padding: 8px;
    font-size: 11px;
  }

  /* Alternating row background color */
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  /* Hover effect on rows */
  tr:hover {
    background-color: #f5f5f5;
  }
</style>

<h1>Compress & Export</h1>
<label for="quality" class="type--small">Compression:</label>
<input type="number" id="quality" name="quality" min="1" max="100" step="0.5" value="100" style="display: inline-block">
<input type="range" min="1" max="100" value="100" class="slider" step="0.5" id="myRange" value="100" style="accent-color: rgb(0, 85, 35);">

<div id="table-container" ></div>
<div id="total-container"></div>

<div style="text-align: center; margin-top: 10px;">
  <button class="button button--primary" id="reload" style="display: inline-block;">Reload</button>
  <button class="button button--primary" id="calculate" style="display: inline-block">Calculate</button>
  <button class="button button--primary" id="export" style="display: inline-block;">Export</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
<script>

  const qualityInput = document.getElementById('quality');
  const rangeInput = document.getElementById('myRange');

  document.getElementById('reload').onclick = () => {
    parent.postMessage({pluginMessage: ''}, '*')
  }

  // Update the input number when the range input changes
  rangeInput.addEventListener('input', () => {
    qualityInput.value = rangeInput.value;
  });

  // Update the range input when the input number changes
  qualityInput.addEventListener('input', () => {
    rangeInput.value = qualityInput.value;
  });
  
  window.onmessage = (event) => {
    const arrayData = event.data.pluginMessage;
    const arrayBlob = []
    let compressedArray
    
    if (arrayData.length) {
      for (data of arrayData) {
          arrayBlob.push([data[0], data[1], createBlob(data[2])])
      }
    }

    updateTable(arrayBlob)

    document.getElementById('export').onclick = () => {
      if (compressedArray) {
        handleBlobs(compressedArray)
      } else {
        handleBlobs(arrayBlob)
      }
    }

    document.getElementById('calculate').onclick = () => {
      quality = document.getElementById('quality').value
      quality = (parseFloat(quality)) / 100
      // if quality === 100
        // do nothing and export arrayBlob
      //else
      compressData(quality, arrayBlob)
        .then((newBlobs) => {
          updateTable(newBlobs)
          compressedArray = newBlobs
        })
        .catch((error) => {
          console.error('Error compressing blobs:', error);
        });
    };
  }

  // function to compress
  function compressData(quality, arrayBlob) {
    const compressionPromises = arrayBlob.map(([name, scale, blob]) =>
      compressBlob(quality, blob).then((compressedBlob) => [name, scale, compressedBlob])
    );
    return Promise.all(compressionPromises);
  }

  // function to update the UI with data from array
  function updateTable(blobsArray) {
    blobsArray.sort((a, b) => {
      const layerA = a[0];
      const layerB = b[0];

      return naturalSort(layerA, layerB);
  });

    const container = document.getElementById("table-container");
    // Clear the container
    container.innerHTML = '';
    const table = document.createElement("table");
    const headerRow = document.createElement("tr");
    const headerCell1 = document.createElement("th");
    
    headerCell1.textContent = "Node Name";
    headerRow.appendChild(headerCell1);

    const headerCell2 = document.createElement("th");
    headerCell2.textContent = "Scale";
    headerRow.appendChild(headerCell2);

    const headerCell3 = document.createElement("th");
    headerCell3.textContent = "File Size";
    headerRow.appendChild(headerCell3);

    table.appendChild(headerRow);

    let totalSelectionSize = 0;

    blobsArray.forEach((blob) => {
      const layer = shortenString(blob[0]);
      const scale = blob[1]
      const arraySize = blob[2].size;

      const row = document.createElement("tr");

      const layerCell = document.createElement("td");
      layerCell.textContent = layer;
      row.appendChild(layerCell);

      const scaleCell = document.createElement("td");
      scaleCell.textContent = scale;
      row.appendChild(scaleCell);

      const arraySizeCell = document.createElement("td");
      arraySizeCell.textContent = formatBytes(arraySize);
      row.appendChild(arraySizeCell);

      table.appendChild(row);

      totalSelectionSize += arraySize;
    });

    const totalRow = document.createElement("tr");

    const totalCell = document.createElement("td");
    totalCell.textContent = "Total";
    totalRow.appendChild(totalCell);

    const emptyCell = document.createElement("td");
    totalRow.appendChild(emptyCell);

    const totalSelectionSizeCell = document.createElement("td");
    totalSelectionSizeCell.textContent = formatBytes(totalSelectionSize);
    totalRow.appendChild(totalSelectionSizeCell);

    table.appendChild(totalRow);

    container.appendChild(table);
  }

  function compressBlob(quality, blob) {
    return new Promise((resolve, reject) => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext("2d");

      const img = new Image();
      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;

        ctx.drawImage(img, 0, 0);
        canvas.toBlob((compressedBlob) => {
          // Clean up the object URL after the blob is created
          URL.revokeObjectURL(img.src);
          resolve(compressedBlob);
        }, blob.type, quality);
      };
      img.onerror = (error) => {
        // Clean up the object URL in case of an error
        URL.revokeObjectURL(img.src);
        reject(error);
      };
      img.src = URL.createObjectURL(blob);
    });
  }

  function typedArrayToBuffer(array) {
   return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
  }

  // function to create a blob from the Uint8Array
  function createBlob(data) {
    const cleanBytes = typedArrayToBuffer(data)
    const blob = new Blob([ cleanBytes ], { type: 'image/jpeg' });
    // updateComponent(cleanBytes)
    return blob
  }

  // function to create, zip and download files
  function handleBlobs(inputBlobs) {
    let zip = new JSZip();

    for (let blob of inputBlobs) {
      zip.file(`${blob[0]}.jpeg`, blob[2], {base64: true})
    }

    zip.generateAsync({ type: 'blob' })
      .then(function(content) {
        const link = document.createElement('a');
        link.href = URL.createObjectURL(content);
        link.innerText = 'Download All Images';
        link.download = 'documents.zip'; // Specify the desired filename for the zip file
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link)
        // Clean up the object URL
        URL.revokeObjectURL(link.href);
      });
  }

  // function to sort the array in a natural way
  function naturalSort(a, b) {
    const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
    return collator.compare(a, b);
  }

  function shortenString(str) {
    const maxLength = 50
    if (str.length <= maxLength) {
      return str; // Return the original string if it's already within the desired length
    }

    const ellipsis = '...'; // The ellipsis to indicate that the string has been shortened
    const visibleChars = maxLength - ellipsis.length; // Calculate the number of visible characters

    const firstChars = str.slice(0, visibleChars / 2); // Extract the first half of visible characters
    const lastChars = str.slice(-visibleChars / 2); // Extract the last half of visible characters

    return `${firstChars}${ellipsis}${lastChars}`; // Combine the shortened string with the ellipsis
  }

  function formatBytes(bytes) {
    if (bytes < 1024) {
        return bytes + ' B';
    } else if (bytes < 1024 * 1024) {
        return (bytes / 1024).toFixed(1) + ' KB';
    } else {
        return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
    }
}

</script>