import { Component, inject } from '@angular/core';
import { CHART_SERIES_TYPE_OPTIONS, INIT_SETTINGS_CONFIG, TEXT_TYPE_OPTIONS, TABLE_TYPE_OPTIONS, CONTROL_TYPE_OPTIONS } from 'ngx-puzzle/core';
import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
import { generateUUID } from '../../utils';
import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
import { ThyIcon } from 'ngx-tethys/icon';
import { PuzzleCanvasMediatorService } from 'ngx-puzzle/core/services/internal/canvas-mediator.service';
import * as i0 from "@angular/core";
export class NgxPuzzlePanelComponent {
    canvasElement;
    canvasContainer;
    mediator = inject(PuzzleCanvasMediatorService);
    chartList = CHART_SERIES_TYPE_OPTIONS;
    tableList = TABLE_TYPE_OPTIONS;
    textList = TEXT_TYPE_OPTIONS;
    controlList = CONTROL_TYPE_OPTIONS;
    ngOnInit() { }
    ngAfterViewInit() {
        this.canvasElement = document.getElementById('puzzle-canvas');
        this.canvasContainer = document.getElementById('canvas-container');
    }
    onDragEnded(event, type, subType) {
        const canvasEleRect = this.canvasElement.getBoundingClientRect();
        const offsetTop = this.canvasContainer.scrollTop;
        const offsetLeft = this.canvasContainer.scrollLeft;
        const { dropPoint } = event;
        const isInCanvas = dropPoint.x >= canvasEleRect.left &&
            dropPoint.x <= canvasEleRect.right &&
            dropPoint.y >= canvasEleRect.top &&
            dropPoint.y <= canvasEleRect.bottom;
        if (isInCanvas) {
            const config = {
                ...INIT_SETTINGS_CONFIG[type],
                id: generateUUID(),
                subType,
                position: {
                    x: parseInt(`${dropPoint.x - canvasEleRect.left - 25 + offsetLeft}`),
                    y: parseInt(`${dropPoint.y - canvasEleRect.top - 20 + offsetTop}`)
                }
            };
            console.log(`config`, config);
            this.mediator.addComponent(config);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxPuzzlePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NgxPuzzlePanelComponent, isStandalone: true, selector: "ngx-puzzle-panel, puzzle-panel", host: { properties: { "class.ngx-puzzle-panel": "true" } }, ngImport: i0, template: "<div class=\"ngx-puzzle-panel-component\">\n  <h5 class=\"font-size-md font-weight-normal\">\u56FE\u8868</h5>\n  <ul class=\"panel-list\">\n    @for (chart of chartList; track chart.val) {\n      <li cdkDropList>\n        <div class=\"drop-item\" cdkDrag (cdkDragEnded)=\"onDragEnded($event, 'chart', chart.val)\">\n          <thy-icon class=\"panel-icon\" [thyIconName]=\"'chart:' + chart.val\"></thy-icon>\n        </div>\n        <p [thyTooltip]=\"chart.label\">{{ chart.label }}</p>\n      </li>\n    }\n  </ul>\n  <h5 class=\"font-size-md font-weight-normal\">\u6570\u636E\u5C55\u793A</h5>\n  <ul class=\"panel-list\">\n    @for (table of tableList; track table.val) {\n      <li cdkDropList>\n        <div class=\"drop-item\" cdkDrag (cdkDragEnded)=\"onDragEnded($event, 'table', table.val)\">\n          <thy-icon class=\"panel-icon\" [thyIconName]=\"'table:' + table.val\"></thy-icon>\n        </div>\n        <p [thyTooltip]=\"table.label\">{{ table.label }}</p>\n      </li>\n    }\n  </ul>\n  <h5 class=\"font-size-md font-weight-normal\">\u6587\u672C</h5>\n  <ul class=\"panel-list\">\n    @for (text of textList; track text.val) {\n      <li cdkDropList>\n        <div class=\"drop-item\" cdkDrag (cdkDragEnded)=\"onDragEnded($event, 'text', text.val)\">\n          <thy-icon class=\"panel-icon\" [thyIconName]=\"'text:' + text.val\"></thy-icon>\n        </div>\n        <p [thyTooltip]=\"text.label\">{{ text.label }}</p>\n      </li>\n    }\n  </ul>\n  <h5 class=\"font-size-md font-weight-normal\">\u63A7\u4EF6</h5>\n  <ul class=\"panel-list\">\n    @for (control of controlList; track control.val) {\n      <li cdkDropList>\n        <div class=\"drop-item\" cdkDrag (cdkDragEnded)=\"onDragEnded($event, 'control', control.val)\">\n          <thy-icon class=\"panel-icon\" [thyIconName]=\"'control:' + control.val\"></thy-icon>\n        </div>\n        <p [thyTooltip]=\"control.label\">{{ control.label }}</p>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [".ngx-puzzle-panel-component{padding-top:18px}.ngx-puzzle-panel-component .panel-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:0}.ngx-puzzle-panel-component .panel-list li{box-sizing:border-box;min-width:0}.ngx-puzzle-panel-component .panel-list li p{text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-puzzle-panel-component .panel-list .drop-item{width:50px;margin:0 auto}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxPuzzlePanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-puzzle-panel, puzzle-panel', standalone: true, imports: [CdkDropList, CdkDrag, ThyTooltipDirective, ThyIcon], host: {
                        '[class.ngx-puzzle-panel]': `true`
                    }, template: "<div class=\"ngx-puzzle-panel-component\">\n  <h5 class=\"font-size-md font-weight-normal\">\u56FE\u8868</h5>\n  <ul class=\"panel-list\">\n    @for (chart of chartList; track chart.val) {\n      <li cdkDropList>\n        <div class=\"drop-item\" cdkDrag (cdkDragEnded)=\"onDragEnded($event, 'chart', chart.val)\">\n          <thy-icon class=\"panel-icon\" [thyIconName]=\"'chart:' + chart.val\"></thy-icon>\n        </div>\n        <p [thyTooltip]=\"chart.label\">{{ chart.label }}</p>\n      </li>\n    }\n  </ul>\n  <h5 class=\"font-size-md font-weight-normal\">\u6570\u636E\u5C55\u793A</h5>\n  <ul class=\"panel-list\">\n    @for (table of tableList; track table.val) {\n      <li cdkDropList>\n        <div class=\"drop-item\" cdkDrag (cdkDragEnded)=\"onDragEnded($event, 'table', table.val)\">\n          <thy-icon class=\"panel-icon\" [thyIconName]=\"'table:' + table.val\"></thy-icon>\n        </div>\n        <p [thyTooltip]=\"table.label\">{{ table.label }}</p>\n      </li>\n    }\n  </ul>\n  <h5 class=\"font-size-md font-weight-normal\">\u6587\u672C</h5>\n  <ul class=\"panel-list\">\n    @for (text of textList; track text.val) {\n      <li cdkDropList>\n        <div class=\"drop-item\" cdkDrag (cdkDragEnded)=\"onDragEnded($event, 'text', text.val)\">\n          <thy-icon class=\"panel-icon\" [thyIconName]=\"'text:' + text.val\"></thy-icon>\n        </div>\n        <p [thyTooltip]=\"text.label\">{{ text.label }}</p>\n      </li>\n    }\n  </ul>\n  <h5 class=\"font-size-md font-weight-normal\">\u63A7\u4EF6</h5>\n  <ul class=\"panel-list\">\n    @for (control of controlList; track control.val) {\n      <li cdkDropList>\n        <div class=\"drop-item\" cdkDrag (cdkDragEnded)=\"onDragEnded($event, 'control', control.val)\">\n          <thy-icon class=\"panel-icon\" [thyIconName]=\"'control:' + control.val\"></thy-icon>\n        </div>\n        <p [thyTooltip]=\"control.label\">{{ control.label }}</p>\n      </li>\n    }\n  </ul>\n</div>\n", styles: [".ngx-puzzle-panel-component{padding-top:18px}.ngx-puzzle-panel-component .panel-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:0}.ngx-puzzle-panel-component .panel-list li{box-sizing:border-box;min-width:0}.ngx-puzzle-panel-component .panel-list li p{text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ngx-puzzle-panel-component .panel-list .drop-item{width:50px;margin:0 auto}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 