slot.js

/**
 * Author: kailash kumar
 * define seating chart
 */
import {
    Raphael,
    Paper,
    Set,
    Circle,
    Ellipse,
    Image,
    Rect,
    Text,
    Path,
    Line,
    Element
} from 'react-raphael';
import {
    genAlphabetsByNo,
    genNumByValue
} from './utils';



// Raphael.fn.CheckBox = function (a) {
//     a = void 0 == a ? {} : a;
//     var b = void 0 == a.x ? 100 : a.x,
//         d = void 0 == a.y ? 100 : a.y,
//         c = void 0 == a.dim ? 20 : a.dim,
//         f = void 0 == a.isChecked ? !1 : a.isChecked,
//         e = void 0 == a.rectAttrs ? {} : a.rectAttrs;
//     a = void 0 == a.pathAttrs ? {} : a.pathAttrs;
//     e = this.rect(b, d, c, c).attr({
//         "stroke-width": 2,
//         fill: "#fff"
//     }).attr(e);
//     e.x = b;
//     e.y = d;
//     e.dim = c;
//     e.isChecked = f;
//     e.path = this.path([
//         ["M", e.x + 0.2 * e.dim, e.y + 0.4 * e.dim],
//         ["l", 0.2 * e.dim, 0.3 * e.dim],
//         ["l", 0.4 * e.dim, -0.5 * e.dim]
//     ]).attr({
//         "stroke-width": 3
//     }).attr(a);
//     e.isChecked || e.path.hide();
//     e.cover =
//         this.rect(b, d, c, c).attr({
//             fill: "#000",
//             opacity: 0,
//             cursor: "pointer"
//         });
//     e.cover.checkBox = e;
//     e.cover.click(function () {
//         this.checkBox.check(!this.checkBox.isChecked);
//         this.checkBox.onChange()
//     });
//     e.onChange = function () {};
//     e.check = function (a) {
//         void 0 == a || a ? (this.path.show(), this.isChecked = !0) : (this.path.hide(), this.isChecked = !1)
//     };
//     e.uncheck = function () {
//         this.check(!1)
//     };
//     return e
// };



const seatingConfig = {
    radius: 12,
    seatSpace: 35,
    rowNo: 5,
    columnNo: 5,
    rowStart: genAlphabetsByNo(5, 'asc'),
    tableRadius: 100,
    tableSeats: 16
};

const TABLE_TYPE_SECTION = "table";
const SECTION_TYPE = "section";

let dragging = false;
let ox = 0;
let oy = 0;

const textStyle = {
    fill: "#696969",
    "font-size": "14px"
};
const circleStyle = {
    "stroke": "#c0c0c0",
    "fill": "#fff"
};
const rectDefaultStyle = {
    "stroke-width": '0px',
    fill: 'transparent'
};
const rectOnClickStyle = {
    stroke: "#0057ff",
    "stroke-width": '2px',
    cursor: 'move',
    "stroke-dasharray": "--",
};
const rectHoverStyle = {
    stroke: "#0057ff",
    "stroke-width": '2px',
    cursor: 'move',
    "stroke-dasharray": "--",
    // "stroke-dasharray": "100 20 0 20"
};
const rectUnHoverStyle = {
    stroke: "transparent",
    "stroke-width": '0px'
};
const tableCircleStyle = {
    "stroke": "#c0c0c0",
    "fill": "transparent"
};


/**
 * create default section for initial seating chart
 */
export const createDefaultSection = (rows, columns, config) => {
    const arr = [];
    let axisX = 9800;
    const seatSpace = config.seatSpace || seatingConfig.seatSpace;
    const radius = config.radius || seatingConfig.radius;
    for (let i = 0; i < rows; i++) {
        let axisY = 9700;
        axisX = axisX + seatSpace;
        let seats = [];
        arr.push({
            id: i,
            label: 'A',
            x: axisX,
            y: axisY
        });
        for (let j = 0; j < columns; j++) {
            axisY = axisY + seatSpace;
            seats.push({
                is_booked: false,
                hold: false,
                id: j,
                label: "AA",
                restricated_view: false,
                x: axisX,
                y: axisY,
                radius: radius
            })
        }
        arr[i].seats = seats;
    }
    return arr;
}

/**
 * create default table 
 */
const createTableSection = (cx, cy, r, slices) => {
    let fromAngle, fromCoordX, fromCoordY, toAngle;
    const seats = [];
    const arr = [];
    arr.push({
        id: 1,
        label: 'A',
        x: cx,
        y: cx,
        radius: r
    });
    for (var i = 0; i < slices; i++) {
        fromAngle = i * 360 / slices;
        toAngle = (i + 1) * 360 / slices;
        fromCoordX = cx + (r * Math.cos(fromAngle * Math.PI / 180));
        fromCoordY = cy + (r * Math.sin(fromAngle * Math.PI / 180));
        seats.push({
            is_booked: false,
            hold: false,
            id: i,
            label: "AA",
            restricated_view: false,
            x: fromCoordX,
            y: fromCoordY,
            radius: 10
        })
    }
    arr[0].seats = seats;
    return arr;
}


function clickFunction(e) {
    console.log(e, this, "Click")
    this.attr({
        fill: 'red'
    })
}


/**
 * initial paper set builder
 * 
 */
export const initialBuildPaperSet = (rows, listner) => {
    const paper = Raphael('seating-chart');

    // const chartSection = createDefaultSection(seatingConfig.rowNo, seatingConfig.columnNo, { ...seatingConfig });
    // const chartTable = createTableSection(9700, 9700, seatingConfig.tableRadius, seatingConfig.tableSeats);
    console.log("chart table xy ", rows);
    rows.section_floors[0].sections.forEach((ss, index) => {
        const sectionList = ss.sub_section || [];
        const section = paper.set();
        let masterRect = '';
        let sectionBox = '';
        let masterSection = paper.set();

        if (ss.type === SECTION_TYPE) {
            sectionList.map((row, parentIndex) => {
                if (parentIndex === 0) {
                    section.push(paper.text(((sectionList[sectionList.length - 1].x - row.y) / 2 / 2) + row.y, row.x, ss.label).attr(textStyle));
                }

                row.seats.map((seat, childIndex) => {
                    let label = genAlphabetsByNo(row.seats.length, 'asc')[parentIndex];
                    let seatX = seat.y; // For alpa Text
                    let seatY = seat.x; // For alpa Text

                    console.log('X:', seatX, "Y:", seatY);
                    if (childIndex === 0) {
                        section.push(paper.text(seatY - seatingConfig.seatSpace, seatX, label).attr(textStyle))
                    } else if (childIndex === row.seats.length - 1) {
                        section.push(paper.text(seatY + seatingConfig.seatSpace, seatX, label).attr(textStyle))
                    }
                    section.push(paper.circle(seat.x, seat.y, seat.radius).attr(row.id === 1 ? {
                        ...circleStyle,
                        "fill": 'red'
                    } : circleStyle).click(clickFunction));

                    if (row.id === 1) {

                    }



                })
            });
            sectionBox = section.getBBox();
            masterRect = paper.rect(sectionBox.x - (seatingConfig.seatSpace / 2), sectionBox.y - (seatingConfig.seatSpace / 2), sectionBox.width + seatingConfig.seatSpace, sectionBox.height + seatingConfig.seatSpace, 10).attr({
                stroke: "transparent",
                "stroke-width": '50px'
            });

        } else if (ss.type === TABLE_TYPE_SECTION) {

            sectionList.map((row, parentIndex) => {
                if (parentIndex === 0) {
                    section.push(paper.text(((sectionList[sectionList.length - 1].x - row.x) / 2) + row.x, row.y, ss.label).attr(textStyle));
                    section.push(paper.circle(((sectionList[sectionList.length - 1].x - row.x) / 2) + row.x, row.y, seatingConfig.tableRadius - (seatingConfig.seatSpace / 2)).attr(tableCircleStyle).toBack());
                }
                row.seats.map((seat, childIndex) => {
                    let label = genNumByValue(row.seats.length, 'asc')[childIndex];
                    if (parentIndex === 0) {
                        section.push(paper.text(seat.x, seat.y, label).attr(textStyle))
                    } else if (parentIndex === sectionList.length - 1) {
                        section.push(paper.text(seat.x, seat.y, label).attr(textStyle))
                    }
                    section.push(paper.circle(seat.x, seat.y, seat.radius).attr(tableCircleStyle).toBack());
                })
            });
            sectionBox = section.getBBox();
            masterRect = paper.rect(sectionBox.x - (seatingConfig.seatSpace / 2), sectionBox.y - (seatingConfig.seatSpace / 2), sectionBox.width + seatingConfig.seatSpace, sectionBox.height + seatingConfig.seatSpace, 10).attr({
                stroke: "transparent",
                "stroke-width": '50px'
            });
        }


        const rect = paper.rect(sectionBox.x - (seatingConfig.seatSpace / 2), sectionBox.y - (seatingConfig.seatSpace / 2), sectionBox.width + seatingConfig.seatSpace, sectionBox.height + seatingConfig.seatSpace, 10).attr(rectDefaultStyle);

        rect.hover((e) => {
            rect.attr({
                ...rectHoverStyle
            });
        });

        masterRect.hover((e) => {
            rect.attr({
                ...rectDefaultStyle
            });

            // rect.unclick();
            // section.unclick();
            // masterSection && masterSection.undrag();
            // rect.undrag();

        });

        masterSection = paper.set(section, rect, masterRect);

        masterSection.drag(
            function (dx, dy, x, y, event) {
                console.log("...")
                if (dragging) {
                    masterSection.translate(event.screenX - ox, event.screenY - oy);

                    console.log(masterSection.attr('cx'), masterSection.attr('ox'), masterSection.attr('oy'));
                    // masterSection.attr("cx", masterSection.attr("ox") + dx);
                    // masterSection.attr("cy", masterSection.attr("oy") + dy);
                    // masterSection.attr("x", masterSection.attr("ox") + dx);
                    // masterSection.attr("y", masterSection.attr("oy") + dy);


                    ox = event.screenX;
                    oy = event.screenY;
                }
            },
            function (event) {
                ox = event.screenX;
                oy = event.screenY;
                masterSection.attr({
                    opacity: .5
                });
                dragging = true;
            },
            function (event) {
                dragging = false;
                masterSection.attr({
                    opacity: 1
                });
                masterRect.unhover();
                // rect.undrag();


            }
        )
        rect.hover(() => {

            // masterSection && masterSection.toFront();
            masterSection && masterSection.toBack();

            rect.attr({
                ...rectOnClickStyle
            });


            // var l_coord = masterSection.getBBox().x,
            //     r_coord = masterSection.getBBox().x2,
            //     t_coord = masterSection.getBBox().y,
            //     b_coord = masterSection.getBBox().y2;

            // var cx = (l_coord + r_coord) / 2,
            //     cy = (t_coord + b_coord) / 2;

            // masterSection.rotate(179, cx, cy);

            // masterSection.attr({ fill: 'rgba(0, 87, 255, 0.01)' })

            masterSection.unhover(function (e) {
                rect.attr({
                    ...rectDefaultStyle
                })
            });

        })
    })
    return paper;
}