SnappingExtension

The SnappingExtension is a Design Extension which provides a public API for computing the possible snapping points for a panels items, centerpoint, and masks. This Extension automatically computes changes as the underlying data changes such that the results remain accurate while an interaction is happening.

Extension Dependencies

The following extensions should be registerd to the Interactive Design Engine in order for this extension to function as intended:

• IDAItemLayoutExtension
  • ItemSelectionExtension
  • ItemPreviewExtension
• ItemSelectionExtension
• PanelLayoutExtension
• ItemTemplateExtension
  • ItemMetadataExtension

In addition, the SnappingExtension may optionally be injected with a designRequirements dependency which can be used to provide the SnappingExtension with Mask data such as Bleed, Trim and Safe masks in order to allow an extension to snap to those snapping lines.

You can provide the extension this dependency by:

    const exampleEngine = new InteractiveDesignEngine(...);
    const exampleDesignRequirements = {...};

    exampleEngine.designExtensionSystem.injector.provide('designRequirements', exampleDesignRequirements);

SnappingExtension Public API

Property	Type	Purpose
snappingThresholdPx	observable number;	The threshold used to calculate the closest snapline for the current selection of items.
setSnappingThreshold	action (number) => void;	A method to set the snappingThresholdPx value.
showSnapLines	observable boolean;	A value which can be used to show or hide the target snap lines.
setShowSnapLines	action (boolean) => void;	A method to set the showSnapLines value.
isEnabled	observable boolean;	Tracks whether or not snapping is enabled or disabled.
setIsEnabled	action (boolean) => void;	A method to set the isEnabled value.
excludedSnapTargets	observable ExcludableSnapTargets;	Tracks which snapping targets should be excluded when computing targetSnapLines.
setExcludeSnapTargets	action (ExcludableSnapTargets) => void;	A method to set the excludedSnapTargets value.
showSnapBox	computed boolean;	Computes the display status of a selection's SnapBox. True when an item has rotation, is text or more than one is selected.
selectedSnapBox	computed ItemSnapBox;	Computes the SnapBox of a selection of items. The SnapBox is an axis aligned bounding box comprised of the selection.
targetSnapLines	computed TargetSnapLines;	Computes the target horizontal and vertical SnapLine values closest to the current selection's snapping points.