artboard-deluxe / dom
dom()
dom(
options):ArtboardPluginDefinition<{applyScalePrecision:boolean;element:HTMLElement;precision:number;restoreStyles:boolean;setInitTransformFromRect:boolean; }>
The DOM plugin adds support for using a DOM element as the artboard.
Parameters
options
applyScalePrecision
boolean
Calculate the applied scale so that the resulting scaled element's visible size is rounded to the target precision.
element
HTMLElement
The artboard element.
precision
number
How precise the translate3d() values should be.
A value of 1 (default) means the only whole pixels are applied (e.g. 20px). A value of 0.5 means the values are rounded to the next 0.5 increment (e.g. 20.5px or 21px). A value of 10 would round to 20px, 30px, 0px, etc.
Note that internally the offset is kept as a floating point number. The precision only defines how the number is rounded when setting the transform style.
restoreStyles
boolean
Whether to restore the original styles after destroying the plugin instance.
setInitTransformFromRect
boolean
If set, the initial offset and scale is set based on the current position of the artboard element in the viewport, relative to the root element.
Use this if you want to determine the initial position of the artboard using CSS, such as grid, flex or using transform. The plugin will override any applied transform styles when it's initialised.
Returns
ArtboardPluginDefinition<{ applyScalePrecision: boolean; element: HTMLElement; precision: number; restoreStyles: boolean; setInitTransformFromRect: boolean; }>