Draw Rulers And Mange Guidelines – Guides

Preview:

Description:

Guides is a component library for creating customizable rulers and guidelines which facilitate accurate layout design and content placement.

With support for Vanilla JavaScript as well as Angular, React, Vue, Preact, and Svelte, this component can be integrated into any frontend stack.

How to use it:

1. Install and import the Guides component.

# NPM
$ npm i @scena/guides

// ES Module
import Guides from "@scena/guides";
// Browser
<script src="/dist/guides.min.js"></script>

2. Create a ruler on your web app.

const myGuides = new Guides(document.querySelector(".rulerContainer"), {
      
      // or 'vertical'
      type: "horizontal",
      // displays drag position
      displayDragPos: true,
      // additional ruler styles
      rulerStyle: { left: "30px", width: "calc(100% - 30px)", height: "100%" },
      // uses resize observer API
      useResizeObserver: true,
});

3. All possible component options/props.

className: "",
type: "horizontal",
zoom: 1,
style: {},
snapThreshold: 5,
snaps: [],
digit: 0,
displayDragPos: false,
dragPosFormat: v => v,
defaultGuides: [],
lockGuides: false,
showGuides: true,
guideStyle: {},
dragGuideStyle: {},
guidePosStyle: {},
defaultGuidesPos: 0,
// callbacks
onClickRuler: () => { },
onChangeGuides: () => { },
onRequestScroll: () => { },
onDragStart: () => { },
onDrag: () => { },
onDragEnd: () => { },

4. API methods.

• getGuides
• loadGuides
• scroll
• scrollGuides
• resize
• getElement
• getRulerElement
• forceUpdate
• getRulerScrollPos
• getGuideScrollPos
• zoomTo

5. Events.

• changeGuides
• requestScroll
• dragStart
• drag
• dragEnd
• clickRuler

Changelog:

v0.29.2 (07/29/2023)

• bugfix

v0.29.1 (07/24/2023)

• bugfix

v0.29.0 (07/23/2023)

• add guidesZoom prop

v0.27.0 (06/01/2023)

• Bugfixes

v0.26.5 (05/15/2023)

• Bugfixes