@rettangoli/ui 0.1.2-rc15 → 0.1.2-rc18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rettangoli/ui",
-  "version": "0.1.2-rc15",
+  "version": "0.1.2-rc18",
   "description": "A UI component library for building web interfaces.",
   "main": "dist/rettangoli-esm.min.js",
   "type": "module",

package/src/components/form/form.handlers.js

@@ -3,6 +3,18 @@ export const handleBeforeMount = (deps) => {
   store.setFormValues(props.defaultValues);
 };
 
+export const handleOnUpdate = (changes, deps) => {
+  const { oldAttrs, newAttrs } = changes
+  const { store, props, render } = deps;
+
+  if (oldAttrs?.key === newAttrs?.key) {
+    return;
+  }
+
+  store.setFormValues(props.defaultValues);
+  render();
+};
+
 const dispatchFormChange = (name, fieldValue, formValues, dispatchEvent) => {
   dispatchEvent(
     new CustomEvent("form-change", {
@@ -41,6 +53,19 @@ export const handleInputChange = (e, deps) => {
   }
 };
 
+export const handlePopoverInputChange = (e, deps) => {
+  const { store, dispatchEvent } = deps;
+  const name = e.currentTarget.id.replace("popover-input-", "");
+  // TODO fix double event
+  if (name && e.detail.value !== undefined) {
+    store.setFormFieldValue({
+      name: name,
+      value: e.detail.value,
+    });
+    dispatchFormChange(name, e.detail.value, store.selectFormValues(), dispatchEvent);
+  }
+};
+
 export const handleSelectChange = (e, deps) => {
   const { store, dispatchEvent } = deps;
   const name = e.currentTarget.id.replace("select-", "");
@@ -90,12 +115,36 @@ export const handleSliderInputChange = (e, deps) => {
 };
 
 export const handleImageClick = (e, deps) => {
+  if (e.type === "contextmenu") {
+    e.preventDefault();
+  }
   const { dispatchEvent } = deps;
   const name = e.currentTarget.id.replace("image-", "");
   dispatchEvent(
     new CustomEvent("extra-event", {
       detail: {
-        name: name
+        name: name,
+        x: e.clientX,
+        y: e.clientY,
+        trigger: e.type
+      },
+    }),
+  );
+};
+
+export const handleWaveformClick = (e, deps) => {
+  if (e.type === "contextmenu") {
+    e.preventDefault();
+  }
+  const { dispatchEvent } = deps;
+  const name = e.currentTarget.id.replace("waveform-", "");
+  dispatchEvent(
+    new CustomEvent("extra-event", {
+      detail: {
+        name: name,
+        x: e.clientX,
+        y: e.clientY,
+        trigger: e.type
       },
     }),
   );

package/src/components/form/form.store.js

@@ -13,7 +13,7 @@ export const toViewData = ({ state, props, attrs }) => {
   const fields = structuredClone(props.form.fields || []);
   const defaultValues = props.defaultValues || {};
   const fieldResources = props.fieldResources || {};
-  
+
   fields.forEach((field) => {
     field.defaultValue = defaultValues[field.name];
     if (field.inputType === 'image') {
@@ -23,6 +23,13 @@ export const toViewData = ({ state, props, attrs }) => {
       // Set placeholder text
       field.placeholderText = field.placeholder || 'No Image';
     }
+    if (field.inputType === 'waveform') {
+      const waveformData = fieldResources[field.name]?.waveformData;
+      // Only set waveformData if it exists
+      field.waveformData = waveformData || null;
+      // Set placeholder text
+      field.placeholderText = field.placeholder || 'No Waveform';
+    }
   })
 
   return {

package/src/components/form/form.view.yaml

@@ -153,6 +153,27 @@ propsSchema:
                   - label
                   - inputType
                 additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: waveform
+                  width:
+                    type: number
+                  height:
+                    type: number
+                  placeholder:
+                    type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
         actions:
           type: object
           properties:
@@ -200,6 +221,18 @@ refs:
     eventListeners:
       click:
         handler: handleImageClick
+      contextmenu:
+        handler: handleImageClick
+  waveform-*:
+    eventListeners:
+      click:
+        handler: handleWaveformClick
+      contextmenu:
+        handler: handleWaveformClick
+  popover-input-*:
+    eventListeners:
+      input-change:
+        handler: handlePopoverInputChange
 
 events:
   form-change: {}
@@ -216,8 +249,12 @@ template:
             - rtgl-view g=sm:
               - rtgl-text: ${field.label}
               - rtgl-text s=sm c=mu-fg: ${field.description}
+            - $if field.inputType == "read-only-text":
+                - rtgl-text s=sm: ${field.defaultValue}
             - $if field.inputType == "inputText":
                 - rtgl-input#input-${field.name} w=f placeholder=${field.placeholder} value=${field.defaultValue}:
+            - $if field.inputType == "popover-input":
+                - rtgl-popover-input#popover-input-${field.name} label="${field.label}" .defaultValue=fields[${i}].defaultValue:
             - $if field.inputType == "select":
                 - rtgl-select#select-${field.name} w=f .options=fields[${i}].options .placeholder=fields[${i}].placeholder .selectedValue=fields[${i}].defaultValue:
             - $if field.inputType == "colorPicker":
@@ -231,6 +268,11 @@ template:
             - $if field.inputType == "image" && !field.imageSrc:
                 - rtgl-view#image-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
                     - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
+            - $if field.inputType == "waveform" && field.waveformData:
+                - rtgl-waveform#waveform-${field.name} .waveformData=fields[${i}].waveformData w=${field.width} h=${field.height} cur=p:
+            - $if field.inputType == "waveform" && !field.waveformData:
+                - rtgl-view#waveform-${field.name} w=${field.width} h=${field.height} bc=ac bw=sm ah=c av=c cur=p p=md:
+                    - rtgl-text c=mu-fg ta=c: ${field.placeholderText}
     - rtgl-view g=sm w=f:
       - rtgl-view d=h ah=e g=sm w=f:
         - $for button, i in actions.buttons:

package/src/components/popoverInput/popoverInput.handlers.js

@@ -0,0 +1,99 @@
+export const handleBeforeMount = (deps) => {
+  const { store, props } = deps;
+
+  if (props.value !== undefined || props.defaultValue !== undefined) {
+    store.setValue(props.value || props.defaultValue || '');
+  }
+}
+
+export const handleOnUpdate = (changes, deps) => {
+  const { oldProps, newProps} = changes
+  const { store, props, render } = deps;
+
+  if (oldProps.defaultValue !== newProps.defaultValue) {
+    store.setValue(props.defaultValue || '');
+  }
+
+  render();
+}
+
+export const handleTextClick = (e, deps) => {
+  const { store, render, getRefIds, attrs } = deps;
+
+  const value = store.selectValue();
+  store.setTempValue(value)
+
+  store.openPopover({
+    position: {
+      x: e.currentTarget.getBoundingClientRect().left,
+      y: e.currentTarget.getBoundingClientRect().bottom,
+    }
+  });
+
+  const { input } = getRefIds();
+  input.elm.value = value;
+  render();
+
+  if (attrs['auto-focus']) {
+    setTimeout(() => {
+      input.elm.focus();
+    }, 50)
+  }
+}
+
+export const handlePopoverClose = (e, deps) => {
+  const { store, render } = deps;
+  store.closePopover();
+  render();
+}
+
+export const handleInputChange = (e, deps) => {
+  const { store, render, dispatchEvent } = deps;
+  const value = e.detail.value;
+
+  store.setTempValue(value);
+
+  dispatchEvent(new CustomEvent('temp-input-change', {
+    detail: { value },
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleSubmitClick = (e, deps) => {
+  const { store, render, dispatchEvent, getRefIds } = deps;
+  const { input } = getRefIds()
+  const value = input.elm.value;
+
+  store.setValue(value)
+  store.closePopover();
+
+  dispatchEvent(new CustomEvent('input-change', {
+    detail: { value },
+    bubbles: true
+  }));
+
+  render();
+}
+
+export const handleInputKeydown = (e, deps) => {
+  const { store, render, dispatchEvent, getRefIds } = deps;
+
+  if (e.key === 'Enter') {
+    const { input } = getRefIds()
+    const value = input.elm.value;
+
+    store.closePopover();
+    // Dispatch custom event
+    dispatchEvent(new CustomEvent('input-change', {
+      detail: { value },
+      bubbles: true
+    }));
+
+    render();
+  } else if (e.key === 'Escape') {
+    store.closePopover();
+    render();
+  }
+}

package/src/components/popoverInput/popoverInput.store.js

@@ -0,0 +1,48 @@
+export const INITIAL_STATE = Object.freeze({
+  isOpen: false,
+  position: {
+    x: 0,
+    y: 0,
+  },
+  value: '',
+  tempValue: '',
+});
+
+export const toViewData = ({ attrs, state, props }) => {
+  // Use state's current value if it has been modified, otherwise use props
+  const value = state.value || '-';
+
+  return {
+    isOpen: state.isOpen,
+    position: state.position,
+    value: value ?? '-',
+    tempValue: state.tempValue,
+    placeholder: props.placeholder ?? '',
+    label: attrs.label,
+  };
+}
+
+export const setTempValue = (state, value) => {
+  state.tempValue = value;
+}
+
+export const openPopover = (state, payload) => {
+  const { position } = payload;
+  state.position = position;
+  state.isOpen = true;
+  // Reset the current value to match the display value when opening
+  state.hasUnsavedChanges = false;
+}
+
+export const closePopover = (state) => {
+  state.isOpen = false;
+  state.tempValue = '';
+}
+
+export const setValue = (state, value) => {
+  state.value = value;
+}
+
+export const selectValue = ({ state }) => {
+  return state.value;
+}

package/src/components/popoverInput/popoverInput.view.yaml

@@ -0,0 +1,55 @@
+elementName: rtgl-popover-input
+
+viewDataSchema:
+  type: object
+
+attrsSchema:
+  type: object
+  properties:
+    auto-focus:
+      type: boolean
+
+propsSchema:
+  type: object
+  properties:
+    value:
+      type: string
+    defaultValue:
+      type: string
+    placeholder:
+      type: string
+    onChange:
+      type: function
+
+refs:
+  text-display:
+    eventListeners:
+      click:
+        handler: handleTextClick
+  popover:
+    eventListeners:
+      close:
+        handler: handlePopoverClose
+  input:
+    eventListeners:
+      input-change:
+        handler: handleInputChange
+      keydown:
+        handler: handleInputKeydown
+  submit:
+    eventListeners:
+      click:
+        handler: handleSubmitClick
+
+events:
+  input-change: {}
+
+template:
+  - rtgl-view#text-display w=f cur=p:
+    - rtgl-text: ${value}
+  - rtgl-popover#popover ?open=${isOpen} x=${position.x} y=${position.y}:
+    - rtgl-view g=md w=240 slot=content bgc=background br=md:
+      - rtgl-text: ${label}
+      - rtgl-input#input w=f placeholder=${placeholder}:
+      - rtgl-view w=f ah=e:
+        - rtgl-button#submit: Submit

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

@@ -0,0 +1,86 @@
+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;
+  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.data) {
+    return;
+  }
+
+  const data = waveformData.data;
+  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 / data.length);
+  const barSpacing = 0.2; // 20% spacing between bars
+
+  for (let i = 0; i < data.length; i++) {
+    const amplitude = data[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 INITIAL_STATE = Object.freeze({
+  waveformData: null,
+});
+
+export const setWaveformData = (state, data) => {
+  state.waveformData = data;
+};
+
+export const toViewData = ({ 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/primitives/input.js

@@ -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: {