@widgetic/editor 3.11.3 → 4.0.1

package/dist/components/editors/PropsEditor.svelte.d.ts

@@ -0,0 +1,62 @@
+/**
+     * STYLES from Widgetic Design System
+     * Note: props-editor.css global rules (body, *) moved to app.css (standalone only).
+     * Component-scoped rules are in the style block at the end of this file.
+     */
+import "@widgetic/design-system/styles";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
+    /**
+         * EXTERNAL COMPONENT PROPS
+         */ class?: string;
+    style?: string;
+    width?: string;
+    height?: string;
+    designSchema?: any;
+    contentSchema?: any | undefined;
+    itemTemplate?: any;
+    designTabTitle?: string;
+    contentTabTitle?: string;
+    defaultTab?: "design" | "content";
+    defaultOpen?: boolean;
+    showDragHandle?: boolean;
+    enableDrag?: boolean;
+    initialDesignValues?: Record<string, any>;
+    initialContentValues?: Record<string, any>;
+    updateDesignValue?: (propertyId: string, value: any) => void;
+    setPosition?: (left: number, top: number) => void;
+    getPosition?: () => {
+        left: number;
+        top: number;
+    };
+}, {
+    updated: CustomEvent<any>;
+    propertyChange: CustomEvent<any>;
+    goToItem: CustomEvent<any>;
+    contentItemsChanged: CustomEvent<any>;
+    move: CustomEvent<any>;
+    moveEnd: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    updateDesignValue: (propertyId: string, value: any) => void;
+    setPosition: (left: number, top: number) => void;
+    getPosition: () => {
+        left: number;
+        top: number;
+    };
+}, string>;
+type PropsEditor = InstanceType<typeof PropsEditor>;
+export default PropsEditor;

package/dist/components/editors/props-editor.css

@@ -0,0 +1,73 @@
+/* Props Editor custom styles — component-level rules only.
+ * Global page rules (body, *, focus) live in app.css (standalone only). */
+
+/* Drag Handle specific styles */
+/* When header exists, only show on header hover */
+.header-hover-area:hover .drag-handle-container {
+  opacity: 1 !important;
+}
+
+/* When no header exists, show on entire container hover */
+.props-editor-container:not(:has(.header-hover-area)) {
+  position: relative;
+}
+
+.props-editor-container:not(:has(.header-hover-area)):hover .drag-handle-container {
+  opacity: 1 !important;
+}
+
+.drag-handle-container {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.widgetic-colors .drag-handle svg {
+  color: hsl(var(--grey2)) !important;
+  transition: color 0.2s ease !important;
+}
+
+.widgetic-colors .drag-handle:hover svg {
+  color: hsl(var(--grey3)) !important;
+}
+
+/* GENERAL WIDGETIC COLORS RULES in all EDITOR */
+/* Ensure buttons don't change background on hover */
+.widgetic-colors button.bg-white:hover {
+  background-color: white !important;
+}
+
+/* Ensure proper button text alignment */
+.widgetic-colors button span {
+  line-height: 1;
+}
+
+/* Override button hover states in all contexts */
+.widgetic-colors button.bg-white {
+  background-color: white !important;
+}
+
+.widgetic-colors button.bg-white:hover {
+  background-color: white !important;
+}
+
+/* General Icons color states */
+.widgetic-colors button svg {
+  color: hsl(var(--grey5));
+}
+
+.widgetic-colors button:hover svg {
+  color: hsl(var(--grey7));
+}
+
+.design-tab-content[data-state="active"]{
+  display: block;
+  margin-top: var(--has-both-schemas, 1rem);
+}
+
+.props-editor-container:has(.tabs-header) {
+  --has-both-schemas: 1rem;
+}
+
+.content-items-wrapper {
+  padding-top: 1rem;
+}

package/dist/components/ic/AngleInputController.svelte

@@ -0,0 +1,276 @@
+<!-- 
+ * AngleInputController
+ * 
+ * Extends NumberInputController to add a visual circular indicator for angle selection.
+ * Maintains all number input functionality while adding drag-to-rotate capability.
+ * 
+ * Features:
+ * - Visual angle selection via draggable indicator
+ * - Full number input functionality from parent
+ * - Touch and mouse support
+ * - Smooth transitions and visual feedback
+ -->
+
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { Button, Input } from '@widgetic/design-system/components';
+  import InputControllerHeader from './InputControllerHeader.svelte';
+  import NumberControls from './NumberControls.svelte';
+  import type { InputControllerConfig } from './index';
+
+  export let label: string;
+  export let value: number = 0;
+  export let onChange: (newValue: number) => void;
+  export let config: InputControllerConfig = {};
+  export let helpText: string | undefined = undefined;
+  export let onFocus: () => void = () => {};
+
+  // Circle indicator state
+  let isDragging = false;
+  let circleContainer: HTMLDivElement;
+  let inputValue = value.toString();
+  let startAngle = 0;
+  let startValue = 0;
+
+  // Configuration with defaults
+  $: min = config.min || 0;
+  $: max = config.max || 360;
+  $: step = config.step || 1;
+
+  // Keep input value in sync with value prop
+  $: {
+    if (value.toString() !== inputValue) {
+      inputValue = value.toString();
+    }
+  }
+
+  function handleInputChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const newValue = parseInt(input.value);
+    
+    if (!isNaN(newValue)) {
+      // For manual input, clamp to max (359)
+      let boundedValue;
+      if (max === 360) {
+        // If max is 360, convert 360 to 0 and clamp higher values to 359
+        if (newValue >= 360) {
+          boundedValue = 359;
+        } else {
+          boundedValue = Math.max(min, Math.min(359, newValue));
+        }
+      } else {
+        // For other max values, clamp normally
+        boundedValue = Math.max(min, Math.min(max, newValue));
+      }
+      
+      // Snap to step
+      boundedValue = Math.round(boundedValue / step) * step;
+      
+      value = boundedValue;
+      onChange(boundedValue);
+    }
+    
+    inputValue = value.toString();
+  }
+
+  /**
+   * Calculates the angle between two points relative to a center point
+   */
+  function calculateAngle(x: number, y: number, centerX: number, centerY: number): number {
+    // Calculate angle and convert to degrees, with 0 pointing up
+    const angle = Math.atan2(x - centerX, -(y - centerY)) * (180 / Math.PI);
+    // Normalize to 0-360 range
+    return (angle + 360) % 360;
+  }
+
+  /**
+   * Updates angle based on mouse/touch position
+   */
+  function updateAngle(clientX: number, clientY: number, shouldSnapToPosition: boolean = false) {
+    if (!circleContainer || (!isDragging && !shouldSnapToPosition)) return;
+
+    const rect = circleContainer.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    // Calculate current angle from cursor position
+    const currentAngle = calculateAngle(clientX, clientY, centerX, centerY);
+    
+    if (shouldSnapToPosition) {
+      // Directly snap to the clicked position
+      let newValue = Math.round(currentAngle / step) * step;
+      if (newValue !== value) {
+        value = newValue;
+        onChange(newValue);
+        // Update the start values for subsequent dragging
+        startAngle = currentAngle;
+        startValue = newValue;
+      }
+    } else {
+      // Normal dragging behavior
+      // Calculate the difference from the start angle
+      let angleDiff = currentAngle - startAngle;
+      
+      // Normalize the difference to handle the 360/0 boundary
+      if (angleDiff < -180) angleDiff += 360;
+      if (angleDiff > 180) angleDiff -= 360;
+      
+      // Calculate new value based on the starting value and angle difference
+      let newValue = startValue + angleDiff;
+      
+      // Handle wrapping around
+      if (newValue < 0) newValue += 360;
+      if (newValue >= 360) newValue -= 360;
+      
+      // Snap to step
+      newValue = Math.round(newValue / step) * step;
+      
+      // Update if changed
+      if (newValue !== value) {
+        value = newValue;
+        onChange(newValue);
+      }
+    }
+  }
+
+  function handleMouseDown(event: MouseEvent) {
+    if (!circleContainer) return;
+
+    // First snap to the clicked position
+    updateAngle(event.clientX, event.clientY, true);
+
+    isDragging = true;
+    onFocus();
+
+    const rect = circleContainer.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    // Store the starting angle from cursor position
+    startAngle = calculateAngle(event.clientX, event.clientY, centerX, centerY);
+    // Store the current value as the starting value
+    startValue = value;
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    if (!isDragging) return;
+    event.preventDefault();
+    updateAngle(event.clientX, event.clientY);
+  }
+
+  function handleMouseUp() {
+    isDragging = false;
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  }
+
+  function handleTouchStart(event: TouchEvent) {
+    if (!circleContainer) return;
+
+    const touch = event.touches[0];
+    // First snap to the touched position
+    updateAngle(touch.clientX, touch.clientY, true);
+
+    isDragging = true;
+    onFocus();
+    event.preventDefault();
+
+    const rect = circleContainer.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    // Store the starting angle from touch position
+    startAngle = calculateAngle(touch.clientX, touch.clientY, centerX, centerY);
+    // Store the current value as the starting value
+    startValue = value;
+  }
+
+  function handleTouchMove(event: TouchEvent) {
+    if (!isDragging) return;
+    event.preventDefault();
+    const touch = event.touches[0];
+    updateAngle(touch.clientX, touch.clientY);
+  }
+
+  function handleTouchEnd(event: TouchEvent) {
+    event.preventDefault();
+    isDragging = false;
+  }
+
+  function handleClick(adjustment: number) {
+    let newValue = value + adjustment;
+    if (newValue >= 360) newValue -= 360;
+    if (newValue < 0) newValue += 360;
+    value = newValue;
+    onChange(newValue);
+  }
+
+  onDestroy(() => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  });
+</script>
+
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader {label} {helpText} />
+    </div>
+    
+    <div class="absolute right-0 h-[48px] flex items-center">
+      <div class="flex items-center justify-end gap-2">
+        <!-- Circle Indicator -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div 
+          bind:this={circleContainer}
+          class="relative w-[48px] h-[48px] rounded-full bg-grey1 border border-grey2 cursor-grab active:cursor-grabbing flex items-center justify-center transition-colors duration-200 hover:border-forest-green group"
+          on:mousedown={handleMouseDown}
+          on:touchstart={handleTouchStart}
+          on:touchmove={handleTouchMove}
+          on:touchend={handleTouchEnd}
+        >
+          <!-- Indicator Line -->
+          <!-- svelte-ignore element_invalid_self_closing_tag -->
+          <div 
+            class="absolute top-1/2 left-1/2 w-[2px] h-[20px] bg-grey5 origin-bottom -translate-x-1/2 pointer-events-none transition-colors duration-200 group-hover:bg-grey7"
+            class:bg-grey7={isDragging}
+            style="transform: translate(-50%, -100%) rotate({value}deg)"
+          />
+          <!-- Visual Guide -->
+          <!-- svelte-ignore element_invalid_self_closing_tag -->
+          <div 
+            class="absolute inset-0 rounded-full border-2 border-transparent"
+            class:border-grey3={isDragging}
+          />
+        </div>
+
+        <!-- Number Controls -->
+        <NumberControls
+          {value}
+          {onChange}
+          {min}
+          {max}
+          {step}
+          {onFocus}
+          wrapAround={true}
+          suffix="°"
+          width="129px"
+          customInputClass="text-center"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  /* Prevent text selection during dragging */
+  .cursor-grab {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+  }
+</style> 

package/dist/components/ic/AngleInputController.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { InputControllerConfig } from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AngleInputController: $$__sveltets_2_IsomorphicComponent<{
+    label: string;
+    value?: number;
+    onChange: (newValue: number) => void;
+    config?: InputControllerConfig;
+    helpText?: string | undefined;
+    onFocus?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AngleInputController = InstanceType<typeof AngleInputController>;
+export default AngleInputController;