code.js

"use strict";
const CLOSE_PLUGIN_MSG = "_CLOSE_PLUGIN_";
try {
    main();
}
catch (e) {
    if (e instanceof Error && e.message.startsWith(CLOSE_PLUGIN_MSG)) {
        const msg = e.message.replace(CLOSE_PLUGIN_MSG, "");
        if (msg)
            figma.notify(msg);
    }
    else {
        throw e;
    }
}
finally {
    figma.closePlugin();
}
function main() {
    const nodes = figma.currentPage.selection.filter(isFillable);
    // Detect main image in selection. It is the biggest node with IMAGE fill
    const img = nodes.reduce((main, node) => {
        const nodeFill = getFills(node)[0];
        if (!nodeFill)
            return main;
        if (nodeFill.type !== "IMAGE")
            return main;
        if (!main)
            return node;
        // Return the biggest image
        const mainSqr = main.width * main.height;
        const nodeSqr = node.width * node.height;
        return nodeSqr > mainSqr ? node : main;
    }, null);
    if (!img)
        throw closeErr(`🟧 No image selected`);
    // Get list of other nodes
    // TODO: Check overlapping with image, otherwise node will be transparent
    const shapes = nodes.filter((node) => node.id !== img.id);
    if (!shapes.length)
        throw closeErr(`🟧 Select shapes over the image`);
    shapes.forEach((shape) => copyFill(img, shape));
    figma.currentPage.selection = shapes;
    throw closeErr(`✅ ${shapes.length} ${shapes.length === 1 ? "slice" : "slices"} ready`);
}
/** Helper function to close the plugin with a message */
function closeErr(msg) {
    return new Error(`${CLOSE_PLUGIN_MSG}${msg}`);
}
/** Check if node is fillable */
function isFillable(node) {
    return node && "fills" in node;
}
function getFills(node) {
    if (!("fills" in node))
        return [];
    if (node.fills === figma.mixed)
        return [];
    return node.fills;
}
function copyFill(img, node) {
    const absoluteFillPos = addPosition(getNodePosition(img), getFillPosition(img));
    const nodeFillPos = subPosition(getNodePosition(node), absoluteFillPos);
    node.fills = [
        Object.assign(Object.assign({}, getFills(img)[0]), { scaleMode: "CROP", imageTransform: createFillTransform(img, node, nodeFillPos) }),
    ];
}
function getFillPosition(node) {
    const fill = getFills(node)[0];
    // FIT and FILL scale modes treats like not scaled.
    if (fill.scaleMode !== "CROP")
        return { x: 0, y: 0, sX: 1, sY: 1, rotation: 0 };
    const T = fill.imageTransform || [
        [1, 0, 0],
        [0, 1, 0],
    ];
    const w = node.width;
    const h = node.height;
    const rotate = [
        [T[0][0], -(w / h) * T[0][1], 0],
        [-(h / w) * T[1][0], T[1][1], 0],
    ];
    const translate = [
        [1, 0, -w * T[0][2]],
        [0, 1, -h * T[1][2]],
    ];
    const [[a, b, x], [c, d, y]] = multiply(rotate, translate);
    const sX = 1 / (Math.sign(a) * Math.sqrt(a * a + c * c));
    const sY = 1 / (Math.sign(d) * Math.sqrt(b * b + d * d));
    const rad = Math.asin(b / sX);
    // TODO: to support scaled images we need to calc real image size
    if (isNaN(rad)) {
        throw closeErr("Scaled images are not supported");
    }
    const rotation = rad / (Math.PI / 180);
    return { x, y, sX, sY, rotation };
}
function getNodePosition(node) {
    const [[a, b, x], [c, d, y]] = node.absoluteTransform;
    const sX = Math.sign(a) * Math.sqrt(a * a + c * c);
    const sY = Math.sign(d) * Math.sqrt(b * b + d * d);
    const rad = Math.asin(b / sX);
    const rotation = rad / (Math.PI / 180);
    return { x, y, sX, sY, rotation };
}
// function getFillTransform(from: FillableNode, to: FillableNode): Transform {
//   const T1 = from.fills[0].imageTransform;
//   const w1 = from.width;
//   const h1 = from.height;
//   const w2 = to.width;
//   const h2 = to.height;
//   const sX = to.width / from.width;
//   const sY = to.height / from.height;
//   const scale = [
//     [sX, 0, 0],
//     [0, sY, 0],
//   ] as Transform;
//   const rotate = [
//     [T1[0][0], (w1 / h1) * (h2 / w2) * T1[0][1], 0],
//     [(h1 / w1) * (w2 / h2) * T1[1][0], T1[1][1], 0],
//   ] as Transform;
//   const translate = [
//     [1, 0, (w1 * T1[0][2]) / w2],
//     [0, 1, (h1 * T1[1][2]) / h2],
//   ] as Transform;
//   return multiply(scale, rotate, translate);
// }
function multiply(...toMultiply) {
    return toMultiply.reduce((t1, t2) => multiplyMatrices(t1, t2));
    function multiplyMatrices(m1, m2) {
        if (!m1)
            return m2;
        if (!m2)
            return m1;
        const a = [...m1, [0, 0, 1]];
        const b = [...m2, [0, 0, 1]];
        const m = new Array(a.length);
        for (let row = 0; row < a.length; row++) {
            m[row] = new Array(b[0].length);
            for (let column = 0; column < b[0].length; column++) {
                m[row][column] = 0;
                for (let i = 0; i < a[0].length; i++) {
                    m[row][column] += a[row][i] * b[i][column];
                }
            }
        }
        return [m[0], m[1]];
    }
}
function rotate(cx, cy, x, y, angle) {
    const radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians), nx = cos * (x - cx) + sin * (y - cy) + cx, ny = cos * (y - cy) - sin * (x - cx) + cy;
    return [nx, ny];
}
function addPosition(pos1, pos2) {
    const [x, y] = rotate(pos1.x, pos1.y, pos1.x + pos2.x, pos1.y + pos2.y, pos1.rotation);
    return { x, y, sX: 1, sY: 1, rotation: pos1.rotation + pos2.rotation };
}
function subPosition(pos1, pos2) {
    const [x, y] = rotate(0, 0, pos2.x - pos1.x, pos2.y - pos1.y, -pos1.rotation);
    return { x, y, sX: 1, sY: 1, rotation: pos1.rotation - pos2.rotation };
}
function createFillTransform(img, node, pos) {
    const w = node.width;
    const h = node.height;
    const { x = 0, y = 0, rotation = 0 } = pos;
    const rad = rotation * (Math.PI / 180);
    const sX = node.width / img.width;
    const sY = node.height / img.height;
    // Don't know why, but it's the way imageTransform works 🤷🏼‍♂️
    const scale = [
        [sX, 0, 0],
        [0, sY, 0],
    ];
    const rotate = [
        [Math.cos(rad), (h / w) * Math.sin(rad), 0],
        [-(w / h) * Math.sin(rad), Math.cos(rad), 0],
    ];
    const translate = [
        [1, 0, x / -w],
        [0, 1, y / -h],
    ];
    return multiply(scale, rotate, translate);
}