2639 lines
76 KiB
JavaScript
2639 lines
76 KiB
JavaScript
var Bench ={
|
||
create:function(id, options) {
|
||
var bn = {};
|
||
|
||
//public vars
|
||
bn.dirty = false; //is config need be saved
|
||
bn.shapes = []; //all shape instances in svg
|
||
bn.symbols = []; //all shape's template(symbol)
|
||
bn.paper = null; //raphael core container object
|
||
bn.temp = {}; //all vars in temp object
|
||
bn.enablePan = true; //
|
||
//bn.realScale = 20; //unit : meter for rule calculation
|
||
bn.options = {};
|
||
|
||
///////// function init code here /////////
|
||
bn.init = function (domId) {
|
||
|
||
//fields
|
||
bn.id = domId;
|
||
bn.domId = "#" + domId; //div id
|
||
//bn.offset = offset; //size of screen not belong to svg element
|
||
|
||
//states
|
||
bn.mouseState = "default"; //mouse state: default/drawFloor....
|
||
|
||
//members
|
||
bn.getSize = function () {
|
||
//var w = $(bn.domId).width();
|
||
var w = $(document).width() - 491;
|
||
var h = $(window).height() - $(bn.domId).position().top ;
|
||
//var h = $(window).height() - $(bn.domId).offset().top + 117;
|
||
//h = $(bn.domId).prop('scrollHeight');
|
||
return { width: w, height: h };
|
||
};
|
||
|
||
//inner functions
|
||
function createPaper() {
|
||
var size =bn.getSize();
|
||
bn.paper =new Raphael(document.getElementById(bn.id),
|
||
size.width, size.height);
|
||
bn.paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
||
bn.paper.setViewBox(0, 0, size.width, size.height);
|
||
|
||
bn.resetSelection();
|
||
}
|
||
|
||
function enablePaperResize() {
|
||
$(window).resize(function () {
|
||
if (bn.temp.resizeTO) clearTimeout(bn.temp.resizeTO);
|
||
bn.temp.resizeTO = setTimeout(function () {
|
||
$(this).trigger('resizeEnd');
|
||
}, 300);
|
||
});
|
||
|
||
$(window).unbind('resizeEnd').bind('resizeEnd', function () {
|
||
//resize canvas
|
||
bn.paper.setSize(bn.getSize().width,
|
||
bn.getSize().height);
|
||
});
|
||
}
|
||
|
||
function defineMouseBehavior() {
|
||
bn.viewBoxWidth = bn.paper.width;
|
||
bn.viewBoxHeight = bn.paper.height;
|
||
var canvasID = bn.domId;
|
||
var startX, startY;
|
||
var mousedown = false;
|
||
var dX, dY;
|
||
var oX = 0, oY = 0, oWidth = bn.viewBoxWidth, oHeight = bn.viewBoxHeight;
|
||
bn.viewBox = bn.paper.setViewBox(oX, oY, bn.viewBoxWidth, bn.viewBoxHeight);
|
||
bn.viewBox.X = oX;
|
||
bn.viewBox.Y = oY;
|
||
|
||
function handleZoom(delta) {
|
||
if (delta < 0) {
|
||
bn.setZoom(0.95);
|
||
}
|
||
else {
|
||
bn.setZoom(1.05);
|
||
}
|
||
}
|
||
|
||
//Event handler for mouse wheel event.
|
||
function wheel(e) {
|
||
var event = e.originalEvent;
|
||
var delta = 0;
|
||
if (!event) /* For IE. */
|
||
event = window.event;
|
||
if (event.wheelDelta) { /* IE/Opera. */
|
||
delta = event.wheelDelta / 120;
|
||
} else if (event.detail) {
|
||
/** Mozilla case. */
|
||
delta = -event.detail / 3;
|
||
}
|
||
/** If delta is nonzero, handle it.
|
||
* Basically, delta is now positive if wheel was scrolled up,
|
||
* and negative, if wheel was scrolled down.
|
||
*/
|
||
if (delta) {
|
||
handleZoom(delta);
|
||
}
|
||
|
||
//Prevent default actions caused by mouse wheel
|
||
if (event.preventDefault)
|
||
event.preventDefault();
|
||
event.returnValue = false;
|
||
}
|
||
|
||
$(canvasID).unbind('mousewheel DOMMouseScroll').bind(
|
||
{'mousewheel DOMMouseScroll': wheel});
|
||
|
||
function updateWallPath(mx, my) {
|
||
var cp = bn.canvasPoint(mx, my);
|
||
|
||
if (bn.temp.wallCache) {
|
||
var twidth = Math.abs(cp.x - bn.temp.wallCache.lastX);
|
||
var theight = Math.abs(cp.y - bn.temp.wallCache.lastY);
|
||
|
||
if (twidth > theight) {
|
||
bn.temp.wallCache.lastX = cp.x;
|
||
bn.temp.wallCache.path += " H " + cp.x + " ";
|
||
}
|
||
else {
|
||
bn.temp.wallCache.lastY = cp.y;
|
||
bn.temp.wallCache.path += " V " + cp.y + " ";
|
||
}
|
||
}
|
||
else {
|
||
bn.temp.wallCache = {};
|
||
bn.temp.wallCache.ps = [];
|
||
bn.temp.wallCache.path = "M " + cp.x + " " + cp.y + " ";
|
||
bn.temp.wallCache.lastX = cp.x;
|
||
bn.temp.wallCache.lastY = cp.y;
|
||
}
|
||
|
||
var p = bn.addShape("pointIndicator",
|
||
{x: bn.temp.wallCache.lastX, y: bn.temp.wallCache.lastY});
|
||
|
||
bn.temp.wallCache.ps.push(p);
|
||
|
||
}
|
||
|
||
function panWindow(px, py) {
|
||
if (bn.mouseState === "pan")
|
||
$(canvasID).css('cursor', "url('/img/3d/hand-pull-lightblue.cur'), default");
|
||
|
||
dX = startX - px;
|
||
dY = startY - py;
|
||
var x = bn.viewBoxWidth / bn.paper.width;
|
||
var y = bn.viewBoxHeight / bn.paper.height;
|
||
|
||
dX *= x;
|
||
dY *= y;
|
||
|
||
bn.paper.setViewBox(bn.viewBox.X + dX, bn.viewBox.Y + dY, bn.viewBoxWidth, bn.viewBoxHeight, true);
|
||
}
|
||
|
||
function getDoorPosition(x, y) {
|
||
//find one wall
|
||
var els = [];
|
||
|
||
var elements = bn.paper.getElementsByPoint(x,y);
|
||
elements.forEach(function(el){
|
||
if (el.sym != undefined) els.push(el);
|
||
});
|
||
|
||
var pointRanges = [];
|
||
|
||
var range = 5;
|
||
while( range > 0)
|
||
{
|
||
pointRanges.push({ x1: x + range, y1: y});
|
||
pointRanges.push({ x1: x, y1: y + range});
|
||
pointRanges.push({ x1: x - range, y1: y});
|
||
pointRanges.push({ x1: x, y1: y - range});
|
||
|
||
range--;
|
||
}
|
||
|
||
var pts = [];
|
||
pointRanges.forEach(function(point){
|
||
var elements = bn.paper.getElementsByPoint(point.x1, point.y1);
|
||
pts = _.filter(elements, function (el) {
|
||
return el.sym !== undefined;
|
||
});
|
||
|
||
pts.forEach(function(ptsItem){
|
||
if (_.contains(els, ptsItem) !== true){
|
||
els.push(ptsItem);
|
||
}
|
||
});
|
||
});
|
||
|
||
var wps = _.filter(els, function (el) {
|
||
return el.sym.name === "floorPath" || el.sym.name === "wallPath";
|
||
});
|
||
|
||
|
||
//find multi-points
|
||
if (_.isUndefined(wps)) return;
|
||
if (wps.length == 0 ) return;
|
||
|
||
var positions = [];
|
||
wps.forEach(function(pt){
|
||
//get path points collection
|
||
var lastX, lastY;
|
||
var ptPoints = _.reduce(pt.realPath, function (ps, segment) {
|
||
var point = {};
|
||
|
||
if (segment[0] == "M") {
|
||
point.x = segment[1];
|
||
point.y = segment[2];
|
||
lastX = point.x;
|
||
lastY = point.y;
|
||
point.type = "M";
|
||
}
|
||
|
||
if (segment[0] == "H") {
|
||
point.x = segment[1];
|
||
point.y = lastY;
|
||
lastX = point.x;
|
||
point.type = "H";
|
||
}
|
||
|
||
if (segment[0] == "V") {
|
||
point.y = segment[1];
|
||
point.x = lastX;
|
||
lastY = point.y;
|
||
point.type = "V";
|
||
}
|
||
|
||
ps.push(point);
|
||
return ps;
|
||
}, []);
|
||
|
||
var position = _.reduce(ptPoints, function (pos, poi) {
|
||
if (pos.min > Math.abs(poi.x - x)) {
|
||
pos.min = Math.abs(poi.x - x);
|
||
pos.type = "X";
|
||
pos.x = poi.x;
|
||
pos.y = poi.y;
|
||
}
|
||
|
||
if (pos.min > Math.abs(poi.y - y)) {
|
||
pos.min = Math.abs(poi.y - y);
|
||
pos.type = "Y";
|
||
pos.x = poi.x;
|
||
pos.y = poi.y;
|
||
}
|
||
|
||
return pos;
|
||
}, {min: 99999999});
|
||
|
||
positions.push(position);
|
||
});
|
||
|
||
//find right points
|
||
var minPosition = _.min(positions, function(o){
|
||
return o.min;
|
||
});
|
||
|
||
return minPosition;
|
||
}
|
||
|
||
function updateWallShape() {
|
||
$(bn.domId).css('cursor', 'crosshair');
|
||
if (bn.temp.wallCache.line) {
|
||
bn.temp.wallCache.line.attr("path", bn.temp.wallCache.path);
|
||
}
|
||
else {
|
||
bn.temp.wallCache.line = bn.paper.path(bn.temp.wallCache.path);
|
||
bn.temp.wallCache.line.attr({
|
||
"type": "path",
|
||
"stroke": "#28a4c9",
|
||
"stroke-width": 40,
|
||
"stroke-linejoin": "round",
|
||
"stroke-linecap": "round",
|
||
"pointer-events": "all"
|
||
});
|
||
}
|
||
|
||
if (bn.temp.wallCache.ps.length == 3){
|
||
if (bn.currentSymbol.name == "floorPath"){
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
}
|
||
}
|
||
|
||
function finishRuler(mx, my) {
|
||
var cp = bn.canvasPoint(mx, my);
|
||
|
||
if (!bn.temp.rule) {
|
||
bn.temp.rule = {};
|
||
bn.temp.rule.start = cp;
|
||
bn.temp.rule.startIndicator = bn.addShape("pointIndicator", cp);
|
||
} else {
|
||
var shp = bn.addShape("ruler", {start: bn.temp.rule.start, end: cp});
|
||
bn.temp.rule.startIndicator.delete();
|
||
bn.temp.rule = undefined;
|
||
mousedown = false;
|
||
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
|
||
}
|
||
|
||
function prepareSelection(e){
|
||
|
||
var el = bn.paper.getElementByPoint(e.pageX, e.pageY);
|
||
|
||
if (bn.isSelectable(el)){
|
||
var shp = bn.getShapeByElement(el);
|
||
if (shp)
|
||
{
|
||
if (!shp.selected)
|
||
{
|
||
bn.resetSelection();
|
||
bn.setSelection(el);
|
||
}
|
||
bn.selection.one = true;
|
||
}
|
||
}
|
||
else {
|
||
//selection default 0;
|
||
bn.selection.one = false;
|
||
var p1 = bn.canvasPoint(e.pageX, e.pageY);
|
||
setMarquee(p1.x, p1.y, 0, 0);
|
||
bn.marquee.toFront();
|
||
}
|
||
}
|
||
|
||
$(canvasID).mousedown(function (e) {
|
||
|
||
//if (bn.paper.getElementByPoint(e.pageX, e.pageY) != null) {
|
||
// bn.resetSelection();
|
||
// bn.selectByClick(e);
|
||
// if (bn.mouseState !== "drawWall" &&
|
||
// bn.mouseState !== "drawWallPart" &&
|
||
// bn.mouseState !== "drawRuler" &&
|
||
// bn.mouseState !== "drawShape") return;
|
||
//}
|
||
|
||
if (bn.mouseState === "default") prepareSelection(e);
|
||
|
||
//common
|
||
mousedown = true;
|
||
startX = e.pageX;
|
||
startY = e.pageY;
|
||
|
||
//all situation can pan window
|
||
panWindow(e.pageX, e.pageY);
|
||
|
||
if (bn.mouseState === "drawWall") {
|
||
updateWallPath(e.pageX, e.pageY);
|
||
}
|
||
|
||
if (bn.mouseState == "drawRuler") {
|
||
finishRuler(e.pageX, e.pageY);
|
||
}
|
||
|
||
if (bn.mouseState == "drawShape"){
|
||
var sp = bn.addShape(bn.currentSymbol.name, bn.canvasPoint(e.pageX,e.pageY));
|
||
bn.shapes.forEach(function(shp){
|
||
if (shp.selected) {
|
||
shp.updateLook();
|
||
}
|
||
});
|
||
bn.resetSelection();
|
||
bn.setSelection(sp.element);
|
||
|
||
}
|
||
|
||
if (bn.mouseState === "drawWallPart") {
|
||
var cp = bn.canvasPoint(e.pageX, e.pageY);
|
||
var pos = getDoorPosition(cp.x, cp.y);
|
||
//var pos = getDoorPosition(e.clientX, e.clientY);
|
||
|
||
if (_.isUndefined(pos)) return;
|
||
|
||
var symbolName = bn.currentSymbol.name;
|
||
if (pos.min < 100) {
|
||
if (pos.type == "Y") {
|
||
bn.addShape(symbolName, {x: cp.x, y: pos.y - 15, type: pos.type});
|
||
}
|
||
else {
|
||
bn.addShape(symbolName, {x: pos.x - 15, y: cp.y, type: "X"});
|
||
}
|
||
}
|
||
}
|
||
|
||
});
|
||
|
||
function setMarquee(x, y, width, height) {
|
||
bn.marquee.attr({"x": x});
|
||
bn.marquee.attr({"y": y});
|
||
bn.marquee.attr({"width": width});
|
||
bn.marquee.attr({"height": height});
|
||
}
|
||
|
||
function updateSelection(e){
|
||
if (bn.selection.one) return;
|
||
if (bn.selectRect) return;
|
||
var p1 = bn.canvasPoint(startX, startY);
|
||
var p2 = bn.canvasPoint(e.pageX, e.pageY);
|
||
|
||
function Interval(lo, hi) {
|
||
this.lo = Math.min(lo, hi);
|
||
this.hi = Math.max(lo, hi);
|
||
}
|
||
|
||
Interval.prototype.contains = function(value) {
|
||
return this.lo <= value && value <= this.hi;
|
||
};
|
||
|
||
Interval.prototype.isOverlapping = function(that) {
|
||
return (
|
||
this.contains(that.lo) ||
|
||
this.contains(that.hi) ||
|
||
that.contains(this.lo) ||
|
||
that.contains(this.hi)
|
||
);
|
||
};
|
||
|
||
function inSelection(shape) {
|
||
var mBBox = bn.marquee.getBBox();
|
||
var sBBox = shape.element.getBBox();
|
||
var marqueeX = new Interval(mBBox.x, mBBox.x + mBBox.width);
|
||
var marqueeY = new Interval(mBBox.y, mBBox.y + mBBox.height);
|
||
var shapeX = new Interval(sBBox.x, sBBox.x + sBBox.width);
|
||
var shapeY = new Interval(sBBox.y, sBBox.y + sBBox.height);
|
||
|
||
return marqueeX.contains(shapeX.lo) &&
|
||
marqueeX.contains(shapeX.hi) &&
|
||
marqueeY.contains(shapeY.lo) &&
|
||
marqueeY.contains(shapeY.hi);
|
||
}
|
||
|
||
function selectShapes() {
|
||
|
||
bn.shapes.forEach(function(shape){
|
||
if (!bn.isSelectable(shape.element)) return;
|
||
|
||
if ( inSelection(shape) ) {
|
||
bn.setSelection(shape.element);
|
||
} else {
|
||
bn.removeSelection(shape);
|
||
}
|
||
});
|
||
}
|
||
|
||
bn.marquee.show();
|
||
|
||
setMarquee(
|
||
Math.min(p1.x, p2.x), Math.min(p1.y, p2.y),
|
||
Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y)
|
||
);
|
||
|
||
selectShapes();
|
||
|
||
}
|
||
|
||
$(canvasID).mousemove(function (e) {
|
||
|
||
if (mousedown == false) {
|
||
return;
|
||
}
|
||
|
||
if (bn.mouseState === "default") updateSelection(e);
|
||
if (bn.mouseState === "pan") panWindow(e.pageX, e.pageY);
|
||
});
|
||
|
||
function finishSelection()
|
||
{
|
||
setMarquee(0,0,0,0);
|
||
if (!bn.selection.one)
|
||
{
|
||
if (bn.selectRect)
|
||
{
|
||
bn.shapes.forEach(function(shp){
|
||
if (shp.selected) {
|
||
shp.updateLook();
|
||
}
|
||
});
|
||
bn.resetSelection();
|
||
}
|
||
else
|
||
{
|
||
if (bn.selection.length == 0) return;
|
||
var box = bn.selection.getBBox();
|
||
//console.log(box.x,box.y,box.width);
|
||
bn.selectRect = bn.paper.rect(box.x,box.y,box.width,box.height);
|
||
bn.selectRect.attr({fill: "green"});
|
||
bn.selectRect.attr({"fill-opacity": "0.2"});
|
||
bn.selectRect.attr({"stroke-opacity": "0.3"});
|
||
bn.selectRect.attr({"stroke-dasharray":"-"});
|
||
bn.selectRect.attr({stroke: "green"});
|
||
bn.selectRect.attr({"stroke-width": 10});
|
||
bn.selectRect.toFront();
|
||
bn.selectRect.draggable();
|
||
}
|
||
}
|
||
bn.selection.getBBox();
|
||
}
|
||
|
||
$(canvasID).mouseup(function (e) {
|
||
|
||
//common
|
||
if (mousedown == false) return;
|
||
|
||
bn.viewBox.X += dX;
|
||
bn.viewBox.Y += dY;
|
||
mousedown = false;
|
||
|
||
if (bn.mouseState === "default")
|
||
finishSelection();
|
||
|
||
|
||
var cp = bn.canvasPoint(e.pageX, e.pageY);
|
||
|
||
if (bn.mouseState === "drawWall") {
|
||
updateWallShape();
|
||
} else if (bn.mouseState === "drawRuler") {
|
||
if (bn.temp.rule) $(canvasID).css('cursor', 'crosshair');
|
||
} else if (bn.mouseState === "drawWallPart") {
|
||
$(canvasID).css('cursor', 'crosshair');
|
||
} else if (bn.mouseState === "drawShape"){
|
||
|
||
}
|
||
else {
|
||
$(canvasID).css('cursor', 'default');
|
||
}
|
||
|
||
|
||
});
|
||
}
|
||
|
||
function defineKeyBehavior() {
|
||
$(document).keyup(function (e) {
|
||
|
||
if (e.keyCode == 27) { // escape key maps to keycode `27`
|
||
if (bn.currentSymbol.handleKey)
|
||
bn.currentSymbol.handleKey("ESC");
|
||
}
|
||
if (e.keyCode == 46) {
|
||
bn.delete();
|
||
}
|
||
|
||
if (e.keyCode == 37) {
|
||
bn.move('left');
|
||
}
|
||
|
||
if (e.keyCode == 39){
|
||
bn.move('right');
|
||
}
|
||
|
||
if (e.keyCode == 38){
|
||
bn.move('up');
|
||
}
|
||
|
||
if (e.keyCode == 40){
|
||
bn.move('down');
|
||
}
|
||
});
|
||
|
||
$(document).keydown(function (e) {
|
||
|
||
if (e.keyCode == 37) {
|
||
bn.move('left');
|
||
}
|
||
|
||
if (e.keyCode == 39){
|
||
bn.move('right');
|
||
}
|
||
|
||
if (e.keyCode == 38){
|
||
bn.move('up');
|
||
}
|
||
|
||
if (e.keyCode == 40){
|
||
bn.move('down');
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
//actions
|
||
createPaper();
|
||
defineMouseBehavior();
|
||
defineKeyBehavior();
|
||
|
||
bn.selectDefaultSymbol();
|
||
enablePaperResize();
|
||
};
|
||
|
||
bn.clear = function () {
|
||
bn.temp = {}; //clear all temporary vars
|
||
bn.dirty = false; //set to default
|
||
bn.shapes = []; //clear shape instances
|
||
bn.paper.clear();
|
||
bn.resetSelection();
|
||
};
|
||
|
||
bn.load = function (config) {
|
||
bn.clear();
|
||
if (config) {
|
||
bn.loadConfig = config;
|
||
}
|
||
else {
|
||
bn.loadConfig = bn.demoConfig;
|
||
}
|
||
|
||
bn.setZoom(bn.loadConfig.editorZoom);
|
||
|
||
var loadShape = function(sp) {
|
||
var shp = bn.addShape(sp.param2D.symbol, sp.param2D);
|
||
if (shp) {
|
||
shp.config = sp;
|
||
shp.updateLook();
|
||
}
|
||
};
|
||
|
||
bn.loadConfig.shapes.forEach(function (shp) {
|
||
loadShape(shp);
|
||
});
|
||
|
||
bn.shapes.forEach(function (shp) {
|
||
if (shp.element.sym.name === "floorPath") return;
|
||
if (shp.element.sym.name === "floorImage") return;
|
||
shp.element.toFront();
|
||
});
|
||
|
||
bn.dirty = false;
|
||
};
|
||
|
||
bn.addShape = function (symbolName, param) {
|
||
var sym = _.find(bn.symbols, function (item) {
|
||
return item.name === symbolName;
|
||
});
|
||
if (_.isUndefined(sym)) return;
|
||
|
||
/*unique elements create by each symbols*/
|
||
var el = sym.create(param);
|
||
$(el).keyup(function(event) {
|
||
if (e.keyCode == 46) {
|
||
bn.delete();
|
||
}
|
||
});
|
||
el.sym = sym;
|
||
|
||
var shp = _.extend({}, bn.shapeClass);
|
||
shp.element = el;
|
||
|
||
bn.shapes.push(shp);
|
||
if (!shp.config) shp.newConfig();
|
||
shp.updateLook();
|
||
bn.dirty = true;
|
||
return shp;
|
||
};
|
||
|
||
bn.shapeMakeup = function (el, sym) {
|
||
//el.hover(function () {
|
||
// this.glowEffect = this.glow({color: "blue", width: 15});
|
||
//}, function () {
|
||
// this.glowEffect.remove();
|
||
//});
|
||
if (sym.class)
|
||
{
|
||
$(el.node).attr("class", sym.class);
|
||
}
|
||
|
||
if (sym.style)
|
||
{
|
||
for(var a in sym.style)
|
||
{
|
||
el.attr(a, sym.style[a]);
|
||
}
|
||
}
|
||
|
||
if (sym.class !== "floorPath")
|
||
el.draggable();
|
||
return el;
|
||
};
|
||
|
||
bn.selectSymbol = function (sym) {
|
||
if (bn.currentSymbol) {
|
||
if (bn.currentSymbol.endState)
|
||
bn.currentSymbol.endState();
|
||
}
|
||
|
||
bn.mouseState = sym.mouseState;
|
||
bn.currentSymbol = sym;
|
||
if (sym.initState) sym.initState();
|
||
|
||
//update cursor & mouseState for common purpose
|
||
$(bn.domId).css('cursor', 'auto');
|
||
|
||
if (sym.cursor) $(bn.domId).css('cursor', sym.cursor);
|
||
bn.update();
|
||
};
|
||
|
||
bn.selectDefaultSymbol = function () {
|
||
bn.selectSymbol(bn.symbols[0]);
|
||
};
|
||
|
||
bn.findShapeBySymbolName = function (name) {
|
||
var sps = _.filter(bn.shapes, function (shp) {
|
||
return shp.element.sym !== undefined;
|
||
});
|
||
|
||
return _.find(sps, function (shp) {
|
||
return shp.element.sym.name === name;
|
||
});
|
||
};
|
||
|
||
bn.setZoom = function (zoom){
|
||
var vBHo = bn.viewBoxHeight;
|
||
var vBWo = bn.viewBoxWidth;
|
||
var vX = bn.viewBox.X;
|
||
var vY = bn.viewBox.Y;
|
||
|
||
bn.viewBoxWidth *= zoom;
|
||
bn.viewBoxHeight *= zoom;
|
||
|
||
bn.viewBox.X -= (bn.viewBoxWidth - vBWo) / 2;
|
||
bn.viewBox.Y -= (bn.viewBoxHeight - vBHo) / 2;
|
||
//bn.viewBox.X = zoom * vX;
|
||
//bn.viewBox.Y = zoom * vY;
|
||
|
||
bn.paper.setViewBox(bn.viewBox.X, bn.viewBox.Y, bn.viewBoxWidth, bn.viewBoxHeight, true);
|
||
};
|
||
|
||
bn.setSelection = function (el) {
|
||
|
||
el.attr({"stroke": "#8ADBB2"});
|
||
el.attr({"fill": "#74ED34"});
|
||
el.attr({"fill-opacity": "0.7"});
|
||
el.attr({"stroke-opacity": "0.7"});
|
||
|
||
var exist = false;
|
||
if (bn.selection) {
|
||
bn.selection.forEach(function (e) {
|
||
if (e === el) exist = true;
|
||
});
|
||
|
||
if (!exist)
|
||
{
|
||
if (el.sym) bn.selection.push(el);
|
||
}
|
||
|
||
bn.getShapeByElement(el).selected = true;
|
||
//bn.selection.draggable();
|
||
//console.log(bn.selection);
|
||
|
||
var selectedShapes = [];
|
||
bn.selection.forEach(function (e) {
|
||
selectedShapes.push(bn.getShapeByElement(e));
|
||
});
|
||
|
||
bn.ev("shapeSelected", selectedShapes);
|
||
}
|
||
};
|
||
|
||
bn.isSelectable = function(el){
|
||
|
||
if (el == null) return false;
|
||
if (el === bn.selectRect) return true;
|
||
if (_.isUndefined(el.sym)) return false;
|
||
if (el.sym.name === "floorPath") return false;
|
||
if (el.sym.name === "floorImage") return false;
|
||
|
||
return true;
|
||
};
|
||
|
||
bn.resetSelection = function (){
|
||
var selectedShapes = [];
|
||
if (bn.shapes) {
|
||
bn.shapes.forEach(function (shp) {
|
||
if (shp.selected) selectedShapes.push(shp);
|
||
});
|
||
bn.ev("resetShape", selectedShapes);
|
||
}
|
||
|
||
if (_.isUndefined(bn.marquee))
|
||
bn.marquee = bn.paper.rect(0, 0, 0, 0);
|
||
|
||
{
|
||
bn.marquee = bn.paper.rect(0, 0, 0, 0);
|
||
bn.marquee.attr({fill: "none"});
|
||
bn.marquee.attr({"stroke-dasharray":"-"});
|
||
bn.marquee.attr({stroke: "green"});
|
||
bn.marquee.attr({"stroke-width": 10});
|
||
bn.marquee.toFront();
|
||
}
|
||
|
||
bn.selection = bn.paper.set();
|
||
if (bn.selectRect) {
|
||
bn.selectRect.remove();
|
||
bn.selectRect = undefined ;
|
||
}
|
||
|
||
bn.shapes.forEach(function(shp){
|
||
shp.resetStyle();
|
||
shp.selected = false;
|
||
|
||
});
|
||
};
|
||
|
||
bn.getShapeByElement = function(el){
|
||
var res = null;
|
||
bn.shapes.forEach(function(shp){
|
||
if (shp.element === el) res = shp;
|
||
});
|
||
|
||
return res;
|
||
};
|
||
|
||
bn.removeSelection = function (shape){
|
||
shape.resetStyle();
|
||
shape.selected = false;
|
||
bn.selection.exclude(shape.element);
|
||
};
|
||
|
||
bn.save = function (){
|
||
|
||
//get floor calc center2D for 3d config position update
|
||
var floor = _.find(bn.shapes, function(shp){
|
||
return shp.element.sym.name == "floorPath";
|
||
});
|
||
|
||
if (floor) floor.element.sym.calcCenter(floor.element);
|
||
|
||
bn.loadConfig.shapes.length = 0;
|
||
bn.shapes.forEach(function(shp){
|
||
shp.updateConfig();
|
||
bn.loadConfig.shapes.push(shp.config);
|
||
});
|
||
|
||
bn.uploadConfig(bn.loadConfig);
|
||
//bn.demoConfig = bn.loadConfig;
|
||
//bn.info(angular.toJson(bn.loadConfig));
|
||
|
||
bn.dirty = false;
|
||
};
|
||
|
||
bn.newConfig = function(){
|
||
var languageJson = angular.fromJson(sessionStorage.getItem('languageJson'));
|
||
var prompt = languageJson.Room3D.Edit.Prompt;
|
||
var nc = {
|
||
"name": "new floor",
|
||
"title": prompt.Room,
|
||
"description": prompt.Note,
|
||
"version": "0.0.1",
|
||
"editorZoom": 1,
|
||
"shapes":[]
|
||
};/*"新机房" "备注请放在这里"*/
|
||
|
||
bn.load(nc);
|
||
};
|
||
|
||
bn.canvasPoint = function (pageX, pageY) {
|
||
var rX = pageX - $(bn.domId).position().left;
|
||
var rY = pageY - $(bn.domId).position().top;
|
||
var x = bn.viewBoxWidth / bn.paper.width;
|
||
var y = bn.viewBoxHeight / bn.paper.height;
|
||
var tX = bn.viewBox.X + rX * x;
|
||
var tY = bn.viewBox.Y + rY * y;
|
||
|
||
return {x: tX, y: tY};
|
||
};
|
||
|
||
bn.delete = function(){
|
||
if (bn.selection.length == 0) return;
|
||
var needremoves = [];
|
||
bn.shapes.forEach(function(shape){
|
||
if (shape.selected) needremoves.push(shape);
|
||
});
|
||
|
||
needremoves.forEach(function(shp){
|
||
shp.delete();
|
||
});
|
||
};
|
||
|
||
bn.align = function(type){
|
||
if (bn.selection.length < 2) return;
|
||
|
||
if (type == "left"){
|
||
var leftElement = _.min(bn.selection, function(el){
|
||
var box = el.getBBox();
|
||
return box.x;
|
||
});
|
||
|
||
var leftPosition = leftElement.getBBox().x;
|
||
|
||
bn.selection.forEach(function(el){
|
||
var offset = leftPosition - el.getBBox().x;
|
||
var shp = bn.getShapeByElement(el);
|
||
//el.nt_translate(offset,0);
|
||
shp.translate(offset,0);
|
||
});
|
||
}
|
||
|
||
if (type == "hcenter"){
|
||
var ec = bn.selection.length;
|
||
var sy = 0;
|
||
bn.selection.forEach(function(el){
|
||
sy = sy + el.getBBox().y;
|
||
});
|
||
|
||
var mid = sy/ec;
|
||
bn.selection.forEach(function(el){
|
||
var shp = bn.getShapeByElement(el);
|
||
var offset = mid - el.getBBox().y;
|
||
//el.nt_translate(0, offset);
|
||
shp.translate(0,offset);
|
||
});
|
||
}
|
||
|
||
if (type == "right"){
|
||
var rightElement = _.max(bn.selection, function(el){
|
||
var box = el.getBBox();
|
||
return box.x;
|
||
});
|
||
|
||
var rightPosition = rightElement.getBBox().x + rightElement.getBBox().width;
|
||
|
||
bn.selection.forEach(function(el){
|
||
var shp = bn.getShapeByElement(el);
|
||
var offset = rightPosition - el.getBBox().x - el.getBBox().width;
|
||
shp.translate(offset, 0);
|
||
//el.nt_translate(offset, 0);
|
||
});
|
||
}
|
||
|
||
if (type == "top"){
|
||
var topElement = _.min(bn.selection, function(el){
|
||
return el.getBBox().y;
|
||
});
|
||
|
||
var topPosition = topElement.getBBox().y;
|
||
|
||
bn.selection.forEach(function(el){
|
||
var shp = bn.getShapeByElement(el);
|
||
var offset = topPosition - el.getBBox().y;
|
||
//el.nt_translate(0,offset);
|
||
shp.translate(0,offset);
|
||
});
|
||
}
|
||
|
||
if (type == "vcenter"){
|
||
var ec = bn.selection.length;
|
||
var sx = 0;
|
||
bn.selection.forEach(function(el){
|
||
sx = sx + el.getBBox().x;
|
||
});
|
||
|
||
var mid = sx/ec;
|
||
bn.selection.forEach(function(el){
|
||
var shp = bn.getShapeByElement(el);
|
||
var offset = mid - el.getBBox().x;
|
||
//el.nt_translate(offset,0);
|
||
shp.translate(offset, 0);
|
||
});
|
||
}
|
||
|
||
if (type == "bottom"){
|
||
var bottomElement = _.max(bn.selection, function(el){
|
||
var box = el.getBBox();
|
||
return box.y;
|
||
});
|
||
|
||
var bottomPosition = bottomElement.getBBox().y + bottomElement.getBBox().height;
|
||
|
||
bn.selection.forEach(function(el){
|
||
var shp = bn.getShapeByElement(el);
|
||
var offset = bottomPosition - el.getBBox().y - el.getBBox().height;
|
||
//el.nt_translate(0,offset);
|
||
shp.translate(0,offset);
|
||
});
|
||
}
|
||
|
||
bn.dirty = true;
|
||
};
|
||
|
||
bn.spacing = function(type){
|
||
if (bn.selection.length < 2) return;
|
||
|
||
if (type == "h"){
|
||
var leftElement = _.min(bn.selection, function(el){
|
||
var box = el.getBBox();
|
||
return box.x;
|
||
});
|
||
|
||
var leftPosition = leftElement.getBBox().x;
|
||
|
||
var ar = _.sortBy(bn.selection, function(el){
|
||
return -(leftPosition - el.getBBox().x); });
|
||
|
||
var languageJson = angular.fromJson(sessionStorage.getItem('languageJson'));
|
||
var prompt = languageJson.Room3D.Edit.Prompt;
|
||
/*"请输入物体间隔距离(cm)"*/
|
||
bn.input(prompt.Distance,0,languageJson.InputBox).then(function(data){
|
||
if (data.result){
|
||
var interval = parseFloat(data.val);
|
||
var leftSpace = 0;
|
||
|
||
ar.forEach(function(el){
|
||
el.nt_translate(leftPosition - el.getBBox().x,0);
|
||
el.nt_translate(leftSpace,0);
|
||
leftSpace = leftSpace + el.getBBox().width + interval;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
if (type == "v"){
|
||
var topElement = _.min(bn.selection, function(el){
|
||
var box = el.getBBox();
|
||
return box.y;
|
||
});
|
||
|
||
var topPosition = topElement.getBBox().y;
|
||
|
||
var ar = _.sortBy(bn.selection, function(el){
|
||
return -(topPosition - el.getBBox().y); });
|
||
|
||
var languageJson = angular.fromJson(sessionStorage.getItem('languageJson'));
|
||
var prompt = languageJson.Room3D.Edit.Prompt;
|
||
/*"请输入物体间隔距离(cm)"*/
|
||
bn.input(prompt.Distance,0,languageJson.InputBox).then(function(data){
|
||
if (data.result){
|
||
var interval = parseFloat(data.val);
|
||
var topSpace = 0;
|
||
|
||
ar.forEach(function(el){
|
||
el.nt_translate(0, topPosition - el.getBBox().y);
|
||
el.nt_translate(0, topSpace);
|
||
topSpace = topSpace + el.getBBox().height + interval;
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
bn.dirty = true;
|
||
};
|
||
|
||
bn.copy = function(){
|
||
if (bn.selection.length == 0) return;
|
||
|
||
var copyitems = [];
|
||
|
||
bn.selection.forEach(function(el){
|
||
var shp = bn.getShapeByElement(el);
|
||
if (shp) copyitems.push(shp.clone());
|
||
});
|
||
|
||
bn.resetSelection();
|
||
|
||
copyitems.forEach(function(shp){
|
||
bn.shapes.push(shp);
|
||
bn.setSelection(shp.element);
|
||
});
|
||
|
||
var box = bn.selection.getBBox();
|
||
bn.selectRect = bn.paper.rect(box.x,box.y,box.width,box.height);
|
||
bn.selectRect.attr({fill: "green"});
|
||
bn.selectRect.attr({"fill-opacity": "0.2"});
|
||
bn.selectRect.attr({"stroke-opacity": "0.3"});
|
||
bn.selectRect.attr({"stroke-dasharray":"-"});
|
||
bn.selectRect.attr({stroke: "green"});
|
||
bn.selectRect.attr({"stroke-width": 10});
|
||
bn.selectRect.toFront();
|
||
bn.selectRect.draggable();
|
||
bn.dirty = true;
|
||
};
|
||
|
||
bn.move = function(type){
|
||
if (bn.selection.length < 1) return;
|
||
|
||
if (type == "left"){
|
||
bn.selection.forEach(function(el){
|
||
bn.getShapeByElement(el).translate(-1,0);
|
||
//el.nt_translate(-1,0);
|
||
});
|
||
}
|
||
|
||
if (type == "right"){
|
||
bn.selection.forEach(function(el){
|
||
bn.getShapeByElement(el).translate(1,0);
|
||
//el.nt_translate(1,0);
|
||
});
|
||
}
|
||
|
||
if (type == "up"){
|
||
bn.selection.forEach(function(el){
|
||
bn.getShapeByElement(el).translate(0,-1);
|
||
//el.nt_translate(0,-1);
|
||
});
|
||
}
|
||
|
||
if (type == "down"){
|
||
bn.selection.forEach(function(el){
|
||
bn.getShapeByElement(el).translate(0,1);
|
||
//el.nt_translate(0,1);
|
||
});
|
||
}
|
||
|
||
bn.dirty = true;
|
||
};
|
||
|
||
bn.toBack = function(){
|
||
//if (bn.selection.length < 1) return;
|
||
bn.selection.forEach(function(el){
|
||
el.toBack();
|
||
});
|
||
|
||
//floor and image can not select, so it's must be at bottom.
|
||
var floor = _.find(bn.shapes, function(shp){
|
||
return shp.element.sym.name == "floorPath";
|
||
});
|
||
|
||
if (floor) floor.element.toBack();
|
||
|
||
var floorImage = _.find(bn.shapes, function(shp){
|
||
return shp.element.sym.name == "floorImage";
|
||
});
|
||
|
||
if (floorImage) floorImage.element.toBack();
|
||
};
|
||
|
||
bn.toFront = function(){
|
||
if (bn.selection.length < 1) return;
|
||
bn.selection.forEach(function(el){
|
||
el.toFront();
|
||
});
|
||
};
|
||
|
||
var languageJson = angular.fromJson(sessionStorage.getItem('languageJson'));
|
||
var edit = languageJson.Room3D.Edit;
|
||
|
||
bn.symbols = [
|
||
{
|
||
name: "cursor",
|
||
title: edit.Cursor,/*"选择"*/
|
||
tip: edit.CursorPrompt,/*"选中物体，可操作各种物体"*/
|
||
icon: "/img/3d/cursor.png",
|
||
mouseState: "default",
|
||
cursor: "default",
|
||
visible: true,
|
||
initState: function(){
|
||
}
|
||
},
|
||
{
|
||
name: "pan",
|
||
title: edit.Pan,/*"移动"*/
|
||
tip: edit.PanPrompt,/*"拖动移动画布"*/
|
||
icon: "/img/3d/move.png",
|
||
mouseState: "pan",
|
||
cursor: "default",
|
||
visible: true,
|
||
handleKey : function (key){
|
||
if (key === "ESC"){
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
},
|
||
initState: function(){
|
||
}
|
||
},
|
||
{
|
||
name: "pointIndicator",
|
||
title: edit.Point,/*"点"*/
|
||
tip: edit.PointPrompt,/*"鼠标点击提示"*/
|
||
visible: false,
|
||
class: "pointIndicator",
|
||
props: {
|
||
radius: 60
|
||
},
|
||
create: function (param) {
|
||
return bn.shapeMakeup(bn.paper.circle(param.x, param.y, this.props.radius), this);
|
||
}
|
||
},
|
||
{
|
||
name: "floorImage",
|
||
title: edit.FloorImage,/*"地板底图"*/
|
||
tip: edit.ImagePrompt,/*"用来做地板衬底方便绘制"*/
|
||
type: "part",
|
||
elementType: "path",
|
||
scale: 1,
|
||
tempParam: null,
|
||
create: function (param) {
|
||
var cp = bn.getSize();
|
||
var fx = (cp.width - param.width) / 2;
|
||
var fy = (cp.height - param.height) / 2;
|
||
var el = bn.paper.image(param.src, fx, fy, param.width, param.height);
|
||
// if (param.scale)
|
||
// {
|
||
// el.scale(param.scale,param.scale);
|
||
// this.scale = param.scale;
|
||
// }
|
||
return el;
|
||
},
|
||
updateScale: function(element, realSize, rulerLength){
|
||
|
||
var x = bn.viewBoxWidth / bn.paper.width;
|
||
this.scale = (100 * realSize) / (rulerLength);
|
||
|
||
//var y = bn.viewBoxHeight / bn.paper.height;
|
||
element.scale(this.scale,this.scale);
|
||
this.tempParam = {
|
||
width : element.getBBox().width,
|
||
height : element.getBBox().height
|
||
};
|
||
|
||
},
|
||
update3DConfig: function(element, config){
|
||
delete config['param3D'];
|
||
},
|
||
update2DConfig: function(element, config){
|
||
_.extend(config.param2D , this.tempParam);
|
||
//config.param2D = this.tempParam;
|
||
config.param2D.scale = this.scale;
|
||
},
|
||
},
|
||
{
|
||
name: "ruler",
|
||
title: edit.Ruler,/*"标尺"*/
|
||
tip: edit.RulerPrompt,/*"标尺状态: 标记地板底图尺寸用于缩放底图到适当大小"*/
|
||
icon: "/img/3d/ruler.png",
|
||
mouseState: "drawRuler",
|
||
cursor: "crosshair",
|
||
visible: true,
|
||
class: "rulerPath",
|
||
props:{
|
||
},
|
||
handleKey : function (key){
|
||
if (key === "ESC"){
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
},
|
||
create: function (param) {
|
||
var line = bn.paper.path(["M", param.start.x, param.start.y,
|
||
"L", param.end.x, param.end.y]);
|
||
return bn.shapeMakeup(line, this);
|
||
},
|
||
initState: function () {
|
||
var ruler = bn.findShapeBySymbolName("ruler");
|
||
if (ruler) {
|
||
/*"此操作将删除已经存在的标尺比例，重新计算底图缩放比例，是否继续？"*/
|
||
bn.confirm(edit.Prompt.RulerConfirm,languageJson.ConfirmBox).then(function (data) {
|
||
if (data === true) {
|
||
ruler.delete();
|
||
var imgElement =bn.findShapeBySymbolName("floorImage").element;
|
||
imgElement.transform("");
|
||
}
|
||
if (data === false) bn.selectDefaultSymbol();
|
||
});
|
||
}
|
||
},
|
||
endState: function () {
|
||
var ruler = bn.findShapeBySymbolName("ruler");
|
||
if (ruler) {
|
||
/*"请输入该线段对应实际长度，单位：米"*/
|
||
bn.input(edit.Prompt.RulerInput,"0",languageJson.InputBox).then(function (data) {
|
||
if (data.result){
|
||
var v = parseFloat(data.val);
|
||
if (v <= 0 || v > 9999)
|
||
{
|
||
/*"输入的尺寸不正确, 请重新绘制"*/
|
||
bn.info(edit.Prompt.RulerInfo,languageJson.MessageBox);
|
||
ruler.delete();
|
||
return;
|
||
}
|
||
|
||
var imgElement =bn.findShapeBySymbolName("floorImage").element;
|
||
imgElement.sym.updateScale(imgElement, v,
|
||
ruler.element.getTotalLength());
|
||
}
|
||
|
||
ruler.delete();
|
||
|
||
});
|
||
}
|
||
},
|
||
update3DConfig: function(element, config){
|
||
delete config['param3D'];
|
||
},
|
||
update2DConfig: function(element, config){
|
||
config.param2D.start = {};
|
||
config.param2D.start.x = element.getBBox().x;
|
||
config.param2D.start.y = element.getBBox().y;
|
||
config.param2D.end = {};
|
||
config.param2D.end.x = element.getBBox().x + element.getBBox().width;
|
||
config.param2D.end.y = element.getBBox().y + element.getBBox().height;
|
||
}
|
||
},
|
||
{
|
||
name: "floorPath",
|
||
title: edit.FloorPath,/*"地板"*/
|
||
tip: edit.PathPrompt,/*"画地板状态: 画矩形封闭区域，点三点形成矩形"*/
|
||
icon: "/img/3d/Floor2.png",
|
||
mouseState: "drawWall",
|
||
cursor: "crosshair",
|
||
unit: "floor",
|
||
moldId:"wallpath-default",
|
||
visible: true,
|
||
style:{
|
||
"stroke":"#28a4c9",
|
||
"stroke-width":"40",
|
||
"stroke-linejoin":"round",
|
||
"stroke-linecap": "round",
|
||
"pointer-events": "all",
|
||
"fill-opacity":"0.5",
|
||
"fill":"#b9def0"
|
||
},
|
||
create: function (param) {
|
||
return bn.shapeMakeup(bn.paper.path(param.path), this);
|
||
},
|
||
update: function(cfg, element){
|
||
var mold = _.find(molds, function(m){
|
||
return m.id == cfg.param3D.moldId; });
|
||
|
||
if (cfg.param2D.angle) element.animate({
|
||
transform:"r" + cfg.param2D.angle }, 500);
|
||
|
||
element.animate({"stroke-width": mold.size.width }, 500);
|
||
},
|
||
handleKey : function (key){
|
||
if (key === "ESC"){
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
},
|
||
endState: function (){
|
||
if (_.isUndefined(bn.temp.wallCache)) return;
|
||
if (_.isUndefined(bn.temp.wallCache.ps)) return;
|
||
bn.temp.wallCache.ps.forEach(function(shp){
|
||
shp.delete();
|
||
});
|
||
|
||
//因为只能绘制矩形地板的原因，需对结果Path进行计算
|
||
//只能点3个点，用直角折线形成精确的第三点并封闭来构成真正的矩形
|
||
|
||
var startPoint = {};
|
||
var endSegment = "";
|
||
var index = 0;
|
||
|
||
var floorLine = _.reduce(bn.temp.wallCache.line.attrs.path, function (ps, segment) {
|
||
|
||
if (index == 3) return ps;
|
||
index ++;
|
||
|
||
if (segment[0] == "M") {
|
||
ps = "M " + segment[1] + " " + segment[2];
|
||
startPoint.x = segment[1];
|
||
startPoint.y = segment[2];
|
||
}
|
||
|
||
if (segment[0] == "H") {
|
||
ps = ps + " H " + segment[1];
|
||
if (index == 3) endSegment = " V " + startPoint.y + " Z ";
|
||
}
|
||
|
||
if (segment[0] == "V") {
|
||
ps = ps + " V " + segment[1];
|
||
if (index == 3) endSegment = " H " + startPoint.x + " Z ";
|
||
}
|
||
|
||
return ps;
|
||
}, "");
|
||
|
||
if (index == 3) floorLine = floorLine + endSegment;
|
||
//console.log(floorLine);
|
||
var shp = bn.addShape("floorPath", {path: floorLine});
|
||
bn.toBack();
|
||
bn.temp.wallCache.line.remove();
|
||
bn.temp.wallCache = undefined;
|
||
|
||
//this.update2DConfig(shp.element, shp.config);
|
||
//this.update3DConfig(shp.element. shp.config);
|
||
},
|
||
calcCenter: function(element){
|
||
var fp = element;
|
||
if (fp) {
|
||
var ps = fp.attr("path");
|
||
var w, h;
|
||
var sx,sy,mx,my;
|
||
|
||
var sx = parseFloat(ps[0][1]);
|
||
var sy = parseFloat(ps[0][2]);
|
||
|
||
if (ps[1][0] === "H")
|
||
mx = parseFloat(ps[1][1]);
|
||
else
|
||
mx = parseFloat(ps[2][1]);
|
||
|
||
if (ps[1][0] === "V")
|
||
my = parseFloat(ps[1][1]);
|
||
else
|
||
my = parseFloat(ps[2][1]);
|
||
}
|
||
|
||
w = Math.abs(mx - sx);
|
||
h = Math.abs(my - sy);
|
||
|
||
bn.center2D = {};
|
||
bn.center2D.x = sx + w / 2;
|
||
bn.center2D.y = sy + h / 2;
|
||
},
|
||
initState: function(){
|
||
bn.enablePan = false;
|
||
var fp = bn.findShapeBySymbolName("floorPath");
|
||
if (fp) {
|
||
/*"地板只允许有一个，确定重新绘制？"*/
|
||
bn.confirm(edit.Prompt.FloorConfirm,languageJson.ConfirmBox).then(function (data) {
|
||
if (data === true) {
|
||
fp.delete();
|
||
}
|
||
else
|
||
bn.selectDefaultSymbol();
|
||
});
|
||
}
|
||
else{
|
||
/*"点击三个点形成直角折线来自动形成矩形地板"*/
|
||
bn.info(edit.Prompt.FloorInfo,languageJson.MessageBox);
|
||
}
|
||
},
|
||
update2DConfig: function(element, config){
|
||
//todo: when moved all path string changed to 'c'
|
||
config.param2D.path = element.attr("path").toString();
|
||
},
|
||
update3DConfig: function(element, config) {
|
||
config.param3D.floorTexture = "/img/3d/floor05.png";
|
||
|
||
var fp = element;
|
||
if (fp) {
|
||
var ps = fp.attr("path");
|
||
var w, h;
|
||
var sx,sy,mx,my;
|
||
|
||
var sx = parseFloat(ps[0][1]);
|
||
var sy = parseFloat(ps[0][2]);
|
||
|
||
if (ps[1][0] === "H")
|
||
mx = parseFloat(ps[1][1]);
|
||
else
|
||
mx = parseFloat(ps[2][1]);
|
||
|
||
if (ps[1][0] === "V")
|
||
my = parseFloat(ps[1][1]);
|
||
else
|
||
my = parseFloat(ps[2][1]);
|
||
}
|
||
|
||
w = Math.abs(mx - sx);
|
||
h = Math.abs(my - sy);
|
||
config.param3D.floorWidth = w;
|
||
config.param3D.floorHeight = h;
|
||
|
||
bn.center2D = {};
|
||
bn.center2D.x = sx + w / 2;
|
||
bn.center2D.y = sy + h / 2;
|
||
|
||
}
|
||
},
|
||
{
|
||
name: "wallPath",
|
||
title: edit.WallPath,/*"墙壁"*/
|
||
tip: edit.WallPrompt,/*"画墙状态：鼠标点击画墙等折线路径物体"*/
|
||
icon: "/img/3d/wall.png",
|
||
mouseState: "drawWall",
|
||
unit: "wallPath",
|
||
moldId:"wallpath-default",
|
||
cursor: "crosshair",
|
||
visible: true,
|
||
style:{
|
||
"stroke":"#28a4c9",
|
||
"stroke-width":"40",
|
||
"stroke-linejoin":"round",
|
||
"stroke-linecap": "round",
|
||
"pointer-events": "all",
|
||
"fill-opacity":"0.5",
|
||
"fill":"#b9def0"
|
||
},
|
||
update: function(cfg, element){
|
||
var mold = _.find(molds, function(m){
|
||
return m.id == cfg.param3D.moldId; });
|
||
|
||
if (cfg.param2D.angle) element.animate({
|
||
transform:"r" + cfg.param2D.angle }, 500);
|
||
|
||
element.animate({"stroke-width": mold.size.width }, 500);
|
||
},
|
||
create: function (param) {
|
||
//this.linePath = param.path;
|
||
return bn.shapeMakeup(bn.paper.path(param.path), this);
|
||
},
|
||
handleKey : function (key){
|
||
if (key === "ESC"){
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
},
|
||
endState: function (){
|
||
if (_.isUndefined(bn.temp.wallCache)) return;
|
||
if (_.isUndefined(bn.temp.wallCache.ps)) return;
|
||
bn.temp.wallCache.ps.forEach(function(shp){
|
||
shp.delete();
|
||
});
|
||
bn.addShape("wallPath", bn.temp.wallCache);
|
||
|
||
bn.temp.wallCache.line.remove();
|
||
bn.temp.wallCache = undefined;
|
||
},
|
||
update2DConfig: function(element, config){
|
||
if (config.param2D.pathArray)
|
||
{
|
||
var oldPath = bn.paper.path(config.param2D.pathArray.toString());
|
||
// var pathOffset = {
|
||
// x: element.getBBox().x - oldPath.getBBox().x,
|
||
// y: element.getBBox().y - oldPath.getBBox().y
|
||
// };
|
||
|
||
// var newX = parseFloat(element.realPath[0][1]) + pathOffset.x;
|
||
// var newY = parseFloat(element.realPath[0][2]) + pathOffset.y;
|
||
|
||
var pathNew = oldPath.attrs.path.slice(0);
|
||
|
||
pathNew[0][1] = element.getBBox().x;
|
||
pathNew[0][2] = element.getBBox().y;
|
||
|
||
config.param2D.path = pathNew.toString();
|
||
config.param2D.pathArray = pathNew;
|
||
|
||
oldPath.remove();
|
||
}
|
||
else if (element.attrs.path){
|
||
config.param2D.path = element.attrs.path.toString();
|
||
config.param2D.pathArray = element.attrs.path;
|
||
}
|
||
},
|
||
update3DConfig: function(element, config){
|
||
var ps = config.param2D.pathArray;
|
||
var lines = bn.util.get3DLinesBySegments(ps, 10);
|
||
config.param3D.lines = lines;
|
||
}
|
||
},
|
||
{
|
||
name: "door",
|
||
title: edit.Door,/*"门窗"*/
|
||
tip: edit.DoorPrompt,/*"画门窗状态：在墙上鼠标点击的位置放置门窗"*/
|
||
icon: "/img/3d/door.png",
|
||
mouseState: "drawWallPart",
|
||
unit: "door",
|
||
moldId:"door-default",
|
||
visible: true,
|
||
cursor:"crosshair",
|
||
style:{
|
||
"fill": "#FF8080"
|
||
},
|
||
props: {
|
||
width: 190,
|
||
height: 30
|
||
},
|
||
create: function (param) {
|
||
var rect;
|
||
if (param.type === "Y") {
|
||
rect = bn.paper.rect(param.x, param.y, this.props.width, this.props.height);
|
||
}
|
||
else {
|
||
rect = bn.paper.rect(param.x, param.y, this.props.height, this.props.width);
|
||
}
|
||
return bn.shapeMakeup(rect, this);
|
||
},
|
||
handleKey : function (key){
|
||
if (key === "ESC"){
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
},
|
||
update: function(cfg, element){
|
||
var mold = _.find(molds, function(m){
|
||
return m.id == cfg.param3D.moldId; });
|
||
|
||
if (cfg.param2D.angle) element.animate({
|
||
transform:"r" + cfg.param2D.angle }, 500);
|
||
|
||
if (element.attrs.width > element.attrs.height)
|
||
{
|
||
element.animate({
|
||
width:mold.size.width,
|
||
height:mold.size.depth
|
||
}, 500);
|
||
}
|
||
else
|
||
{
|
||
element.animate({
|
||
width:mold.size.depth,
|
||
height:mold.size.width
|
||
}, 500);
|
||
}
|
||
},
|
||
update2DConfig: function(element, config){
|
||
config.param2D.x = element.getBBox().x;
|
||
config.param2D.y = element.getBBox().y;
|
||
if (element.attrs.width > element.attrs.height)
|
||
config.param2D.type = "Y";
|
||
else
|
||
config.param2D.type = "X";
|
||
},
|
||
update3DConfig: function(element, config){
|
||
|
||
var c = bn.util.boxCenter(element);
|
||
config.param3D.position = bn.util.Point3D(c);
|
||
config.param3D.position.y = parseFloat(config.param3D.aboveGround);
|
||
|
||
if (element.attrs.width > element.attrs.height)
|
||
config.param3D.direct = "X";
|
||
else
|
||
config.param3D.direct = "Z";
|
||
}
|
||
},
|
||
{
|
||
name: "rack",
|
||
title: edit.Rack,/*"机架"*/
|
||
tip: edit.RackPrompt,/*"放置机架等盒状物体"*/
|
||
icon: "/img/3d/rack.jpg",
|
||
cursor:"url('/img/3d/object.cur'), default",
|
||
mouseState: "drawShape",
|
||
visible: true,
|
||
unit: "rack",
|
||
moldId:"rack-default",
|
||
style:{
|
||
"fill": "blue",
|
||
"fill-opacity":"0.5",
|
||
"stroke": "#437ded",
|
||
"stroke-width":10,
|
||
"pointer-events":"all"
|
||
},
|
||
props: {
|
||
width: 70,
|
||
depth: 100,
|
||
height: 220
|
||
},
|
||
handleKey : function (key){
|
||
if (key === "ESC"){
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
},
|
||
create: function (param) {
|
||
var rect = bn.paper.rect(param.x, param.y,
|
||
this.props.width, this.props.depth);
|
||
return bn.shapeMakeup(rect, this);
|
||
},
|
||
update: function(cfg, element){
|
||
var mold = _.find(molds, function(m){
|
||
return m.id == cfg.param3D.moldId; });
|
||
|
||
if (cfg.param2D.angle) element.animate({
|
||
transform:"R" + cfg.param2D.angle }, 600);
|
||
|
||
element.animate({
|
||
width:mold.size.width,
|
||
height:mold.size.depth
|
||
}, 500);
|
||
},
|
||
update2DConfig: function(element, config){
|
||
//element.animate({transform:""}, 10);
|
||
|
||
config.param2D.x = element.attrs.x;
|
||
config.param2D.y = element.attrs.y;
|
||
|
||
|
||
},
|
||
update3DConfig: function(element, config){
|
||
var c = bn.util.boxCenter(element);
|
||
config.param3D.position = bn.util.Point3D(c);
|
||
}
|
||
},
|
||
//{
|
||
// name: "camera",
|
||
// title: "摄像头",
|
||
// tip: "放置摄像头在鼠标点击位置",
|
||
// icon: "/img/3d/camera.jpg",
|
||
// cursor:"url('/img/3d/object.cur'), default",
|
||
// mouseState: "drawShape",
|
||
// visible: true,
|
||
// style:{
|
||
// "stroke": "#ed4f44",
|
||
// "stroke-width":"10",
|
||
// "fill-opacity":"0.5",
|
||
// "fill":"red"
|
||
// },
|
||
// props: {
|
||
// radius: 30
|
||
// },
|
||
// handleKey : function (key){
|
||
// if (key === "ESC"){
|
||
// bn.selectDefaultSymbol();
|
||
// }
|
||
// },
|
||
// create: function (param) {
|
||
// return bn.shapeMakeup(bn.paper.circle(param.x, param.y, this.props.radius), this);
|
||
// },
|
||
// update2DConfig: function(element, config){
|
||
// config.param2D.x = element.getBBox().x;
|
||
// config.param2D.y = element.getBBox().y;
|
||
// },
|
||
// update3DConfig: function(element, config){
|
||
// config.param3D = {
|
||
// "unit": "camera",
|
||
// "angle": 0,
|
||
// "high": 300,
|
||
// "position":{x:0,y:0,z:0}
|
||
// };
|
||
// var c = bn.util.boxCenter(element);
|
||
// config.param3D.position = bn.util.Point3D(c);
|
||
// config.param3D.position.y = config.param3D.high;
|
||
// }
|
||
//},
|
||
{
|
||
name: "flat",
|
||
title: edit.Flat,/*"装饰"*/
|
||
tip: edit.FlatPrompt,/*"放置平面图形到3D画布"*/
|
||
icon: "/img/3d/plant.png",
|
||
cursor:"url('/img/3d/object.cur'), default",
|
||
mouseState: "drawShape",
|
||
unit:"flat",
|
||
moldId: "flat-default",
|
||
visible: true,
|
||
style:{
|
||
"stroke": "#ed4fee",
|
||
"stroke-width":"10",
|
||
"fill-opacity":"0.5",
|
||
"fill":"yellow"
|
||
},
|
||
props:{
|
||
"width":"100",
|
||
"depth":"100"
|
||
},
|
||
handleKey : function (key){
|
||
if (key === "ESC"){
|
||
bn.selectDefaultSymbol();
|
||
}
|
||
},
|
||
create: function (param) {
|
||
var rect = bn.paper.rect(param.x, param.y,
|
||
this.props.width, this.props.width);
|
||
return bn.shapeMakeup(rect, this);
|
||
},
|
||
update2DConfig: function(element, config){
|
||
config.param2D.x = element.getBBox().x;
|
||
config.param2D.y = element.getBBox().y;
|
||
config.param2D.width = element.getBBox().width;
|
||
},
|
||
update: function(cfg, element){
|
||
var mold = _.find(molds, function(m){
|
||
return m.id == cfg.param3D.moldId; });
|
||
|
||
element.animate({
|
||
width:mold.size.width,
|
||
height:mold.size.width
|
||
}, 500);
|
||
},
|
||
update3DConfig: function(element, config){
|
||
var c = bn.util.boxCenter(element);
|
||
config.param3D.position = bn.util.Point3D(c);
|
||
config.param3D.position.y = config.param3D.high;
|
||
}
|
||
}
|
||
];
|
||
|
||
bn.shapeClass = {
|
||
newConfig:function(){
|
||
var that = this;
|
||
if (!this.config)
|
||
{
|
||
this.config = {};
|
||
this.config.name = this.element.sym.name;
|
||
this.config.title = this.element.sym.title;
|
||
|
||
this.config.param2D = {};
|
||
this.config.param2D.symbol = this.element.sym.name;
|
||
this.config.param2D.angle = 0;
|
||
|
||
this.config.param3D = {};
|
||
this.config.param3D.unit = this.element.sym.unit;
|
||
this.config.param3D.moldId = this.element.sym.moldId;
|
||
this.config.param3D.angle = 0;
|
||
this.config.param3D.aboveGround = 0;
|
||
|
||
this.config.param3D.bindings = [];
|
||
}
|
||
this.config.id = this.element.id;
|
||
},
|
||
getBindingTitle:function(){
|
||
if (!this.config.param3D.bindings) return "无";
|
||
var str = "<ul>";
|
||
this.config.param3D.bindings.forEach(function(item){
|
||
str = str + "<li>" + item.title + "</li>";
|
||
});
|
||
var str = str + "</ul>";
|
||
},
|
||
translate:function(dx,dy){
|
||
if (this.element.matrix.split().rotate)
|
||
{
|
||
this.element.transform('');
|
||
}
|
||
this.element.nt_translate(dx,dy);
|
||
this.updateLook();
|
||
},
|
||
updateLook:function(){
|
||
if (this.element.sym)
|
||
{
|
||
if (this.element.sym.update){
|
||
this.element.sym.update(this.config, this.element);
|
||
}
|
||
}
|
||
},
|
||
updateConfig:function(){
|
||
var that = this;
|
||
if (that.element.sym)
|
||
{
|
||
if (that.element.sym.update2DConfig)
|
||
that.element.sym.update2DConfig(that.element,that.config);
|
||
if (that.element.sym.update3DConfig)
|
||
that.element.sym.update3DConfig(that.element,that.config);
|
||
}
|
||
},
|
||
delete:function(){
|
||
bn.shapes = _.without(bn.shapes, this);
|
||
if (this.element.glowEffect)
|
||
this.element.glowEffect.remove();
|
||
this.element.remove();
|
||
bn.proofer.resetUI();
|
||
bn.resetSelection();
|
||
bn.dirty = true;
|
||
},
|
||
resetStyle:function(){
|
||
var that = this;
|
||
if (that.element.sym.style)
|
||
{
|
||
for(var a in that.element.sym.style)
|
||
{
|
||
if (a == "stroke-width" && that.element.sym.name == "wallPath") continue;
|
||
that.element.attr(a, that.element.sym.style[a]);
|
||
}
|
||
}
|
||
},
|
||
clone:function(){
|
||
var that = this;
|
||
var ns = _.extend({}, that);
|
||
|
||
ns.config = angular.fromJson(angular.toJson(that.config));
|
||
ns.element = that.element.clone();
|
||
ns.config.id = that.element.id;
|
||
ns.element.sym = _.extend({}, that.element.sym);
|
||
ns.selected = that.selected;
|
||
|
||
if (that.element.sym.class !== "floorPath")
|
||
ns.element.draggable();
|
||
return ns;
|
||
}
|
||
};
|
||
|
||
bn.util = {};
|
||
bn.util.Point3D = function(point2D){
|
||
var p ={};
|
||
if (bn.center2D)
|
||
{
|
||
p.x = point2D.x - bn.center2D.x;
|
||
p.z = point2D.y - bn.center2D.y;
|
||
}
|
||
else{
|
||
p.x = point2D.x;
|
||
p.z = point2D.y;
|
||
}
|
||
return p;
|
||
};
|
||
|
||
bn.util.boxCenter = function(el){
|
||
var box = el.getBBox();
|
||
|
||
var p = {x: box.x + box.width / 2 , y:box.y + box.height / 2};
|
||
|
||
return p;
|
||
};
|
||
|
||
bn.util.get3DLinesBySegments = function (segs, y) {
|
||
var lastX, lastY;
|
||
|
||
var lines = [];
|
||
|
||
var parr = _.reduce(segs, function (ps, segment) {
|
||
var point = {};
|
||
|
||
if (segment[0] == "M") {
|
||
point.x = parseFloat(segment[1]);
|
||
point.y = parseFloat(segment[2]);
|
||
lastX = point.x;
|
||
lastY = point.y;
|
||
}
|
||
|
||
if (segment[0] == "H") {
|
||
point.x = parseFloat(segment[1]);
|
||
point.y = lastY;
|
||
lastX = point.x;
|
||
}
|
||
|
||
if (segment[0] == "V") {
|
||
point.y = parseFloat(segment[1]);
|
||
point.x = lastX;
|
||
lastY = point.y;
|
||
}
|
||
|
||
var p3 = bn.util.Point3D(point);
|
||
p3.y = parseFloat(y);
|
||
|
||
var startPoint = ps[ps.length - 1];
|
||
|
||
if (startPoint)
|
||
{
|
||
var line = {
|
||
start: startPoint,
|
||
end: p3
|
||
};
|
||
|
||
lines.push(line);
|
||
}
|
||
|
||
ps.push(p3);
|
||
return ps;
|
||
}, []);
|
||
|
||
return lines;
|
||
};
|
||
|
||
bn.proofer = {
|
||
showSettings: function(shapes, setting){
|
||
//single:
|
||
if (_.isUndefined(shapes)) return;
|
||
bn.proofer.shapes = shapes;
|
||
bn.proofer.setting = setting;
|
||
if (shapes.length == 1){
|
||
var shp = shapes[0];
|
||
if (!shp.config) shp.newConfig();
|
||
setting.title = shp.config.title;
|
||
setting.angle = shp.config.param2D.angle;
|
||
setting.aboveGround = shp.config.param3D.aboveGround;
|
||
setting.molds = this.getMolds(shp.element.sym.name);
|
||
setting.mold = _.find(setting.molds,
|
||
function(m){ return m.id == shp.config.param3D.moldId; });
|
||
setting.bindings = shp.config.param3D.bindings;
|
||
}
|
||
|
||
if (shapes.length > 1){
|
||
var allSame = true; var ns = [];
|
||
ns.push(shapes[0].element.sym.name);
|
||
shapes.forEach(function(shp){
|
||
if (!_.contains(ns, shp.element.sym.name))
|
||
allSame = false;
|
||
});
|
||
|
||
if (allSame){
|
||
setting.molds = this.getMolds(shapes[0].element.sym.name);
|
||
}
|
||
else
|
||
setting.molds = undefined;
|
||
|
||
setting.title = undefined;
|
||
setting.angle = undefined;
|
||
setting.aboveGround = undefined;
|
||
setting.mold = undefined;
|
||
setting.bindings = [];
|
||
}
|
||
},
|
||
resetUI: function(){
|
||
if (bn.proofer.setting){
|
||
bn.proofer.setting.molds = undefined;
|
||
bn.proofer.setting.title = undefined;
|
||
bn.proofer.setting.angle = undefined;
|
||
bn.proofer.setting.aboveGround = undefined;
|
||
bn.proofer.setting.mold = undefined;
|
||
bn.proofer.setting.bindings = [];
|
||
}
|
||
},
|
||
getMolds: function(symbolName){
|
||
var ms = [];
|
||
molds.forEach(function(m){
|
||
if (m.name === symbolName) ms.push(m);
|
||
});
|
||
return ms;
|
||
},
|
||
saveShapes: function(shapes, setting){
|
||
if (shapes.length == 1){
|
||
var shp = shapes[0];
|
||
if (shp.config)
|
||
{
|
||
shp.config.title = setting.title;
|
||
shp.config.param2D.angle = parseFloat(setting.angle);
|
||
shp.config.param3D.angle = parseFloat(setting.angle);
|
||
shp.config.param3D.moldId = setting.mold.id;
|
||
shp.config.param3D.aboveGround = parseFloat(setting.aboveGround);
|
||
shp.config.param3D.bindings = setting.bindings;
|
||
shp.updateLook();
|
||
}
|
||
}
|
||
if (shapes.length > 1){
|
||
var allSame = true; var ns = [];
|
||
ns.push(shapes[0].element.sym.name);
|
||
shapes.forEach(function(shp){
|
||
if (!_.contains(ns, shp.element.sym.name))
|
||
allSame = false;
|
||
});
|
||
|
||
shapes.forEach(function(shp){
|
||
if (setting.title)
|
||
shp.config.title = setting.title;
|
||
if (setting.angle)
|
||
{
|
||
shp.config.param2D.angle = parseFloat(setting.angle);
|
||
shp.config.param3D.angle = parseFloat(setting.angle);
|
||
}
|
||
if (allSame){
|
||
if (setting.mold){
|
||
shp.config.param3D.moldId = setting.mold.id;
|
||
}
|
||
}
|
||
|
||
if (setting.aboveGround)
|
||
shp.config.param3D.aboveGround = parseFloat(setting.aboveGround);
|
||
shp.updateLook();
|
||
});
|
||
|
||
}
|
||
},
|
||
//rend: function(shapes, setting){
|
||
//
|
||
// //when focus lose or save, save config to shape
|
||
// this.updateShapes(shapes,setting);
|
||
//
|
||
// //3 load proof by shape's mold define
|
||
// //4 user can use set in template or modify it
|
||
// //multiple:
|
||
// //1 if shape's symbol is same, they can change style (not binding)
|
||
// //2 when focus lose or save, save copied config to each shape
|
||
//},
|
||
proofs:[
|
||
{
|
||
type:"rack",
|
||
load: function(shape, setting){
|
||
|
||
},
|
||
save: function(shape, setting){
|
||
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
(function(R) {
|
||
R.el.draggable = function(move, start, up) {
|
||
this._ui = this._ui || {};
|
||
|
||
var that = this;
|
||
|
||
this._ui.onMove = R.is(move, 'function') ?
|
||
move : function(distanceX, distanceY, x, y, deltaX, deltaY) {
|
||
|
||
if (that.sym){
|
||
if (that.sym.name == "floorPath") return;
|
||
if (that.sym.name == "wallPath") return;
|
||
}
|
||
|
||
bn.dirty = true;
|
||
bn.update();
|
||
if (that === bn.selectRect)
|
||
{
|
||
that.translate(deltaX, deltaY);
|
||
bn.shapes.forEach(function(shp){
|
||
if (shp.selected)
|
||
{
|
||
if (shp.element.matrix.split().rotate)
|
||
{
|
||
that._ui.rotatestr = "r"+shp.element.matrix.split().rotate;
|
||
shp.element.transform('');
|
||
}
|
||
|
||
shp.element.nt_translate(deltaX,deltaY);
|
||
}
|
||
});
|
||
}
|
||
else{
|
||
if (that.sym){
|
||
if (that.matrix.split().rotate)
|
||
{
|
||
that._ui.rotatestr = "r"+ that.matrix.split().rotate;
|
||
that.transform('');
|
||
}
|
||
|
||
that.nt_translate(deltaX,deltaY);
|
||
}
|
||
}
|
||
};
|
||
|
||
this._ui.onStart = R.is(start, 'function') ? start : function(x, y) {
|
||
if (bn.mouseState !== "default") return;
|
||
//if (that.glowEffect) that.glowEffect.remove();
|
||
$(bn.domId).css( 'cursor', "url('/img/3d/hand-pull-darkblue.cur'), default");
|
||
};
|
||
|
||
function onMove(distanceX, distanceY, x, y) {
|
||
if (bn.mouseState !== "default") return;
|
||
var cp = bn.canvasPoint(x, y);
|
||
var deltaX = cp.x - that._ui.lastX;
|
||
var deltaY = cp.y - that._ui.lastY;
|
||
that._ui.lastX = cp.x;
|
||
that._ui.lastY = cp.y;
|
||
//if (that.glowEffect) that.glowEffect.remove();
|
||
that._ui.onMove(distanceX, distanceY, x, y, deltaX, deltaY);
|
||
that.paper.safari();
|
||
}
|
||
|
||
function onStart(x, y) {
|
||
if (bn.mouseState !== "default") return;
|
||
if (that.sym)
|
||
if (that.sym.name == "floorPath") return;
|
||
|
||
var cp = bn.canvasPoint(x, y);
|
||
that._ui.lastX = cp.x;
|
||
that._ui.lastY = cp.y;
|
||
|
||
//if (that.glowEffect) that.glowEffect.remove();
|
||
that._ui.onStart(x, y);
|
||
}
|
||
|
||
function onUp(e){
|
||
if (that.sym){
|
||
bn.getShapeByElement(that).updateLook();
|
||
}
|
||
$(bn.domId).css( 'cursor', "auto" );
|
||
}
|
||
|
||
return this.drag(onMove, onStart, onUp);
|
||
};
|
||
})(Raphael);
|
||
|
||
(function() {
|
||
/** define 2 custom attributes translateNT and scaleNT (relative attributes) */
|
||
var initCA = function(shape) {
|
||
if(!shape.paper.customAttributes["translateNT"]) {
|
||
|
||
shape.paper.customAttributes["translateNT"] = function(dx, dy) {
|
||
if (this.type == "circle" || this.type == "ellipse") {
|
||
return {
|
||
"cx" : this.attr("cx") + dx,
|
||
"cy" : this.attr("cy") + dy
|
||
};
|
||
} else if (this.type == "rect" || this.type == "text"
|
||
|| this.type == "image") {
|
||
return {
|
||
"x" : this.attr("x") + dx,
|
||
"y" : this.attr("y") + dy
|
||
};
|
||
} else if (this.type == "path") {
|
||
var matrix = Raphael.matrix(1, 0, 0, 1, 0, 0);
|
||
matrix.translate(dx, dy);
|
||
var newPath = Raphael.mapPath(this.attr("path"), matrix);
|
||
this.attr({
|
||
"path" : newPath
|
||
});
|
||
}
|
||
};
|
||
|
||
shape.paper.customAttributes["scaleNT"] = function(dx, dy) {
|
||
|
||
if (this.type == "circle") {
|
||
return {
|
||
"r" : this.attr("r") * Math.max(dx, dy)
|
||
};
|
||
} else if (this.type == "ellipse") {
|
||
return {
|
||
"rx" : this.attr("rx") * dx,
|
||
"ry" : this.attr("ry") * dy
|
||
};
|
||
} else if (this.type == "rect" || this.type == "image") {
|
||
return {
|
||
"width" : this.attr("width") * dx,
|
||
"height" : this.attr("height") * dy
|
||
};
|
||
} else if (this.type == "text") {
|
||
var fs = parseInt(this.attr("font-size") + "");
|
||
return {
|
||
"font-size" : fs * Math.max(dx, dy)
|
||
};
|
||
} else if (this.type == "path") {
|
||
var bb = this.getBBox(), cx = bb.x + bb.width / 2, cy = bb.y
|
||
+ bb.height / 2;
|
||
var matrix = Raphael.matrix(1, 0, 0, 1, 0, 0);
|
||
matrix.scale(dx, dy, cx, cy);
|
||
var newPath = Raphael.mapPath(this.attr("path"), matrix);
|
||
return {
|
||
"path" : newPath
|
||
};
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
};
|
||
Raphael.el.nt_translate = function(dx, dy) {
|
||
initCA(this);
|
||
if (this.type == "circle" || this.type == "ellipse") {
|
||
this.attr({
|
||
"cx" : this.attr("cx") + dx,
|
||
"cy" : this.attr("cy") + dy
|
||
});
|
||
} else if (this.type == "rect" || this.type == "text"
|
||
|| this.type == "image") {
|
||
this.attr({
|
||
"x" : this.attr("x") + dx,
|
||
"y" : this.attr("y") + dy
|
||
});
|
||
} else if (this.type == "path") {
|
||
var matrix = Raphael.matrix(1, 0, 0, 1, 0, 0);
|
||
matrix.translate(dx, dy);
|
||
var newPath = Raphael.mapPath(this.attr("path"), matrix);
|
||
this.attr({
|
||
"path" : newPath
|
||
});
|
||
}
|
||
return this;
|
||
};
|
||
Raphael.el.nt_scale = function(dx, dy) {
|
||
initCA(this);
|
||
if (this.type == "circle") {
|
||
this.attr({
|
||
"r" : this.attr("r") * Math.max(dx, dy)
|
||
});
|
||
} else if (this.type == "ellipse") {
|
||
this.attr({
|
||
"rx" : this.attr("rx") * dx,
|
||
"ry" : this.attr("ry") * dy
|
||
});
|
||
} else if (this.type == "rect" || this.type == "image") {
|
||
this.attr({
|
||
"width" : this.attr("width") * dx,
|
||
"height" : this.attr("height") * dy
|
||
});
|
||
} else if (this.type == "text") {
|
||
var fs = parseInt(this.attr("font-size") + "");
|
||
this.attr({
|
||
"font-size" : fs * Math.max(dx, dy)
|
||
});
|
||
} else if (this.type == "path") {
|
||
var bb = this.getBBox(), cx = bb.x + bb.width / 2, cy = bb.y
|
||
+ bb.height / 2;
|
||
var matrix = Raphael.matrix(1, 0, 0, 1, 0, 0);
|
||
matrix.scale(dx, dy, cx, cy);
|
||
var newPath = Raphael.mapPath(this.attr("path"), matrix);
|
||
this.attr({
|
||
"path" : newPath
|
||
});
|
||
}
|
||
return this;
|
||
}
|
||
|
||
Raphael.st.nt_translate = function(dx, dy) {
|
||
initCA(this);
|
||
this.forEach(function(shape, idx) {
|
||
shape.nt_translate(dx, dy);
|
||
return true;
|
||
});
|
||
return this;
|
||
};
|
||
Raphael.st.nt_scale = function(dx, dy) {
|
||
initCA(this);
|
||
this.forEach(function(shape, idx) {
|
||
shape.nt_scale(dx, dy);
|
||
return true;
|
||
});
|
||
return this;
|
||
};
|
||
})();
|
||
|
||
//add reference service from outside
|
||
bn.inject = function(){
|
||
bn.$scope = bn.options.shell.$scope;
|
||
bn.$modal = bn.options.shell.$modal;
|
||
bn.$q = bn.options.shell.$q;
|
||
bn.$srv = bn.options.shell.$srv;
|
||
bn.$upload = bn.options.shell.$upload;
|
||
|
||
bn.$scope.setting = {};
|
||
bn.$scope.$on('shapeSelected', function(e, shapes) {
|
||
bn.proofer.showSettings(shapes, bn.$scope.setting);
|
||
if(!bn.$scope.$$phase) {
|
||
bn.$scope.$apply();
|
||
}
|
||
});
|
||
|
||
bn.$scope.$on('resetShape', function(e, shapes) {
|
||
bn.proofer.saveShapes(shapes, bn.$scope.setting);
|
||
if(!bn.$scope.$$phase) {
|
||
bn.$scope.$apply();
|
||
}
|
||
});
|
||
|
||
bn.$scope.change = function(){
|
||
bn.dirty = true;
|
||
bn.proofer.saveShapes(bn.proofer.shapes, bn.$scope.setting);
|
||
if(!bn.$scope.$$phase) {
|
||
bn.$scope.$apply();
|
||
}
|
||
};
|
||
};
|
||
|
||
bn.update = function(){
|
||
if(!bn.$scope.$$phase) {
|
||
bn.$scope.$apply();
|
||
}
|
||
};
|
||
|
||
bn.input = function(msg, inputValue, inputBox){
|
||
var deferred = bn.$q.defer();
|
||
var $modalScope = bn.$scope.$new(true);
|
||
$modalScope.message = msg;
|
||
$modalScope.inputValue = inputValue;
|
||
|
||
$modalScope.ok = function (){
|
||
deferred.resolve({val:this.inputValue, result:true});
|
||
this.$hide();
|
||
};
|
||
|
||
$modalScope.cancel = function (){
|
||
deferred.resolve({val:undefined, result:false});
|
||
this.$hide();
|
||
};
|
||
|
||
if($modalScope.languageJson == undefined)
|
||
$modalScope.languageJson = {};
|
||
$modalScope.languageJson.InputBox = inputBox;
|
||
|
||
bn.$modal({scope: $modalScope,
|
||
templateUrl: '/partials/inputBox.html',
|
||
show: true});
|
||
|
||
return deferred.promise;
|
||
};
|
||
|
||
bn.option = function(){
|
||
var imgShape, floorShape;
|
||
|
||
var $modalScope = bn.$scope.$new(false);
|
||
$modalScope.m = {};
|
||
|
||
var getMolds= function(symbolName){
|
||
var ms = [];
|
||
molds.forEach(function(m){
|
||
if (m.name === symbolName) ms.push(m);
|
||
});
|
||
return ms;
|
||
};
|
||
|
||
var load= function(){
|
||
imgShape = _.find(bn.shapes, function(shp){
|
||
return shp.config.name == "floorImage";
|
||
});
|
||
|
||
if (imgShape)
|
||
{
|
||
$modalScope.m.img = imgShape.config.param2D.src;
|
||
}
|
||
|
||
floorShape = _.find(bn.shapes, function(shp){
|
||
return shp.config.name == "floorPath";
|
||
});
|
||
if (floorShape){
|
||
$modalScope.floorDisable = false;
|
||
|
||
$modalScope.m.mold= _.find(molds,
|
||
function(m){ return m.id == floorShape.config.param3D.moldId; });
|
||
}
|
||
else
|
||
$modalScope.floorDisable = true;
|
||
};
|
||
|
||
$modalScope.walltype = false;
|
||
$modalScope.molds = getMolds("wallPath");
|
||
load();
|
||
$modalScope.change = function(){
|
||
if ($modalScope.m.mold){
|
||
floorShape.config.param3D.moldId = $modalScope.m.mold.id;
|
||
floorShape.updateLook();
|
||
}
|
||
|
||
bn.dirty = true;
|
||
};
|
||
|
||
$modalScope.$on("fileSelected",
|
||
function(event, msg) {
|
||
$modalScope.file = msg;
|
||
});
|
||
$modalScope.$on("fileSelected2",
|
||
function(event, msg) {
|
||
$modalScope.file2 = msg;
|
||
});
|
||
|
||
$modalScope.upload = function() {
|
||
var file = $modalScope.file;
|
||
|
||
if (file === undefined) return;
|
||
|
||
bn.$upload.uploadFile($modalScope.file).then(function(data) {
|
||
if ($modalScope.m.img) bn.$upload.deleteUploadFile($modalScope.m.img);
|
||
$modalScope.m.img = data;
|
||
bn.setBackground(data);
|
||
});
|
||
};
|
||
|
||
$modalScope.ok = function (){
|
||
this.$hide();
|
||
};
|
||
|
||
bn.$modal({scope: $modalScope,
|
||
templateUrl: '/partials/pageOption.html',
|
||
show: true});
|
||
};
|
||
|
||
bn.setBackground = function(imgurl) {
|
||
var languageJson = angular.fromJson(sessionStorage.getItem('languageJson'));
|
||
var edit = languageJson.Room3D.Edit;
|
||
var img = new Image();
|
||
img.src = imgurl;
|
||
img.onload = function() {
|
||
var cfg = {
|
||
"id": "0",
|
||
"name": "floorImage",
|
||
"title": edit.FloorImage,
|
||
"param2D": {
|
||
"symbol": "floorImage",
|
||
"src": imgurl,
|
||
"height": this.height,
|
||
"width": this.width,
|
||
"transparent": "0.4"
|
||
}
|
||
};/*"地板底图"*/
|
||
|
||
var old = bn.findShapeBySymbolName("floorImage");
|
||
if (old) old.delete();
|
||
|
||
var shp = bn.addShape("floorImage", cfg.param2D);
|
||
if (shp) {
|
||
shp.config = cfg;
|
||
shp.updateLook();
|
||
}
|
||
}
|
||
};
|
||
|
||
bn.setBinding = function(bs){
|
||
if (!bs) return;
|
||
var $modalScope = bn.$scope.$new(true);
|
||
|
||
var echo= function(){
|
||
bs.forEach(function(item){
|
||
var dev = _.find($modalScope.data.devices,
|
||
function(d){ return d.id === item.id; });
|
||
if (dev) $modalScope.data.selecteds.push(dev);
|
||
})
|
||
};
|
||
|
||
$modalScope.data = {};
|
||
$modalScope.data.selecteds = [];
|
||
bn.$srv.getBinding().then(function(data){
|
||
$modalScope.data.devices = data;
|
||
echo();
|
||
});
|
||
|
||
$modalScope.ok = function (){
|
||
bs.length = 0;
|
||
$modalScope.data.selecteds.forEach(function(item){
|
||
bs.push(item);
|
||
});
|
||
bn.dirty = true;
|
||
this.$hide();
|
||
};
|
||
|
||
$modalScope.deleteBind = function (){
|
||
bs.length = 0;
|
||
bn.dirty = true;
|
||
this.$hide();
|
||
};
|
||
|
||
var languageJson = angular.fromJson(sessionStorage.getItem('languageJson'));
|
||
if($modalScope.languageJson == undefined)
|
||
$modalScope.languageJson = {Configuration:{TextControl:{}}};
|
||
$modalScope.languageJson.Configuration.TextControl.BindingSettings = languageJson.Configuration.TextControl.BindingSettings;
|
||
|
||
bn.$modal({scope: $modalScope,
|
||
templateUrl: '/partials/bindingDlg.html',
|
||
show: true});
|
||
};
|
||
|
||
bn.confirm = function(msg,confirmBox){
|
||
var deferred = bn.$q.defer();
|
||
var $modalScope = bn.$scope.$new(true);
|
||
$modalScope.message = msg;
|
||
$modalScope.ok = function (){
|
||
deferred.resolve(true);
|
||
this.$hide();
|
||
};
|
||
|
||
$modalScope.cancel = function (){
|
||
deferred.resolve(false);
|
||
this.$hide();
|
||
};
|
||
|
||
if($modalScope.languageJson == undefined) $modalScope.languageJson = {};
|
||
$modalScope.languageJson.ConfirmBox = confirmBox;
|
||
|
||
bn.$modal({scope: $modalScope,
|
||
templateUrl: '/partials/confirmBox.html',
|
||
show: true});
|
||
|
||
return deferred.promise;
|
||
};
|
||
|
||
bn.info = function(msg,messageBox){
|
||
var $modalScope = bn.$scope.$new(true);
|
||
$modalScope.message = msg;
|
||
|
||
if($modalScope.languageJson == undefined) $modalScope.languageJson = {};
|
||
$modalScope.languageJson.MessageBox = messageBox;
|
||
|
||
bn.$modal({scope: $modalScope,
|
||
templateUrl: '/partials/messageBox.html',
|
||
show: true});
|
||
};
|
||
|
||
bn.uploadConfig = function(cfg){
|
||
bn.$srv.saveConfig("demo", angular.toJson(cfg));
|
||
};
|
||
|
||
bn.ev = function(event, obj){
|
||
bn.$scope.$emit(event, obj);
|
||
};
|
||
|
||
bn.local = function(key){
|
||
var languageJson = angular.fromJson(sessionStorage.getItem('languageJson'));
|
||
|
||
var zh ={
|
||
new: "新建",
|
||
save: "保存",
|
||
clone: "复制并粘贴",
|
||
delete: "删除",
|
||
page_option: "画面设置",
|
||
align_top: "上对齐",
|
||
align_bottom: "下对齐",
|
||
align_vcenter: "水平居中",
|
||
align_left: "左对齐",
|
||
align_hcenter: "垂直居中",
|
||
align_right: "右对齐",
|
||
align_vscale: "垂直等间距",
|
||
align_hscale: "水平等间距",
|
||
to_back: "移动到最下层",
|
||
to_front: "移动到最上层",
|
||
move_up: "向上移动物体",
|
||
move_down: "向下移动物体",
|
||
move_left: "向左移动物体",
|
||
move_right: "向右移动物体"
|
||
};
|
||
|
||
var lan = undefined;
|
||
if(languageJson.Room3D.Head)
|
||
lan = languageJson.Room3D.Head;
|
||
else
|
||
lan = zh;
|
||
|
||
|
||
for(var a in lan)
|
||
{
|
||
if (a == key) return lan[a];
|
||
}
|
||
|
||
return null;
|
||
};
|
||
|
||
bn.dispose = function(){
|
||
var disposeObject = function(obj){
|
||
for(var b in obj){
|
||
if(typeof(obj[b]) === "function" && obj[b].name === "event"){
|
||
obj[b] = undefined;
|
||
}
|
||
else if(typeof(obj[b]) === "function" && obj[b].length > 0){
|
||
disposeObject(obj[b]);
|
||
}
|
||
else if(typeof(obj[b]) === "object" && b === "dispatch"){
|
||
disposeObject(obj[b]);
|
||
}
|
||
}
|
||
};
|
||
|
||
$(window).off();
|
||
$(window).unbind();
|
||
$(document).off();
|
||
$(document).unbind();
|
||
$(bn.domId).off();
|
||
$(bn.domId).unbind();
|
||
|
||
bn.clear();
|
||
bn.paper.clear();
|
||
|
||
var clearPaper = function (paper){
|
||
var paperDom = paper.canvas;
|
||
paperDom.parentNode.removeChild(paperDom);
|
||
};
|
||
|
||
clearPaper(bn.paper);
|
||
disposeObject(bn.paper);
|
||
bn.paper = undefined;
|
||
|
||
delete bn.options;
|
||
bn.$scope.change = undefined;
|
||
bn.$scope = undefined;
|
||
bn.$modal = undefined;
|
||
bn.$q = undefined;
|
||
bn.$srv = undefined;
|
||
bn.$upload = undefined;
|
||
disposeObject(bn);
|
||
bn = undefined;
|
||
};
|
||
|
||
///////// create main code here /////////
|
||
bn.options = _.extend(bn.options, options);
|
||
bn.inject();
|
||
|
||
bn.init(id);
|
||
|
||
bn.newConfig();
|
||
|
||
return bn;
|
||
}
|
||
};
|