@nuraly/runtime 0.1.0

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

@@ -0,0 +1,95 @@
+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/DragWrapper/DragWrapper.style.ts

@@ -0,0 +1,17 @@
+import { css } from "lit";
+
+export default css`
+  .drop-zone {
+    display: none;
+    border: 2px dashed rgb(110 110 110);
+    z-index: -4;
+    color :red
+  }
+  .drop-zone.before {
+    background-color:aliceblue
+  }
+  .drop-zone.after {
+    background-color: antiquewhite
+  }
+  
+`;

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

@@ -0,0 +1,230 @@
+import { css, html, LitElement, nothing, type PropertyValueMap } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { type ComponentElement, type DraggingComponentInfo } from '../../../../../../redux/store/component/component.interface';
+import { createRef, type Ref } from "lit/directives/ref.js";
+import { setDraggingComponentInfo } from '../../../../../../redux/actions/component/setDraggingComponentInfo';
+import { moveDraggedComponent } from '../../../../../../redux/actions/component/moveDraggedComponent';
+import { $draggingComponentInfo } from '../../../../../../redux/store/component/store';
+
+@customElement("drag-wrapper")
+export class DragWrapper extends LitElement {
+  static styles = [
+    css`
+      .drop-zone {
+        position: relative;
+        opacity: 0;
+        height: 100px;
+        margin: 0;
+        border: 0;
+        border-radius: 4px;
+        transition: all 0.1s ease;
+        position: relative;
+        background-color: transparent;
+        pointer-events: auto;
+        max-width: 100%;
+      }
+      .message {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        color : #3b82f6;
+      }
+
+      .drop-zone.active {
+        opacity: 1;
+        height: 40px;
+        margin: 2px auto;
+        border: 2px dashed #3b82f6;
+        background-color: #eff6ff;
+      }
+
+      .drop-zone.active.target::before {
+        color: #3b82f6;
+        opacity: 1;
+      }
+    `
+  ];
+
+  slotRef: Ref<HTMLInputElement> = createRef();
+  
+  @property({ type: Object })
+  component: ComponentElement;
+  @property({ type: String })
+  message: String;
+  @state()
+  draggingComponentInfo: DraggingComponentInfo;
+
+  @state()
+  isDragging: boolean;
+
+  @state()
+  dropBeforePlaceHolderStyle = {
+    opacity: "0",
+    height: "0px",
+    width: "0px",
+    border: "0",
+    margin: "0",
+    backgroundColor: "transparent",
+    position : "relative"
+  };
+
+  @state()
+  dropAfterPlaceHolderStyle = {
+    opacity: "0",
+    height: "0px",
+    width: "0px",
+    border: "0",
+    margin: "0",
+    backgroundColor: "transparent",
+    position : "relative"
+
+  };
+  draggingSituation: boolean;
+  @property({ type: Object })
+  inputRef: any;
+  currentTimeout: NodeJS.Timeout;
+
+  @property({ type: String })
+  where: string;
+
+  updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
+    changedProperties.forEach((_oldValue, propName) => {
+      if (propName === "draggingComponentInfo") {
+        this.isDragging = Object.keys(this.draggingComponentInfo || {}).length > 0;
+      }
+    });
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    // this.inputRef.value.addEventListener("dragover", this.handleDragOver.bind(this));
+    // this.inputRef.value.addEventListener("dragleave", (e)=>{
+    //   this.handleDragLeave(e);
+    // });
+
+    this.addEventListener("drag-over-component", this.handleDragOver.bind(this));
+    this.addEventListener("drag-leave-component", this.handleDragLeave.bind(this));
+
+    $draggingComponentInfo.subscribe((draggingComponentInfo: DraggingComponentInfo) => {
+      if (draggingComponentInfo) {
+        this.draggingComponentInfo = draggingComponentInfo;
+        this.draggingSituation = true;
+        if (this.draggingComponentInfo?.componentId === this.component?.uuid) {
+          if (
+            this.draggingComponentInfo?.blockInfo &&
+            !this.draggingComponentInfo?.blockInfo?.height
+          ) {
+            const rect = this.inputRef.value?.getBoundingClientRect();
+            this.draggingComponentInfo.blockInfo.height = `${rect.height}px`;
+            //this.draggingComponentInfo.blockInfo.width = `${rect.width}px`;
+            setDraggingComponentInfo({
+              componentId: this.draggingComponentInfo?.componentId,
+              blockInfo: { ...this.draggingComponentInfo.blockInfo }
+            });
+          }
+        }
+      } else {
+        this.draggingSituation = false;
+        this.draggingComponentInfo = null;
+      }
+    });
+  }
+  private pendingLeaveTimeout: number | null = null;
+
+  private handleDragLeave(e: DragEvent) {
+    this.resetDropZones();
+  }
+
+  private resetDropZones() {
+    this.dropBeforePlaceHolderStyle = {
+     
+      opacity: "0",
+      height: "0px",
+      width: "0",
+      border: "0",
+      margin: "0",
+      backgroundColor: "transparent",
+      position : "relative"
+    };
+    this.dropAfterPlaceHolderStyle = {
+      opacity: "0",
+      height: "0px",
+      width: "0",
+      border: "0",
+      margin: "0",
+      backgroundColor: "transparent",
+      position : "relative"
+
+    };
+  }
+
+  private handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (this.pendingLeaveTimeout) {
+      clearTimeout(this.pendingLeaveTimeout);
+      this.pendingLeaveTimeout = null;
+    }
+
+    const rect = this.getBoundingClientRect();
+    const y = e.clientY - rect.top;
+    const midPoint = rect.height / 2;
+    
+    const componentWidth = this.draggingComponentInfo?.blockInfo?.width 
+      ? `${this.draggingComponentInfo.blockInfo.width}`
+      : "100%";
+
+    const activeStyle = {
+      zIndex: "900",
+      opacity: "1",
+      height: "40px",
+      border: "2px dashed #3b82f6",
+      margin: "0",
+      backgroundColor: "#eff6ff",
+      position: "relative",
+    };
+       this.dropBeforePlaceHolderStyle = activeStyle;
+    // this.dropBeforePlaceHolderStyle.width = this.inputRef.value?.style.width ;
+    // this.dropBeforePlaceHolderStyle.height = this.inputRef.value?.style.height;
+  }
+
+ 
+  private handleDropBefore(e: DragEvent) {
+   
+    if(!["before", "after", "inside"].includes(this.where)){
+      this.where = "before";
+    }
+    
+    if (!this.draggingComponentInfo?.componentId) return;
+    
+    moveDraggedComponent(this.component.uuid, this.draggingComponentInfo.componentId, this.where  );
+    setDraggingComponentInfo(null);
+    this.resetDropZones();
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  render() {
+    const isDragInitiator = this.component.uuid === this.draggingComponentInfo?.componentId;
+    const beforeActive = this.dropBeforePlaceHolderStyle.opacity === "1";
+    return html`
+        ${!isDragInitiator
+          ? html`<div
+          @dragenter=${
+            (e: DragEvent) => {
+              e.preventDefault();
+            }
+          }
+         
+              class="drop-zone ${beforeActive ? 'active target' : ''} drop-${this.component.uuid}"
+              style=${styleMap(this.dropBeforePlaceHolderStyle)}
+              @drop=${this.handleDropBefore}
+            ><div class="message">${this.message  ?? "Drop here"}</div></div>`
+          : nothing}
+       `;
+  }
+}

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

@@ -0,0 +1,135 @@
+import { css } from "lit";
+
+const ComponentWrapperStyle = css`
+    
+   :host {
+    
+    }
+
+    ::slotted(*) {
+}
+  .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.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.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);
+    margin-left: 5px;
+  }
+  .element.selected .resizer-line-left {
+    border-left: 1px solid var(--editor-selection-color, #79ade6);
+  }
+
+  .component-name {
+    position: absolute;
+    display: none;
+    z-index: 7;
+    padding: 1px;
+    background: #2395ff;
+    color: white;
+    font-weight: 300;
+    font-size: 14px;
+    cursor: pointer;
+    user-select: none;
+    margin-top: -22px;
+  }
+  .element.selected .component-name {
+    display: block;
+  }
+  
+  @keyframes change-height {
+    0% {
+      height: 500px;
+    }
+    50% {
+      height: 50px;
+    }
+    100% {
+      height: 500px;
+    }
+  }
+
+  .drop-zone {
+    display: none;
+    border: 2px dashed rgb(110 110 110);
+  }
+
+  :host .selected {
+    background-color: var(--editor-selection-color, #79ade6) !important;
+  
+  }
+ .left-resizer {
+  position : absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.left-resizer .text {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  background-color: rgba(0, 0, 0, 0.5); 
+  padding: 5px;
+  border-radius: 3px;
+}
+
+.left-resizer:hover {
+    background : #79ade6
+}
+.left-resizer:hover .text {
+  display: block;
+}
+`;
+
+export default [ComponentWrapperStyle];

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

@@ -0,0 +1,230 @@
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { classMap } from "lit/directives/class-map.js";
+import { createRef, type Ref, ref } from "lit/directives/ref.js";
+import { $draggingComponentInfo, $hoveredComponent } from '../../../../../redux/store/component/store.ts';
+import { type ComponentElement, type DraggingComponentInfo } from '../../../../../redux/store/component/component.interface.ts';
+import { $environment, type Environment, ViewMode } from '../../../../../redux/store/environment.ts';
+import { $context, getVar, setVar } from '../../../../../redux/store/context.ts';
+import styles from "./GenerikWrapper.style.ts";
+
+import "./DragWrapper/DragWrapper.ts";
+import "./ResizeWrapper/ResizeWrapper.ts";
+import "./QuickActionWrapper/QuickActionWrapper.ts";
+import "../ComponentTitle/ComponentTitle.ts";
+import { setDraggingComponentInfo } from '../../../../../redux/actions/component/setDraggingComponentInfo.ts';
+import { updateComponentAttributes } from '../../../../../redux/actions/component/updateComponentAttributes.ts';
+import { setCurrentComponentIdAction } from '../../../../../redux/actions/component/setCurrentComponentIdAction.ts';
+import { setHoveredComponentAction } from '../../../../../redux/actions/component/setHoveredComponentAction.ts';
+import { setContextMenuEvent } from '../../../../../redux/actions/page/setContextMenuEvent.ts';
+
+function safeParseInt(value) {
+  const result = parseInt(value, 10);
+  return isNaN(result) ? 0 : result;
+}
+
+@customElement("generik-component-wrapper")
+export class GenerikComponentWrapper extends LitElement {
+  static styles = styles;
+  @property({ type: Object }) component: ComponentElement;
+  @property({ type: Boolean }) highlighted: boolean;
+  @state() selectedComponent: ComponentElement;
+  @state() hoveredComponent: ComponentElement;
+  @state() displayTitle = true;
+  @state() isDraggable = false;
+  @state() isDragInitiator = false;
+  @state() draggingSituation = false;
+  @state() dragOver = false;
+  @state() draggingComponentInfo: DraggingComponentInfo;
+  @state() environmentMode: ViewMode;
+  @state() wrapperStyle: any = {};
+  @state() showQuickAction = true;
+  @state() currentSelection = [];
+  @state() dropDragPlaceholderStyle: any = {};
+  inputRef: Ref<HTMLInputElement> = createRef();
+  resizerRef: Ref<HTMLDivElement> = createRef();
+  private isResizing = false;
+  private startX = 0;
+  private startMarginLeft = 0;
+
+  constructor() {
+    super();
+    this.addEventListener("contextmenu", (e) => this.onContextMenu(e));
+
+    $environment.subscribe((environment: Environment) => {
+      this.environmentMode = environment.mode;
+      this.wrapperStyle =
+        environment.mode === ViewMode.Edit ? {  } : {};
+    });
+    $hoveredComponent.subscribe((hoveredComponent: ComponentElement) => {
+      this.hoveredComponent = hoveredComponent;
+    });
+    $context.subscribe(() => {
+    });
+    $draggingComponentInfo.subscribe((draggingComponentInfo: DraggingComponentInfo) => {
+      if (draggingComponentInfo) {
+        this.draggingComponentInfo = draggingComponentInfo;
+        this.draggingSituation = true;
+        if (this.draggingComponentInfo?.componentId === this.component?.uuid) {
+          if (
+            this.draggingComponentInfo?.blockInfo &&
+            !this.draggingComponentInfo?.blockInfo?.height
+          ) {
+            const rect = this.inputRef.value?.getBoundingClientRect();
+            this.draggingComponentInfo.blockInfo.height = `${rect.height}px`;
+            this.draggingComponentInfo.blockInfo.width = `${rect.width}px`;
+            setDraggingComponentInfo({
+              componentId: this.draggingComponentInfo?.componentId,
+              blockInfo: { ...this.draggingComponentInfo.blockInfo }
+            });
+          }
+        }
+      } else {
+        this.draggingSituation = false;
+        this.draggingComponentInfo = null;
+      }
+    });
+  }
+
+  override update(changedProperties) {
+    super.update(changedProperties);
+
+
+    if (changedProperties.has("highlighted")) {
+      const currentSelection = getVar("global", "selectedComponents")?.value || [];
+      if (this.highlighted) {
+        setVar("global", "selectedComponents", [...currentSelection, this.component.uuid]);
+      } else {
+        setVar("global", "selectedComponents", currentSelection.filter((uuid) => uuid !== this.component.uuid));
+      }
+    }
+  }
+
+  onContextMenu(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setCurrentComponentIdAction(this.component?.uuid);
+    const rect = this.inputRef.value?.getBoundingClientRect();
+    e.ComponentTop = rect.top;
+    e.ComponentLeft = rect.left;
+    setContextMenuEvent(e);
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    // Find the closest parent "generik-component-wrapper"
+    const closestWrapper = this.closest("generik-component-wrapper");
+    if (closestWrapper) {
+    } else {
+    }
+  }
+
+  render() {
+    return html`
+      <style>
+        :host {
+
+        }
+      </style>
+      <resize-wrapper
+        .isSelected=${this.currentSelection.includes(this.component.uuid)}
+        .component=${{ ...this.component }}
+        .selectedComponent=${{ ...this.selectedComponent }}
+        .hoveredComponent=${{ ...this.hoveredComponent }}
+        .inputRef=${this.inputRef}
+      >
+      </resize-wrapper>
+
+        <drag-wrapper
+          .component=${{ ...this.component }}
+          .draggingComponentInfo=${{ ...this.draggingComponentInfo }}
+          .isDragInitiator=${this.isDragInitiator}
+        >
+          <span
+            draggable=${this.isDragInitiator}
+            class=${classMap({ isDraggable: this.isDragInitiator })}
+            @dragend=${() => this.requestUpdate()}
+            @mousedown=${this.handleMouseDown}
+            @mouseenter=${() => setHoveredComponentAction(this.component)}
+            @mouseleave=${() => setHoveredComponentAction(null)}
+          >
+         
+            <div
+              ${ref(this.inputRef)}
+              class=${classMap({ selected: this.selectedComponent?.uuid === this.component.uuid })}
+            >
+              <div
+                ${ref(this.resizerRef)}
+                class="left-resizer"
+                style=${styleMap({
+                  width: `${safeParseInt(this.component?.style?.marginLeft) + 10}px`,
+                  zIndex: 1000,
+                  height: `${this.inputRef?.value?.offsetHeight}px`,
+                  cursor: "ew-resize"
+                })}
+                @mousedown=${this.startResizing}
+              >
+                <span class="text">${safeParseInt(this.component?.style?.marginLeft)}px</span>
+              </div>
+              <slot></slot>
+            </div>
+            <component-title
+              @dragInit=${(e) => (this.isDragInitiator = e.detail.value)}
+              .component=${{ ...this.component }}
+              .selectedComponent=${{ ...this.selectedComponent }}
+              .hoveredComponent=${{ ...this.hoveredComponent }}
+
+            ></component-title>
+          </span>
+        </drag-wrapper>
+    `;
+  }
+
+  private handleMouseDown(e: MouseEvent) {
+    e.stopPropagation();
+    let currentSelection = getVar("global", "selectedComponents")?.value || [];
+    if (e.metaKey) {
+      currentSelection.push(this.component.uuid);
+    } else if (e.shiftKey) {
+      currentSelection = currentSelection.filter((uuid) => uuid !== this.component.uuid);
+    } else {
+      currentSelection = [this.component.uuid];
+    }
+    setVar("global", "selectedComponents", [...currentSelection]);
+  }
+
+  private startResizing(e: MouseEvent) {
+    this.isResizing = true;
+    this.startX = e.clientX;
+    this.startMarginLeft = safeParseInt(this.component?.style?.marginLeft) || 0;
+    document.addEventListener("mousemove", this.resize);
+    document.addEventListener("mouseup", this.stopResizing);
+  }
+
+  private updateComponentMarginLeft(newMarginLeft: number) {
+    const updatedStyle = {
+      ...this.component.style,
+      marginLeft: `${newMarginLeft}px`
+    };
+    this.component = { ...this.component, style: updatedStyle };
+    updateComponentAttributes(this.component.application_id, this.component.uuid, "style", updatedStyle);
+  }
+
+  private resize = (e: MouseEvent) => {
+    if (this.isResizing) {
+      const deltaX = e.clientX - this.startX;
+      const newMarginLeft = this.startMarginLeft + deltaX;
+      this.updateComponentMarginLeft(newMarginLeft);
+    }
+  };
+
+  private stopResizing = () => {
+    this.isResizing = false;
+    document.removeEventListener("mousemove", this.resize.bind(this));
+    document.removeEventListener("mouseup", this.stopResizing.bind(this));
+    requestAnimationFrame(() => {
+      this.requestUpdate();
+    });
+  };
+}