Class: SnappingExtension
This extension provides the Snapping Data needed to display the snapbox around selected items as well as show the snap lines which the selection can snap to in the interactive design area.
Dependencies
DesignExtensionSystem, ItemSelectionExtension, PanelLayoutExtension, IDAItemLayoutExtension, ItemTemplateExtension, BaseDesignRequirements, LayoutStore
Hierarchy
BaseExtension↳
SnappingExtension
Constructors
constructor
• new SnappingExtension(designState, extensionSystem, layoutStore, designRequirements?, snappingThresholdPx?)
Parameters
| Name | Type |
|---|---|
designState | DesignState |
extensionSystem | DesignExtensionSystem |
layoutStore | LayoutStore |
designRequirements? | BaseDesignRequirements |
snappingThresholdPx? | number |
Overrides
BaseExtension.constructor
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:96
Properties
designRequirements
• Private Optional designRequirements: BaseDesignRequirements
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:100
designState
• designState: PanelState
Overrides
BaseExtension.designState
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:89
excludeSnapTargets
• excludeSnapTargets: ExcludableSnapTargets = {}
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:94
extensionSystem
• Private extensionSystem: DesignExtensionSystem
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:98
isEnabled
• isEnabled: boolean = true
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:93
layoutStore
• Private layoutStore: LayoutStore
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:99
showSnapLines
• showSnapLines: boolean = false
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:92
snappingThresholdPx
• snappingThresholdPx: number
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:91
inject
▪ Static inject: (string | { isOptional: boolean = true; token: string = 'designRequirements' })[]
Overrides
BaseExtension.inject
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:78
Accessors
centerSnapLines
• Private get centerSnapLines(): SnapLine[]
Provides the center snap lines for the panel.
Returns
SnapLine[]
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:263
itemCenterSnapLines
• Private get itemCenterSnapLines(): SnapLine[]
Combines the center snap lines for all items into both a horizontal and vertical map.
Remarks
SnapLines with the same offset are merged to avoid overlap and selected items are excluded
Returns
SnapLine[]
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:208
itemSnapLines
• Private get itemSnapLines(): SnapLine[]
Combines the snap lines for all items into both a horizontal and vertical map.
Remarks
SnapLines with the same offset are merged to avoid overlap and selected items are excluded
Returns
SnapLine[]
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:187
itemSnappingMap
• Private get itemSnappingMap(): Record<string, ItemSnappingMap>
Provides a record storing the snapping information of every item on the panel. Used to calculate the group of itemSnapLines and itemCenterSnaplines a selection can target.
Returns
Record<string, ItemSnappingMap>
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:133
maskSnapLines
• Private get maskSnapLines(): SnapLine[]
Creates the snap lines for all masks provided into both a horizontal and vertical map.
Remarks
SnapLines with the same offset are merged to avoid overlap. Guides are not included.
Returns
SnapLine[]
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:231
selectedItems
• Private get selectedItems(): (SubpanelState | ItemState<Item>)[]
Returns
(SubpanelState | ItemState<Item>)[]
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:122
selectedSnapBox
• get selectedSnapBox(): undefined | ItemSnapBox
The SnapBox (an Axis Aligned Bounding Box to the panel calculated based on the selection of items)
Returns
undefined | ItemSnapBox
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:338
selectedSnappingLines
• Private get selectedSnappingLines(): Object
Provides the snapping lines for the current selection of items on the panel.
Returns
Object
| Name | Type |
|---|---|
centerSnapLines? | { horizontal: SnapLine ; vertical: SnapLine } |
centerSnapLines.horizontal | SnapLine |
centerSnapLines.vertical | SnapLine |
snapLines? | SnapLines |
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:291
showSnapBox
• get showSnapBox(): boolean
Whether or not to display the SnapBox. (Text, Multi Selection and Rotation will display the SnapBox)
Returns
boolean
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:316
targetSnapLines
• get targetSnapLines(): TargetSnapLines
Outputs the possible Target SnapLines the selected items can snap to. Updates as the selection is moved.
Returns
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:358
unselectedSnappableItems
• Private get unselectedSnappableItems(): (SubpanelState | ItemState<Item>)[]
Returns
(SubpanelState | ItemState<Item>)[]
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:108
Methods
setExcludeSnapTargets
▸ setExcludeSnapTargets(targets): void
A method to disable certain snapping types on the panel.
Parameters
| Name | Type | Description |
|---|---|---|
targets | ExcludableSnapTargets | a configuration object that determines which snap targets to ignore when building targetSnapLines. See ExcludableSnapTargets. |
Returns
void
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:485
setIsEnabled
▸ setIsEnabled(enable): void
A method to enable or disable snapping on the panel.
Parameters
| Name | Type | Description |
|---|---|---|
enable | boolean | a boolean value used to determine if snapping is enabled. |
Returns
void
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:476
setShowSnapLines
▸ setShowSnapLines(show): void
A method to set the showSnapLines value.
Parameters
| Name | Type | Description |
|---|---|---|
show | boolean | a boolean value used to determine if snap lines should be visible in the UI |
Returns
void
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:467
setSnappingThreshold
▸ setSnappingThreshold(px): void
A method to set the snappingThreshold value.
Parameters
| Name | Type | Description |
|---|---|---|
px | number | The pixel value used to calculate when a targetSnapLine is within the threshold to display and snap the selected items. |
Returns
void
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:458
supports
▸ Static supports(state): boolean
Parameters
| Name | Type |
|---|---|
state | DesignState |
Returns
boolean
Overrides
BaseExtension.supports
Defined in
packages/design-engine-react-components/src/extensions/snapping/SnappingExtension.ts:85