import * as d3 from 'd3';
import { globalSetting } from '../global';
import { NetlistRender } from '.';

export class CrossDotRender {
    /**
     * @param {d3.Selection} selection
     * @param {NetlistRender} rootRender
     */
    constructor(selection, rootRender) {
        this.parentSelection = selection;
        this.rootRender = rootRender;
        
        /**
         * @type {BasicD3DataItem[]}
         */
        this.data = [];

        /**
         * @description id 到管理数据项的映射
         * @type {Map<string, BasicD3ManagmentItem[]>}
         */
        this.id2manager = rootRender.id2manager;
        
        this.crossId = 0;
    }

    /**
     * @description 将 cross dot 的数据添加为 d3 数据项目
     */
    addAsD3DataItem(x, y) {        
        this.data.push({
            id: this.crossId,
            x,
            y,
            r: 3.5
        });

        this.crossId ++;
    }

    render() {
        const data = this.data;
        const id2manager = this.id2manager;
        const _this = this;

        let connectionSelections = this.parentSelection.selectAll('circle')
            .data(data)
            .enter()
            .append('circle')
            .attr('cx', data => data.x)
            .attr('cy', data => data.y)
            .attr('width', data => data.width)
            .attr('height', data => data.height)
        
        if (globalSetting.renderAnimation) {
            connectionSelections = connectionSelections
                .transition()
                .duration(1000);
        }

        connectionSelections
            .attr('fill', 'var(--cross-dot-color)')
            .attr('r', d => d.r)
            .each(function (data) {
                const selection = d3.select(this);
                // const manager = _this.createDataManager(selection, data);
            });

        this.selections = connectionSelections;
        return connectionSelections;
    }
}
