vue3-free-layout/dist/services/grid.service.d.ts

[vue3+ts]拖动布局，自由拖动，标尺，放大缩小，控件之间的标尺

import DesignService from "@/services/design.service";
import { DesignWidget, Point, Widget } from "@/types";
import { YWidget } from "@/services/synchronize.service";
export interface Props {
    id: string;
    tag: string;
    active: DesignWidget | null;
    rowSpan: number;
    colSpan: number;
    excludeComponents: Array<string>;
    components: Array<DesignWidget>;
}
export interface GridItem extends Pick<Widget, 'x' | 'y' | 'width' | 'height'> {
    row: number;
    col: number;
    active: boolean;
    widget: DesignWidget | null;
}
interface Model {
    gridRowGap: Array<{
        y: number;
        width: number;
    }>;
    gridColGap: Array<{
        x: number;
        height: number;
    }>;
    gridItems: Array<GridItem>;
    height: number;
}
export default class GridService {
    service: DesignService;
    props: Props;
    emit: (event: 'update:active', ...args: any) => void;
    gridWidget: DesignWidget;
    containerRef: HTMLDivElement | null;
    model: Model;
    gridChildWidgets: import("vue").ComputedRef<DesignWidget[]>;
    constructor(service: DesignService, props: Props, emit: (event: 'update:active', ...args: any) => void);
    getGridWidget(): DesignWidget;
    initGridGap(rowSpan: number | string, colSpan: number | string, width: number, height: number): void;
    resetGridWidgets(): void;
    initGridWidgets(): void;
    setGridRowGap(row: number, height: number): void;
    onAddWidget(yWidget: YWidget): void;
    onGridChildDragStart(event: MouseEvent, widget: DesignWidget): void;
    setWidgetPointToGrid(yWidget: YWidget, gridItem: GridItem): void;
    setNotOverlapInGrid(widgets: Array<DesignWidget>): boolean;
    deleteWidget(id: string): void;
    pointInArea(point: Point, area: Pick<Widget, 'x' | 'y' | 'width' | 'height'>): boolean;
    canvasP2GridP(point: Point): {
        x: number;
        y: number;
    };
    gridP2CanvasP(point: Point | DesignWidget): {
        x: number;
        y: number;
    };
    getCenterPoint(widget: DesignWidget): {
        x: number;
        y: number;
    };
}
export {};