integrations: livecanvas and bricks improvement

assets/apps/dashboard/App.vue

@@ -52,7 +52,7 @@ channel.addEventListener('message', async (e) => {
         <WorkspacePage />
     </div>
     <div v-if="windpress.is_universal" :class="{ hidden: ui.virtualState('window.minimized', false).value === false }" class="windpress-badge fixed bottom:0 right:0">
-        <div @click="ui.virtualState('window.minimized', false).value = !ui.virtualState('window.minimized', false).value" class="cursor:pointer:hover fg:black fg:white@dark">
+        <div @click="ui.virtualState('window.minimized', false).value = !ui.virtualState('window.minimized', false).value" class="cursor:pointer:hover fg:black">
             <inline-svg :src="Logo" class="inline-svg fill:current font:28" />
         </div>
     </div>

assets/apps/dashboard/components/Workspace/MainPanel/Settings.vue

@@ -225,7 +225,7 @@ channel.addEventListener('message', (e) => {
                                     </a>
                                 </template>
                                 <template v-if="css_cache.file_size">
-                                    <div class="bg:lime-5/.5 bg:lime-80/.5@dark fg:lime-70 fg:lime-30@dark font:12 font:medium ml:8 outline:1|solid|lime-60/.2 px:8 py:2 r:6">{{ prettyBytes(css_cache.file_size, { maximumFractionDigits: 2, space: false }) }}</div>
+                                    <div class="bg:lime-5/.5 bg:lime-80/.5@dark fg:lime-70 fg:lime-30@dark font:12 font:medium ml:8 outline:1|solid|lime-60/.2 px:8 py:2 r:6">{{ prettyBytes(css_cache.file_size, { maximumFractionDigits: 2, space: true }) }}</div>
                                 </template>
                             </p>
                             <div>

assets/apps/dashboard/components/compiler.js

@@ -31,7 +31,6 @@ export async function buildCache(opts) {
         logStore.add({ message: 'No cache provider found', type: 'error' });
 
         throw new Error('No cache provider found');
-        return;
     }
 
     let content_pool = [];

assets/apps/dashboard/directives/ripple/ripple.js

@@ -90,8 +90,8 @@ const DomHandler = {
             let rect = el.getBoundingClientRect();
 
             return {
-                top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
-                left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
+                top: rect.top + (window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0),
+                left: rect.left + (window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
             };
         }
 

assets/apps/dashboard/main.js

@@ -51,11 +51,6 @@ if (!document.getElementById('windpress-app')) {
 
     // append the stylesheets to the iframe
     stylesheets.forEach((stylesheet) => {
-        // const link = document.createElement('link');
-        // link.rel = 'stylesheet';
-        // link.href = stylesheet.href;
-        // doc.head.appendChild(stylesheet);
-
         // clone the stylesheet element and append it to the iframe
         const clone = stylesheet.cloneNode(true);
         doc.head.appendChild(clone);

assets/integration/bricks/modules/plain-classses/main.js

@@ -11,31 +11,31 @@ import './style.scss';
 
 import { logger } from '@/integration/common/logger.js';
 
-// import tippy, { followCursor } from 'tippy.js';
+import tippy, { followCursor } from 'tippy.js';
 
 import { nextTick, ref, watch } from 'vue';
 import autosize from 'autosize';
 import Tribute from 'tributejs';
 
-// import { createHighlighterCore, loadWasm } from 'shiki/core';
+import { createHighlighterCore, loadWasm } from 'shiki/core';
 
 import HighlightInTextarea from '@/integration/library/highlight-in-textarea.js';
 import { brxGlobalProp, brxIframeGlobalProp, brxIframe } from '@/integration/bricks/constant.js';
 
-// let shikiHighlighter = null;
-
-// (async () => {
-//     await loadWasm(import('shiki/wasm'));
-//     shikiHighlighter = await createHighlighterCore({
-//         themes: [
-//             import('shiki/themes/dark-plus.mjs'),
-//             import('shiki/themes/light-plus.mjs'),
-//         ],
-//         langs: [
-//             import('shiki/langs/css.mjs'),
-//         ],
-//     });
-// })();
+let shikiHighlighter = null;
+
+(async () => {
+    await loadWasm(import('shiki/wasm'));
+    shikiHighlighter = await createHighlighterCore({
+        themes: [
+            import('shiki/themes/dark-plus.mjs'),
+            import('shiki/themes/light-plus.mjs'),
+        ],
+        langs: [
+            import('shiki/langs/css.mjs'),
+        ],
+    });
+})();
 
 const textInput = document.createRange().createContextualFragment(/*html*/ `
     <textarea id="windpressbricks-plc-input" class="windpressbricks-plc-input" rows="2" spellcheck="false"></textarea>
@@ -59,9 +59,6 @@ containerActionButtons.appendChild(classSortButton);
 const visibleElementPanel = ref(false);
 const activeElementId = ref(null);
 
-// let twConfig = null;
-// let screenBadgeColors = [];
-
 (async () => {
 
 })();
@@ -259,138 +256,114 @@ function onTextInputChanges() {
 
 // Disabled until the feature is stable
 textInput.addEventListener('highlights-updated', function (e) {
-    // colorizeBackground();
-    // hoverPreviewProvider();
+    hoverPreviewProvider();
 });
 
-// function hoverPreviewProvider() {
-//     if (brxIframe.contentWindow.windpress?.loaded?.module?.classNameToCss !== true) {
-//         return;
-//     }
-
-//     let someTippyIsVisible = false;
-
-//     let registeredTippyElements = [];
-
-//     let detectedMarkWordElement = null;
-
-//     const hitContainerEl = document.querySelector('.hit-container');
+function hoverPreviewProvider() {
+    if (brxIframe.contentWindow.windpress?.loaded?.module?.classnameToCss !== true) {
+        return;
+    }
 
-//     if (hitContainerEl === null) {
-//         return;
-//     }
+    let someTippyIsVisible = false;
 
-//     // when mouse are entering the `.hit-container` element, get the coordinates of the mouse and check if the mouse is hovering the `mark` element
-//     hitContainerEl.addEventListener('mousemove', async function (event) {
-//         const x = event.clientX;
-//         const y = event.clientY;
+    let registeredTippyElements = [];
 
-//         // get all elements that overlap the mouse
-//         const elements = document.elementsFromPoint(x, y);
+    let detectedMarkWordElement = null;
 
-//         // is found the `mark` element
-//         const found = elements.some((element) => {
-//             if (element.matches('mark[class="word"]')) {
-//                 detectedMarkWordElement = element;
-//                 return true;
-//             }
-//         });
+    const hitContainerEl = document.querySelector('.hit-container');
 
-//         if (!found) {
-//             detectedMarkWordElement = null;
-//         }
+    if (hitContainerEl === null) {
+        return;
+    }
 
+    // when mouse are entering the `.hit-container` element, get the coordinates of the mouse and check if the mouse is hovering the `mark` element
+    hitContainerEl.addEventListener('mousemove', async function (event) {
+        const x = event.clientX;
+        const y = event.clientY;
 
-//         if (detectedMarkWordElement === null) {
-//             if (someTippyIsVisible === false) {
-//                 return;
-//             }
-//             someTippyIsVisible = false;
+        // get all elements that overlap the mouse
+        const elements = document.elementsFromPoint(x, y);
 
-//             registeredTippyElements.forEach((tippyInstance) => {
-//                 tippyInstance.destroy();
-//             });
+        // is found the `mark` element
+        const found = elements.some((element) => {
+            if (element.matches('mark[class="word"]')) {
+                detectedMarkWordElement = element;
+                return true;
+            }
+        });
 
-//             registeredTippyElements = [];
+        if (!found) {
+            detectedMarkWordElement = null;
+        }
 
-//             return;
-//         }
 
-//         if (someTippyIsVisible === detectedMarkWordElement.textContent) {
-//             return;
-//         } else {
-//             registeredTippyElements.forEach((tippyInstance) => {
-//                 tippyInstance.destroy();
-//             });
+        if (detectedMarkWordElement === null) {
+            if (someTippyIsVisible === false) {
+                return;
+            }
+            someTippyIsVisible = false;
 
-//             registeredTippyElements = [];
-//         }
+            registeredTippyElements.forEach((tippyInstance) => {
+                tippyInstance.destroy();
+            });
 
-//         const generatedCssCode = brxIframe.contentWindow.windpress.module.classNameToCss.generate(detectedMarkWordElement.textContent);
-//         if (generatedCssCode === null) {
-//             return null;
-//         };
+            registeredTippyElements = [];
 
-//         someTippyIsVisible = detectedMarkWordElement.textContent;
+            return;
+        }
 
-//         const tippyInstance = tippy(detectedMarkWordElement, {
-//             plugins: [followCursor],
-//             allowHTML: true,
-//             arrow: false,
-//             duration: [500, null],
-//             followCursor: true,
-//             trigger: 'manual',
+        if (someTippyIsVisible === detectedMarkWordElement.textContent) {
+            return;
+        } else {
+            registeredTippyElements.forEach((tippyInstance) => {
+                tippyInstance.destroy();
+            });
 
-//             content: (reference) => {
-//                 return shikiHighlighter.codeToHtml(generatedCssCode, {
-//                     lang: 'css',
-//                     theme: 'dark-plus',
-//                 });
-//             }
-//         });
+            registeredTippyElements = [];
+        }
 
-//         tippyInstance.show();
+        const generatedCssCode = await brxIframe.contentWindow.windpress.module.classnameToCss.generate(detectedMarkWordElement.textContent);
+        if (generatedCssCode === null || generatedCssCode.trim() === '') {
+            return null;
+        };
+
+        someTippyIsVisible = detectedMarkWordElement.textContent;
+
+        const tippyInstance = tippy(detectedMarkWordElement, {
+            plugins: [followCursor],
+            allowHTML: true,
+            arrow: false,
+            duration: [500, null],
+            followCursor: true,
+            trigger: 'manual',
+
+            content: (reference) => {
+                return shikiHighlighter.codeToHtml(generatedCssCode, {
+                    lang: 'css',
+                    theme: 'dark-plus',
+                });
+            }
+        });
 
-//         // push the element to the registered tippy elements
-//         registeredTippyElements.push(tippyInstance);
+        tippyInstance.show();
 
-//         detectedMarkWordElement = null;
-//     });
+        // push the element to the registered tippy elements
+        registeredTippyElements.push(tippyInstance);
 
-//     // on mouse leave the `.hit-container` element, hide all tippy
-//     hitContainerEl.addEventListener('mouseleave', async function (event) {
-//         someTippyIsVisible = false;
+        detectedMarkWordElement = null;
+    });
 
-//         registeredTippyElements.forEach((tippyInstance) => {
-//             tippyInstance.destroy();
-//         });
+    // on mouse leave the `.hit-container` element, hide all tippy
+    hitContainerEl.addEventListener('mouseleave', async function (event) {
+        someTippyIsVisible = false;
 
-//         registeredTippyElements = [];
-//     });
-// }
+        registeredTippyElements.forEach((tippyInstance) => {
+            tippyInstance.destroy();
+        });
 
-// function colorizeBackground() {
-//     if (twConfig === null) return;
-
-//     if (screenBadgeColors.length === 0) return;
-
-//     const markElements = document.querySelectorAll('.hit-backdrop>.hit-highlights.hit-content>mark[class="word"]');
-
-//     markElements.forEach((markElement) => {
-//         // get the text content of the `mark` element
-//         const text = markElement.textContent;
-
-//         // loop through all screen badge colors
-//         screenBadgeColors.forEach((screenBadgeColor) => {
-//             // if the text content of the `mark` element contains the screen name
-//             if (text.includes(screenBadgeColor.screen + ':')) {
-//                 const ruleVal = `color-mix(in srgb, ${screenBadgeColor.color} 20%, white 1%)`;
-//                 markElement.style.backgroundColor = ruleVal;
-//                 markElement.style.outlineColor = ruleVal;
-//             }
-//         });
-//     });
-// }
+        registeredTippyElements = [];
+    });
+}
 
 const observerAutocomplete = new MutationObserver(function (mutations) {
     mutations.forEach(function (mutation) {

assets/integration/bricks/modules/variable-picker/main.js

@@ -1,7 +1,7 @@
 import 'floating-vue/dist/style.css';
 import './style.scss';
 
-import { createApp, nextTick, ref } from 'vue';
+import { createApp, nextTick, ref, watch } from 'vue';
 import './master.css.js';
 import { FontAwesomeIcon } from './font-awesome.js';
 import { logger } from '@/integration/common/logger.js';
@@ -171,4 +171,8 @@ document.addEventListener('keydown', (e) => {
     }
 });
 
+watch(isOpen, (value) => {
+    variableApp.style.zIndex = value ? 'calc(Infinity)' : '-1';
+});
+
 logger('Module loaded!', { module: 'variable-picker' });

assets/integration/bricks/modules/variable-picker/style.scss

@@ -1,5 +1,5 @@
 #windpressbricks-variable-app {
-    z-index: calc(Infinity);
+    z-index: -1;
     height: 500px;
     width: 300px;
     position: fixed;