add a branding svg

static/WebcamGenerator.js

@@ -385,8 +385,10 @@ export class WebcamGenerator extends HTMLElement {
 					let shadows = this.svg.querySelector("g:nth-child(2)")
 
 					strokes.querySelectorAll("path").forEach(path => {
+						path.setAttribute('vector-effect', 'non-scaling-stroke');
 						path.style.strokeWidth = strokeWidthSlider.value;
 						path.style.strokeOpacity = strokeOpacitySlider.value;
+						path.style.fill = "none"
 						//path.style.animation = `dash ${animationLengthSlider.value}s ease-in-out forwards`;
 						path.style.strokeLinecap = "round"
 					})
@@ -403,13 +405,84 @@ export class WebcamGenerator extends HTMLElement {
 				updateSVGStyles.bind(this)()
 				updateAnimation.bind(this)()
 
-
 				let saveBtn = document.createElement("button")
 				saveBtn.addEventListener("click", this.saveSVG.bind(this))
 				saveBtn.classList.add("scribble")
 				saveBtn.innerHTML = "SAVE"
 				this.progressbar.replaceWith(saveBtn)
 
+				// Create file picker for SVG branding
+				let brandingPicker = document.createElement("input");
+				brandingPicker.type = "file";
+				brandingPicker.id = "branding-picker";
+				brandingPicker.accept = ".svg";
+				brandingPicker.style.display = "none";
+				let brandingLabel = document.createElement("label");
+				brandingLabel.htmlFor = "branding-picker";
+				brandingLabel.classList.add("scribble");
+				brandingLabel.innerHTML = "Choose optional branding SVG";
+
+				saveBtn.insertAdjacentElement('beforebegin', brandingPicker);	
+				saveBtn.insertAdjacentElement('beforebegin', brandingLabel);	
+
+				brandingPicker.addEventListener("change", (event) => {
+					const file = event.target.files[0];
+					if (file) {
+						const reader = new FileReader();
+						reader.onload = (e) => {
+						const brandingSVG = new DOMParser().parseFromString(e.target.result, 'image/svg+xml').documentElement;
+						console.log(brandingSVG)
+						// Get the main SVG element
+
+						let strokes = this.svg.querySelector("g:first-child")
+
+						// Create a new group for the branding
+						const brandingGroup = document.createElementNS("http://www.w3.org/2000/svg", "g");
+						brandingGroup.setAttribute("id", "branding");
+
+						// Append all paths from the branding SVG to the new group
+						const firstGroup = brandingSVG.querySelector('g');
+						if (firstGroup) {
+							brandingGroup.appendChild(firstGroup.cloneNode(true));
+							let sibling = firstGroup.nextElementSibling;
+							while (sibling) {
+								brandingGroup.appendChild(sibling.cloneNode(true));
+								sibling = sibling.nextElementSibling;
+							}
+						} else {
+							console.warn('No group element found in the branding SVG');
+						}
+
+						// Append the branding group to the main SVG
+						strokes.appendChild(brandingGroup);
+
+						// Position the branding in the bottom right corner
+						const svgBBox = this.svg.getBBox();
+						const brandingBBox = brandingGroup.getBBox();
+						console.log(brandingBBox)
+
+						let minSize = Math.min(svgBBox.width, svgBBox.height)
+						let scale = minSize * 0.3 / Math.max(brandingBBox.width, brandingBBox.height)
+						//const scale = Math.min(svgBBox.width * 0.2 / brandingBBox.width, svgBBox.height * 0.2 / brandingBBox.height);
+						//const translateX = svgBBox.width - (brandingBBox.width * scale) - 10;
+						//const translateY = svgBBox.height + 10; // Position below the SVG
+
+						brandingGroup.setAttribute('transform', `translate(${brandingBBox.x + minSize/20 + brandingBBox.width/2}, ${brandingBBox.y + minSize/20 + brandingBBox.height/2}) scale(${scale})`);
+
+						// Store the branding SVG for later use
+						this.vectorizer.brandingSVG = brandingGroup;
+
+						// Update the SVG display
+						updateSVGColors.bind(this)()
+						updateSVGStyles.bind(this)()
+						updateAnimation.bind(this)()
+						};
+						reader.readAsText(file);
+					}
+				});
+
+
+
 				let copyBtn = document.createElement("button");
 				copyBtn.addEventListener("click", this.copySVGToClipboard.bind(this));
 				copyBtn.classList.add("scribble");
@@ -431,6 +504,7 @@ export class WebcamGenerator extends HTMLElement {
 		this.vectorizer.edgemin = sessionStorage.getItem("tinqta:edge-min") || 20
 		this.vectorizer.edgemax = sessionStorage.getItem("tinqta:edge-max") || 50
 		this.vectorizer.edgeDetails = sessionStorage.getItem("tinqta:edge-detail") || 2
+		this.vectorizer.brandingSVG = this.shadow.getElementById("tinqta:brandingSVG") || null
 
 		this.shadow.getElementById("edge-min").value = this.vectorizer.edgemin
 		this.shadow.getElementById("edge-max").value = this.vectorizer.edgemax