@nuraly/runtime 0.1.7 → 0.1.9

package/components/ui/components/base/BaseElement/drag-events.helpers.ts

@@ -1,71 +0,0 @@
-import { type ComponentElement } from '../../../../../redux/store/component/component.interface';
-
-/**
- * Helper function to handle drag events in component wrappers
- * 
- * @param ctx Context object containing component and event information
- */
-export function handleDragEvent(ctx: {
-  isViewMode: boolean;
-  component: ComponentElement;
-  shadowRoot: ShadowRoot | null;
-  eventType: string;
-}) {
-  if (ctx.isViewMode) return;
-  
-  ctx.shadowRoot?.querySelectorAll('drag-wrapper')?.forEach(wrapper =>
-    wrapper.dispatchEvent(new CustomEvent(ctx.eventType, { 
-      bubbles: true, 
-      composed: true 
-    }))
-  );
-}
-
-/**
- * Sets up all drag-related event handlers for a component
- * 
- * @param ctx Context with component and instance references
- * @returns Array of bound handler functions to be used for cleanup
- */
-export function setupDragEventHandlers(ctx: {
-  component: ComponentElement;
-  isViewMode: boolean;
-  instance: any;
-}) {
-  // Skip setting up handlers in view mode
-  if (ctx.isViewMode) return [];
-  
-  // Define handlers using the component instance context
-  const dragEnterHandler = () => {
-    handleDragEvent({
-      isViewMode: ctx.isViewMode,
-      component: ctx.component,
-      shadowRoot: ctx.instance.shadowRoot,
-      eventType: "drag-over-component"
-    });
-  };
-  
-  const dropHandler = () => {
-    handleDragEvent({
-      isViewMode: ctx.isViewMode,
-      component: ctx.component,
-      shadowRoot: ctx.instance.shadowRoot,
-      eventType: "drag-leave-component"
-    });
-  };
-  
-  const dragLeaveHandler = () => {
-    handleDragEvent({
-      isViewMode: ctx.isViewMode,
-      component: ctx.component,
-      shadowRoot: ctx.instance.shadowRoot,
-      eventType: "drag-leave-component"
-    });
-  };
-  
-  return [
-    { event: "dragenter", handler: dragEnterHandler },
-    { event: "drop", handler: dropHandler },
-    { event: "dragleave", handler: dragLeaveHandler }
-  ];
-}

package/components/ui/components/base/BaseElement/execute-event.helpers.ts

@@ -1,45 +0,0 @@
-import { getNestedAttribute } from '../../../../../utils/object.utils';
-import { executeHandler } from '../../../../../state/runtime-context';
-
-export function handleComponentEvent({
-  isViewMode,
-  component,
-  item,
-  eventName,
-  event,
-  data,
-  onSelect,
-}: {
-  isViewMode: boolean;
-  component: any;
-  item: any;
-  eventName: string;
-  event?: Event;
-  data?: any;
-  onSelect?: (e: Event) => void;
-}) {
-
-  if (true)  {//use isViewMode when integrating preview mode
-    const code = component.event?.[eventName];
-    if (code) {
-      const EventData = {
-        ...data,
-        event
-      };
-      
-      
-      executeHandler(
-        component,
-        getNestedAttribute(component, `event.${eventName}`),
-        EventData,
-        item
-      );
-    } else {
-    }
-    return;
-  }
-
-  if (eventName === "onClick" && event) {
-    onSelect?.(event);
-  }
-}

package/components/ui/components/base/BaseElement/interactions.helpers.ts

@@ -1,14 +0,0 @@
-// interactions.helpers.ts
-import { setHoveredComponentAction } from '../../../../../redux/actions/component/setHoveredComponentAction';
-
-export function handleMouseEnter(
-  isViewMode: boolean,
-  component: any
-) {
-  if (!isViewMode) setHoveredComponentAction(component);
-}
-
-export function handleMouseLeave(isViewMode: boolean) {
-  if (!isViewMode) setHoveredComponentAction(null);
-}
-

package/components/ui/components/wrappers/ComponentTitle/ComponentTitle.ts

@@ -1,95 +0,0 @@
-import { ComponentType, type ComponentElement } from '../../../../../redux/store/component/component.interface';
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { setDraggingComponentInfo } from '../../../../../redux/actions/component/setDraggingComponentInfo';
-
-@customElement("component-title")
-export class ComponentTitle extends LitElement {
-  static styles = css`
-    .component-name {
-      position: absolute;
-      /* z-index: 7; */
-      padding: 1px;
-   
-      color: white;
-      font-weight: 300;
-      font-size: 14px;
-      cursor: pointer;
-      user-select: none;
-      margin-top: -22px;
-    }
-  `;
-  @property({ type: Object })
-  component: ComponentElement;
-  @state()
-  isDragInitiator = false;
-
-  @property({ type: Boolean })
-  display: Boolean;
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.setupSubscriptions();
-  }
-
-  setupSubscriptions() {
-   
-  }
-
-  emitEvent(value: boolean) {
-    const submitEvent = new CustomEvent("dragInit", {
-      detail: { value },
-      bubbles: true,
-      composed: true
-    });
-    this.dispatchEvent(submitEvent);
-  }
-
-  render() {
-   
-    return html`
-    ${this.display ? html`
-      <span
-        @mousedown=${this.handleMouseDown}
-        @mouseup=${this.handleMouseUp}
-        class="component-name"
-      >
-        <span style=${
-          styleMap({
-            padding:" 4px",
-            background: "#2395ff"
-          })
-        }> ${this.component.name} </span>
-        ${this.component.component_type ===ComponentType.Container && false ? html`
-        <micro-app
-      style=${styleMap({
-      })}
-    uuid="1" componentToRenderUUID="app_insert_top_bar2"> </micro-app>
-          `: nothing}
-      </span>
-
-    `: nothing}
-    
-     
-    `;
-  }
-
-  handleMouseDown(e: Event) {
-    this.isDragInitiator = true;
-    this.emitEvent(this.isDragInitiator);
-    setDraggingComponentInfo({
-      componentId: this.component?.uuid,
-      blockInfo: {
-        height: this.component.style?.height,
-        width: this.component.style?.width
-      }
-    });
-  }
-
-  handleMouseUp(e: Event) {
-    this.isDragInitiator = false;
-    this.emitEvent(this.isDragInitiator);
-    setDraggingComponentInfo(null);
-  }
-}

package/components/ui/components/wrappers/GenerikWrapper/ResizeWrapper/ResizeWrapper.style.ts

@@ -1,102 +0,0 @@
-import { css } from "lit";
-
-export default css`
-  :host{
-   }
-  .resizer-line-top,
-  .resizer-line-bottom,
-  .resizer-line-right,
-  .resizer-line-left,
-  .resizer-point-left-top,
-  .resizer-point-right-top,
-  .resizer-point-middle-top,
-  .resizer-point-left-bottom,
-  .resizer-point-right-bottom,
-  .resizer-point-middle-bottom {
-    position: absolute;
-    z-index: 4;
-  }
-  .element.hovered .resizer-point-left-top,
-  .element.hovered .resizer-point-right-top,
-  .element.hovered .resizer-point-middle-top,
-  .element.hovered .resizer-point-left-bottom,
-  .element.hovered .resizer-point-right-bottom,
-  .element.hovered .resizer-point-middle-bottom {
-    display: none;
-  }
-  .element.selected .resizer-point-left-top,
-  .element.selected .resizer-point-right-top,
-  .element.selected .resizer-point-middle-top,
-  .element.selected .resizer-point-left-bottom,
-  .element.selected .resizer-point-right-bottom,
-  .element.selected .resizer-point-middle-bottom {
-    background-color: var(--editor-selection-color, #79ade6);
-    border-radius: 2px;
-    width: 6px;
-    height: 6px;
-    z-index: 5;
-    margin-top: -2px;
-  }
-  .resizer-point-middle-top {
-    cursor: n-resize;
-  }
-
-  .resizer-point-right-top {
-    cursor: ne-resize;
-  }
-  .resizer-point-left-top {
-    cursor: nw-resize;
-  }
-
-  .resizer-point-right-bottom {
-    cursor: se-resize;
-  }
-  .resizer-point-left-bottom {
-    cursor: sw-resize;
-  }
-  .resizer-point-middle-bottom {
-    cursor: s-resize;
-  }
-
-
-  .element.bordered .resizer-line-top,
-  .element.bordered .resizer-line-bottom {
-    border-top: 1px dashed var(--editor-selection-color, #b5b5b5);
-  }
-  .element.bordered .resizer-line-right {
-    border-right: 1px dashed var(--editor-selection-color, #b5b5b5);
-    margin-left: 5px;
-  }
-  .element.bordered .resizer-line-left {
-    border-left: 1px dashed var(--editor-selection-color, #b5b5b5);
-  }
-
-
-
-  .element.hovered .resizer-line-top,
-  .element.hovered .resizer-line-bottom {
-    border-top: 1px dashed var(--editor-selection-color, #79ade6);
-  }
-  .element.hovered .resizer-line-right {
-    border-right: 1px dashed var(--editor-selection-color, #79ade6);
-    margin-left: 5px;
-  }
-  .element.hovered .resizer-line-left {
-    border-left: 1px dashed var(--editor-selection-color, #79ade6);
-  }
-
-
-  .element.selected .resizer-line-top,
-  .element.selected .resizer-line-bottom {
-    border-top: 1px solid var(--editor-selection-color, #79ade6);
-  }
-  .element.selected .resizer-line-right {
-    border-right: 1px solid var(--editor-selection-color, #79ade6);
-  }
-  .element.selected .resizer-line-left {
-    border-left: 1px solid var(--editor-selection-color, #79ade6);
-  }
-
-
-
-`;

package/components/ui/components/wrappers/GenerikWrapper/ResizeWrapper/ResizeWrapper.ts

@@ -1,258 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { createRef, type Ref } from "lit/directives/ref.js";
-import { type ComponentElement, ComponentType } from '../../../../../../redux/store/component/component.interface.ts';
-import styles from "./ResizeWrapper.style.ts";
-import { classMap } from "lit/directives/class-map.js";
-import { $pageZoom, $showBorder } from '../../../../../../redux/store/page.ts';
-import { updateComponentAttributes } from '../../../../../../redux/actions/component/updateComponentAttributes.ts';
-import { setResizing } from '../../../../../../redux/actions/page/setResizing.ts';
-import { eventDispatcher } from '../../../../../../utils/change-detection.ts';
-
-@customElement("resize-wrapper")
-export class ResizeWrapper extends LitElement {
-  static styles = styles;
-  
-  // Component type lists
-  onlyWidthResizableComponents = [
-    ComponentType.TextInput, ComponentType.Select, ComponentType.DatePicker, 
-    ComponentType.Button, ComponentType.Checkbox
-  ];
-  notResizableComponents = [];
-  
-  // Properties
-  @property({ type: Object }) component: ComponentElement;
-  @property({ type: Object }) selectedComponent: ComponentElement;
-  @property({ type: Boolean }) isSelected = false;
-  @property({ type: Object }) hoveredComponent: ComponentElement;
-  @property({ type: Object }) inputRef: Ref<Element> = createRef();
-  
-  // State and config
-  @state() styles = { lines: {}, points: {} };
-  minimum_size = 20;
-  @state() original = { width: 0, height: 0, x: 0, y: 0, mouse_x: 0, mouse_y: 0 };
-  @state() slotDOMRect: DOMRect;
-  @state() currentResizer;
-  @state() zoomLevel;
-  @state() showBorder = false;
-  private _debounceComponent: ReturnType<typeof setTimeout>;
-  private _debounceInputRef: ReturnType<typeof setTimeout>;
-
-  constructor() {
-    super();
-    $showBorder.subscribe(showBorder => this.showBorder = showBorder);
-  }
-
-  // Lifecycle methods
-  connectedCallback(): void {
-    super.connectedCallback();
-    eventDispatcher.on("refresh:resize"+this.component.uuid, () => this.firstUpdated());
-    window.addEventListener("mouseup", this.stopResize);
-    $pageZoom.subscribe((pageZoom: string) => {
-      this.zoomLevel = Number(pageZoom);
-      this.firstUpdated();
-    });
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    window.removeEventListener("mouseup", this.stopResize);
-    if (!this.notResizableComponents.includes(this.component.component_type)) {
-      window.removeEventListener("mousemove", this.resize);
-    }
-  }
-
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    
-    if (changedProperties.has("inputRef")) {
-      clearTimeout(this._debounceInputRef);
-      this._debounceInputRef = setTimeout(() => this.observeInputRef(), 200);
-    }
-
-    if (changedProperties.has("component")) {
-      clearTimeout(this._debounceComponent);
-      this._debounceComponent = setTimeout(() => this.firstUpdated(), 200);
-    }
-  }
-
-  // Helpers
-  observeInputRef() {
-    if (this.inputRef?.value) {
-      const observer = new MutationObserver(() => this.firstUpdated());
-      observer.observe(this.inputRef.value, { 
-        attributes: true, childList: true, subtree: true 
-      });
-    }
-  }
-
-  extractNumber(str) {
-    const match = str?.match(/\d+/);
-    return match ? Number(match[0]) : 0;
-  }
-
-  // Resize handlers
-  resize = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    
-    const resizer = this.currentResizer.classList;
-    const el = this.inputRef.value;
-    const { width, height, x, y, mouse_x, mouse_y } = this.original;
-    const newWidth = width + (e.pageX - mouse_x);
-    const newHeight = height + (e.pageY - mouse_y);
-    const invWidth = width - (e.pageX - mouse_x);
-    const invHeight = height - (e.pageY - mouse_y);
-    const canResizeHeight = !this.onlyWidthResizableComponents.includes(this.component.component_type);
-    
-    const isRightBottom = resizer.contains("resizer-point-right-bottom");
-    const isLeftBottom = resizer.contains("resizer-point-left-bottom");
-    const isVertical = resizer.contains("resizer-line-bottom") || 
-                       resizer.contains("resizer-point-middle-top") || 
-                       resizer.contains("resizer-point-middle-bottom");
-    const isLeftTop = resizer.contains("resizer-point-left-top");
-    const isRightTop = resizer.contains("resizer-point-right-top");
-    
-    // Apply width changes
-    if ((isRightBottom || isRightTop) && newWidth > this.minimum_size) {
-      el.style.width = `${newWidth}px`;
-    } else if ((isLeftBottom || isLeftTop) && invWidth > this.minimum_size) {
-      el.style.width = `${invWidth}px`;
-      el.style.left = `${x + (e.pageX - mouse_x)}px`;
-    }
-    
-    // Apply height changes if allowed
-    if (canResizeHeight) {
-      if ((isRightBottom || isLeftBottom || isVertical) && newHeight > this.minimum_size) {
-        el.style.height = `${newHeight}px`;
-      } else if ((isLeftTop || isRightTop) && invHeight > this.minimum_size) {
-        el.style.height = `${invHeight}px`;
-        el.style.top = `${y + (e.pageY - mouse_y)}px`;
-      }
-    }
-
-    setTimeout(() => {
-      this.firstUpdated();
-      setTimeout(() => this.applyResize(), 500);
-    });
-  };
-
-  stopResize = () => {
-    window.removeEventListener("mousemove", this.resize);
-    setTimeout(() => setResizing(false));
-  };
-
-  mouseDown = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setResizing(true);
-    this.currentResizer = e.target;
-    const el = this.inputRef.value;
-    const rect = el.getBoundingClientRect();
-    
-    this.original = {
-      width: el.offsetWidth,
-      height: el.offsetHeight,
-      x: rect.left,
-      y: rect.top,
-      mouse_x: e.pageX,
-      mouse_y: e.pageY
-    };
-
-    if (!this.notResizableComponents.includes(this.component.component_type)) {
-      window.addEventListener("mousemove", this.resize);
-    }
-  };
-
-  // Updates
-  override firstUpdated() {
-    const style = this.component.style || {};
-    const margins = {
-      left: this.extractNumber(style['margin-left']),
-      right: this.extractNumber(style['margin-right']),
-      top: this.extractNumber(style['margin-top']),
-      bottom: this.extractNumber(style['margin-bottom'])
-    };
-     
-    requestAnimationFrame(() => {
-      if (!this.inputRef.value) return;
-      
-      this.slotDOMRect = this.inputRef.value.getBoundingClientRect();
-      const width = this.inputRef.value.offsetWidth + margins.left + margins.right;
-      const height = this.inputRef.value.offsetHeight + margins.top + margins.bottom;
-      const halfWidth = width / 2 - 3;
-      
-      this.styles = {
-        lines: {
-          top: { width: `${width}px` },
-          bottom: { width: `${width}px`, marginTop: `${height}px` },
-          right: { height: `${height}px`, marginLeft: `${width}px` },
-          left: { height: `${height}px` }
-        },
-        points: {
-          leftTop: { marginLeft: "-1px" },
-          rightTop: { marginLeft: `${width - 3}px` },
-          middleTop: { marginLeft: `${halfWidth}px` },
-          leftBottom: { marginTop: `${height - 2}px`, marginLeft: "-1px" },
-          rightBottom: { marginLeft: `${width - 3}px`, marginTop: `${height - 2}px` },
-          middleBottom: { marginLeft: `${halfWidth}px`, marginTop: `${height - 2}px` }
-        }
-      };
-      
-      this.requestUpdate();
-    });
-  }
-
-  applyResize = () => {
-    const el = this.inputRef.value;
-    const { component_type: type, uuid, application_id: appId } = this.component;
-    const styleUpdates = {};
-    
-    switch(type) {
-      case ComponentType.Button:
-        styleUpdates["--nuraly-button-width"] = el.style.width;
-        break;
-      case ComponentType.Icon:
-        styleUpdates["--nuraly-icon-width"] = el.style.width;
-        styleUpdates["--nuraly-icon-height"] = el.style.height;
-        break;
-      case ComponentType.Select:
-        styleUpdates["--nuraly-select-width"] = el.style.width;
-        break;
-      case ComponentType.TextInput:
-      case ComponentType.DatePicker:
-        styleUpdates.width = el.style.width;
-        break;
-      default:
-        styleUpdates.width = el.style.width;
-        styleUpdates.height = el.style.height;
-    }
-    
-    updateComponentAttributes(appId, uuid, "style", styleUpdates);
-  };
-
-  // Render
-  override render() {
-    const { points, lines } = this.styles;
-    const isHovered = this.hoveredComponent?.uuid === this.component.uuid && !this.isSelected;
-    
-    return html`
-      <div class=${classMap({ element: true, hovered: isHovered, bordered: this.showBorder, selected: this.isSelected })}>
-        <div @mousedown=${this.mouseDown} class="resizer-point-left-top" style=${styleMap(points?.leftTop || {})}></div>
-        <div @mousedown=${this.mouseDown} class="resizer-point-right-top" style=${styleMap(points?.rightTop || {})}></div>
-        <div @mousedown=${this.mouseDown} class="resizer-point-middle-top" style=${styleMap(points?.middleTop || {})}></div>
-        <div @mousedown=${this.mouseDown} class="resizer-point-left-bottom" style=${styleMap(points?.leftBottom || {})}></div>
-        <div @mousedown=${this.mouseDown} class="resizer-point-right-bottom" style=${styleMap(points?.rightBottom || {})}></div>
-        <div @mousedown=${this.mouseDown} class="resizer-point-middle-bottom" style=${styleMap(points?.middleBottom || {})}></div>
-        
-        <div class="resizer-line-top" style=${styleMap(lines?.top || {})}></div>
-        <div class="resizer-line-bottom" style=${styleMap(lines?.bottom || {})}></div>
-        <div class="resizer-line-right" style=${styleMap(lines?.right || {})}></div>
-        <div class="resizer-line-left" style=${styleMap(lines?.left || {})}></div>
-        
-        <slot @slotchange="${() => {}}"></slot>
-      </div>
-    `;
-  }
-}

package/components/ui/components/wrappers/PreviewWrapper.ts

@@ -1,28 +0,0 @@
-
-import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-
-@customElement("preview-component-wrapper")
-export class PreviewComponentWrapper extends LitElement {
-    
-  constructor() {
-    super();
-  
-  }
-
-  render() {
-    return html`
-      <style>
-        :host {
-
-        }
-      </style>
-     
-       
-     <slot></slot>
-
-    `;
-  }
-
- 
-}