canva-pptx 1.0.0

package/src/AdvancedComponents/pyramidHierarchy.js

@@ -0,0 +1,38 @@
+function addPyramidHierarchy(slide, levels = [], options = {}) {
+  const {
+    x = 3, y = 1, w = 4, h = 4,
+    colors = ["FFCDD2", "EF9A9A", "E57373", "EF5350", "F44336"] // Reds
+  } = options;
+
+  const count = levels.length;
+  const layerH = h / count;
+
+  // Draw from bottom to top so the widest is at the bottom? 
+  // Standard Pyramids usually have Level 1 at top or bottom depending on context.
+  // We'll render Top-Down (Index 0 at top).
+
+  levels.forEach((level, i) => {
+    const curY = y + i * layerH;
+    
+    // Width increases as we go down
+    const factor = (i + 1) / count; 
+    const curW = w * factor;
+    const curX = x + (w - curW) / 2;
+
+    slide.addShape("rect", {
+      x: curX, 
+      y: curY, 
+      w: curW, 
+      h: layerH,
+      fill: colors[i % colors.length],
+      line: { color: "FFFFFF", width: 1 } // Separator
+    });
+
+    slide.addText(level, {
+      x: curX, y: curY, w: curW, h: layerH,
+      align: "center", valign: "middle", fontSize: 10, bold: true, color: "333333"
+    });
+  });
+}
+
+module.exports = { addPyramidHierarchy };

package/src/AdvancedComponents/saasFeatureBlock.js

@@ -0,0 +1,38 @@
+function addSaaSFeatureBlock(slide, title, desc, imagePath, options = {}) {
+  const {
+    x = 1, y = 1, w = 8, h = 3,
+    imagePosition = "left" // or 'right'
+  } = options;
+
+  const halfW = w / 2;
+  const imgX = imagePosition === "left" ? x : x + halfW;
+  const txtX = imagePosition === "left" ? x + halfW : x;
+
+  // Image Placeholder
+  if (imagePath) {
+    slide.addImage({
+      path: imagePath,
+      x: imgX + 0.2, y: y + 0.2, w: halfW - 0.4, h: h - 0.4,
+      sizing: { type: "contain" }
+    });
+  } else {
+    slide.addShape("rect", {
+      x: imgX + 0.2, y: y + 0.2, w: halfW - 0.4, h: h - 0.4,
+      fill: "EEEEEE"
+    });
+    slide.addText("Image", { x: imgX, y: y, w: halfW, h, align: "center", valign: "middle" });
+  }
+
+  // Text Content
+  slide.addText(title, {
+    x: txtX + 0.2, y: y + 0.5, w: halfW - 0.4, h: 0.5,
+    bold: true, fontSize: 18, color: "333333"
+  });
+  
+  slide.addText(desc, {
+    x: txtX + 0.2, y: y + 1.2, w: halfW - 0.4, h: h - 1.2,
+    fontSize: 12, color: "666666", valign: "top"
+  });
+}
+
+module.exports = { addSaaSFeatureBlock };

package/src/AdvancedComponents/swotMatrix.js

@@ -0,0 +1,55 @@
+function addSWOTMatrix(slide, data, options = {}) {
+  const {
+    x = 1, y = 1, w = 8, h = 5,
+    gap = 0.1
+  } = options;
+
+  const halfW = (w - gap) / 2;
+  const halfH = (h - gap) / 2;
+
+  // Definitions for quadrants
+  const quads = [
+    { type: 'Strengths',     ox: 0,     oy: 0,     color: "E8F5E9", header: "S" },
+    { type: 'Weaknesses',    ox: halfW+gap, oy: 0,     color: "FFEBEE", header: "W" },
+    { type: 'Opportunities', ox: 0,     oy: halfH+gap, color: "E3F2FD", header: "O" },
+    { type: 'Threats',       ox: halfW+gap, oy: halfH+gap, color: "FFF3E0", header: "T" }
+  ];
+
+  quads.forEach(q => {
+    const qX = x + q.ox;
+    const qY = y + q.oy;
+    const items = data[q.type.toLowerCase()] || [];
+
+    // Background
+    slide.addShape("rect", {
+      x: qX, y: qY, w: halfW, h: halfH,
+      fill: q.color
+    });
+
+    // Header Letter (Background Circle)
+    slide.addShape("oval", {
+      x: qX + 0.2, y: qY + 0.2, w: 0.5, h: 0.5, fill: "FFFFFF"
+    });
+    // Header Letter (Text)
+    slide.addText(q.header, {
+      x: qX + 0.2, y: qY + 0.2, w: 0.5, h: 0.5,
+      bold: true, align: "center", valign: "middle", fontSize: 14
+    });
+
+    // Title
+    slide.addText(q.type, {
+      x: qX + 0.8, y: qY + 0.2, w: halfW - 1, h: 0.5,
+      bold: true, fontSize: 14, valign: "middle"
+    });
+
+    // List
+    if (items.length > 0) {
+      slide.addText(items.map(i => `• ${i}`).join("\n"), {
+        x: qX + 0.3, y: qY + 0.9, w: halfW - 0.6, h: halfH - 1,
+        fontSize: 11, color: "333333", valign: "top"
+      });
+    }
+  });
+}
+
+module.exports = { addSWOTMatrix };

package/src/AdvancedComponents/teamMemberProfile.js

@@ -0,0 +1,75 @@
+function addTeamMemberProfile(slide, profile, options = {}) {
+  const {
+    x = 1, y = 1, w = 2.5, h = 4,
+    bgColor = "FFFFFF",
+    borderColor = "E0E0E0"
+  } = options;
+
+  // Card Container
+  slide.addShape("rect", {
+    x, y, w, h,
+    fill: bgColor,
+    line: { color: borderColor }
+  });
+
+  // Avatar Area
+  const imgSize = w * 0.5;
+  const imgX = x + (w - imgSize) / 2;
+  const imgY = y + 0.3;
+
+  if (profile.image) {
+    slide.addImage({
+      path: profile.image,
+      x: imgX,
+      y: imgY,
+      w: imgSize,
+      h: imgSize,
+      sizing: { type: "cover", w: imgSize, h: imgSize },
+      rounding: true
+    });
+  } else {
+    slide.addShape("oval", {
+      x: imgX, y: imgY, w: imgSize, h: imgSize, fill: "CCCCCC"
+    });
+  }
+
+  // Name
+  slide.addText(profile.name, {
+    x: x,
+    y: imgY + imgSize + 0.2,
+    w: w,
+    h: 0.4,
+    bold: true,
+    fontSize: 14,
+    align: "center",
+    color: "333333"
+  });
+
+  // Role
+  slide.addText(profile.role, {
+    x: x,
+    y: imgY + imgSize + 0.6,
+    w: w,
+    h: 0.3,
+    fontSize: 11,
+    italic: true,
+    align: "center",
+    color: "007AFF"
+  });
+
+  // Bio
+  if (profile.bio) {
+    slide.addText(profile.bio, {
+      x: x + 0.2,
+      y: imgY + imgSize + 1.0,
+      w: w - 0.4,
+      h: h - (imgSize + 1.2),
+      fontSize: 10,
+      align: "center",
+      color: "666666",
+      valign: "top"
+    });
+  }
+}
+
+module.exports = { addTeamMemberProfile };

package/src/AdvancedComponents/trafficLight.js

@@ -0,0 +1,35 @@
+function addTrafficLight(slide, status = "green", options = {}) {
+  const { x = 1, y = 1, w = 1, h = 3 } = options;
+
+  // Housing
+  slide.addShape("roundRect", {
+    x, y, w, h,
+    fill: "333333",
+    rounding: 0.2
+  });
+
+  const lights = [
+    { color: "FF0000", id: "red" },
+    { color: "FFA500", id: "amber" },
+    { color: "00FF00", id: "green" }
+  ];
+
+  const lightSize = w * 0.6;
+  const gap = (h - (lights.length * lightSize)) / 4;
+
+  lights.forEach((light, i) => {
+    const isActive = light.id === status;
+    const curY = y + gap + i * (lightSize + gap);
+    
+    slide.addShape("oval", {
+      x: x + (w - lightSize) / 2,
+      y: curY,
+      w: lightSize,
+      h: lightSize,
+      fill: isActive ? light.color : "#555555", // Bright or Dim
+      line: { color: "000000", width: 1 }
+    });
+  });
+}
+
+module.exports = { addTrafficLight };

package/src/AdvancedComponents/vennDiagram.js

@@ -0,0 +1,35 @@
+function addVennDiagram(slide, labels = ["A", "B"], options = {}) {
+  const {
+    x = 2, y = 2, w = 6, h = 3,
+    colors = ["FF0000", "0000FF", "00FF00"],
+    opacity = 50
+  } = options;
+
+  const circleSize = 2.5;
+  const overlap = 0.8;
+
+  labels.forEach((label, i) => {
+    // Arrange horizontally with overlap
+    const curX = x + i * (circleSize - overlap);
+    
+    // For 3rd item, maybe center it below? 
+    // This is a simple linear overlap logic for now.
+    const curY = y; 
+
+    slide.addShape("oval", {
+      x: curX,
+      y: curY,
+      w: circleSize,
+      h: circleSize,
+      fill: { color: colors[i % colors.length], transparency: 100 - opacity },
+      line: { color: "FFFFFF", width: 1 }
+    });
+
+    slide.addText(label, {
+      x: curX, y: curY + circleSize/2 - 0.2, w: circleSize, h: 0.4,
+      align: "center", bold: true, fontSize: 14
+    });
+  });
+}
+
+module.exports = { addVennDiagram };

package/src/AdvancedComponents/winLossChart.js

@@ -0,0 +1,43 @@
+function addWinLossChart(slide, data = [], options = {}) {
+  const { x = 1, y = 1, w = 6, h = 3 } = options;
+
+  // data = [{ label: "Q1", value: 10 }, { label: "Q2", value: -5 }]
+
+  const maxVal = Math.max(...data.map(d => Math.abs(d.value)));
+  const zeroY = y + h / 2; // Center line
+  
+  const barW = (w / data.length) * 0.6;
+  const gap = (w / data.length) * 0.4;
+
+  // Zero Line
+  slide.addShape("line", { x, y: zeroY, w, h: 0, line: { color: "333333" } });
+
+  data.forEach((d, i) => {
+    const barH = (Math.abs(d.value) / maxVal) * (h / 2 - 0.2);
+    const curX = x + (gap / 2) + i * (barW + gap);
+    
+    let curY;
+    let color;
+
+    if (d.value >= 0) {
+      curY = zeroY - barH;
+      color = "4CAF50"; // Green
+    } else {
+      curY = zeroY;
+      color = "F44336"; // Red
+    }
+
+    slide.addShape("rect", {
+      x: curX, y: curY, w: barW, h: barH,
+      fill: color
+    });
+
+    // Label
+    slide.addText(d.label, {
+      x: curX, y: zeroY + (d.value >= 0 ? 0.1 : -0.3), w: barW, h: 0.3,
+      fontSize: 9, align: "center", color: "FFFFFF" // Text inside? or outside
+    });
+  });
+}
+
+module.exports = { addWinLossChart };

package/src/components/StatMetric.js

@@ -0,0 +1,43 @@
+/**
+ * Renders a large statistic with a label
+ */
+function addStatMetric(slide, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 3,
+    h = 2,
+    value = "0",
+    label = "Metric",
+    valueColor = "000000",
+    labelColor = "666666",
+    align = "center",
+  } = options;
+
+  // The Big Number
+  slide.addText(value, {
+    x: x,
+    y: y,
+    w: w,
+    h: h * 0.6, // Takes up top 60%
+    fontSize: 48,
+    bold: true,
+    color: valueColor,
+    align: align,
+    valign: "bottom", // Align to bottom of its box so it sits near label
+  });
+
+  // The Label
+  slide.addText(label, {
+    x: x,
+    y: y + h * 0.6,
+    w: w,
+    h: h * 0.4, // Takes up bottom 40%
+    fontSize: 14,
+    color: labelColor,
+    align: align,
+    valign: "top",
+  });
+}
+
+module.exports = { addStatMetric };

package/src/components/alertBox.js

@@ -0,0 +1,46 @@
+function addAlertBox(slide, text, type = "info", options = {}) {
+  const { x = 1, y = 1, w = 8, h = 0.8 } = options;
+
+  let bg, border, icon;
+  switch (type) {
+    case "success": bg = "E8F5E9"; border = "4CAF50"; icon = "✓"; break;
+    case "warning": bg = "FFF3E0"; border = "FF9800"; icon = "!"; break;
+    case "error":   bg = "FFEBEE"; border = "F44336"; icon = "✕"; break;
+    default:        bg = "E3F2FD"; border = "2196F3"; icon = "i"; break;
+  }
+
+  // Box
+  slide.addShape("rect", {
+    x, y, w, h,
+    fill: bg,
+    line: { color: border, width: 2 }
+  });
+
+  // Icon area
+  slide.addShape("rect", {
+    x, y, w: 0.6, h,
+    fill: border // Darker side strip
+  });
+  
+  slide.addText(icon, {
+    x, y, w: 0.6, h,
+    color: "FFFFFF",
+    align: "center",
+    valign: "middle",
+    bold: true,
+    fontSize: 18
+  });
+
+  // Message
+  slide.addText(text, {
+    x: x + 0.7,
+    y,
+    w: w - 0.8,
+    h,
+    color: "333333",
+    valign: "middle",
+    fontSize: 12
+  });
+}
+
+module.exports = { addAlertBox };

package/src/components/avatarGroup.js

@@ -0,0 +1,56 @@
+function addAvatarGroup(slide, avatars = [], options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    radius = 0.5,
+    offset = 0.3, // overlap amount
+    borderColor = "FFFFFF",
+  } = options;
+
+  avatars.forEach((avatar, index) => {
+    const curX = x + index * (radius - offset);
+
+    // 1. Circle Border (for the overlap effect)
+    slide.addShape("oval", {
+      x: curX - 0.02,
+      y: y - 0.02,
+      w: radius + 0.04,
+      h: radius + 0.04,
+      fill: borderColor,
+    });
+
+    // 2. Avatar Fill (Image or Initials)
+    if (avatar.image) {
+      slide.addImage({
+        path: avatar.image,
+        x: curX,
+        y: y,
+        w: radius,
+        h: radius,
+        sizing: { type: "cover", w: radius, h: radius },
+        rounding: true, // makes image circular in some viewers
+      });
+    } else {
+      // Fallback: Colored circle with initials
+      slide.addShape("oval", {
+        x: curX,
+        y: y,
+        w: radius,
+        h: radius,
+        fill: avatar.color || "CCCCCC",
+      });
+      slide.addText(avatar.initials || "U", {
+        x: curX,
+        y: y,
+        w: radius,
+        h: radius,
+        align: "center",
+        valign: "middle",
+        fontSize: 10,
+        color: "FFFFFF",
+      });
+    }
+  });
+}
+
+module.exports = { addAvatarGroup };

package/src/components/badge.js

@@ -0,0 +1,40 @@
+/**
+ * Renders a text badge (pill shape)
+ */
+function addBadge(slide, text, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 1.5,
+    h = 0.4,
+    backgroundColor = "E1F5FE", // Light Blue
+    color = "0277BD", // Dark Blue
+    fontSize = 10,
+  } = options;
+
+  // Background Pill
+  slide.addShape("roundRect", {
+    x,
+    y,
+    w,
+    h,
+    fill: backgroundColor,
+    line: { color: backgroundColor }, // Seamless look
+    rounding: 0.5, // Fully rounded
+  });
+
+  // Text
+  slide.addText(text, {
+    x,
+    y,
+    w,
+    h,
+    fontSize,
+    color,
+    align: "center",
+    valign: "middle",
+    bold: true,
+  });
+}
+
+module.exports = { addBadge };

package/src/components/breadcrumbNav.js

@@ -0,0 +1,31 @@
+function addBreadcrumbNav(slide, path = [], options = {}) {
+  const { x = 0.5, y = 0.3, fontSize = 10, color = "888888" } = options;
+
+  let currentX = x;
+
+  path.forEach((item, index) => {
+    const isLast = index === path.length - 1;
+    
+    // Calculate approximate width (rough estimate: char count * 0.08)
+    const textW = item.length * 0.09; 
+
+    slide.addText(item, {
+      x: currentX, y, w: textW, h: 0.3,
+      fontSize,
+      color: isLast ? "000000" : color,
+      bold: isLast
+    });
+
+    currentX += textW;
+
+    if (!isLast) {
+      slide.addText(">", {
+        x: currentX, y, w: 0.2, h: 0.3,
+        fontSize, color, align: "center"
+      });
+      currentX += 0.2;
+    }
+  });
+}
+
+module.exports = { addBreadcrumbNav };

package/src/components/browserWindow.js

@@ -0,0 +1,86 @@
+function addBrowserWindow(slide, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 6,
+    h = 3.5,
+    url = "https://example.com",
+    imagePath = null, // Optional screenshot to fill the body
+    barColor = "E0E0E0",
+    borderColor = "D0D0D0"
+  } = options;
+
+  const headerHeight = 0.4;
+  const btnSize = 0.12;
+  const btnGap = 0.2;
+
+  // 1. Main Frame (Border)
+  slide.addShape("roundRect", {
+    x, y, w, h,
+    fill: "FFFFFF",
+    line: { color: borderColor },
+    rounding: 0.1
+  });
+
+  // 2. Top Bar Background
+  // We mask the top area. For a perfect "top-rounded" rect, we usually just draw over the main rect.
+  // PptxGenJS doesn't easily support "top-only" rounding, so we overlay a rect.
+  slide.addShape("rect", {
+    x, y, w, h: headerHeight,
+    fill: barColor,
+    rectRadius: 0.1 // Try to match rounding if library supports, or just Rect
+  });
+
+  // 3. Traffic Light Buttons (Red, Yellow, Green)
+  const colors = ["FF5F56", "FFBD2E", "27C93F"];
+  colors.forEach((c, i) => {
+    slide.addShape("oval", {
+      x: x + 0.15 + i * (btnSize + 0.08),
+      y: y + (headerHeight - btnSize) / 2,
+      w: btnSize,
+      h: btnSize,
+      fill: c,
+      line: { color: undefined }
+    });
+  });
+
+  // 4. Address Bar (White pill)
+  const addrX = x + 0.8;
+  const addrW = w - 1;
+  const addrH = headerHeight * 0.6;
+  slide.addShape("roundRect", {
+    x: addrX,
+    y: y + (headerHeight - addrH) / 2,
+    w: addrW,
+    h: addrH,
+    fill: "FFFFFF",
+    line: { color: "CCCCCC", width: 1 },
+    rounding: 0.5
+  });
+
+  // 5. URL Text
+  slide.addText(url, {
+    x: addrX + 0.1,
+    y: y + (headerHeight - addrH) / 2,
+    w: addrW - 0.2,
+    h: addrH,
+    fontSize: 8,
+    color: "666666",
+    valign: "middle"
+  });
+
+  // 6. Content / Screenshot
+  if (imagePath) {
+    // Render image inside the frame, below the header
+    slide.addImage({
+      path: imagePath,
+      x: x + 0.05,
+      y: y + headerHeight + 0.05,
+      w: w - 0.1,
+      h: h - headerHeight - 0.1,
+      sizing: { type: "contain", w: w - 0.1, h: h - headerHeight - 0.1 }
+    });
+  }
+}
+
+module.exports = { addBrowserWindow };

package/src/components/brushStroke.js

@@ -0,0 +1,23 @@
+function addBrushStroke(slide, options = {}) {
+  const {
+    x = 1,
+    y = 1,
+    w = 4,
+    h = 0.5,
+    color = "FFEB3B", // Highlighter Yellow
+    opacity = 50 // Semi-transparent
+  } = options;
+
+  // We use a rounded rect with full rounding to look like a marker stroke
+  slide.addShape("rect", {
+    x: x,
+    y: y,
+    w: w,
+    h: h,
+    fill: { color: color, transparency: 100 - opacity },
+    line: { color: undefined },
+    rounding: 1 // Max rounding
+  });
+}
+
+module.exports = { addBrushStroke };

package/src/components/callToAction.js

@@ -0,0 +1,27 @@
+function addCallToAction(slide, text, link, options = {}) {
+  const {
+    x = 4, y = 3, w = 3, h = 0.6,
+    color = "007AFF"
+  } = options;
+
+  // Button Shape
+  slide.addShape("roundRect", {
+    x, y, w, h,
+    fill: color,
+    line: { color: color },
+    rounding: 0.5
+  });
+
+  // Text with Link
+  slide.addText(text, {
+    x, y, w, h,
+    color: "FFFFFF",
+    bold: true,
+    fontSize: 14,
+    align: "center",
+    valign: "middle",
+    hyperlink: { url: link }
+  });
+}
+
+module.exports = { addCallToAction };