Responsive Widget Props

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

ResponsiveWidgetProps Directive

Description

The ResponsiveWidgetProps directive provides helper methods to access responsive widget properties. This directive is fundamental for adapting widget components to the responsive system, allowing them to have different properties (position, size, styles) for each breakpoint.

Key Features

Simplified access to responsive widget properties
Compatibility with different layout types (standard, grid, flex)
Support for different measurement units (px, %, vw, vh, rem, em, fr)
Automatic conversion between units for internal calculations
Generation of computed CSS styles based on widget configuration

Import

import { ResponsiveWidgetPropsDirective } from '@widgets-editor/shared-ui';

API

Inputs

Name	Type	Default Value	Description
`widget`	`Widget`	-	Widget to process (required)
`activeBreakpoint`	`BreakpointKey`	`'base'`	Current active breakpoint
`parentLayoutType`	`'standard' \| 'grid' \| 'flex'`	`'standard'`	Parent container layout type

Main Methods

Name	Parameters	Return	Description
`getSizeProp`	`(prop: keyof Size): any`	`any`	Gets a size property of the widget for the current breakpoint
`getPositionProp`	`(prop: keyof Position): any`	`any`	Gets a position property of the widget for the current breakpoint
`getStyleProp`	`(prop: keyof WidgetStyles): any`	`any`	Gets a style property of the widget for the current breakpoint
`isResponsive`	`(): boolean`	`boolean`	Checks if the widget is responsive
`getWidgetSize`	`(): Size`	`Size`	Gets the complete size of the widget for the current breakpoint
`getWidgetPosition`	`(): Position`	`Position`	Gets the complete position of the widget for the current breakpoint
`getWidgetStyles`	`(): WidgetStyles`	`WidgetStyles`	Gets the complete styles of the widget for the current breakpoint
`getComputedStyles`	`(): Record<string, string>`	`Record<string, string>`	Gets computed CSS styles based on widget configuration

Utility Methods

Name	Parameters	Return	Description
`isRelativeUnit`	`(value: any): boolean`	`boolean`	Checks if a value uses relative units (%, vw, vh, etc.)
`getUnitType`	`(value: any): string`	`string`	Determines which unit is being used
`convertToPixels`	`(value: string \| number, dimensionType: 'width' \| 'height'): number`	`number`	Converts a value to pixels for internal calculations
`getAnimationKeyframes`	`(animation: Animation): string`	`string`	Generates CSS keyframes for an animation

Implementation in Widgets

Steps to Adapt a Widget to the Responsive System

1. Import the Necessary Components

import {
  ResponsiveWidgetPropsDirective,
  // Other necessary directives...
} from '@widgets-editor/shared-ui';
import {
  BreakpointKey,
  ResponsiveWidgetService,
  // Other models and services...
} from '@widgets-editor/core';

2. Add the Directive to Component Imports

@Component({
  // ...
  imports: [
    // Existing imports...
    ResponsiveWidgetPropsDirective,
  ],
  // ...
})

3. Add the activeBreakpoint Input

export class MyWidgetComponent implements OnInit {
  // Existing inputs...
  @Input() activeBreakpoint: BreakpointKey = 'base';

  // Rest of the component...
}

4. Modify the HTML Template

<div class="widget-container" <!-- Other attributes and events... -->
  libResponsiveWidgetProps [widget]="widget" [activeBreakpoint]="activeBreakpoint"
  #widgetProps="responsiveWidgetProps">

  <!-- Widget content... -->
</div>

5. Replace Direct Property Access

Instead of directly accessing widget properties, use the directive's methods:

<!-- Before -->
[resizeMinWidth]="widget?.size?.minWidth || 20"

<!-- After -->
[resizeMinWidth]="widgetProps.getSizeProp('minWidth') || 20"

Usage Examples

Responsive Styles Calculation

readonly containerStyles = computed(() => {
  // Get size and position using the directive
  const size = this.widgetProps.getWidgetSize();
  const position = this.widgetProps.getWidgetPosition();

  return {
    width: `${size.width}px`,
    height: `${size.height}px`,
    position: 'absolute',
    left: `${position.x}px`,
    top: `${position.y}px`,
    // Other styles...
  };
});

With Different Layout Types

<!-- Grid layout -->
<div class="widget-container"
  libResponsiveWidgetProps 
  [widget]="widget" 
  [activeBreakpoint]="activeBreakpoint"
  [parentLayoutType]="'grid'"
  #widgetProps="responsiveWidgetProps">
  
  <!-- Use getComputedStyles to apply all necessary styles -->
  <div [ngStyle]="widgetProps.getComputedStyles()">
    <!-- Widget content -->
  </div>
</div>

Integration with Other Directives

This directive is designed to work together with other directives such as ResponsiveDraggable and ResponsiveResizable to provide a complete user experience for editing responsive widgets.