- `;
-
- this.previewArea.innerHTML = svgContent;
+ const svg = this.buildSvg(panels);
+ this.previewArea.innerHTML = '';
+ this.previewArea.appendChild(svg);
+ }
+
+ buildSvg(panels) {
+ const NS = 'http://www.w3.org/2000/svg';
+ const svg = document.createElementNS(NS, 'svg');
+ svg.setAttribute('xmlns', NS);
+ svg.setAttribute('viewBox', `0 0 ${this.comicWidth} ${this.comicHeight}`);
+ svg.setAttribute('width', String(this.comicWidth));
+ svg.setAttribute('height', String(this.comicHeight));
+ svg.setAttribute('class', 'comic-svg');
+ svg.setAttribute('role', 'img');
+ svg.setAttribute('aria-label', 'Four panel story comic');
+
+ const bg = document.createElementNS(NS, 'rect');
+ bg.setAttribute('width', String(this.comicWidth));
+ bg.setAttribute('height', String(this.comicHeight));
+ bg.setAttribute('fill', '#f4f1ea');
+ svg.appendChild(bg);
+
+ const slots = [
+ { x: 16, y: 16 },
+ { x: 408, y: 16 },
+ { x: 16, y: 268 },
+ { x: 408, y: 268 }
+ ];
+
+ panels.forEach((panel, i) => {
+ const slot = slots[i];
+ svg.appendChild(this.panelGroup(panel, slot.x, slot.y, i));
+ });
+ return svg;
+ }
+
+ panelGroup(panel, x, y, index) {
+ const NS = 'http://www.w3.org/2000/svg';
+ const g = document.createElementNS(NS, 'g');
+ g.setAttribute('class', 'comic-panel');
+
+ const frame = document.createElementNS(NS, 'rect');
+ frame.setAttribute('x', String(x));
+ frame.setAttribute('y', String(y));
+ frame.setAttribute('width', '376');
+ frame.setAttribute('height', '236');
+ frame.setAttribute('rx', '12');
+ frame.setAttribute('fill', '#fffdf8');
+ frame.setAttribute('stroke', '#2b2b2b');
+ frame.setAttribute('stroke-width', '3');
+ g.appendChild(frame);
+
+ const scene = document.createElementNS(NS, 'g');
+ scene.setAttribute('transform', `translate(${x + 14} ${y + 14})`);
+ scene.innerHTML = this.drawScene(panel.scene, 0, 0, 118, 118);
+ g.appendChild(scene);
+
+ const badge = document.createElementNS(NS, 'text');
+ badge.setAttribute('x', String(x + 352));
+ badge.setAttribute('y', String(y + 28));
+ badge.setAttribute('text-anchor', 'end');
+ badge.setAttribute('font-family', 'Georgia, "Times New Roman", serif');
+ badge.setAttribute('font-size', '13');
+ badge.setAttribute('fill', '#6c757d');
+ badge.textContent = String(index + 1);
+ g.appendChild(badge);
+
+ const lines = this.wrapText(panel.text || '', 28);
+ lines.slice(0, 8).forEach((line, i) => {
+ const text = document.createElementNS(NS, 'text');
+ text.setAttribute('x', String(x + 146));
+ text.setAttribute('y', String(y + 36 + i * 22));
+ text.setAttribute('font-family', 'Georgia, "Times New Roman", serif');
+ text.setAttribute('font-size', '15');
+ text.setAttribute('fill', '#212529');
+ text.textContent = line;
+ g.appendChild(text);
+ });
+
+ if (!panel.text) {
+ const empty = document.createElementNS(NS, 'text');
+ empty.setAttribute('x', String(x + 146));
+ empty.setAttribute('y', String(y + 48));
+ empty.setAttribute('font-family', 'Georgia, "Times New Roman", serif');
+ empty.setAttribute('font-size', '15');
+ empty.setAttribute('fill', '#adb5bd');
+ empty.textContent = 'Empty panel';
+ g.appendChild(empty);
+ }
+ return g;
+ }
+
+ wrapText(text, maxChars) {
+ const words = String(text || '').trim().split(/\s+/).filter(Boolean);
+ if (!words.length) return [];
+ const lines = [];
+ let line = '';
+ words.forEach((word) => {
+ const next = line ? line + ' ' + word : word;
+ if (next.length > maxChars && line) {
+ lines.push(line);
+ line = word;
+ } else {
+ line = next;
+ }
+ });
+ if (line) lines.push(line);
+ return lines;
}
drawScene(sceneType, x, y, width, height) {
- switch(sceneType) {
+ switch (sceneType) {
case 'forest':
return `
- 
`;
-
- if (navigator.clipboard) {
- navigator.clipboard.writeText(embedCode).then(() => {
- this.showNotification("Embed code copied to clipboard!");
- }).catch(err => {
- console.error('Failed to copy: ', err);
- this.showNotification("Failed to copy embed code");
- });
- } else {
- // Fallback for older browsers
- const textArea = document.createElement("textarea");
- textArea.value = embedCode;
- document.body.appendChild(textArea);
- textArea.select();
- document.execCommand("copy");
- document.body.removeChild(textArea);
- this.showNotification("Embed code copied to clipboard!");
+ copyText(text) {
+ if (navigator.clipboard && navigator.clipboard.writeText) {
+ return navigator.clipboard.writeText(text);
}
+ return new Promise((resolve, reject) => {
+ const area = document.createElement('textarea');
+ area.value = text;
+ area.setAttribute('readonly', '');
+ area.style.position = 'fixed';
+ area.style.left = '-9999px';
+ document.body.appendChild(area);
+ area.select();
+ try {
+ document.execCommand('copy') ? resolve() : reject(new Error('copy failed'));
+ } catch (e) {
+ reject(e);
+ }
+ document.body.removeChild(area);
+ });
}
exportAsImage() {
- const svgElement = this.previewArea.querySelector('svg');
- if (!svgElement) return;
+ this.rasterize().then(({ png }) => {
+ return this.downloadBlob(png, 'storysketch-comic.png');
+ }).then(() => {
+ this.showNotification('Comic downloaded as PNG');
+ }).catch((err) => {
+ console.error(err);
+ this.showNotification('Could not export the image');
+ });
+ }
- const svgData = new XMLSerializer().serializeToString(svgElement);
- const canvas = document.createElement("canvas");
- const ctx = canvas.getContext("2d");
- const img = new Image();
-
- const svgBlob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
- const url = URL.createObjectURL(svgBlob);
-
- img.onload = () => {
- canvas.width = img.width;
- canvas.height = img.height;
- ctx.drawImage(img, 0, 0);
-
- URL.revokeObjectURL(url);
-
- const pngUrl = canvas.toDataURL("image/png");
- const link = document.createElement("a");
- link.download = "storysketch-comic.png";
- link.href = pngUrl;
- link.click();
-
- this.showNotification("Comic downloaded as PNG!");
- };
-
- img.onerror = () => {
- URL.revokeObjectURL(url);
- this.showNotification("Failed to export image");
- };
-
- img.src = url;
+ downloadBlob(blob, name) {
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = name;
+ document.body.appendChild(link);
+ link.click();
+ link.remove();
+ setTimeout(() => URL.revokeObjectURL(url), 1500);
+ return Promise.resolve();
}
showNotification(message) {
- // Simple notification implementation
const notification = document.createElement('div');
notification.textContent = message;
notification.style.position = 'fixed';
@@ -434,17 +530,14 @@ class StorySketch {
notification.style.padding = '10px 20px';
notification.style.borderRadius = '5px';
notification.style.zIndex = '1000';
- notification.style.opacity = '0.9';
-
+ notification.style.maxWidth = '280px';
document.body.appendChild(notification);
-
setTimeout(() => {
- document.body.removeChild(notification);
- }, 3000);
+ if (notification.parentNode) notification.parentNode.removeChild(notification);
+ }, 2800);
}
}
-// Initialize the app when the page loads
document.addEventListener('DOMContentLoaded', () => {
window.storySketch = new StorySketch();
-});
\ No newline at end of file
+});