/*!
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the Microsoft Live Share SDK License.
 */
import React from "react";
import { IUseLiveCanvasOptionalProps, IUseLiveCanvasResults } from "../types/index.js";
/**
 * React hook for using a Live Share Canvas `LiveCanvas` and `InkingManager`.
 *
 * @remarks
 * Use this hook to set up an `LiveCanvas` object, which is used for collaborative inking. It takes several input parameters, including a unique key,
 * a reference to a canvas element, and various settings for the inking tool, brush, and canvas offset and scale.
 * This hook can only be used in a child component of `<LiveShareProvider>` or `<AzureProvider>`.
 *
 * @param uniqueKey the unique key for the `LiveCanvas`. If one does not yet exist, a new one.
 * @param canvasElementRef the HTML div element ref or document ID that `InkingManager` will use for canvas-based collaboration.
 * @param props Optional. Other optional props.
 * @param props.active Optional. Stateful boolean that will activate/de-activate `InkingManager` accordingly.
 * @param props.tool Optional. Stateful enum for what tool to use in the `InkingManager`.
 * @param props.lineBrush Optional. Stateful lineBrush object for the selected lineBrush options to use in `InkingManager`.
 * @param props.offset Optional. Stateful offset point to use in the `InkingManager`. Gets the viewport offset. Defaults to 0,0.
 * @param props.scale Optional. Stateful scale number to use in the `InkingManager`. Defaults to 1 and must be greater than 0.
 * @param props.referencePoint Optional. Stateful reference point enum to use in the `InkingManger`. Defaults to "center".
 * @param props.isCursorShared Optional. Stateful boolean flag for whether cursor should be shared in `LiveCanvas`. Defaults to false.
 * @param props.localUserPictureUrl Optional. url string for the local user to display alongside their cursor. Defaults to undefined.
 * @param props.node Optional. A Fluid `LiveCanvasTree` `TreeNode` instance to swap out the underlying storage solution for strokes.
 * To learn more, look at Fluid's [SharedTree](https://fluidframework.com/docs/data-structures/tree/) documentation.
 * @param allowedRoles Optional. The user roles that are allowed to start/stop/pause the timer.
 *
 * @returns `IUseLiveCanvasResults` object that contains the `liveCanvas` data object and `inkingManager`.
 *
 * @example
 ```jsx
import { useLiveCanvas } from "@microsoft/live-share-react";
import { InkingTool } from "@microsoft/live-share-canvas";
import { useRef } from "react";

// Unique identifier that distinguishes this useLiveCanvas from others in your app
const UNIQUE_KEY = "CUSTOM-LIVE-CANVAS";

// Example component
export function ExampleLiveCanvas() {
    const liveCanvasRef = useRef(null);
    const { liveCanvas, inkingManager } = useLiveCanvas(
        "CUSTOM-LIVE-CANVAS",
        liveCanvasRef,
    );

    return (
        <div style={{ position: "absolute"}}>
            <div
                ref={liveCanvasRef}
                // Best practice is to not define inline styles
                style={{ width: "556px", height: "224px" }}
            />
            {!!liveCanvas && (
                <div>
                    <button
                        onClick={() => {
                            inkingManager.tool = InkingTool.pen;
                        }}
                    >
                        {"Pen"}
                    </button>
                    <button
                        onClick={() => {
                            inkingManager.tool = InkingTool.laserPointer;
                        }}
                    >
                        {"Laser pointer"}
                    </button>
                </div>
            )}
        </div>
    );
};
 ```
 */
export declare function useLiveCanvas(uniqueKey: string, canvasElementRef: React.RefObject<HTMLElement | null> | string, props?: IUseLiveCanvasOptionalProps): IUseLiveCanvasResults;
//# sourceMappingURL=useLiveCanvas.d.ts.map