feat: real data contrast

apps/contrast-plugin/src/app/app.element.ts

@@ -4,6 +4,7 @@ import './app.element.css';
 
 export class AppElement extends HTMLElement {
   public static observedAttributes = [];
+  public page: any;
 
   calculateContrast(firstColor: string, secondColor: string) {
     const luminosityFirstColor = this.getLuminosity(firstColor);
@@ -138,20 +139,38 @@ export class AppElement extends HTMLElement {
     window.addEventListener('message', (event) => {
       if (event.data.type === 'selection') {
         if (event.data.content.length === 2) {
-          this.calculateContrast('#d5d1d1', '#000410');
+          const obj0 =
+            this.page.objects['#' + event.data.content[0]]?.fills?.[0]
+              ?.fillColor;
+          const obj1 =
+            this.page.objects['#' + event.data.content[1]]?.fills?.[0]
+              ?.fillColor;
+
+          if (obj0 && obj1) {
+            this.calculateContrast(obj0, obj1);
+          }
         } else {
           this.setColors(null, null);
           this.setResult('0');
           this.setA11yTags(0);
         }
       } else if (event.data.type === 'page') {
-        console.log('refrespage', event.data);
+        this.page = event.data.content;
       } else if (event.data.type === 'init') {
         this.setAttribute('data-theme', event.data.content.theme);
+        this.page = event.data.content.page;
 
         if (event.data.content.selection.length === 2) {
-          //TODO get real colors from selection
+          const obj0 =
-          this.calculateContrast('#d5d1d1', '#000410');
+            this.page.objects['#' + event.data.content.selection[0]]?.fills?.[0]
+              ?.fillColor;
+          const obj1 =
+            this.page.objects['#' + event.data.content.selection[1]]?.fills?.[0]
+              ?.fillColor;
+
+          if (obj0 && obj1) {
+            this.calculateContrast(obj0, obj1);
+          }
         }
       } else if (event.data.type === 'theme') {
         this.setAttribute('data-theme', event.data.content);

apps/contrast-plugin/src/plugin.ts

@@ -17,6 +17,7 @@ penpot.ui.onMessage<{ content: string }>((message) => {
       content: {
         name: pageState.name,
         pageId: pageState.id,
+        page: pageState,
         fileId: fileState.id,
         revn: fileState.revn,
         theme: penpot.getTheme(),
@@ -33,3 +34,7 @@ penpot.on('selectionchange', (id) => {
 penpot.on('themechange', (theme) => {
   penpot.ui.sendMessage({ type: 'theme', content: theme });
 });
+
+penpot.on('pagechange', (page) => {
+  penpot.ui.sendMessage({ type: 'page', content: page });
+});

libs/plugins-data-parser/src/lib/utils/parse-state.ts

@@ -121,7 +121,7 @@ function getValue(value: unknown, type: string): unknown {
     : value;
 }
 
-export function getPartialState(path: string, state: UknowCljs) {
+export function getPartialState(path: string, state: UknowCljs): UknowCljs {
   // const state = cljs.core.deref(app.main.store.state);
   const statePath = getPath(path);
   const data = cljs.core.get_in(state, statePath);
@@ -173,8 +173,6 @@ export function getPartialState(path: string, state: UknowCljs) {
             : name;
 
           addEntry(childPath, propName, repValue, isExpandable);
-
-          return;
         } else {
           const valueType = getType(entry);
           const repValue = getValue(entry, valueType);
@@ -182,8 +180,6 @@ export function getPartialState(path: string, state: UknowCljs) {
           const childPath = path + PATH_SEPARATOR + getKeyName(index);
 
           addEntry(childPath, index, repValue, isExpandable);
-
-          return;
         }
       });
     } else if (type.startsWith('js:')) {

libs/plugins-runtime/src/index.ts

@@ -25,7 +25,12 @@ export function initialize(api: any) {
   api.addListener('plugin-page', 'page', (page: any) => {
     console.log('Page Changed:', page);
 
-    setPageState(page);
+    const workspaceData = getPartialState(
+      'root/:workspace-data',
+      api.getState()
+    );
+
+    setPageState(workspaceData.pagesIndex['#' + page.id]);
   });
 
   api.addListener('plugin-file', 'file', (file: any) => {