v.2.30
Small fix
This commit is contained in:
miroman-afk
216
web/controllers/jointjs.js
Normal file
216
web/controllers/jointjs.js
Normal file
@@ -0,0 +1,216 @@
|
||||
(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);*/
|
||||
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user