1128 lines
38 KiB
JavaScript
1128 lines
38 KiB
JavaScript
const PLUGIN_WIDTH = 380;
|
|
const PLUGIN_HEIGHT = 560;
|
|
const DEFAULT_FONT = { family: "Inter", style: "Regular" };
|
|
|
|
function getPixso() {
|
|
return typeof pixso !== "undefined" ? pixso : figma;
|
|
}
|
|
|
|
const app = getPixso();
|
|
|
|
function notify(message, type = "info") {
|
|
if (app.notification?.show) {
|
|
app.notification.show(message, type);
|
|
} else if (app.notify) {
|
|
app.notify(message);
|
|
}
|
|
}
|
|
|
|
function rgbToPaint(color, fallback = { r: 1, g: 1, b: 1, a: 1 }) {
|
|
const parsed = parseCssColor(color) || fallback;
|
|
if (!parsed) return null;
|
|
return {
|
|
type: "SOLID",
|
|
color: {
|
|
r: clamp01(parsed.r),
|
|
g: clamp01(parsed.g),
|
|
b: clamp01(parsed.b)
|
|
},
|
|
opacity: clamp01(parsed.a == null ? 1 : parsed.a)
|
|
};
|
|
}
|
|
|
|
function parseCssColor(value) {
|
|
if (!value || value === "transparent" || value === "rgba(0, 0, 0, 0)") return null;
|
|
|
|
const rgba = String(value).match(/rgba?\(([^)]+)\)/i);
|
|
if (rgba) {
|
|
const parts = rgba[1].split(",").map(part => part.trim());
|
|
return {
|
|
r: Number(parts[0]) / 255,
|
|
g: Number(parts[1]) / 255,
|
|
b: Number(parts[2]) / 255,
|
|
a: parts[3] == null ? 1 : Number(parts[3])
|
|
};
|
|
}
|
|
|
|
const hex = String(value).trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);
|
|
if (!hex) return null;
|
|
|
|
let body = hex[1];
|
|
if (body.length === 3) {
|
|
body = body.split("").map(char => char + char).join("");
|
|
}
|
|
|
|
return {
|
|
r: parseInt(body.slice(0, 2), 16) / 255,
|
|
g: parseInt(body.slice(2, 4), 16) / 255,
|
|
b: parseInt(body.slice(4, 6), 16) / 255,
|
|
a: body.length === 8 ? parseInt(body.slice(6, 8), 16) / 255 : 1
|
|
};
|
|
}
|
|
|
|
function clamp01(value) {
|
|
return Math.max(0, Math.min(1, Number.isFinite(value) ? value : 1));
|
|
}
|
|
|
|
function parsePixels(value, fallback = 0) {
|
|
const parsed = parseFloat(value);
|
|
return Number.isFinite(parsed) ? parsed : fallback;
|
|
}
|
|
|
|
function clampNumber(value, min, max, fallback = 0) {
|
|
const number = Number(value);
|
|
if (!Number.isFinite(number)) return fallback;
|
|
return Math.max(min, Math.min(max, number));
|
|
}
|
|
|
|
function parseZIndex(value) {
|
|
const parsed = parseInt(value, 10);
|
|
return Number.isFinite(parsed) ? parsed : 0;
|
|
}
|
|
|
|
function intersectRects(a, b) {
|
|
if (!a || !b) return null;
|
|
const x1 = Math.max(a.x || 0, b.x || 0);
|
|
const y1 = Math.max(a.y || 0, b.y || 0);
|
|
const x2 = Math.min((a.x || 0) + (a.width || 0), (b.x || 0) + (b.width || 0));
|
|
const y2 = Math.min((a.y || 0) + (a.height || 0), (b.y || 0) + (b.height || 0));
|
|
if (x2 <= x1 || y2 <= y1) return null;
|
|
return { x: x1, y: y1, width: x2 - x1, height: y2 - y1 };
|
|
}
|
|
|
|
function overlapRatio(a, b) {
|
|
const intersection = intersectRects(a, b);
|
|
if (!intersection) return 0;
|
|
const area = Math.max(1, Math.min(
|
|
(a.width || 1) * (a.height || 1),
|
|
(b.width || 1) * (b.height || 1)
|
|
));
|
|
return (intersection.width * intersection.height) / area;
|
|
}
|
|
|
|
function clipsChildren(styles = {}) {
|
|
const overflow = `${styles.overflow || ""} ${styles.overflowX || ""} ${styles.overflowY || ""}`;
|
|
return /(hidden|clip|scroll|auto)/i.test(overflow);
|
|
}
|
|
|
|
function getRenderRect(captureNode) {
|
|
const rect = captureNode?.rect;
|
|
const visible = captureNode?.visibleRect;
|
|
if (!rect) return null;
|
|
if (!visible) return rect;
|
|
|
|
const rectArea = Math.max(1, (rect.width || 1) * (rect.height || 1));
|
|
const visibleArea = Math.max(1, (visible.width || 1) * (visible.height || 1));
|
|
const isHugeOverflow = rect.width > visible.width * 1.5 || rect.height > visible.height * 1.5 || rectArea > visibleArea * 2;
|
|
return captureNode.clipped && isHugeOverflow ? visible : rect;
|
|
}
|
|
|
|
function rectsDiffer(a, b, tolerance = 0.5) {
|
|
if (!a || !b) return false;
|
|
return Math.abs((a.x || 0) - (b.x || 0)) > tolerance ||
|
|
Math.abs((a.y || 0) - (b.y || 0)) > tolerance ||
|
|
Math.abs((a.width || 0) - (b.width || 0)) > tolerance ||
|
|
Math.abs((a.height || 0) - (b.height || 0)) > tolerance;
|
|
}
|
|
|
|
function shouldUseClipWrapper(captureNode) {
|
|
if (!captureNode || captureNode.type === "TEXT") return false;
|
|
if (!captureNode.rect || !captureNode.visibleRect) return false;
|
|
if (!rectsDiffer(captureNode.rect, captureNode.visibleRect)) return false;
|
|
return Boolean(captureNode.clipped || hasImageFill(captureNode) || captureNode.backgroundImages?.length || captureNode.type === "RECTANGLE");
|
|
}
|
|
|
|
function paintFromBackgroundImage(value) {
|
|
if (!value || !String(value).includes("gradient")) return null;
|
|
const colors = String(value).match(/rgba?\([^)]+\)|#[0-9a-f]{3,8}/gi);
|
|
if (!colors?.length) return null;
|
|
const stops = colors.map((color, index) => {
|
|
const paint = rgbToPaint(color, null);
|
|
if (!paint) return null;
|
|
return {
|
|
position: colors.length === 1 ? 0 : index / (colors.length - 1),
|
|
color: {
|
|
...paint.color,
|
|
a: paint.opacity == null ? 1 : paint.opacity
|
|
}
|
|
};
|
|
}).filter(Boolean);
|
|
|
|
if (stops.length < 2) {
|
|
return rgbToPaint(colors[0], null);
|
|
}
|
|
|
|
return {
|
|
type: "GRADIENT_LINEAR",
|
|
gradientStops: stops,
|
|
gradientTransform: [
|
|
[1, 0, 0],
|
|
[0, 1, 0]
|
|
]
|
|
};
|
|
}
|
|
|
|
function parseBoxShadow(value, scale) {
|
|
if (!value || value === "none") return null;
|
|
const colorMatch = String(value).match(/rgba?\([^)]+\)|#[0-9a-f]{3,8}/i);
|
|
const color = rgbToPaint(colorMatch?.[0] || "rgba(0,0,0,.18)", { r: 0, g: 0, b: 0, a: 0.18 });
|
|
const numericPart = String(value).replace(/rgba?\([^)]+\)|#[0-9a-f]{3,8}/ig, "");
|
|
const numbers = numericPart.match(/-?\d*\.?\d+px/g)?.map(parseFloat) || [];
|
|
if (!numbers.length) return null;
|
|
|
|
return {
|
|
type: "DROP_SHADOW",
|
|
color: {
|
|
...color.color,
|
|
a: color.opacity == null ? 1 : color.opacity
|
|
},
|
|
offset: {
|
|
x: (numbers[0] || 0) * scale,
|
|
y: (numbers[1] || 0) * scale
|
|
},
|
|
radius: Math.max(0, (numbers[2] || 0) * scale),
|
|
spread: (numbers[3] || 0) * scale,
|
|
visible: true,
|
|
blendMode: "NORMAL"
|
|
};
|
|
}
|
|
|
|
function parseDropShadowFilter(value, scale) {
|
|
if (!value || value === "none") return null;
|
|
const match = String(value).match(/drop-shadow\(([^)]+)\)/i);
|
|
if (!match) return null;
|
|
return parseBoxShadow(match[1], scale);
|
|
}
|
|
|
|
function setSize(node, width, height) {
|
|
const safeWidth = Math.max(1, Math.round(width || 1));
|
|
const safeHeight = Math.max(1, Math.round(height || 1));
|
|
if (typeof node.resize === "function") {
|
|
node.resize(safeWidth, safeHeight);
|
|
} else {
|
|
node.width = safeWidth;
|
|
node.height = safeHeight;
|
|
}
|
|
}
|
|
|
|
function setPosition(node, rect, parentRect, scale) {
|
|
node.x = Math.round(((rect?.x || 0) - (parentRect?.x || 0)) * scale);
|
|
node.y = Math.round(((rect?.y || 0) - (parentRect?.y || 0)) * scale);
|
|
setSize(node, (rect?.width || 1) * scale, (rect?.height || 1) * scale);
|
|
}
|
|
|
|
function applyTransform(node, captureNode) {
|
|
const transform = String(captureNode.styles?.transform || "");
|
|
if (!transform || transform === "none" || !("rotation" in node)) return;
|
|
|
|
const rotate = transform.match(/rotate\((-?\d*\.?\d+)deg\)/i);
|
|
if (rotate) {
|
|
node.rotation = Number(rotate[1]) || 0;
|
|
return;
|
|
}
|
|
|
|
const matrix = transform.match(/matrix\(([^)]+)\)/i);
|
|
if (!matrix) return;
|
|
const parts = matrix[1].split(",").map(part => Number(part.trim()));
|
|
if (parts.length < 4 || parts.some(value => !Number.isFinite(value))) return;
|
|
const angle = Math.atan2(parts[1], parts[0]) * 180 / Math.PI;
|
|
const hasRotation = Math.abs(angle) > 0.1 && Math.abs(angle) < 89.9;
|
|
const hasSkew = Math.abs(parts[1]) > 0.001 || Math.abs(parts[2]) > 0.001;
|
|
if (hasRotation && hasSkew) {
|
|
node.rotation = angle;
|
|
}
|
|
}
|
|
|
|
function mapPrimaryAxisAlign(value) {
|
|
const normalized = String(value || "").toLowerCase();
|
|
if (normalized.includes("space-between")) return "SPACE_BETWEEN";
|
|
if (normalized.includes("center")) return "CENTER";
|
|
if (normalized.includes("end") || normalized.includes("right") || normalized.includes("bottom")) return "MAX";
|
|
return "MIN";
|
|
}
|
|
|
|
function mapCounterAxisAlign(value) {
|
|
const normalized = String(value || "").toLowerCase();
|
|
if (normalized.includes("center")) return "CENTER";
|
|
if (normalized.includes("end") || normalized.includes("right") || normalized.includes("bottom")) return "MAX";
|
|
if (normalized.includes("stretch")) return "MIN";
|
|
return "MIN";
|
|
}
|
|
|
|
function trySetLayoutProperty(node, key, value) {
|
|
try {
|
|
if (key in node) {
|
|
node[key] = value;
|
|
return true;
|
|
}
|
|
} catch {
|
|
// Pixso/Figma API compatibility differs between editor versions.
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function applyAutoLayout(node, captureNode, scale) {
|
|
const layout = captureNode?.layout;
|
|
if (!layout || captureNode.type === "TEXT") return false;
|
|
if (layout.type !== "flex" && layout.type !== "inferred" && layout.type !== "grid") return false;
|
|
|
|
const direction = String(layout.direction || "").toLowerCase();
|
|
const isGrid = layout.type === "grid";
|
|
const isColumn = !isGrid && direction.includes("column");
|
|
let applied = false;
|
|
|
|
applied = trySetLayoutProperty(node, "layoutMode", isColumn ? "VERTICAL" : "HORIZONTAL") || applied;
|
|
applied = trySetLayoutProperty(node, "primaryAxisAlignItems", mapPrimaryAxisAlign(layout.justifyContent)) || applied;
|
|
applied = trySetLayoutProperty(node, "counterAxisAlignItems", mapCounterAxisAlign(layout.alignItems)) || applied;
|
|
applied = trySetLayoutProperty(node, "primaryAxisSizingMode", "FIXED") || applied;
|
|
applied = trySetLayoutProperty(node, "counterAxisSizingMode", "FIXED") || applied;
|
|
|
|
const itemSpacing = isColumn
|
|
? layout.rowGap || layout.gap
|
|
: layout.columnGap || layout.gap;
|
|
applied = trySetLayoutProperty(node, "itemSpacing", Math.round(clampNumber(itemSpacing, 0, 400, 0) * scale)) || applied;
|
|
|
|
const padding = layout.padding || {};
|
|
applied = trySetLayoutProperty(node, "paddingTop", Math.round(clampNumber(padding.top, 0, 400, 0) * scale)) || applied;
|
|
applied = trySetLayoutProperty(node, "paddingRight", Math.round(clampNumber(padding.right, 0, 400, 0) * scale)) || applied;
|
|
applied = trySetLayoutProperty(node, "paddingBottom", Math.round(clampNumber(padding.bottom, 0, 400, 0) * scale)) || applied;
|
|
applied = trySetLayoutProperty(node, "paddingLeft", Math.round(clampNumber(padding.left, 0, 400, 0) * scale)) || applied;
|
|
|
|
if (isGrid || String(layout.wrap || "").toLowerCase().includes("wrap")) {
|
|
applied = trySetLayoutProperty(node, "layoutWrap", "WRAP") || applied;
|
|
applied = trySetLayoutProperty(node, "counterAxisSpacing", Math.round(clampNumber(layout.rowGap || layout.gap, 0, 400, 0) * scale)) || applied;
|
|
}
|
|
|
|
if (typeof node.setPluginData === "function") {
|
|
try {
|
|
node.setPluginData("webToPixsoLayout", JSON.stringify(layout));
|
|
if (captureNode.section) {
|
|
node.setPluginData("webToPixsoSection", String(captureNode.section));
|
|
}
|
|
} catch {
|
|
// Layout metadata is a bonus; failing to store it should not block import.
|
|
}
|
|
}
|
|
|
|
return applied;
|
|
}
|
|
|
|
function getPage() {
|
|
return app.currentPage || app.state?.currentPage;
|
|
}
|
|
|
|
async function loadDefaultFont() {
|
|
if (typeof app.loadFontAsync !== "function") return;
|
|
try {
|
|
await app.loadFontAsync(DEFAULT_FONT);
|
|
} catch {
|
|
try {
|
|
await app.loadFontAsync({ family: "Arial", style: "Regular" });
|
|
} catch {
|
|
// Pixso may already have a default font loaded.
|
|
}
|
|
}
|
|
}
|
|
|
|
function hasVisualStyle(captureNode) {
|
|
if (!captureNode || captureNode.type === "TEXT") return true;
|
|
const styles = captureNode.styles || {};
|
|
const hasImage = Boolean(hasImageFill(captureNode) || captureNode.backgroundImages?.length);
|
|
const hasFill = Boolean(
|
|
shouldRenderBackgroundFill(captureNode) &&
|
|
(hasVisibleColor(styles.backgroundColor) || hasCssBackgroundImage(styles))
|
|
);
|
|
const borderWidth = getBorderWidth(styles);
|
|
const meaningfulRadius = hasRadius(styles) && !isLargePlainLayoutWrapper(captureNode);
|
|
return hasImage || hasFill || borderWidth > 0 || hasShadow(styles) || meaningfulRadius;
|
|
}
|
|
|
|
function shouldSkipImportNode(captureNode) {
|
|
const styles = captureNode?.styles || {};
|
|
if ((captureNode?.tag === "::before" || captureNode?.tag === "::after") &&
|
|
!captureNode.text &&
|
|
!captureNode.src &&
|
|
!captureNode.backgroundImages?.length) {
|
|
return true;
|
|
}
|
|
if ((captureNode?.tag === "::before" || captureNode?.tag === "::after") &&
|
|
captureNode?.backgroundImages?.length &&
|
|
styles.backgroundRepeat &&
|
|
styles.backgroundRepeat !== "no-repeat") {
|
|
return true;
|
|
}
|
|
if (captureNode?.tag === "PICTURE" &&
|
|
captureNode.src &&
|
|
captureNode.children?.some(child => child.tag === "IMG" && child.src)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function isRasterFallbackNode(captureNode) {
|
|
return captureNode?.tag === "RASTER_FALLBACK" || captureNode?.attributes?.["data-raster-fallback"] === "true";
|
|
}
|
|
|
|
function getRasterMode(captureNode) {
|
|
return captureNode?.rasterMode || captureNode?.attributes?.["data-raster-mode"] || "";
|
|
}
|
|
|
|
function getLayerGroup(captureNode) {
|
|
const explicit = captureNode?.layerGroup || captureNode?.attributes?.["data-layer-group"];
|
|
const normalized = String(explicit || "").toLowerCase();
|
|
if (normalized === "comparison" || normalized === "fallback") return "comparison";
|
|
if (normalized === "text") return "text";
|
|
if (normalized === "editable" || normalized === "element") return "editable";
|
|
if (isRasterFallbackNode(captureNode)) return "comparison";
|
|
if (captureNode?.type === "TEXT") return "text";
|
|
return "editable";
|
|
}
|
|
|
|
function getLayerPriority(captureNode) {
|
|
const explicit = Number(captureNode?.layerPriority);
|
|
if (Number.isFinite(explicit)) return explicit;
|
|
const group = getLayerGroup(captureNode);
|
|
if (group === "comparison") return 0;
|
|
if (group === "text") return 200;
|
|
return 100;
|
|
}
|
|
|
|
function hasImageFill(captureNode) {
|
|
if (!captureNode?.src) return false;
|
|
if (isRasterFallbackNode(captureNode)) return true;
|
|
return /^(IMG|PICTURE|VIDEO|CANVAS|SOURCE)$/i.test(captureNode.tag || "");
|
|
}
|
|
|
|
function hasVisibleColor(value) {
|
|
return Boolean(parseCssColor(value));
|
|
}
|
|
|
|
function isLightOpaqueColor(value) {
|
|
const color = parseCssColor(value);
|
|
return Boolean(color && color.a > 0.92 && color.r > 0.92 && color.g > 0.92 && color.b > 0.92);
|
|
}
|
|
|
|
function getBorderWidth(styles = {}) {
|
|
return Math.max(
|
|
parsePixels(styles.borderTopWidth),
|
|
parsePixels(styles.borderRightWidth),
|
|
parsePixels(styles.borderBottomWidth),
|
|
parsePixels(styles.borderLeftWidth)
|
|
);
|
|
}
|
|
|
|
function hasRadius(styles = {}) {
|
|
return Boolean(
|
|
parsePixels(styles.borderTopLeftRadius) ||
|
|
parsePixels(styles.borderTopRightRadius) ||
|
|
parsePixels(styles.borderBottomRightRadius) ||
|
|
parsePixels(styles.borderBottomLeftRadius)
|
|
);
|
|
}
|
|
|
|
function hasShadow(styles = {}) {
|
|
return Boolean(styles.boxShadow && styles.boxShadow !== "none") ||
|
|
Boolean(styles.filter && /drop-shadow/i.test(styles.filter));
|
|
}
|
|
|
|
function hasCssBackgroundImage(styles = {}) {
|
|
return Boolean(styles.backgroundImage && styles.backgroundImage !== "none");
|
|
}
|
|
|
|
function isContainerTag(captureNode) {
|
|
return /^(HTML|BODY|DIV|SECTION|MAIN|ARTICLE|HEADER|NAV|FOOTER|ASIDE|UL|OL|LI|FORM)$/i.test(captureNode?.tag || "");
|
|
}
|
|
|
|
function getNodeArea(captureNode) {
|
|
const rect = getRenderRect(captureNode) || captureNode?.rect || {};
|
|
return Math.max(0, rect.width || 0) * Math.max(0, rect.height || 0);
|
|
}
|
|
|
|
function isLargePlainLayoutWrapper(captureNode) {
|
|
if (!captureNode || captureNode.type === "TEXT" || isRasterFallbackNode(captureNode)) return false;
|
|
if (!captureNode.children?.length || !isContainerTag(captureNode)) return false;
|
|
|
|
const styles = captureNode.styles || {};
|
|
if (hasImageFill(captureNode) || captureNode.backgroundImages?.length || hasCssBackgroundImage(styles)) return false;
|
|
if (!isLightOpaqueColor(styles.backgroundColor)) return false;
|
|
|
|
const rect = getRenderRect(captureNode) || captureNode.rect || {};
|
|
const clipWidth = captureNode.clipRect?.width || captureNode.visibleRect?.width || rect.width || 0;
|
|
const area = getNodeArea(captureNode);
|
|
const isWideSection = clipWidth > 0 && (rect.width || 0) >= clipWidth * 0.55 && (rect.height || 0) >= 96;
|
|
const isHugeContainer = area >= 180000;
|
|
if (!isWideSection && !isHugeContainer) return false;
|
|
|
|
const hasDecor = getBorderWidth(styles) > 0 || hasShadow(styles) || hasRadius(styles);
|
|
return !hasDecor || area >= 300000;
|
|
}
|
|
|
|
function shouldRenderBackgroundFill(captureNode) {
|
|
if (!captureNode || isRasterFallbackNode(captureNode)) return true;
|
|
if (captureNode.visualRole === "layout-wrapper" && isLargePlainLayoutWrapper(captureNode)) return false;
|
|
return !isLargePlainLayoutWrapper(captureNode);
|
|
}
|
|
|
|
function createNodeForCapture(captureNode) {
|
|
if (captureNode.type === "TEXT") {
|
|
return app.createText();
|
|
}
|
|
if (captureNode.type === "RECTANGLE" || hasImageFill(captureNode) || captureNode.backgroundImages?.length) {
|
|
return app.createRectangle();
|
|
}
|
|
return app.createFrame();
|
|
}
|
|
|
|
function createNodeForGroupedCapture(captureNode) {
|
|
if (captureNode.type === "TEXT") {
|
|
return app.createText();
|
|
}
|
|
const hasChildren = Boolean(captureNode.children?.length);
|
|
const isLeafMedia = hasImageFill(captureNode) && !hasChildren;
|
|
const isLeafImageBackground = captureNode.backgroundImages?.length && !hasChildren;
|
|
if (captureNode.type === "RECTANGLE" && (isLeafMedia || isLeafImageBackground)) {
|
|
return app.createRectangle();
|
|
}
|
|
return app.createFrame();
|
|
}
|
|
|
|
function dataUrlToBytes(dataUrl) {
|
|
const value = String(dataUrl || "");
|
|
const base64 = value.includes(",") ? value.split(",")[1] : value;
|
|
if (!base64) return null;
|
|
|
|
if (typeof app.base64Decode === "function") {
|
|
return app.base64Decode(base64);
|
|
}
|
|
|
|
if (typeof atob !== "function") {
|
|
return decodeBase64(base64);
|
|
}
|
|
|
|
const binary = atob(base64);
|
|
const bytes = new Uint8Array(binary.length);
|
|
for (let index = 0; index < binary.length; index += 1) {
|
|
bytes[index] = binary.charCodeAt(index);
|
|
}
|
|
return bytes;
|
|
}
|
|
|
|
function decodeBase64(base64) {
|
|
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
|
|
const clean = String(base64).replace(/[\r\n\s=]/g, "");
|
|
const bytes = [];
|
|
let buffer = 0;
|
|
let bits = 0;
|
|
|
|
for (let index = 0; index < clean.length; index += 1) {
|
|
const value = chars.indexOf(clean[index]);
|
|
if (value < 0) continue;
|
|
buffer = (buffer << 6) | value;
|
|
bits += 6;
|
|
if (bits >= 8) {
|
|
bits -= 8;
|
|
bytes.push((buffer >> bits) & 0xff);
|
|
}
|
|
}
|
|
|
|
return new Uint8Array(bytes);
|
|
}
|
|
|
|
function normalizeUrl(url) {
|
|
if (!url) return "";
|
|
try {
|
|
const parsed = new URL(url);
|
|
parsed.hash = "";
|
|
return parsed.href;
|
|
} catch {
|
|
return String(url).split("#")[0];
|
|
}
|
|
}
|
|
|
|
function resolveAsset(assets, url) {
|
|
if (!assets || !url) return null;
|
|
if (assets[url]) return assets[url];
|
|
|
|
const normalized = normalizeUrl(url);
|
|
for (const [assetUrl, asset] of Object.entries(assets)) {
|
|
if (normalizeUrl(assetUrl) === normalized) {
|
|
return asset;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
function createImagePaint(asset, stats, scaleMode = "FILL") {
|
|
if (!asset?.data || typeof app.createImage !== "function") return null;
|
|
try {
|
|
const bytes = dataUrlToBytes(asset.data);
|
|
if (!bytes) return null;
|
|
const image = app.createImage(bytes);
|
|
const imageHash = image.hash || image.imageHash || image;
|
|
if (!imageHash || typeof imageHash !== "string") {
|
|
throw new Error("Pixso 没有返回有效的 imageHash");
|
|
}
|
|
if (stats) stats.imagesImported += 1;
|
|
return { type: "IMAGE", scaleMode, imageHash, opacity: 1 };
|
|
} catch (error) {
|
|
console.warn("[Web to Pixso] Image fill failed", error);
|
|
if (stats) stats.imageFailures += 1;
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function getImageCandidates(captureNode) {
|
|
const styles = captureNode.styles || {};
|
|
return [
|
|
hasImageFill(captureNode) ? captureNode.src : null,
|
|
...(captureNode.backgroundImages || []),
|
|
...[
|
|
styles.maskImage,
|
|
styles.webkitMaskImage
|
|
].flatMap(value => {
|
|
if (!value || value === "none") return [];
|
|
const urls = [];
|
|
const re = /url\((["']?)(.*?)\1\)/g;
|
|
let match;
|
|
while ((match = re.exec(value))) {
|
|
if (match[2]) urls.push(match[2]);
|
|
}
|
|
return urls;
|
|
})
|
|
].filter(Boolean);
|
|
}
|
|
|
|
function applyVisualStyles(node, captureNode, assets, stats, scale) {
|
|
const styles = captureNode.styles || {};
|
|
const fills = [];
|
|
const background = rgbToPaint(styles.backgroundColor, null) || paintFromBackgroundImage(styles.backgroundImage);
|
|
if (background && shouldRenderBackgroundFill(captureNode)) {
|
|
fills.push(background);
|
|
} else if (background && stats) {
|
|
stats.transparentWrappers += 1;
|
|
}
|
|
|
|
const imageUrls = getImageCandidates(captureNode);
|
|
if (imageUrls.length && stats) stats.imageCandidates += 1;
|
|
const imageScaleMode = /contain/i.test(styles.backgroundSize || styles.objectFit || "") ? "FIT" : "FILL";
|
|
const imagePaint = imageUrls
|
|
.map(url => createImagePaint(resolveAsset(assets, url), stats, imageScaleMode))
|
|
.find(Boolean);
|
|
if (imagePaint) {
|
|
fills.push(imagePaint);
|
|
}
|
|
|
|
if (fills.length) {
|
|
node.fills = fills;
|
|
} else if ("fills" in node && captureNode.type !== "TEXT") {
|
|
node.fills = [];
|
|
}
|
|
|
|
const borderWidth = Math.max(
|
|
parsePixels(styles.borderTopWidth),
|
|
parsePixels(styles.borderRightWidth),
|
|
parsePixels(styles.borderBottomWidth),
|
|
parsePixels(styles.borderLeftWidth)
|
|
);
|
|
|
|
if (borderWidth > 0 && styles.borderTopStyle !== "none") {
|
|
node.strokes = [rgbToPaint(styles.borderTopColor, { r: 0, g: 0, b: 0, a: 1 })];
|
|
node.strokeWeight = Math.max(1, borderWidth * scale);
|
|
}
|
|
|
|
const radius = Math.max(
|
|
parsePixels(styles.borderTopLeftRadius),
|
|
parsePixels(styles.borderTopRightRadius),
|
|
parsePixels(styles.borderBottomRightRadius),
|
|
parsePixels(styles.borderBottomLeftRadius)
|
|
);
|
|
if ("cornerRadius" in node) {
|
|
node.cornerRadius = radius * scale;
|
|
}
|
|
|
|
if ("opacity" in node) {
|
|
node.opacity = clamp01(Number(styles.opacity || 1));
|
|
}
|
|
|
|
const shadow = parseBoxShadow(styles.boxShadow, scale) || parseDropShadowFilter(styles.filter, scale);
|
|
if (shadow && "effects" in node) {
|
|
node.effects = [shadow];
|
|
}
|
|
|
|
if ("clipsContent" in node) {
|
|
node.clipsContent = clipsChildren(styles);
|
|
}
|
|
}
|
|
|
|
function applyTextStyles(node, captureNode, scale) {
|
|
const styles = captureNode.styles || {};
|
|
const color = rgbToPaint(styles.color, { r: 0, g: 0, b: 0, a: 1 });
|
|
if ("textAutoResize" in node) {
|
|
node.textAutoResize = "NONE";
|
|
}
|
|
node.characters = captureNode.text || "";
|
|
node.fontSize = Math.max(1, parsePixels(styles.fontSize, 14) * scale);
|
|
node.fills = [color];
|
|
if ("fontWeight" in node) {
|
|
node.fontWeight = styles.fontWeight || "normal";
|
|
}
|
|
|
|
if ("textAlignHorizontal" in node) {
|
|
const align = String(styles.textAlign || "left").toUpperCase();
|
|
node.textAlignHorizontal = align === "CENTER" || align === "RIGHT" || align === "JUSTIFY"
|
|
? (align === "JUSTIFY" ? "JUSTIFIED" : align)
|
|
: "LEFT";
|
|
}
|
|
|
|
if ("lineHeight" in node) {
|
|
const lineHeight = parsePixels(styles.lineHeight);
|
|
if (lineHeight > 0) {
|
|
node.lineHeight = { value: lineHeight * scale, unit: "PIXELS" };
|
|
}
|
|
}
|
|
|
|
if ("letterSpacing" in node) {
|
|
const letterSpacing = parsePixels(styles.letterSpacing);
|
|
if (letterSpacing) {
|
|
node.letterSpacing = { value: letterSpacing * scale, unit: "PIXELS" };
|
|
}
|
|
}
|
|
|
|
const decoration = String(styles.textDecorationLine || styles.textDecoration || "");
|
|
if ("textDecoration" in node) {
|
|
if (/line-through/i.test(decoration)) {
|
|
node.textDecoration = "STRIKETHROUGH";
|
|
} else if (/underline/i.test(decoration)) {
|
|
node.textDecoration = "UNDERLINE";
|
|
}
|
|
}
|
|
}
|
|
|
|
function expandTextBounds(node, captureNode, rect, scale) {
|
|
if (!rect || typeof node.resize !== "function") return;
|
|
const fontSize = parsePixels(captureNode.styles?.fontSize, 14) * scale;
|
|
const widthPadding = Math.max(4, Math.min(14, fontSize * 0.45));
|
|
const heightPadding = Math.max(2, Math.min(8, fontSize * 0.25));
|
|
setSize(node, rect.width * scale + widthPadding, rect.height * scale + heightPadding);
|
|
}
|
|
|
|
function getNodeIdentityText(captureNode) {
|
|
return [
|
|
captureNode?.tag,
|
|
captureNode?.name,
|
|
captureNode?.attributes?.id,
|
|
captureNode?.attributes?.class,
|
|
captureNode?.attributes?.role
|
|
].filter(Boolean).join(" ");
|
|
}
|
|
|
|
function hasLayoutSignal(captureNode) {
|
|
const layout = captureNode?.layout;
|
|
if (!layout) return false;
|
|
if (layout.type === "flex" || layout.type === "grid") return true;
|
|
if (layout.type === "inferred" && layout.confidence >= 0.7) return true;
|
|
return false;
|
|
}
|
|
|
|
function isHighValueLayoutContainer(captureNode) {
|
|
if (!captureNode || captureNode.type === "TEXT") return false;
|
|
if (isRasterFallbackNode(captureNode)) return false;
|
|
if (!captureNode.rect || !captureNode.children?.length) return false;
|
|
if (!hasLayoutSignal(captureNode)) return false;
|
|
if (/^(HTML|BODY)$/i.test(captureNode.tag || "")) return false;
|
|
|
|
const rect = getRenderRect(captureNode) || captureNode.rect;
|
|
if (!rect || rect.width < 24 || rect.height < 16) return false;
|
|
|
|
const identity = getNodeIdentityText(captureNode);
|
|
const semanticMatch = /header|nav|navigation|navbar|menu|toolbar|tabs|actions|buttons|button-group|btns|grid|cards|card-list|product|goods|footer|links|columns|list|row|form|search/i.test(identity);
|
|
const tagMatch = /^(HEADER|NAV|FOOTER|UL|OL|FORM)$/i.test(captureNode.tag || "");
|
|
const layout = captureNode.layout || {};
|
|
const childCount = layout.childCount || captureNode.children.length;
|
|
const isReasonableFlex = layout.type === "flex" && childCount >= 2 && childCount <= 18 && rect.height <= 480;
|
|
const isReasonableGrid = layout.type === "grid" && childCount >= 2 && childCount <= 60;
|
|
const isFooterColumns = /footer/i.test(identity) && childCount >= 2;
|
|
|
|
return tagMatch || semanticMatch || isReasonableFlex || isReasonableGrid || isFooterColumns;
|
|
}
|
|
|
|
function markSubtreeIds(captureNode, ids, options = {}) {
|
|
if (!captureNode) return ids;
|
|
const includeText = options.includeText === true;
|
|
if (captureNode.id && (includeText || getLayerGroup(captureNode) !== "text")) {
|
|
ids.add(captureNode.id);
|
|
}
|
|
for (const child of captureNode.children || []) {
|
|
markSubtreeIds(child, ids, options);
|
|
}
|
|
return ids;
|
|
}
|
|
|
|
function collectLayoutRoots(captureNode, output = [], state = { order: 0 }, insideLayout = false) {
|
|
if (!captureNode) return output;
|
|
captureNode.__layoutOrder = state.order;
|
|
state.order += 1;
|
|
|
|
const isCandidate = isHighValueLayoutContainer(captureNode);
|
|
if (isCandidate && !insideLayout) {
|
|
output.push(captureNode);
|
|
return output;
|
|
}
|
|
|
|
for (const child of captureNode.children || []) {
|
|
collectLayoutRoots(child, output, state, insideLayout || isCandidate);
|
|
}
|
|
return output;
|
|
}
|
|
|
|
function sortLayoutRoots(nodes) {
|
|
return nodes.sort((a, b) => {
|
|
const ar = getRenderRect(a) || a.rect || {};
|
|
const br = getRenderRect(b) || b.rect || {};
|
|
const ya = ar.y || 0;
|
|
const yb = br.y || 0;
|
|
if (Math.abs(ya - yb) > 8) return ya - yb;
|
|
const xa = ar.x || 0;
|
|
const xb = br.x || 0;
|
|
if (Math.abs(xa - xb) > 8) return xa - xb;
|
|
return (a.__layoutOrder || 0) - (b.__layoutOrder || 0);
|
|
});
|
|
}
|
|
|
|
function shouldRenderGroupedNode(captureNode) {
|
|
if (!captureNode) return false;
|
|
if (shouldSkipImportNode(captureNode)) return false;
|
|
if (captureNode.type === "TEXT") return true;
|
|
if (isRasterFallbackNode(captureNode)) return false;
|
|
if (hasVisualStyle(captureNode)) return true;
|
|
if (captureNode.children?.length) return true;
|
|
return false;
|
|
}
|
|
|
|
function getLayoutGroupName(captureNode, depth) {
|
|
const base = captureNode.name || captureNode.tag || "Group";
|
|
if (depth !== 0) return base;
|
|
const section = String(captureNode.section || "").toLowerCase();
|
|
const sectionLabel = section
|
|
? section.charAt(0).toUpperCase() + section.slice(1)
|
|
: "Module";
|
|
const layoutType = captureNode.layout?.type ? ` ${captureNode.layout.type}` : "";
|
|
return `Layout - ${sectionLabel}${layoutType} - ${base}`;
|
|
}
|
|
|
|
function compareVisualRowMajor(a, b) {
|
|
const ar = getRenderRect(a) || a.rect || {};
|
|
const br = getRenderRect(b) || b.rect || {};
|
|
const ay = ar.y || 0;
|
|
const by = br.y || 0;
|
|
if (Math.abs(ay - by) > 8) return ay - by;
|
|
const ax = ar.x || 0;
|
|
const bx = br.x || 0;
|
|
if (Math.abs(ax - bx) > 8) return ax - bx;
|
|
return 0;
|
|
}
|
|
|
|
function compareVisualColumnMajor(a, b) {
|
|
const ar = getRenderRect(a) || a.rect || {};
|
|
const br = getRenderRect(b) || b.rect || {};
|
|
const ax = ar.x || 0;
|
|
const bx = br.x || 0;
|
|
if (Math.abs(ax - bx) > 8) return ax - bx;
|
|
const ay = ar.y || 0;
|
|
const by = br.y || 0;
|
|
if (Math.abs(ay - by) > 8) return ay - by;
|
|
return 0;
|
|
}
|
|
|
|
function getOrderedLayoutChildren(captureNode) {
|
|
const children = [...(captureNode.children || [])];
|
|
const layout = captureNode.layout || {};
|
|
if (!children.length || !layout.type) return children;
|
|
if (layout.type === "grid") return children.sort(compareVisualRowMajor);
|
|
const direction = String(layout.direction || "").toLowerCase();
|
|
if (direction.includes("column")) {
|
|
return children.sort((a, b) => compareVisualColumnMajor(a, b) || compareVisualRowMajor(a, b));
|
|
}
|
|
return children.sort((a, b) => compareVisualRowMajor(a, b) || compareVisualColumnMajor(a, b));
|
|
}
|
|
|
|
async function renderGroupedSubtree(captureNode, parent, parentRect, assets, stats, scale, depth = 0) {
|
|
if (!shouldRenderGroupedNode(captureNode)) return null;
|
|
if (getLayerGroup(captureNode) === "text") return null;
|
|
const renderRect = getRenderRect(captureNode);
|
|
if (!renderRect || renderRect.width <= 0 || renderRect.height <= 0) return null;
|
|
|
|
const node = createNodeForGroupedCapture(captureNode);
|
|
node.name = getLayoutGroupName(captureNode, depth);
|
|
setPosition(node, renderRect, parentRect, scale);
|
|
|
|
if (captureNode.type === "TEXT") {
|
|
applyTextStyles(node, captureNode, scale);
|
|
expandTextBounds(node, captureNode, renderRect, scale);
|
|
} else {
|
|
applyVisualStyles(node, captureNode, assets, stats, scale);
|
|
if (applyAutoLayout(node, captureNode, scale) && stats) {
|
|
stats.layoutFrames += 1;
|
|
}
|
|
}
|
|
applyTransform(node, captureNode);
|
|
|
|
parent.appendChild(node);
|
|
stats.nodesCreated += 1;
|
|
if (depth === 0) {
|
|
stats.layoutGroups += 1;
|
|
}
|
|
|
|
const canContainChildren = typeof node.appendChild === "function" && captureNode.children?.length;
|
|
if (!canContainChildren) return node;
|
|
|
|
for (const child of getOrderedLayoutChildren(captureNode)) {
|
|
try {
|
|
await renderGroupedSubtree(child, node, renderRect, assets, stats, scale, depth + 1);
|
|
} catch (error) {
|
|
console.warn("[Web to Pixso] Grouped layer import skipped", error);
|
|
stats.nodesSkipped += 1;
|
|
}
|
|
}
|
|
|
|
return node;
|
|
}
|
|
|
|
function collectRenderableNodes(captureNode, output = [], state = { order: 0 }) {
|
|
if (!captureNode) return output;
|
|
if (
|
|
captureNode.tag !== "BODY" &&
|
|
captureNode.tag !== "HTML" &&
|
|
!shouldSkipImportNode(captureNode) &&
|
|
hasVisualStyle(captureNode)
|
|
) {
|
|
captureNode.__importOrder = state.order;
|
|
output.push(captureNode);
|
|
}
|
|
state.order += 1;
|
|
for (const child of captureNode.children || []) {
|
|
collectRenderableNodes(child, output, state);
|
|
}
|
|
return output;
|
|
}
|
|
|
|
function sortRenderableNodes(nodes) {
|
|
return nodes.sort((a, b) => {
|
|
const pa = getLayerPriority(a);
|
|
const pb = getLayerPriority(b);
|
|
if (pa !== pb) return pa - pb;
|
|
|
|
const za = parseZIndex(a.styles?.zIndex);
|
|
const zb = parseZIndex(b.styles?.zIndex);
|
|
if (za !== zb) return za - zb;
|
|
const ya = a.rect?.y || 0;
|
|
const yb = b.rect?.y || 0;
|
|
if (Math.abs(ya - yb) > 2000) return ya - yb;
|
|
return (a.__importOrder || 0) - (b.__importOrder || 0);
|
|
});
|
|
}
|
|
|
|
function createLayerFrame(name, width, height) {
|
|
const layer = app.createFrame();
|
|
layer.name = name;
|
|
layer.x = 0;
|
|
layer.y = 0;
|
|
setSize(layer, width, height);
|
|
layer.fills = [];
|
|
if ("clipsContent" in layer) {
|
|
layer.clipsContent = true;
|
|
}
|
|
return layer;
|
|
}
|
|
|
|
async function renderCaptureNode(captureNode, parent, rootRect, assets, stats, scale) {
|
|
const renderRect = getRenderRect(captureNode);
|
|
if (!renderRect) return null;
|
|
if (renderRect.width <= 0 || renderRect.height <= 0) return null;
|
|
|
|
if (shouldUseClipWrapper(captureNode)) {
|
|
const wrapper = app.createFrame();
|
|
wrapper.name = `${captureNode.name || captureNode.tag || "Layer"} clip`;
|
|
setPosition(wrapper, captureNode.visibleRect, rootRect, scale);
|
|
wrapper.fills = [];
|
|
if ("clipsContent" in wrapper) {
|
|
wrapper.clipsContent = true;
|
|
}
|
|
|
|
const node = createNodeForCapture(captureNode);
|
|
node.name = captureNode.name || captureNode.tag || "Layer";
|
|
setPosition(node, captureNode.rect, captureNode.visibleRect, scale);
|
|
applyVisualStyles(node, captureNode, assets, stats, scale);
|
|
if (applyAutoLayout(node, captureNode, scale) && stats) {
|
|
stats.layoutFrames += 1;
|
|
}
|
|
applyTransform(node, captureNode);
|
|
wrapper.appendChild(node);
|
|
parent.appendChild(wrapper);
|
|
|
|
if (stats) {
|
|
stats.nodesCreated += 2;
|
|
stats.nodesClipped += 1;
|
|
}
|
|
return wrapper;
|
|
}
|
|
|
|
const node = createNodeForCapture(captureNode);
|
|
node.name = captureNode.name || captureNode.tag || "Layer";
|
|
setPosition(node, renderRect, rootRect, scale);
|
|
if (captureNode.clipped && stats) stats.nodesClipped += 1;
|
|
|
|
if (captureNode.type === "TEXT") {
|
|
applyTextStyles(node, captureNode, scale);
|
|
expandTextBounds(node, captureNode, renderRect, scale);
|
|
} else {
|
|
applyVisualStyles(node, captureNode, assets, stats, scale);
|
|
if (applyAutoLayout(node, captureNode, scale) && stats) {
|
|
stats.layoutFrames += 1;
|
|
}
|
|
}
|
|
applyTransform(node, captureNode);
|
|
|
|
parent.appendChild(node);
|
|
stats.nodesCreated += 1;
|
|
|
|
return node;
|
|
}
|
|
|
|
async function importCapture(data) {
|
|
if (!data || (data.format !== "pixso-design-capture" && data.schema !== "web-to-pixso-capture")) {
|
|
throw new Error("不是有效的 Web to Pixso 采集文件");
|
|
}
|
|
|
|
await loadDefaultFont();
|
|
|
|
const page = getPage();
|
|
if (!page) {
|
|
throw new Error("没有找到当前 Pixso 页面");
|
|
}
|
|
|
|
const frame = app.createFrame();
|
|
const sourceWidth = Math.max(data.source?.selection?.width || data.canvas?.width || data.source?.actualViewportWidth || data.source?.requestedViewportWidth || data.source?.viewport?.width || 1440, 1);
|
|
const scale = 1;
|
|
const width = Math.min(Math.max(sourceWidth, 1), 20000);
|
|
const height = Math.min(Math.max(data.canvas?.height || data.source?.selection?.height || data.source?.document?.height || 900, 1), 30000);
|
|
frame.name = data.source?.title || "Web Capture";
|
|
frame.x = 0;
|
|
frame.y = 0;
|
|
setSize(frame, width, height);
|
|
frame.fills = [rgbToPaint(data.canvas?.backgroundColor, { r: 1, g: 1, b: 1, a: 1 })];
|
|
if ("clipsContent" in frame) {
|
|
frame.clipsContent = true;
|
|
}
|
|
|
|
page.appendChild(frame);
|
|
|
|
const rootRect = {
|
|
x: data.canvas?.x || data.source?.selection?.x || 0,
|
|
y: data.canvas?.y || data.source?.selection?.y || 0,
|
|
width: sourceWidth,
|
|
height: data.canvas?.height || data.source?.selection?.height || data.source?.document?.height || 900
|
|
};
|
|
const stats = {
|
|
nodesCreated: 0,
|
|
imageCandidates: 0,
|
|
imagesImported: 0,
|
|
imageFailures: 0,
|
|
nodesSkipped: 0,
|
|
nodesClipped: 0,
|
|
layoutGroups: 0,
|
|
layoutFrames: 0,
|
|
transparentWrappers: 0
|
|
};
|
|
|
|
const fallbackLayerName = `01 兜底截图层 / 对比底图-${Math.round(sourceWidth)}px`;
|
|
const fallbackLayer = createLayerFrame(fallbackLayerName, width, height);
|
|
const editableLayer = createLayerFrame("02 可编辑元素层", width, height);
|
|
const textLayer = createLayerFrame("03 文字编辑层", width, height);
|
|
frame.appendChild(fallbackLayer);
|
|
frame.appendChild(editableLayer);
|
|
frame.appendChild(textLayer);
|
|
|
|
const consumedLayoutIds = new Set();
|
|
if (data.nodes) {
|
|
const layoutRoots = sortLayoutRoots(collectLayoutRoots(data.nodes));
|
|
for (const layoutRoot of layoutRoots) {
|
|
try {
|
|
await renderGroupedSubtree(layoutRoot, editableLayer, rootRect, data.assets || {}, stats, scale);
|
|
markSubtreeIds(layoutRoot, consumedLayoutIds);
|
|
} catch (error) {
|
|
console.warn("[Web to Pixso] Layout group import skipped", error);
|
|
stats.nodesSkipped += 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (data.nodes) {
|
|
const renderableNodes = sortRenderableNodes(collectRenderableNodes(data.nodes));
|
|
for (const nodeData of renderableNodes) {
|
|
try {
|
|
if (!isRasterFallbackNode(nodeData) && consumedLayoutIds.has(nodeData.id)) {
|
|
continue;
|
|
}
|
|
const layerGroup = getLayerGroup(nodeData);
|
|
const parentLayer = layerGroup === "comparison"
|
|
? fallbackLayer
|
|
: layerGroup === "text"
|
|
? textLayer
|
|
: editableLayer;
|
|
await renderCaptureNode(nodeData, parentLayer, rootRect, data.assets || {}, stats, scale);
|
|
} catch (error) {
|
|
console.warn("[Web to Pixso] Layer import skipped", error);
|
|
stats.nodesSkipped += 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ("selection" in app) {
|
|
app.selection = [frame];
|
|
} else if (app.state) {
|
|
app.state.currentSelection = [frame];
|
|
}
|
|
|
|
if (app.viewport?.scrollAndZoomIntoView) {
|
|
app.viewport.scrollAndZoomIntoView([frame]);
|
|
} else if (app.viewport?.zoomToFit) {
|
|
app.viewport.zoomToFit();
|
|
}
|
|
|
|
return {
|
|
nodeCount: data.diagnostics?.nodeCount || 0,
|
|
assetCount: data.diagnostics?.assetCount || 0,
|
|
importWidth: width,
|
|
...stats
|
|
};
|
|
}
|
|
|
|
function postStatus(text, status = "info") {
|
|
app.ui?.postMessage?.({ text, status });
|
|
}
|
|
|
|
app.showUI(__html__, { width: PLUGIN_WIDTH, height: PLUGIN_HEIGHT });
|
|
|
|
app.ui.onmessage = async message => {
|
|
if (message?.type === "CLOSE") {
|
|
app.closePlugin?.();
|
|
return;
|
|
}
|
|
|
|
if (message?.type !== "IMPORT_CAPTURE") return;
|
|
|
|
try {
|
|
postStatus("正在创建画板和图层...", "loading");
|
|
const stats = await importCapture(message.data, message.options || {});
|
|
const text = `导入完成：创建 ${stats.nodesCreated}/${stats.nodeCount} 层，布局组 ${stats.layoutGroups} 个，自动布局 ${stats.layoutFrames} 组，裁剪 ${stats.nodesClipped} 层，跳过 ${stats.nodesSkipped} 层，宽度 ${stats.importWidth}px，图片 ${stats.imagesImported}/${stats.imageCandidates}`;
|
|
postStatus(text, "success");
|
|
notify(text, "success");
|
|
} catch (error) {
|
|
const text = error.message || String(error);
|
|
postStatus(text, "error");
|
|
notify(text, "error");
|
|
}
|
|
};
|