@rettangoli/ui 0.1.2-rc9 → 0.1.3

package/src/components/waveform/waveform.handlers.js

@@ -0,0 +1,92 @@
+export const handleAfterMount = async (deps) => {
+  const { props, store, render, getRefIds, } = deps;
+  const { waveformData } = props;
+
+  store.setWaveformData(waveformData);
+  render();
+
+  const canvas = getRefIds().canvas?.elm;
+  if (canvas) {
+    renderWaveform(waveformData, canvas);
+  }
+};
+
+export const handleOnUpdate = async (changes, deps) => {
+  const { store, render, getRefIds, props } = deps;
+  const { waveformData } = props;
+
+  if (!waveformData) {
+    console.log('waveform handleOnUpdate: no waveformData provided');
+    return;
+  }
+
+  store.setWaveformData(waveformData);
+  render();
+
+  const canvas = getRefIds().canvas?.elm;
+  if (canvas) {
+    renderWaveform(waveformData, canvas);
+  }
+};
+
+async function renderWaveform(waveformData, canvas) {
+  const ctx = canvas.getContext("2d");
+
+  // Get the actual display size of the canvas
+  const rect = canvas.getBoundingClientRect();
+  const displayWidth = rect.width;
+  const displayHeight = rect.height;
+
+  // Set canvas internal resolution to match display size
+  canvas.width = displayWidth;
+  canvas.height = displayHeight;
+
+  const width = canvas.width;
+  const height = canvas.height;
+
+  // Clear canvas
+  ctx.clearRect(0, 0, width, height);
+
+  // Dark theme background
+  ctx.fillStyle = "#1a1a1a";
+  ctx.fillRect(0, 0, width, height);
+
+  if (!waveformData || !waveformData.amplitudes) {
+    return;
+  }
+
+  const amplitudes = waveformData.amplitudes;
+  const centerY = height / 2;
+
+  // Create gradient for waveform
+  const gradient = ctx.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, "#404040");
+  gradient.addColorStop(0.5, "#A1A1A1");
+  gradient.addColorStop(1, "#404040");
+
+  // Draw waveform bars
+  const barWidth = Math.max(1, width / amplitudes.length);
+  const barSpacing = 0.2; // 20% spacing between bars
+
+  for (let i = 0; i < amplitudes.length; i++) {
+    const amplitude = amplitudes[i];
+    const barHeight = amplitude * (height * 0.85);
+    const x = i * barWidth;
+    const y = centerY - barHeight / 2;
+
+    ctx.fillStyle = gradient;
+    ctx.fillRect(x, y, Math.max(1, barWidth * (1 - barSpacing)), barHeight);
+  }
+
+  // Draw subtle center line
+  ctx.strokeStyle = "rgba(255, 255, 255, 0.1)";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(0, centerY);
+  ctx.lineTo(width, centerY);
+  ctx.stroke();
+
+  // Add subtle glow effect
+  ctx.shadowBlur = 10;
+  ctx.shadowColor = "#2196F3";
+}

package/src/components/waveform/waveform.store.js

@@ -0,0 +1,17 @@
+export const createInitialState = () => Object.freeze({
+  waveformData: null,
+});
+
+export const setWaveformData = (state, data) => {
+  state.waveformData = data;
+};
+
+export const selectViewData = ({ state, attrs, props }) => {
+  return {
+    isLoading: props.isLoading,
+    w: attrs.w || "250",
+    h: attrs.h || "150",
+    cur: attrs.cur,
+    waveformData: props.waveformData,
+  };
+};

package/src/components/waveform/waveform.view.yaml

@@ -0,0 +1,38 @@
+elementName: rtgl-waveform
+
+attrsSchema:
+  type: object
+  properties:
+    w:
+      type: string
+      description: Width of the waveform visualizer
+      default: '250'
+    h:
+      type: string
+      description: Height of the waveform visualizer
+      default: '150'
+    cur:
+      type: string
+      description: cursor
+
+propsSchema:
+  type: object
+  properties:
+    waveformData:
+      type: object
+      description: File ID of the waveform data in object storage
+    isLoading:
+      type: boolean
+      description: Whether the waveform data is currently being loaded
+
+refs:
+  canvas:
+    selector: canvas
+
+template:
+  - rtgl-view w=f h=f pos=rel w=${w} h=${h} cur=${cur}:
+    - $if isLoading:
+        - rtgl-view w=f h=f av=c ah=c:
+          - rtgl-text c=mu-fg: ...
+      $else:
+        - 'canvas#canvas style="width:100%; height:100%;"':

package/src/deps/createGlobalUI.js

@@ -0,0 +1,39 @@
+const createGlobalUI = (globalUIElement) => {
+  let listeners = {};
+
+  return {
+    once: (event, callback) => {
+      if (!listeners[event]) {
+        listeners[event] = [];
+      }
+      const onceCallback = (...args) => {
+        callback(...args);
+        listeners[event] = listeners[event].filter(cb => cb !== onceCallback);
+      }
+      listeners[event].push(onceCallback);
+    },
+    emit: (event, ...args) => {
+      if (listeners[event]) {
+        listeners[event].forEach(callback => {
+          callback(...args);
+        });
+      }
+    },
+    showAlert: async (options) => {
+      if(!globalUIElement)
+      {
+        throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
+      }
+      globalUIElement.transformedHandlers.showAlert(options);
+    },
+    showConfirm: async (options) => {
+      if(!globalUIElement)
+      {
+        throw new Error("globalUIElement is not set. Make sure to initialize the global UI component and pass it to createGlobalUIManager.");
+      }
+      return globalUIElement.transformedHandlers.showConfirm(options);
+    }
+  };
+}
+
+export default createGlobalUI;

package/src/entry-iife-layout.js

@@ -5,6 +5,8 @@ import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
 import RettangoliTextArea from './primitives/textarea.js';
+import RettangoliDialog from './primitives/dialog.js';
+
 
 customElements.define("rtgl-button", RettangoliButton({}));
 customElements.define("rtgl-view", RettangoliView({}));
@@ -13,3 +15,4 @@ customElements.define("rtgl-image", RettangoliImage({}));
 customElements.define("rtgl-svg", RettangoliSvg({}));
 customElements.define("rtgl-input", RettangoliInput({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
+customElements.define("rtgl-dialog", RettangoliDialog({}));

package/src/entry-iife-ui.js

@@ -7,6 +7,8 @@ import RettangoliInput from './primitives/input.js';
 import RettangoliTextArea from './primitives/textarea.js';
 import RettangoliColorPicker from './primitives/colorPicker.js';
 import RettangoliSlider from './primitives/slider.js';
+import RettangoliDialog from './primitives/dialog.js';
+import RettangoliPopover from './primitives/popover.js';
 
 customElements.define("rtgl-button", RettangoliButton({}));
 customElements.define("rtgl-view", RettangoliView({}));
@@ -17,6 +19,8 @@ customElements.define("rtgl-input", RettangoliInput({}));
 customElements.define("rtgl-textarea", RettangoliTextArea({}));
 customElements.define("rtgl-color-picker", RettangoliColorPicker({}));
 customElements.define("rtgl-slider", RettangoliSlider({}));
+customElements.define("rtgl-dialog", RettangoliDialog({}));
+customElements.define("rtgl-popover", RettangoliPopover({}));
 
 // built from rettangoli cli fe
 import '../.temp/dynamicImport.js'

package/src/index.js

@@ -5,6 +5,9 @@ import RettangoliImage from './primitives/image.js';
 import RettangoliSvg from './primitives/svg.js';
 import RettangoliInput from './primitives/input.js';
 import RettangoliTextArea from './primitives/textarea.js';
+import RettangoliDialog from './primitives/dialog.js';
+import RettangoliPopover from './primitives/popover.js';
+import createGlobalUI from './deps/createGlobalUI.js';
 
 export {
     RettangoliButton,
@@ -14,4 +17,7 @@ export {
     RettangoliSvg,
     RettangoliInput,
     RettangoliTextArea,
-}
+    RettangoliDialog,
+    RettangoliPopover,
+    createGlobalUI,
+}

package/src/primitives/button.js

@@ -296,6 +296,16 @@ class RettangoliButtonElement extends HTMLElement {
       this._buttonElement.style.maxWidth = "";
     }
   }
+  
+  // Public method to get the actual button's bounding rect
+  // This is needed because the host element has display: contents
+  getBoundingClientRect() {
+    if (this._buttonElement) {
+      return this._buttonElement.getBoundingClientRect();
+    }
+    // Fallback to host element
+    return super.getBoundingClientRect();
+  }
 }
 
 // Export factory function to maintain API compatibility

package/src/primitives/colorPicker.js

@@ -81,8 +81,8 @@ class RettangoliColorPickerElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -114,6 +114,15 @@ class RettangoliColorPickerElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame(() => {
+        const value = this.getAttribute("value");
+        this._inputElement.value = value ?? "#000000";
+      });
+      return;
+    }
+
     // Handle input-specific attributes first
     if (["value", "disabled"].includes(name)) {
       this._updateInputAttributes();
@@ -168,11 +177,11 @@ class RettangoliColorPickerElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/dialog.js

@@ -0,0 +1,254 @@
+import { css } from "../common.js";
+
+class RettangoliDialogElement extends HTMLElement {
+  static styleSheet = null;
+
+  static initializeStyleSheet() {
+    if (!RettangoliDialogElement.styleSheet) {
+      RettangoliDialogElement.styleSheet = new CSSStyleSheet();
+      RettangoliDialogElement.styleSheet.replaceSync(css`
+        :host {
+          display: contents;
+        }
+
+        dialog {
+          padding: 0;
+          border: none;
+          background: transparent;
+          margin: auto;
+          overflow-y: scroll;
+          color: inherit;
+          max-height: 100vh;
+          height: 100vh;
+          max-width: 100vw;
+          scrollbar-width: none;
+          outline: none;
+        }
+
+        dialog::backdrop {
+          background-color: rgba(0, 0, 0, 0.5);
+        }
+
+        slot[name="content"] {
+          background-color: var(--background) !important;
+          display: block;
+          padding: var(--spacing-lg);
+          border: 1px solid var(--border);
+          border-radius: var(--border-radius-md);
+          margin-left: var(--spacing-lg);
+          margin-right: var(--spacing-lg);
+          width: fit-content;
+          max-width: calc(100vw - 2 * var(--spacing-lg));
+          /* Default margins will be set dynamically via JavaScript for adaptive centering */
+          margin-top: 40px;
+          margin-bottom: 40px;
+        }
+
+        /* Size attribute styles */
+        :host([s="sm"]) slot[name="content"] {
+          width: 33vw;
+        }
+
+        :host([s="md"]) slot[name="content"] {
+          width: 50vw;
+        }
+
+        :host([s="lg"]) slot[name="content"] {
+          width: 80vw;
+        }
+
+        :host([s="f"]) slot[name="content"] {
+          width: 100vw;
+          margin-left: 0;
+          margin-right: 0;
+        }
+
+        @keyframes dialog-in {
+          from {
+            opacity: 0;
+            transform: scale(0.95);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1);
+          }
+        }
+
+        dialog[open] slot[name="content"] {
+          animation: dialog-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
+        }
+      `);
+    }
+  }
+
+  constructor() {
+    super();
+    RettangoliDialogElement.initializeStyleSheet();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.adoptedStyleSheets = [RettangoliDialogElement.styleSheet];
+
+    // Create dialog element
+    this._dialogElement = document.createElement('dialog');
+    this.shadow.appendChild(this._dialogElement);
+
+    // Store reference for content slot
+    this._slotElement = null;
+    this._isConnected = false;
+
+    // Handle click outside - emit custom event
+    this._dialogElement.addEventListener('click', (e) => {
+      if (e.target === this._dialogElement) {
+        this.dispatchEvent(new CustomEvent('close', {
+          detail: {}
+        }));
+      }
+    });
+
+    // Handle right-click on overlay to close dialog
+    this._dialogElement.addEventListener('contextmenu', (e) => {
+      if (e.target === this._dialogElement) {
+        e.preventDefault();
+        this.dispatchEvent(new CustomEvent('close', {
+          detail: {}
+        }));
+      }
+    });
+
+    // Handle ESC key - prevent native close and emit custom event
+    this._dialogElement.addEventListener('cancel', (e) => {
+      e.preventDefault();
+      this.dispatchEvent(new CustomEvent('close', {
+        detail: {}
+      }));
+    });
+  }
+
+  static get observedAttributes() {
+    return ["open", "w", "s"];
+  }
+
+  connectedCallback() {
+    this._updateDialog();
+    this._isConnected = true;
+    // Check initial open attribute
+    if (this.hasAttribute('open')) {
+      this._showModal();
+    }
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'open') {
+      if (newValue !== null && !this._dialogElement.open && this._isConnected) {
+        this._showModal();
+      } else if (newValue === null && this._dialogElement.open) {
+        this._hideModal();
+      }
+    } else if (name === 'w') {
+      this._updateWidth();
+    } else if (name === 's') {
+      // Size is handled via CSS :host() selectors
+    }
+  }
+
+  _updateDialog() {
+    this._updateWidth();
+  }
+
+  _updateWidth() {
+    const width = this.getAttribute('w');
+    if (width) {
+      this._dialogElement.style.width = width;
+    } else {
+      this._dialogElement.style.width = '';
+    }
+  }
+
+  // Internal methods
+  _showModal() {
+    if (!this._dialogElement.open) {
+      // Create and append slot for content only if it doesn't exist
+      if (!this._slotElement) {
+        this._slotElement = document.createElement('slot');
+        this._slotElement.setAttribute('name', 'content');
+        this._dialogElement.appendChild(this._slotElement);
+      }
+
+      this._dialogElement.showModal();
+
+      // Reset scroll position
+      this._dialogElement.scrollTop = 0;
+
+      // Apply adaptive centering
+      this._applyAdaptiveCentering();
+    }
+  }
+
+  _hideModal() {
+    if (this._dialogElement.open) {
+      this._dialogElement.close();
+
+      // Remove slot to unmount content
+      if (this._slotElement) {
+        // Reset any inline styles applied for adaptive centering
+        this._slotElement.style.marginTop = '';
+        this._slotElement.style.marginBottom = '';
+        
+        this._dialogElement.removeChild(this._slotElement);
+        this._slotElement = null;
+      }
+
+      // Reset dialog height
+      this._dialogElement.style.height = '';
+
+      // Don't emit any event when programmatically closed via attribute
+    }
+  }
+
+  _applyAdaptiveCentering() {
+    if (!this._slotElement) {
+      return;
+    }
+
+    // Use requestAnimationFrame to ensure DOM has updated
+    requestAnimationFrame(() => {
+      if (!this._slotElement) return;
+      
+      // Get the actual height of the content
+      const contentHeight = this._slotElement.offsetHeight;
+      const viewportHeight = window.innerHeight;
+      
+      // Calculate centered position with minimum margins for scrollability
+      const minMargin = 40; // Minimum margin in pixels to ensure scrollability
+      
+      if (contentHeight >= viewportHeight - (2 * minMargin)) {
+        // Content is too tall, use minimum margins to allow scrolling
+        // Start near the top with small margin so content isn't pushed too far down
+        this._slotElement.style.marginTop = `${minMargin}px`;
+        this._slotElement.style.marginBottom = `${minMargin}px`;
+        // Keep dialog at full height for scrolling
+        this._dialogElement.style.height = '100vh';
+      } else {
+        // Content fits, center it vertically
+        const totalMargin = viewportHeight - contentHeight;
+        const margin = Math.floor(totalMargin / 2);
+        this._slotElement.style.marginTop = `${margin}px`;
+        this._slotElement.style.marginBottom = `${margin}px`;
+        // Set dialog height to auto to prevent unnecessary scrollbar
+        this._dialogElement.style.height = 'auto';
+      }
+    });
+  }
+
+
+  // Expose dialog element for advanced usage
+  get dialog() {
+    return this._dialogElement;
+  }
+}
+
+// Export factory function to maintain API compatibility
+export default ({ render, html }) => {
+  // Note: render and html parameters are accepted but not used
+  // This maintains backward compatibility with existing code
+  return RettangoliDialogElement;
+};

package/src/primitives/image.js

@@ -85,7 +85,8 @@ class RettangoliImageElement extends HTMLElement {
       "wh",
       "w",
       "h",
-      "hidden",
+      "hide",
+      "show",
       "height",
       "width",
       "z",
@@ -198,11 +199,11 @@ class RettangoliImageElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });

package/src/primitives/input.js

@@ -94,8 +94,8 @@ class RettangoliInputElement extends HTMLElement {
         "wh",
         "w",
         "h",
-        "hidden",
-        "visible",
+        "hide",
+        "show",
         "op",
         "z",
       ])
@@ -110,6 +110,10 @@ class RettangoliInputElement extends HTMLElement {
     this._inputElement.value = newValue;
   }
 
+  focus() {
+    this._inputElement.focus();
+  }
+
   _onChange = (event) => {
     this.dispatchEvent(new CustomEvent('input-change', {
       detail: {
@@ -119,6 +123,15 @@ class RettangoliInputElement extends HTMLElement {
   };
 
   attributeChangedCallback(name, oldValue, newValue) {
+    // Handle key attribute change - reset value
+    if (name === "key" && oldValue !== newValue) {
+      requestAnimationFrame((() => {
+        const value = this.getAttribute("value");
+        this._inputElement.value = value ?? "";
+      }))
+      return;
+    }
+
     // Handle input-specific attributes first
     if (["type", "placeholder", "disabled", "value", "step", "s"].includes(name)) {
       this._updateInputAttributes();
@@ -173,11 +186,11 @@ class RettangoliInputElement extends HTMLElement {
         this._styles[size]["max-height"] = height;
       }
 
-      if (this.hasAttribute(addSizePrefix("hidden"))) {
+      if (this.hasAttribute(addSizePrefix("hide"))) {
         this._styles[size].display = "none !important";
       }
 
-      if (this.hasAttribute(addSizePrefix("visible"))) {
+      if (this.hasAttribute(addSizePrefix("show"))) {
         this._styles[size].display = "block !important";
       }
     });