admin-php-module/web/controllers/jointjs.js

(function () {
    'use strict';
    angular
        .module('app', ['angular.drag.resize', 'ng-context-menu'])
        .controller('JointCtrl', JointCtrl);

    JointCtrl.$inject = ['$scope', 'smartRequest', 'Notification', '$http'];

    function JointCtrl($scope, smartRequest, Notification) {
        document.getElementById('aside').remove();
        document.getElementById("view").style.display = "flex";
        document.getElementById("view").style.justifyContent = "center";
        document.getElementById("view").style.alignItems = "center";
        //$scope.percentWidth = document.getElementById('tables').clientWidth / 1024;
        //$scope.percentHeight = document.getElementById('tables').clientHeight / 768;
        $scope.percentWidth = document.getElementById('tables').offsetWidth / 1024;
        $scope.percentHeight = document.getElementById('tables').offsetHeight / 768;
        console.log(document.getElementById('tables').offsetWidth / 1024);
        console.log(document.getElementById('tables').offsetHeight / 768);

        const { dia, shapes, highlighters } = joint;

// Paper

        const paperContainer = document.getElementById("paper-container");

        const graph = new dia.Graph({}, { cellNamespace: shapes });
        const paper = new dia.Paper({
            model: graph,
            cellViewNamespace: shapes,
            width: "100%",
            height: "100%",
            gridSize: 5,
            async: true,
            frozen: true,
            sorting: dia.Paper.sorting.APPROX,
            background: { color: "#F3F7F6" },
            clickThreshold: 10,
            defaultConnector: {
                name: "rounded"
            },
            defaultRouter: {
                name: "manhattan",
                args: {
                    step: 5,
                    endDirections: ["bottom"],
                    startDirections: ["top"],
                    padding: { bottom: 30 }
                }
            }
        });

        paperContainer.appendChild(paper.el);
        const ResizeTool = joint.elementTools.Control.extend({
            getPosition: function (view) {
                const model = view.model;
                const { width, height } = model.size();
                return { x: width, y: height };
            },
            setPosition: function (view, coordinates) {
                const model = view.model;
                model.resize(Math.max(coordinates.x, 40), Math.max(coordinates.y, 40));
            }
        });
        const toolsView = new joint.dia.ToolsView({
            tools: [
                new ResizeTool({
                    selector: "body",
                    handleAttributes: {
                        fill: "#4666E5"
                    }
                })
            ]
        });
        const color = "#ff4468";

        paper.svg.prepend(
            V.createSVGStyle(`
        .joint-element .selection {
            stroke: ${color};
        }
        .joint-link .selection {
            stroke: ${color};
            stroke-dasharray: 5;
            stroke-dashoffset: 10;
            animation: dash 0.5s infinite linear;
        }
        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
    `)
        );

        function element(w, h, x, y, table_id) {
            const el = new shapes.standard.Rectangle({
                position: { x, y},
                size: { width: w * $scope.percentWidth, height: h * $scope.percentHeight},
                attrs: {
                    label: {
                        text: `СТОЛ ${table_id}`,
                        fontFamily: "sans-serif",
                        fontSize: "60%"
                    }
                },
                z: 2
            });
            graph.addCell(el);
            return el;
        }

        function elementC(x, y) {
            const el = new shapes.standard.Circle({
                position: { x, y },
                size: { width: 50, height: 50 },
                attrs: {
                    label: {
                        text: `ℹ️`,
                        fontFamily: "sans-serif"
                    }
                },
                z: 2
            });
            graph.addCell(el);
            return el;
        }

        function link(target, source) {
            const l = new shapes.standard.Link({
                source: { id: source.id },
                target: { id: target.id },
                z: 1
            });
            graph.addCell(l);
            return l;
        }
        smartRequest.get('v1/roommap?method=map&type=place&id=2', function (data) {
            $scope.place = data.place;
            $scope.place_id = data.place_id;
            $scope.tables = data.tables;
            console.log($scope.tables);
            $scope.tables.forEach(function (el) {
                element(el.width, el.height, el.y * $scope.percentWidth, el.x * $scope.percentHeight, el.table_id);
            });
        });

        //const el1 = element(470 * $scope.percentWidth, 235 * $scope.percentHeight, 470 * $scope.percentHeight, 150 * $scope.percentWidth);

/*        link(el1, el4);
        link(el2, el4);
        link(el3, el5);
        link(el4, el5);
        link(el6, el1);
        link(el6, el2);*/
        paper.unfreeze();

        function getElementPredecessorLinks(el) {
            return graph
                .getSubgraph([el, ...graph.getPredecessors(el)])
                .filter((cell) => cell.isLink());
        }

        function highlightCell(cell) {
            highlighters.addClass.add(
                cell.findView(paper),
                cell.isElement() ? "body" : "line",
                "selection",
                { className: "selection" }
            );
        }

        function unhighlightCell(cell) {
            highlighters.addClass.remove(
                cell.findView(paper).removeTools(toolsView),
                "selection"
            );
        }

        let selection = null;

        function selectElement(el) {
            if (selection === el) return;
            if (selection) {
                unhighlightCell(selection);
                graph.getLinks().forEach((link) => unhighlightCell(link));
            }
            if (el) {
                highlightCell(el);
                getElementPredecessorLinks(el).forEach((link) => highlightCell(link));
                selection = el;
                selection.findView(paper).addTools(
                    new joint.dia.ToolsView({
                        tools: [
                            new ResizeTool({
                                selector: "body",
                                handleAttributes: {
                                    fill: "#4666E5"
                                }
                            })
                        ]
                    })
                );
            } else {
                selection = null;
            }
        }

        paper.on("element:pointerclick", (elementView) =>
            selectElement(elementView.model)
        );
        paper.on("blank:pointerclick", (elementView) => selectElement(null));
        /*selectElement(el2);*/

    }
})();