From b777c066849da10998c53146aeb0608320562d0a Mon Sep 17 00:00:00 2001
From: leomcelroy <leomcelroy@gmail.com>
Date: Tue, 17 Oct 2023 01:50:28 -0400
Subject: [PATCH] WIP

---
 js/createComponent.js | 24 ++++++++++++------------
 js/pcb_helpers.js     |  6 ++++--
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/js/createComponent.js b/js/createComponent.js
index f76e3ff..70bfdf9 100644
--- a/js/createComponent.js
+++ b/js/createComponent.js
@@ -5,12 +5,13 @@ export { html, render, svg };
 export function createComponent({ 
   name, // tag?
   props,
+  attributes,
   css, 
   view,
   onConstruct,
   onConnect,
   onDisconnect,
-  onAttributeChange
+  onPropertyChange
 }) {
 
     if (!name) {
@@ -22,8 +23,8 @@ export function createComponent({
     onConstruct = onConstruct ? onConstruct : null;
     onConnect = onConnect ? onConnect : null;
     onDisconnect = onDisconnect ? onDisconnect : null;
-    onAttributeChange = onAttributeChange ? onAttributeChange : null;
-
+    onPropertyChange = onPropertyChange ? onPropertyChange : null;
+    attributes = attributes ? attributes : {};
   
     class Temp extends HTMLElement {
 
@@ -39,7 +40,7 @@ export function createComponent({
             },
             set: function(value) {
               props[key] = value;
-              if (onAttributeChange) onAttributeChange(this, key, value);
+              if (onPropertyChange) onPropertyChange(this, key, value);
               this.render();
             },
             enumerable: true,
@@ -71,15 +72,14 @@ export function createComponent({
         render(view(this), this.dom);
       }
 
-      // static get observedAttributes() { 
-      //   return Object.keys(props); 
-      // }
+      static get observedAttributes() { 
+        return Object.keys(attributes); 
+      }
 
-      // attributeChangedCallback(name, oldValue, newValue) {
-      //   console.log(name, oldValue, newValue);
-      //   this[name] = JSON.parse(newValue);
-      //   this.render();
-      // }
+      attributeChangedCallback(name, oldValue, newValue) {
+        console.log(name, oldValue, newValue);
+        this.render();
+      }
   }
 
   customElements.define( name, Temp );
diff --git a/js/pcb_helpers.js b/js/pcb_helpers.js
index c73cf2d..e51e58b 100644
--- a/js/pcb_helpers.js
+++ b/js/pcb_helpers.js
@@ -35,7 +35,7 @@ const vector_rotate = ([x, y], angle) => [
 
 
 class Component {
-  constructor({ pads, layers, drills, footprint, pos, padShapes, id, rotation }) {
+  constructor({ pads, layers, drills, footprint, pos, padShapes, id, rotation, flip }) {
     this.pads = pads;
     this.layers = layers;
     this.footprint = footprint;
@@ -44,6 +44,7 @@ class Component {
     this.rotation = rotation;
     this.padShapes = padShapes;
     this.id = id;
+    this.flip = flip;
   }
 
   pad(name) {
@@ -207,7 +208,8 @@ function makeComponent(comp, options = {}) {
     pos: translate,
     padShapes,
     id: id,
-    rotation: rotate
+    rotation: rotate,
+    flip
   })
 }