### Basic React Guides Component Usage Example

Source: https://github.com/daybrush/guides/blob/master/packages/react-guides/README.md

Demonstrates how to import and integrate the `Guides` component into a React application. This example shows how to set up a horizontal guide, capture guide changes, and dynamically adjust the guides based on window scroll and resize events, ensuring the ruler remains responsive.

```tsx
import * as React from "react";
import Guides from "@scena/react-guides";

export default class App extends React.Component {
    render() {
        return (<Guides
            ref={e => {
                this.guides = e;
            }}
            type="horizontal"
            onChangeGuides={({ guides }) => {
                console.log(guides);
            }}
        />);
    }
    componentDidMount() {
        this.guides.resize();
        let scrollX = 0;
        let scrollY = 0;

        window.addEventListener("wheel", e => {
            scrollX += e.deltaX;
            scrollY += e.deltaY;

            this.guides.scrollGuides(scrollY);
            this.guides.scroll(scrollX);
        });
        window.addEventListener("resize", () => {
            this.guides.resize();
        });
    }
}
```

--------------------------------

### Install Guides Component via npm

Source: https://github.com/daybrush/guides/blob/master/packages/guides/README.md

Installs the `@scena/guides` package using npm, a package manager for JavaScript, making it available for use in your project.

```sh
$ npm i @scena/guides
```

--------------------------------

### Initialize and Use Guides Component

Source: https://github.com/daybrush/guides/blob/master/packages/guides/README.md

Demonstrates how to import, instantiate, and interact with the `Guides` component in a TypeScript/TSX environment. It shows basic setup with a horizontal guide, event handling for guide changes, and dynamic resizing/scrolling based on window events.

```tsx
import Guides from "@scena/guides";

const guides = new Guides(document.body, {
    type: "horizontal",
}).on("changeGuides", e => {
    console.log(e.guides);
});


let scrollX = 0;
let scrollY = 0;
window.addEventListener("resize", () => {
    guides.resize();
});

window.addEventListener("wheel", e => {
    scrollX += e.deltaX;
    scrollY += e.deltaY;

    guides.scrollGuides(scrollY);
    guides.scroll(scrollX);
});
```

--------------------------------

### Install Guides Component via npm

Source: https://github.com/daybrush/guides/blob/master/README.md

Installs the @scena/guides package using npm, making it available for use in a Node.js or modern web project.

```shell
$ npm i @scena/guides
```

--------------------------------

### Install React Guides via npm

Source: https://github.com/daybrush/guides/blob/master/packages/react-guides/README.md

Installs the `@scena/react-guides` package using npm, adding it to your project's dependencies. This command should be run in your project's root directory.

```sh
npm i @scena/react-guides
```

--------------------------------

### Install Preact Guides via npm

Source: https://github.com/daybrush/guides/blob/master/packages/preact-guides/README.md

This command installs the `preact-guides` package using npm, a package manager for JavaScript, making it available for use in your project.

```sh
$ npm i preact-guides
```

--------------------------------

### Install Svelte Guides via npm

Source: https://github.com/daybrush/guides/blob/master/packages/svelte-guides/README.md

Install the svelte-guides package using npm to add the component to your project. This command adds the necessary dependency to your `node_modules` folder and updates your `package.json`.

```Shell
npm i svelte-guides
```

--------------------------------

### Initialize and Use Guides Component

Source: https://github.com/daybrush/guides/blob/master/README.md

Demonstrates how to import, initialize, and interact with the Guides component in a TypeScript/TSX environment. It shows how to create a horizontal guide, listen for guide changes, and handle window resize and wheel scroll events to update the guides.

```typescript
import Guides from "@scena/guides";

const guides = new Guides(document.body, {
    type: "horizontal",
}).on("changeGuides", e => {
    console.log(e.guides);
});


let scrollX = 0;
let scrollY = 0;
window.addEventListener("resize", () => {
    guides.resize();
});

window.addEventListener("wheel", e => {
    scrollX += e.deltaX;
    scrollY += e.deltaY;

    guides.scrollGuides(scrollY);
    guides.scroll(scrollX);
});
```

--------------------------------

### Global Application Setup and Resize Handling

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/index.html

Contains initial setup like centering the viewer on load and global event listeners for window resize and a reset button. These listeners ensure guides are resized correctly and the viewer can be reset to its center.

```javascript
requestAnimationFrame(() => {
  viewer.scrollCenter();
});
window.addEventListener("resize", () => {
  horizontalGuides.resize();
  verticalGuides.resize();
});
document.querySelector(".reset").addEventListener("click", () => {
  viewer.scrollCenter();
});
```

--------------------------------

### Install ngx-guides Angular Component

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/README.md

This command installs the `ngx-guides` package, the Angular component for drawing grids and infinite scrolling, into your project using npm. It's the first step to integrate the library.

```sh
$ npm i ngx-guides
```

--------------------------------

### Install ngx-guides via npm

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/projects/ngx-guides/README.md

This command installs the ngx-guides package, an Angular component for drawing grids and infinite scrolling, into your project using npm.

```sh
$ npm i ngx-guides
```

--------------------------------

### Install Vue 3 Guides via npm

Source: https://github.com/daybrush/guides/blob/master/packages/vue3-guides/README.md

This command installs the `vue3-guides` package using npm, making it available for use in your project. It's the first step to integrate the component into your Vue 3 application.

```sh
npm i vue3-guides
```

--------------------------------

### Run Development Server

Source: https://github.com/daybrush/guides/blob/master/packages/react-guides/README.md

Starts the local development server for the project. This command typically opens the application in your browser at `http://localhost:3000` and enables live reloading for development.

```sh
npm run start
```

--------------------------------

### Install vue-guides via npm

Source: https://github.com/daybrush/guides/blob/master/packages/vue-guides/README.md

Installs the 'vue-guides' package using npm, making it available for use in your Vue.js project. This command adds the library to your project's dependencies.

```sh
$ npm i vue-guides
```

--------------------------------

### Basic Usage of Preact Guides Component

Source: https://github.com/daybrush/guides/blob/master/packages/preact-guides/README.md

This Preact component demonstrates how to integrate and use the `preact-guides` library. It initializes a horizontal guide, logs guide changes, and handles window resize and scroll events to dynamically update the guides.

```tsx
import { Component, h } from "preact";
import Guides from "preact-guides";

export default class App extends Component {
    render() {
        return (<Guides
            ref={e => {
                this.guides = e;
            }}
            type="horizontal"
            setGuides={guides => {
                console.log(guides);
            }}
        />);
    }
    componentDidMount() {
        this.guides.resize();
        let scrollX = 0;
        let scrollY = 0;

        window.addEventListener("wheel", e => {
            scrollX += e.deltaX;
            scrollY += e.deltaY;

            this.guides.scrollGuides(scrollY);
            this.guides.scroll(scrollX);
        });
        window.addEventListener("resize", () => {
            this.guides.resize();
        });
    }
}
```

--------------------------------

### Initialize Daybrush Guides for Horizontal and Vertical Snapping

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/guides.html

Initializes two instances of the `Guides` component from Daybrush, one for horizontal and one for vertical snapping. It configures snap thresholds, predefined snap positions, and custom display formats for drag positions, logging guide changes to the console. This setup enables interactive alignment and positioning within the UI.

```javascript
const horizontalGuides = new Guides(document.querySelector(".guides.horizontal"), { snapThreshold: 5, snaps: [0, 300, 600], displayDragPos: true, dragPosFormat: v => `${v}px`,
}).on("changeGuides", ({ guides }) => {
  console.log("ho", guides);
  // moveable.horizontalGuidelines = guides;
});

const verticalGuides = new Guides(document.querySelector(".guides.vertical"), {
  type: "vertical",
  snapThreshold: 5,
  snaps: [0, 200, 400],
  displayDragPos: true,
  dragPosFormat: v => `${v}px`,
}).on("changeGuides", ({ guides }) => {
  console.log("ver", guides);
});
```

--------------------------------

### Configure Guides Ruler Units

Source: https://github.com/daybrush/guides/blob/master/packages/guides/README.md

Explains how to configure the unit and zoom level for the Guides component's ruler. It provides examples for common units like pixels, centimeters, and inches, detailing the corresponding 'zoom' and 'unit' property values.

```APIDOC
Ruler Units Configuration:
  Default (1px):
    zoom: 1
    unit: 50 (every 50px)
  1cm (37.7952px):
    zoom: 37.7952
    unit: 1 (every 1cm)
  1in (96px):
    zoom: 96
    unit: 1 (every 1in)

See: https://www.w3schools.com/cssref/css_units.asp
```

--------------------------------

### Run Vue 3 Guides Development Server

Source: https://github.com/daybrush/guides/blob/master/packages/vue3-guides/README.md

This command initiates the development server for the `vue3-guides` project. It allows developers to view the application in a browser, typically at `http://localhost:8080`, and provides live reloading for changes made to the source code.

```sh
npm run serve
```

--------------------------------

### Integrate Svelte Guides Component

Source: https://github.com/daybrush/guides/blob/master/packages/svelte-guides/README.md

Demonstrates how to import and use the Svelte Guides component within a Svelte application. It includes setting up event listeners for window resize and wheel scroll events to dynamically update the guides, and shows how to bind the component instance and handle `changeGuides` events.

```HTML
<script>
import Guides from "svelte-guides";
import { onMount } from "svelte";

let guides;
onMount(() => {
    requestAnimationFrame(() => {
        guides.resize();
    });
    let scrollX = 0;
    let scrollY = 0;
    window.addEventListener("resize", () => {
        guides.resize();
    });
    window.addEventListener("wheel", e => {
        scrollX += e.deltaX;
        scrollY += e.deltaY;

        guides.scrollGuides(scrollY);
        guides.scroll(scrollX);
    });
})
</script>
<div class="guides">
    <Guides
        type="horizontal" bind:this={guides}
        on:changeGuides={({ detail: e }) => {
            console.log(e.guides);
        }}
        />
</div>
```

--------------------------------

### Run Angular development server

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/projects/ngx-guides/README.md

This command starts the Angular development server, typically accessible at `http://localhost:4200`, allowing developers to view and test their application locally with live reloading.

```sh
npm run start
```

--------------------------------

### Basic UI Layout and Styling with CSS

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/guides.html

Defines the fundamental layout and styling for the application's main elements, including root, app, viewer, viewport, and various guide components. It sets up basic positioning, dimensions, colors, and responsiveness for a UI that integrates Daybrush Guides, ensuring proper display and interaction areas.

```css
html, body, #root, .app { position: relative; margin: 0; padding: 0; width: 100%; height: 100%; color: #333; background: #fdfdfd; } .app { transform-style: preserve-3d; } .viewer { position: relative; width: 100%; height: 100%; } .viewport { width: 600px; height: 800px; border: 1px solid #eee; box-sizing: border-box; } .reset { position: absolute !important; background: #333; width: 30px; height: 30px; z-index: 1; border-right: 1px solid #444; border-bottom: 1px solid #444; box-sizing: border-box; cursor: pointer; } .guides { position: absolute !important; top: 0; left: 0; transform: translateZ(1px); } .guides.horizontal { left: 30px; width: calc(100% - 30px); height: 30px !important; } .guides.vertical { top: 30px; height: calc(100% - 30px); width: 30px !important; } .viewer { position: absolute !important; left: 30px; top: 30px; width: calc(100% - 30px); height: calc(100% - 30px); } .viewport { text-align: center; } .viewport p { padding: 0; margin: 0; } .buttons { padding: 5px; } .button { display: inline-block; padding: 10px 20px; border: 2px solid #333; color: #333; font-weight: bold; text-decoration: none; font-size: 14px; letter-spacing: 1px; margin: 2px; } .viewport p.description { text-align: left; padding: 5px 20px; box-sizing: border-box; } .component { display: inline-block; padding: 5px; margin-bottom: 10px; } .component p { padding: 0; margin: 0; } .component .logo { position: relative; width: 150px; height: 150px; } .component img { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; max-height: 100%; transform: translate(-50%, -50%); box-sizing: border-box; } .component a { color: black; font-weight: bold; }
```

--------------------------------

### Include Guides Component via Script Tag

Source: https://github.com/daybrush/guides/blob/master/packages/guides/README.md

Includes the Guides component directly in an HTML file using a `<script>` tag. This method loads the component from a CDN, making it globally available in the browser environment.

```html
<script src="//daybrush.com/guides/release/latest/dist/guides.min.js"></script>
```

--------------------------------

### Include Guides Component via Script Tag

Source: https://github.com/daybrush/guides/blob/master/README.md

Includes the Guides component directly in an HTML file using a script tag, suitable for browser-based projects without a build step.

```html
<script src="//daybrush.com/guides/release/latest/dist/guides.min.js"></script>
```

--------------------------------

### Configure Horizontal Guides with Scroll Integration

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/index.html

Initializes Guides for horizontal snapping. It defines scrollOptions to integrate with InfiniteViewer's scrolling, sets snap thresholds and initial snap points, and updates moveable.horizontalGuidelines on guide changes. It also handles scroll requests to adjust the viewer's scroll position.

```javascript
const scrollOptions = {
  container: () => viewer.getContainer(),
  getScrollPosition: () => {
    return [
      viewer.getScrollLeft(),
      viewer.getScrollTop(),
    ];
  },
  threshold: 200,
  throttleTime: 30,
};
const horizontalGuides = new Guides(document.querySelector(".guides.horizontal"), {
  snapThreshold: 5,
  snaps: [0, 300, 600],
  displayDragPos: true,
  scrollOptions,
  dragPosFormat: v => `${v}px`,
}).on("changeGuides", ({ guides }) => {
  moveable.horizontalGuidelines = guides;
}).on("requestScroll", ({ direction }) => {
  viewer.scrollBy(0, direction[1] * 10);
});
```

--------------------------------

### Integrate Vue Guides Component

Source: https://github.com/daybrush/guides/blob/master/packages/vue-guides/README.md

Demonstrates how to integrate and use the 'vue-guides' component within a Vue.js application. It shows template usage, component registration, event handling for guide changes, and dynamic resizing and scrolling based on window events.

```html
<template>
    <div class="guides">
        <vue-guides
            type="horizontal" ref="guides"
            v-on:changeGuides="onChangeGuides"
            />
    </div>
</template>
```

```javascript
<script>
    import Guides from "vue-guides";

    export default {
        components: {
            "vue-guides": Guides,
        },
        methods: {
            onChangeGuides(e) {
                console.log(e.guides);
            },
        },
        mounted() {
            const guides = this.$refs.guides;
            let scrollX = 0;
            let scrollY = 0;
            guides.resize();

            window.addEventListener("resize", () => {
                guides.resize();
            });
            window.addEventListener("wheel", e => {
                scrollX += e.deltaX;
                scrollY += e.deltaY;
                guides.scroll(scrollX);
                guides.scrollGuides(scrollY);
            });
        },
    };
</script>
```

--------------------------------

### Preact Guides API Interfaces

Source: https://github.com/daybrush/guides/blob/master/packages/preact-guides/README.md

Defines the TypeScript interfaces for `RulerProps`, `GuidesProps`, and `GuidesInterface`, outlining the properties and methods available for configuring and interacting with the Guides component.

```APIDOC
RulerProps:
  type?: "horizontal" | "vertical"
  width?: number
  height?: number
  unit?: number
  zoom?: number
  direction?: "start" | "end"
  style?: IObject<any>
  backgroundColor?: string
  lineColor?: string
  textColor?: string

GuidesProps extends RulerProps:
  className?: string
  setGuides?: (guides: number[]) => any
  rulerStyle?: IObject<any>
  snapThreshold?: number
  snaps?: number[]

GuidesInterface:
  getGuides(): number[]
  scroll(pos: number): void
  scrollGuides(pos: number): void
  loadGuides(guides: number[]): void
  resize(): void
```

--------------------------------

### Configure Vertical Guides with Scroll Integration

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/index.html

Initializes Guides for vertical snapping, similar to horizontal guides. It sets up type, snap thresholds, snap points, and integrates with InfiniteViewer's scrolling, updating moveable.verticalGuidelines and handling scroll requests.

```javascript
const verticalGuides = new Guides(document.querySelector(".guides.vertical"), {
  type: "vertical",
  snapThreshold: 5,
  snaps: [0, 200, 400],
  displayDragPos: true,
  dragPosFormat: v => `${v}px`,
  scrollOptions,
}).on("changeGuides", ({ guides }) => {
  moveable.verticalGuidelines = guides;
}).on("requestScroll", ({ direction }) => {
  viewer.scrollBy(direction[0] * 10, 0);
});
```

--------------------------------

### Svelte Guides Component TypeScript API Interfaces

Source: https://github.com/daybrush/guides/blob/master/packages/svelte-guides/README.md

Defines the core TypeScript interfaces for configuring and interacting with the Svelte Guides component. This includes `RulerProps` for basic ruler properties, `GuidesOptions` for extended component options, and `GuidesInterface` for methods to manage guides programmatically.

```APIDOC
export interface RulerProps {
    type?: "horizontal" | "vertical";
    width?: number;
    height?: number;
    unit?: number;
    zoom?: number;
    direction?: "start" | "end";
    style?: IObject<any>;
    backgroundColor?: string;
    lineColor?: string;
    textColor?: string;
}

export interface GuidesOptions extends RulerProps {
    className?: string;
    setGuides?: (guides: number[]) => any;
    rulerStyle?: IObject<any>;
    snapThreshold?: number;
    snaps?: number[];
    displayDragPos?: boolean;
    dragPosFormat?: (value: number) => string | number;
}

export interface GuidesInterface {
    getGuides(): number[];
    scroll(pos: number): void;
    scrollGuides(pos: number): void;
    loadGuides(guides: number[]): void;
    resize(): void;
}
```

--------------------------------

### MIT License Text for daybrush/guides Project

Source: https://github.com/daybrush/guides/blob/master/packages/vue-guides/README.md

This snippet provides the full text of the MIT License under which the daybrush/guides project is distributed. It details the permissions, limitations, and conditions for using, copying, modifying, and distributing the software.

```Plain Text
MIT License

Copyright (c) 2019 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

--------------------------------

### Vue 3 Guides Component API Reference

Source: https://github.com/daybrush/guides/blob/master/packages/vue3-guides/README.md

This section provides the TypeScript interface definitions for the `RulerProps`, `GuidesOptions`, and `GuidesInterface` used by the Vue 3 Guides component. It details the configurable properties for rulers, additional options for guides, and the methods available for programmatic interaction with the Guides component.

```APIDOC
export interface RulerProps {
    type?: "horizontal" | "vertical";
    width?: number;
    height?: number;
    unit?: number;
    zoom?: number;
    direction?: "start" | "end";
    style?: IObject<any>;
    backgroundColor?: string;
    lineColor?: string;
    textColor?: string;
}

export interface GuidesOptions extends RulerProps {
    className?: string;
    setGuides?: (guides: number[]) => any;
    rulerStyle?: IObject<any>;
    snapThreshold?: number;
    snaps?: number[];
    displayDragPos?: boolean;
    dragPosFormat?: (value: number) => string | number;
}

export interface GuidesInterface {
    getGuides(): number[];
    scroll(pos: number): void;
    scrollGuides(pos: number): void;
    loadGuides(guides: number[]): void;
    resize(): void;
}
```

--------------------------------

### Initialize and Interact with Daybrush Guides Component

Source: https://github.com/daybrush/guides/blob/master/demo/index.html

This snippet demonstrates how to initialize horizontal and vertical Guides components, attach them to specific DOM elements, and configure their display properties. It also shows how to integrate with the Gesto library to handle drag events on the document body, updating the ruler's scroll positions dynamically. A click event listener on a 'box' element is included to reset the scroll positions.

```JavaScript
const guides1 = new Guides(document.querySelector(".ruler.horizontal"), { type: "horizontal", displayDragPos: true, rulerStyle: { left: "30px", width: "calc(100% - 30px)", height: "100%" }, useResizeObserver: true, }); const guides2 = new Guides(document.querySelector(".ruler.vertical"), { type: "vertical", displayDragPos: true, rulerStyle: { top: "30px", height: "calc(100% - 30px)", width: "100%" }, useResizeObserver: true, }); let scrollX = 0; let scrollY = 0; const box = document.querySelector(".box"); new Gesto(document.body).on("dragStart", e => { if (e.inputEvent.target === box || e.inputEvent.target.nodeName === "A") { return false; } }).on("drag", e => { scrollX -= e.deltaX; scrollY -= e.deltaY; guides1.scroll(scrollX); guides1.scrollGuides(scrollY); guides2.scroll(scrollY); guides2.scrollGuides(scrollX); }); box.addEventListener("click", () => { scrollX = 0; scrollY = 0; guides1.scroll(0); guides1.scrollGuides(0); guides2.scroll(0); guides2.scrollGuides(0); });
```

--------------------------------

### Vue Guides Core API Interfaces

Source: https://github.com/daybrush/guides/blob/master/packages/vue-guides/README.md

Defines the TypeScript interfaces for configuring and interacting with the Vue Guides component. This includes properties for ruler customization (`RulerProps`), general guide options (`GuidesOptions`), and methods for programmatic control (`GuidesInterface`).

```APIDOC
RulerProps (Interface):
  type: "horizontal" | "vertical" (optional) - Type of ruler (horizontal or vertical).
  width: number (optional) - Width of the ruler.
  height: number (optional) - Height of the ruler.
  unit: number (optional) - Unit size for the ruler.
  zoom: number (optional) - Zoom level for the ruler.
  direction: "start" | "end" (optional) - Direction of the ruler.
  style: IObject<any> (optional) - Custom CSS style object.
  backgroundColor: string (optional) - Background color of the ruler.
  lineColor: string (optional) - Color of the ruler lines.
  textColor: string (optional) - Color of the ruler text.

GuidesOptions (Interface, extends RulerProps):
  className: string (optional) - CSS class name for the guides component.
  setGuides: (guides: number[]) => any (optional) - Callback to set guides.
  rulerStyle: IObject<any> (optional) - Custom CSS style object for the ruler.
  snapThreshold: number (optional) - Threshold for snapping to guides.
  snaps: number[] (optional) - Array of snap positions.
  displayDragPos: boolean (optional) - Whether to display drag position.
  dragPosFormat: (value: number) => string | number (optional) - Formatter for drag position display.

GuidesInterface (Interface):
  getGuides(): number[] - Returns an array of current guide positions.
  scroll(pos: number): void - Scrolls the guides horizontally.
  scrollGuides(pos: number): void - Scrolls the guides vertically.
  loadGuides(guides: number[]): void - Loads a new set of guide positions.
  resize(): void - Resizes the guides component.
```

--------------------------------

### MIT License Text for daybrush/guides

Source: https://github.com/daybrush/guides/blob/master/README.md

The full text of the MIT License under which the daybrush/guides project is distributed. This license grants broad permissions for use, modification, and distribution, while disclaiming warranties and limiting liability.

```License
MIT License

Copyright (c) 2019 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

--------------------------------

### MIT License Text for daybrush/guides Project

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/README.md

This snippet provides the full text of the MIT License under which the daybrush/guides project is distributed. It details the permissions, limitations, and conditions for using, copying, modifying, merge, publishing, distributing, sublicensing, and/or selling copies of the Software.

```Plaintext
MIT License

Copyright (c) 2019 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

--------------------------------

### Configure Yarn Registry for Development

Source: https://github.com/daybrush/guides/blob/master/README.md

Sets the npm registry for Yarn to the official npm registry, which is a common step when working with monorepos like 'guides' that use Yarn for package management.

```shell
yarn config set registry https://registry.npmjs.org/
```

--------------------------------

### Integrate and Use Vue 3 Guides Component in Vue 3

Source: https://github.com/daybrush/guides/blob/master/packages/vue3-guides/README.md

This snippet demonstrates how to integrate and use the `vue3-guides` component within a Vue 3 application. It illustrates template usage, component registration, handling `changeGuides` events, and managing component lifecycle with `mounted` hooks for dynamic resizing and scrolling based on user interactions.

```html
<template>
    <div class="guides">
        <vue-guides
            type="horizontal" ref="guides"
            v-on:changeGuides="onChangeGuides"
            />
    </div>
</template>
<script>
    import Guides from "vue3-guides";

    export default {
        components: {
            "vue-guides": Guides,
        },
        methods: {
            onChangeGuides(e) {
                console.log(e.guides);
            },
        },
        mounted() {
            const guides = this.$refs.guides;
            let scrollX = 0;
            let scrollY = 0;
            guides.resize();

            window.addEventListener("resize", () => {
                guides.resize();
            });
            window.addEventListener("wheel", e => {
                scrollX += e.deltaX;
                scrollY += e.deltaY;
                guides.scroll(scrollX);
                guides.scrollGuides(scrollY);
            });
        },
    };
</script>
```

--------------------------------

### Integrate ngx-guides in Angular HTML Template

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/README.md

This HTML snippet demonstrates how to embed the `<ngx-guides>` component into an Angular template. It configures a horizontal guide, assigns a reference, and sets up an event listener for `changeGuides`.

```html
<div class="guides">
  <ngx-guides
    type="horizontal" ref="guides"
    v-on:changeGuides="onChangeGuides"
  ></ngx-guides>
</div>
```

--------------------------------

### Initialize InfiniteViewer and Handle Interactions

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/index.html

Sets up InfiniteViewer for an infinite canvas experience with pinch-to-zoom, wheel scroll, and transform capabilities. It includes logic to prevent drag on specific elements (links, moveable elements) and updates guides' scroll and zoom positions based on viewer events.

```javascript
const viewer = new InfiniteViewer(
  document.querySelector(".viewer"),
  document.querySelector(".viewport"),
  {
    useTransform: true,
    usePinch: true,
    useResizeObserver: true,
    pinchThreshold: 50,
    // rangeX: [0, 0],
    // rangeY: [0, 0],
    // rangeOffsetX: [-200, 200],
    // rangeOffsetY: [-200, 200],
    useWheelScroll: true,
    zoomRange: [0.1, 10],
    maxPinchWheel: 10,
  }
).on("dragStart", e => {
  const target = e.inputEvent.target;
  if (
    target.nodeName === "A" ||
    moveable.isMoveableElement(target) ||
    targets.some(t => t === target || t.contains(target))
  ) {
    e.stop();
  }
}).on("dragEnd", e => {
  if (!e.isDrag) {
    selecto.clickTarget(e.inputEvent);
  }
}).on("abortPinch", e => {
  // console.log("abort", e.inputEvent);
  selecto.triggerDragStart(e.inputEvent);
}).on("scroll", e => {
  // console.log("Change SCROLL", e.scrollLeft);
  const zoom = viewer.zoom;
  horizontalGuides.scroll(e.scrollLeft, zoom);
  horizontalGuides.scrollGuides(e.scrollTop, zoom);
  verticalGuides.scroll(e.scrollTop, zoom);
  verticalGuides.scrollGuides(e.scrollLeft, zoom);
}).on("pinch", e => {
  // console.log(e);
  document.querySelector(".description").innerHTML = e.inputEvent.type;
  const zoom = Math.max(0.1, e.zoom);
  verticalGuides.zoom = zoom;
  horizontalGuides.zoom = zoom;
  viewer.zoom = zoom;
});
```

--------------------------------

### Configure ngx-guides in Angular AppModule

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/README.md

This TypeScript code illustrates how to import and include `NgxGuidesModule` within your Angular application's `AppModule`. This essential step makes the `ngx-guides` component available for use throughout your Angular project.

```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgxGuidesModule } from "ngx-guides";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxGuidesModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

--------------------------------

### Full MIT License Text

Source: https://github.com/daybrush/guides/blob/master/packages/guides/README.md

The standard MIT License text, granting broad permissions for software use, modification, and distribution, provided the copyright notice and permission notice are included. It also specifies disclaimers of warranty and limitations of liability.

```text
MIT License

Copyright (c) 2019 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

--------------------------------

### Integrate ngx-guides component in Angular HTML template

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/projects/ngx-guides/README.md

This HTML snippet demonstrates how to embed the `ngx-guides` component into an Angular template. It sets the guide type to 'horizontal', assigns a reference, and binds to the `changeGuides` event.

```html
<div class="guides">
  <ngx-guides
    type="horizontal" ref="guides"
    v-on:changeGuides="onChangeGuides"
  ></ngx-guides>
</div>
```

--------------------------------

### Import NgxGuidesModule into Angular application module

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/projects/ngx-guides/README.md

This TypeScript code shows how to import and configure the `NgxGuidesModule` within an Angular application's root module (`AppModule`). It makes the `ngx-guides` component available for use throughout the application.

```ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { NgxGuidesModule } from "ngx-guides";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxGuidesModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

--------------------------------

### Google Analytics Initialization

Source: https://github.com/daybrush/guides/blob/master/demo/index.html

This snippet provides the standard JavaScript code for initializing Google Analytics (GA4). It sets up the 'dataLayer' array, defines the 'gtag' function to push events to the dataLayer, and configures a specific GA4 property ('G-TRBNXHQ0ZF').

```JavaScript
window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-TRBNXHQ0ZF');
```

--------------------------------

### Configure Selecto for Multi-Target Selection

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/index.html

Initializes Selecto to enable selection of multiple targets within the application. It defines selectable targets, handles drag start conditions to prevent unwanted selections, integrates with viewer scrolling, and updates moveable.target with selected elements.

```javascript
const selecto = new Selecto({
  container: document.querySelector(".app"),
  dragContainer: ".viewer",
  hitRate: 0,
  selectByClick: true,
  selectFromInside: false,
  selectableTargets: ["[data-moveable]"],
  toggleContinueSelect: ["shift"],
  scrollOptions: {
    container: viewer.getContainer(),
    threshold: 30,
    throttleTime: 30,
    getScrollPosition: ({ direction }) => {
      return [
        viewer.getScrollLeft(),
        viewer.getScrollTop(),
      ];
    }
  }
}).on("dragStart", e => {
  const inputEvent = e.inputEvent;
  const target = inputEvent.target;
  if (
    target.nodeName === "A" ||
    (inputEvent.type === "touchstart" && e.isTrusted) ||
    moveable.isMoveableElement(target) ||
    targets.some(t => t === target || t.contains(target))
  ) {
    console.log("?", inputEvent.type);
    e.stop();
  }
}).on("scroll", ({ direction }) => {
  viewer.scrollBy(direction[0] * 10, direction[1] * 10);
}).on("selectEnd", e => {
  targets = e.selected;
  moveable.target = targets;
  if (e.isDragStart) {
    e.inputEvent.preventDefault();
    setTimeout(() => {
      moveable.dragStart(e.inputEvent);
    });
  }
});
```

--------------------------------

### MIT License Text

Source: https://github.com/daybrush/guides/blob/master/packages/vue3-guides/README.md

The complete text of the MIT License, which grants broad permissions for software use, modification, and distribution, provided the copyright notice and permission notice are included. It also disclaims warranties and limits liability.

```License
MIT License

Copyright (c) 2019 Daybrush

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```

--------------------------------

### Initialize Moveable and Bind Helper Events

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/index.html

Sets up the Moveable instance on a viewport element, enabling draggable, resizable, rotatable, and snappable features. It then binds various drag, scale, and rotate events to a MoveableHelper instance for common transformations and logs snap events.

```javascript
let targets = [];
const moveable = new Moveable(document.querySelector(".viewport"), {
  target: [],
  draggable: true,
  resizable: true,
  rotatable: true,
  snappable: true,
  snapCenter: true,
});
const helper = MoveableHelper.create();
moveable
  .on("dragStart", helper.onDragStart)
  .on("drag", helper.onDrag)
  .on("dragGroupStart", helper.onDragGroupStart)
  .on("dragGroup", helper.onDragGroup)
  .on("scaleStart", helper.onScaleStart)
  .on("scale", helper.onScale)
  .on("scaleGroupStart", helper.onScaleGroupStart)
  .on("scaleGroup", helper.onScaleGroup)
  .on("rotateStart", helper.onRotateStart)
  .on("rotate", helper.onRotate)
  .on("rotateGroupStart", helper.onRotateGroupStart)
  .on("rotateGroup", helper.onRotateGroup)
  .on("snap", e => {
    // console.log(e);
  });
```