import { css } from "@node-projects/base-custom-webcomponent";
import { DisplayGridExtension } from './DisplayGridExtension.js';
import { svgAsString } from '../../../../helper/SvgHelper.js';
export const gridExtensionShowOverlayOptionName = 'gridExtensionShowOverlay';
export class DisplayGridExtensionProvider {
    gridColor;
    gridFillColor;
    constructor(gridColor = 'orange', gridFillColor = '#ff944722') {
        this.gridColor = gridColor;
        this.gridFillColor = gridFillColor;
    }
    shouldExtend(extensionManager, designerCanvas, designItem) {
        const display = getComputedStyle(designItem.element).display;
        if (display == 'grid' || display == 'inline-grid')
            return designerCanvas.instanceServiceContainer.designContext.extensionOptions[gridExtensionShowOverlayOptionName] !== false;
        return false;
    }
    getExtension(extensionManager, designerCanvas, designItem) {
        return new DisplayGridExtension(extensionManager, designerCanvas, designItem, this.gridColor, this.gridFillColor);
    }
    static style = css `
    .svg-grid { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: var(--svg-grid-fill-color); }
    .svg-grid-current-cell { stroke: var(--svg-grid-stroke-color); stroke-dasharray: 5; fill: #e3ff4722; }
    .svg-grid-area { font-size: 8px; }
    .svg-grid-gap { stroke: transparent; fill: var(--svg-grid-stroke-color); opacity: 0.3; mask: url(#mask-stripe-grid) }
    .svg-grid-header { fill: var(--svg-grid-fill-color); stroke: var(--svg-grid-stroke-color); }
    .svg-grid-plus-sign { stroke: black; }
  `;
    static svgDefs = svgAsString `
    <pattern id="pattern-stripe-grid" 
      width="4" height="4" 
      patternUnits="userSpaceOnUse"
      patternTransform="rotate(45)">
      <rect width="1" height="4" transform="translate(0,0)" fill="white"></rect>
    </pattern>
    <mask id="mask-stripe-grid">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe-grid)" />
    </mask>`;
}
//# sourceMappingURL=DisplayGridExtensionProvider.js.map