Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update visualeditor

  • Loading branch information...
commit 712e9e66a748acf9883ac459b435ec0e817ebb92 1 parent a1a7373
@linh81 linh81 authored
View
13 core/baseclasses/contenteditable.js
@@ -42,8 +42,12 @@ apf.addEventListener("load", function(){
var key = e.keyCode;
if (!apf.document.activeElement
- || !apf.document.activeElement.editable)
+ || !apf.document.activeElement.editable) {
+ if (key == 46 && apf.isChildOf(hboxTools, apf.activeElement))
+ apf.removeHotKey("del");
return;
+ }
+
if (apf.document.queryCommandState("rename")) {
if (apf.hasSingleResizeEvent)
@@ -199,6 +203,7 @@ apf.addEventListener("load", function(){
//Add element to the selection
sel.addRange(this.createRange()).selectNode(node);
+
lastFocussed = node;
}
@@ -214,8 +219,8 @@ apf.addEventListener("load", function(){
//Focus isn't set when the node already has the focus
apf.addEventListener("mouseup", function(e){
- //if ((apf.document.queryCommandState("mode") || "").indexOf("connect-") > -1)
- //apf.document.execCommand("mode", null, "arrow");
+ if ((apf.document.queryCommandState("mode") || "").indexOf("connect-") > -1)
+ apf.document.execCommand("mode", null, "arrow");
/*
if (Math.abs(lastPos[0] - e.htmlEvent.clientX) > 2
@@ -263,7 +268,7 @@ apf.addEventListener("load", function(){
var r = sel.getRangeAt(sel.rangeCount - 1);
recursion = true;
r.startContainer.childNodes[r.startOffset].focus();
- recursion = false;
+ recursion = false;
return;
}
else { //@todo this could be optimized by checking whether the object is already the only selected
View
72 core/baseclasses/contenteditable/commands.js
@@ -98,10 +98,12 @@ apf.ContentEditable.commands = (function(){
amlNode.setAttribute("top", options.top);
}
- if (addType != "hbox" && options.width || options.width === 0)
- amlNode.setAttribute("width", options.width);
- if (addType != "vbox" && options.height || options.height === 0)
- amlNode.setAttribute("height", options.height);
+ if (typeof addType == "string") {
+ if (addType != "hbox" && options.width || options.width === 0)
+ amlNode.setAttribute("width", options.width);
+ if (addType != "vbox" && options.height || options.height === 0)
+ amlNode.setAttribute("height", options.height);
+ }
}
commands["generateId"].call(this, amlNode);
@@ -480,7 +482,9 @@ console.log("mode set to: " + mode);
sel.removeNode();
});
}
- if (!pNode) debugger;
+ else
+ return
+
var s = pNode.ownerDocument.getSelection();
var activeEl = apf.document.activeElement && apf.document.activeElement.editable
? apf.document.activeElement
@@ -519,8 +523,53 @@ console.log("mode set to: " + mode);
case INDET: return false;
}
- um.undo(parseInt(value) || null);
- apf.document.$getVisualSelect().hide();
+ var st, sl;
+ var lastAction = (st=um.$undostack)[(sl=st.length-1)];
+
+ var target = updateFields(lastAction, function() {
+ um.undo(parseInt(value) || null);
+ });
+
+
+
+ // check if target is still on canvas, is not remove visual selection
+ if (target && !apf.isChildOf(canvas, target))
+ apf.document.$getVisualSelect().hide();
+ };
+
+ updateFields = function(action, call) {
+ var target = action.args[action.args.length-1].xmlNode;
+
+ var updateFields = {}, targets = [];
+ for (var tg, at, o, i = 0, l = action.args.length; i < l; i++) {
+ if ((o=action.args[i]).action == "setAttribute") {
+ tg=o.args[0];
+
+ if ((at=o.args[1]) == "left" || at == "top" || at == "width" || at == "height" || at == "pack" || at == "align" || at == "edge" || at == "columns")
+ updateFields[at] = true;
+ }
+ if (targets.indexOf(tg) == -1)
+ targets.push(tg);
+ }
+
+ if (!target && targets.length == 1)
+ target = targets[0];
+
+ call();
+
+ // @todo for pack/edge/align etc.
+ for (var at in updateFields) {
+ if (at == "left")
+ apf.config.setProperty("x", apf.getHtmlLeft(tg.$ext).toString());
+ else if (at == "top")
+ apf.config.setProperty("y", apf.getHtmlTop(tg.$ext).toString());
+ else if (at == "width")
+ apf.config.setProperty("w", tg.$ext.offsetWidth);
+ else if (at == "height")
+ apf.config.setProperty("h", tg.$ext.offsetHeight);
+ }
+
+ return target;
};
commands["redo"] = function(sel, showUI, value, query){
@@ -532,7 +581,12 @@ console.log("mode set to: " + mode);
case INDET: return false;
}
- um.redo(parseInt(value) || null);
+ var st, sl;
+ var lastAction = (st=um.$redostack)[(sl=st.length-1)];
+
+ var target = updateFields(lastAction, function() {
+ um.redo(parseInt(value) || null);;
+ });
};
commands["cut"] = function(sel, showUI, value, query){
@@ -736,7 +790,7 @@ console.log("mode set to: " + mode);
}
sel.each(function(sel) {
- sel.setAttribute(options.name, options.value);
+ apf.xmldb.setAttribute(sel, options.name, options.value);
});
sel[0].ownerDocument.$getVisualSelect().updateGeo(); //Possibly not best place for this
View
42 core/baseclasses/contenteditable/interactive.js
@@ -265,12 +265,12 @@
else {
if (lastAmlNode)
clearTimeout(lastAmlNode[4]);
-
+
var plane = apf.plane.get();
if (el && amlNode != el && amlNode.$int
&& htmlNode.parentNode != amlNode.$int
&& (htmlNode.parentNode != plane.plane || amlNode.$int != document.body)
- && !apf.isChildOf(el.$ext, amlNode.$int, true)) {
+ && el.parentNode != amlNode) { // !apf.isChildOf(amlNode.$int, el.$ext, true)
var ev = {clientX: e.clientX, clientY: e.clientY, ctrlKey: e.ctrlKey}
lastAmlNode = [amlNode, new Date().getTime(), e.clientX, e.clientY,
setTimeout(function(){
@@ -730,6 +730,7 @@
//Elements
var els = pEl.getElementsByTagName("*", true); //Fetch all siblings incl me
+
var xl = d.xl = [], yl = d.yl = [], curel;
var xm = d.xm = [], ym = d.ym = [];
var xr = d.xr = [], yr = d.yr = [], dels = d.els = [];
@@ -750,10 +751,11 @@
var q = apf.getBorderOffset(container);
var bLeft = q[0];
var bTop = q[1];
+
for (var l, t, h, w, i = 0, il = els.length; i < il; i++) {
if (selected.indexOf(curel = els[i]) > -1 || !curel.$ext || curel == el)
continue;
-
+
l = curel.$ext.offsetLeft - bLeft;
xl.push(l);
xm.push(l + Math.round((w = curel.$ext.offsetWidth)/2));
@@ -766,6 +768,23 @@
dels.push(curel);
}
+
+ if (el.childNodes.length) {// add childelements for snapping to them
+ for (var pos, i = 0, il = el.childNodes.length; i < il; i++) {
+ curel = el.childNodes[i];
+ pos = apf.getAbsolutePosition(curel.$ext);
+
+ l = pos[0] - canvas.$ext.offsetLeft;
+ xl.push(l-10);
+ xr.push(l + curel.$ext.offsetWidth + 10)
+
+ t = pos[1] - canvas.$ext.offsetTop;
+ yl.push(t-10);
+ yr.push(t + curel.$ext.offsetHeight + 10)
+
+ }
+ }
+
}
}
@@ -1185,14 +1204,15 @@
control.stop();
if (name == "vbox") {
- var pack = this.align || this.parentNode.pack;
+ /*
+ var pack = this.parentNode.pack; //this.align ||
if (pack != "middle") {
var xType = pack == "start" ? "n" : "s";
type = type.replace(xType, "");
type = type.replace("w", "");
if (!type) return;
}
-
+ */
this.realtime = true;
this.$showResize = function(l, t, w, h, e, c, we, no, ea, so) {
if (h && (no || so))
@@ -1203,6 +1223,7 @@
}
}
else if (name == "hbox") {
+ /*
var pack = this.align || this.parentNode.pack;
if (pack != "middle") {
var xType = pack == "start" ? "w" : "e";
@@ -1210,7 +1231,7 @@
type = type.replace("n", "");
if (!type) return;
}
-
+ */
this.realtime = true;
this.$showResize = function(l, t, w, h) {
this.setProperty("width", w);
@@ -1229,6 +1250,7 @@
else {
this.realtime = false;
}
+
if ("hbox|vbox|table".indexOf(name) == -1
&& apf.getStyle(this.$ext, "position") != "absolute") { //ignoring fixed for now...
this.$ext.style.width = (this.$ext.offsetWidth - apf.getWidthDiff(this.$ext)) + "px";
@@ -1238,7 +1260,9 @@
this.$ext.style.position = "absolute";*/
}
+ // commented out by Linh, sets maxwidth/height on element in hbox/vbox, is this neccessary?
//@todo move everything below into vbox/table/anchoring
+ /*
var m, edge;
if (name == "vbox") {
this.maxheight = Math.min(this.maxheight || 10000,
@@ -1280,6 +1304,7 @@
}
e.setType(name == "table" ? "s" : type);
+ */
};
function afterresize(e){
@@ -1368,6 +1393,11 @@
}
n.ownerDocument.execCommand("commit"); //@todo Use a system here to combine these commits as well as possible
+ if (selected.length == 1) {
+ apf.config.setProperty("x", apf.getHtmlLeft(ext).toString());
+ apf.config.setProperty("y", apf.getHtmlTop(ext).toString());
+ }
+
apf.layout.processQueue();
n.ownerDocument.$getVisualSelect().updateGeo();
View
116 core/baseclasses/contenteditable/visualconnect.js
@@ -32,7 +32,7 @@ apf.visualConnect = function (sel){
*/
var lineMode = "draw"; // current lineMode of visualConnect
- var active, div, cTemplate; // visualconnect is active
+ var active, div; // visualconnect is active
var fromEl, toEl; // selected 'from element' and 'to element' during draw mode
var fromAtt, toAtt; // selected attribute of 'from' and 'to' element;
var connections; // connections that are drawn
@@ -46,7 +46,8 @@ apf.visualConnect = function (sel){
var width = canvas.$ext.clientWidth;
//@todo adjust height to browser window height?
var height = canvas.$ext.clientHeight;//document.body.clientHeight;
- var paintGroup = apf.vector.group({w:width,h:height,z:1000});
+ var paintGroup = apf.vector.group({w:width,h:height});
+ apf.window.zManager.set("print", paintGroup.$domnode);
var paintRect = paintGroup.rect({
sw: 1,
@@ -115,8 +116,14 @@ apf.visualConnect = function (sel){
e.el.style.display = "none";
//sel.$selectList(selection);
- createConnections(selection);
- showConnections();
+ paintGroup.style({v:0});
+ paintGroup.repaint();
+
+ if (createConnections(selection))
+ showConnections();
+ else
+ apf.plane.get().hide();
+ //console.log("no connections left");
});
apf.addEventListener("vcmoveselection", function(e) {
sel.$selectList(selection = [e.target]);
@@ -124,7 +131,7 @@ apf.visualConnect = function (sel){
showConnections();
});
- apf.plane.show();
+ apf.plane.get().show();
div = canvas.$ext.appendChild(document.createElement("div"));
div.id = "vc_container";
@@ -132,7 +139,9 @@ apf.visualConnect = function (sel){
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
- div.style.zIndex = 100000001;
+
+ apf.window.zManager.set("print", div);
+ //div.style.zIndex = 100000001;
//@todo use apf.window.zManager.set("drag", this.panel);
/*
@@ -178,21 +187,37 @@ apf.visualConnect = function (sel){
if (elements.length){
// get all elements
var all = [];
- for (var el, i = 0, l = apf.all.length; i < l; i++) {
- if ((el=apf.all[i]).$ext && el.prefix == "a") all.push(apf.all[i])
+ for (var el, i = 0, l = canvas.childNodes.length; i < l; i++) {
+ if ((el=canvas.childNodes[i]).$ext && el.prefix == "a") all.push(el)
}
// element as source element
//@todo use .$funcHandlers hash table to find the connections .value = "{blah.value + bli.value}"
for (var al, attrs, el, i = 0, l = elements.length; i < l; i++) {
for (var fromAt in (attrs=(el=elements[i]).$funcHandlers)) {
- for (var at, targetList = [], ai = 0, al = attrs[fromAt].length; ai < al; ai++) {
+ for (var readonly, fromEl, toEl, toAt, targetList = [], ai = 0, al = attrs[fromAt].length; ai < al; ai++) {
+ if (attrs[fromAt][ai].prop == fromAt) {
+ readonly = true;
+ toEl = el;
+ fromEl = attrs[fromAt][ai].amlNode;
+ if (!fromEl.getAttribute(fromAt) || !fromEl.getAttribute(fromAt).split || !fromEl.getAttribute(fromAt).split(".")[1])
+ continue;
+ //debugger;
+
+ toAt = fromEl.getAttribute(fromAt).charAt(0) == "{" ? fromEl.getAttribute(fromAt).split(".")[1].replace("}", "") : fromAt;
+ }
+ else {
+ readonly = false;
+ fromEl = el
+ toEl = attrs[fromAt][ai].amlNode;
+ toAt = attrs[fromAt][ai].prop;
+ }
targetList.push({
- el : (at=attrs[fromAt][ai]).amlNode,
- at : at.prop
+ el : toEl,
+ at : toAt
});
}
- createConnection(el, fromAt, targetList);
+ createConnection(fromEl, fromAt, targetList, readonly);
}
/*
for (var val, targetEl, targetAttr, split, j = 0, jl = elements[i].attributes.length; j < jl; j++) {
@@ -221,7 +246,6 @@ apf.visualConnect = function (sel){
}
*/
}
- //debugger;
}
var found = false;
@@ -237,7 +261,7 @@ apf.visualConnect = function (sel){
drawConnections();
paintConnections.style({p: connectionPath.join(" ")});
- apf.plane.show();
+ //apf.plane.show();
paintGroup.style({v:1});
paintGroup.repaint();
@@ -292,7 +316,7 @@ apf.visualConnect = function (sel){
c : [Math.round(x+w/2), Math.round(y+h/2)] // center of element
}
var pos1 = from.c, pos2 = to.c;
-
+
paintGroup.style({v:1});
paintLine.style({p: [
"M",pos1[0],pos1[1],"L",pos2[0],pos2[1],
@@ -315,11 +339,12 @@ apf.visualConnect = function (sel){
id : "attMenu",
childNodes : attList
});
-
+
lineMode = null;
setTimeout(function(e){
attMenu.display(x, y, true);
+ apf.window.zManager.set("print", attMenu.$ext);
});
attMenu.addEventListener("mousedown", function(e) {
@@ -335,6 +360,7 @@ apf.visualConnect = function (sel){
apf.dragMode = true; //prevents selection
toAtt = e.value;
attMenu.setProperty("visible", false);
+
fromEl.setAttribute(fromAtt, "{" + toEl.id + "." + toAtt + "}");
//_self.setMode("element");
@@ -400,7 +426,7 @@ apf.visualConnect = function (sel){
}
paintLine.style({p: drawPath.join(" ")});
- apf.plane.show();
+ //apf.plane.show();
paintGroup.style({v:1});
paintGroup.repaint();
}
@@ -430,7 +456,7 @@ apf.visualConnect = function (sel){
document.onmousedown = function(e){
if (!e) e = event;
var amlNode;
-
+
//clearTimeout(showAllTimer);
if (lineMode == "element") {
/*
@@ -471,6 +497,7 @@ apf.visualConnect = function (sel){
setTimeout(function(e){
attMenu.display(x, y, true);
+ apf.window.zManager.set("print", attMenu.$ext);
});
attMenu.addEventListener("itemclick", function(e) {
@@ -483,11 +510,11 @@ apf.visualConnect = function (sel){
_self.setMode("draw-started");
//debugger;
- apf.plane.show();
+ //apf.plane.show();
} else {
- if (attMenu.visible)
+ if (attMenu && attMenu.visible)
attMenu.setProperty("visible", false);
if (fromEl && lineMode != "connections") {
stopDraw(e);
@@ -516,8 +543,8 @@ apf.visualConnect = function (sel){
}*/
// create new connection
- function createConnection(el1, at1, targetList) {
- if (!(el1.id && at1 && targetList.length)) return;
+ function createConnection(el1, at1, targetList, readonly) {
+ if (!el1.id || !at1 || !targetList.length) return;
var pos, x, y, w, h;
@@ -525,10 +552,12 @@ apf.visualConnect = function (sel){
if (targetList.length == 1) {
var el2 = targetList[0].el;
var at2 = targetList[0].at;
- var pos = [(hNode=el1.$ext).offsetLeft, hNode.offsetTop];
+
+ //var pos = [(hNode=el1.$ext).offsetLeft, hNode.offsetTop];
+ var pos = apf.getAbsolutePosition(hNode=el1.$ext);
var from = {
- x : (x=pos[0]),
- y : (y=pos[1]),
+ x : (x=pos[0]-canvas.$ext.offsetLeft),
+ y : (y=pos[1]-canvas.$ext.offsetTop),
w : (w=hNode.offsetWidth),
h : (h=hNode.offsetHeight),
t : [Math.round(x+w/2), y],
@@ -537,10 +566,11 @@ apf.visualConnect = function (sel){
r : [x+w, Math.round(y+h/2)],
c : [Math.round(x+w/2), Math.round(y+h/2)] // center of element
}
- var pos = [(hNode=el2.$ext).offsetLeft, hNode.offsetTop];
+ //var pos = [(hNode=el2.$ext).offsetLeft, hNode.offsetTop];
+ var pos = apf.getAbsolutePosition(hNode=el2.$ext);
var to = {
- x : (x=pos[0]),
- y : (y=pos[1]),
+ x : (x=pos[0]-canvas.$ext.offsetLeft),
+ y : (y=pos[1]-canvas.$ext.offsetTop),
w : (w=hNode.offsetWidth),
h : (h=hNode.offsetHeight),
t : [Math.round(x+w/2), y],
@@ -549,7 +579,7 @@ apf.visualConnect = function (sel){
r : [x+w, Math.round(y+h/2)],
c : [Math.round(x+w/2), Math.round(y+h/2)] // center of element
}
-
+
// check
var conn = {
from : {
@@ -565,14 +595,18 @@ apf.visualConnect = function (sel){
}
// set value
+ /*
var val;
if (val = el2.getAttribute(at2)) {
conn.val = val;
}
else {
+ */
conn.val = "{"+el2.id+"."+at2+"}";
- conn.readonly = true;
- }
+ //conn.readonly = true;
+ //}
+
+ conn.readonly = readonly;
var fromId, toId;
if (!connections) connections = {};
@@ -592,7 +626,7 @@ apf.visualConnect = function (sel){
connectionPath = [];
// reset div
- if (div && apf.isChildOf(div, canvas.$ext)) canvas.$ext.removeChild(div);
+ if (div && apf.isChildOf(canvas.$ext, div)) canvas.$ext.removeChild(div);
div = canvas.$ext.appendChild(document.createElement("div"));
div.id = "vc_container";
div.style.display = "block";
@@ -608,7 +642,8 @@ apf.visualConnect = function (sel){
}
*/
- div.style.zIndex = 100000001;
+ apf.window.zManager.set("print", div);
+ //div.style.zIndex = 100000001;
for (var id in connections) {
for (var id2 in connections[id]) {
@@ -618,6 +653,7 @@ apf.visualConnect = function (sel){
// default positions for lines, start and end
pos1 = (c=curConnections[i]).from.pos;
pos2 = c.to.pos;
+
// calculate center of line
centerPos = [Math.round((pos1[0]+pos2[0])/2), Math.round((pos1[1]+pos2[1])/2)];
@@ -681,7 +717,7 @@ apf.visualConnect = function (sel){
this.deactivate = function(){
if (!active) return;
if (apf.dbg) debugger;
-console.log("deactivate");
+
//if (lineMode) return;
active = false;
@@ -694,7 +730,7 @@ console.log("deactivate");
document.onmouseup = null;
//document.onkeydown = null;
- _self.setMode("element");
+ //_self.setMode("element");
apf.dragMode = false;
apf.plane.hide();
@@ -704,7 +740,7 @@ console.log("deactivate");
paintGroup.style({v:0});
paintGroup.repaint();
if (div) div.style.display = "none";
- if (div) canvas.$ext.removeChild(div);
+ if (div) canvas.$ext.removeChild(div);
};
};
@@ -871,7 +907,7 @@ function connectEdit(container, fromEl, toEl, fromAt, toAt, val, type){
//attMenu.display(x-attMenu.$ext.offsetWidth, y);
attMenu.$ext.style.left = x;
- attMenu.$ext.style.zIndex = 100000002;
+ apf.window.zManager.set("print", attMenu.$ext);
// select attribute in menu
apf.popup.cache[apf.popup.last].content.onmousedown = function(e) {
@@ -914,6 +950,7 @@ function connectEdit(container, fromEl, toEl, fromAt, toAt, val, type){
_self.$inputVal.style.width = this.offsetWidth + "px";
this.replaceNode(_self.$inputVal);
_self.$inputVal.focus();
+
(e||event).cancelBubble = true;
};
this.setPropValue(this.value);
@@ -923,7 +960,7 @@ function connectEdit(container, fromEl, toEl, fromAt, toAt, val, type){
if (this.type == "readonly") {
this.$ext.onmousedown = function(e) {
- apf.dispatchEvent("vcmoveselection", {target: _self.toEl});
+ apf.dispatchEvent("vcmoveselection", {target: _self.fromEl});
(e||event).cancelBubble = true;
}
this.$ext.onmouseup = function(e) {
@@ -957,7 +994,10 @@ function connectEdit(container, fromEl, toEl, fromAt, toAt, val, type){
inputVal.onkeyup = function(e) {
if ((e||event).keyCode == 13) {
_self.$lblVal.setAttribute("value", this.value);
+ _self.value = this.value;
+ _self.$lblVal.innerHTML = this.value;
_self.fromEl.setAttribute(_self.$lblVal.getAttribute("at"), this.value);
+ inputVal.replaceNode(_self.$lblVal, inputVal);
//debugger;
//if (createConnections(selection))
//showConnections();
View
4 core/baseclasses/interactive.js
@@ -376,8 +376,6 @@ apf.Interactive = function(){
&& oOutline.style.display != "block")
oOutline.style.display = "block";
- // this line fixes bug where dragging new element to canvas while multiselection is active
- // but raises another bug which prevent reparenting (orange outline) to occur.
// dragOutline && apf.document.$getVisualSelect().$getOutline().childNodes.length > 1 &&
if (_self.dispatchEvent("beforedrag") === false && dragOutline && apf.document.$getVisualSelect().$getOutline().childNodes.length > 1) {
document.onmouseup();
@@ -732,7 +730,7 @@ apf.Interactive = function(){
if (_self.realtime) {
var change = _self.$stick = {};
-
+
//@todo calc l and t once at start of resize (subtract borders)
_self.$showResize(l || apf.getHtmlLeft(oHtml), t || apf.getHtmlTop(oHtml),
w && w + hordiff || oHtml.offsetWidth,
Please sign in to comment.
Something went wrong with that request. Please try again.