From f90791f2f7b48d7e08ce08f7ead498e1191a96b8 Mon Sep 17 00:00:00 2001 From: jsdelfino Date: Sun, 16 Jan 2011 23:49:31 +0000 Subject: Add sample widget components and a page to edit them, plus minor user interaction fixes. git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1059710 13f79535-47bb-0310-9956-ffa450edef68 --- .../trunk/modules/edit/htdocs/dash/dashboard.html | 7 +- sca-cpp/trunk/modules/edit/htdocs/dash/index.html | 7 +- sca-cpp/trunk/modules/edit/htdocs/graph/graph.html | 26 +++-- sca-cpp/trunk/modules/edit/htdocs/graph/graph.js | 76 ++++++++----- sca-cpp/trunk/modules/edit/htdocs/graph/index.html | 9 +- sca-cpp/trunk/modules/edit/htdocs/index.html | 6 +- sca-cpp/trunk/modules/edit/htdocs/menu.html | 15 ++- sca-cpp/trunk/modules/edit/htdocs/page/index.html | 37 ++++++- sca-cpp/trunk/modules/edit/htdocs/page/page.html | 74 +++++++++++-- sca-cpp/trunk/modules/edit/htdocs/page/page.js | 122 +++++++++++++-------- 10 files changed, 266 insertions(+), 113 deletions(-) (limited to 'sca-cpp/trunk/modules/edit/htdocs') diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html index 60d869abde..b45c0ffe24 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html +++ b/sca-cpp/trunk/modules/edit/htdocs/dash/dashboard.html @@ -44,9 +44,9 @@
- - - +
App name:e.g. mycoolapp
Title:e.g. My really cool app
+ +
App name:
Title:
@@ -105,6 +105,7 @@ function getapps(sync) { $('addAppLink').onclick = function() { var div = $('newApp'); div.style.visibility = div.style.visibility == 'hidden'? 'visible' : 'hidden'; + $('appName').focus(); return false; }; diff --git a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html index d1da06d71c..b9ad29b235 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/dash/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/dash/index.html @@ -19,9 +19,10 @@ App Dashboard - - - + + + + diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html index 618d638e7d..a7d185da42 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.html @@ -30,9 +30,13 @@ +
+

Palette

 +

App

 +
+ diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js index 88a2efd50b..1d3b730539 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/graph.js @@ -223,7 +223,6 @@ if (ui.isIE()) { var tnode = document.createTextNode(t); title.appendChild(tnode); return title; - return title; }; /** @@ -373,9 +372,12 @@ if (ui.isIE()) { /** * Make a graph. */ - graph.mkgraph = function() { + graph.mkgraph = function(pos) { var div = document.createElement('div'); div.id = 'svgdiv'; + div.style.position = 'absolute'; + div.style.left = pos.xpos(); + div.style.top = pos.ypos(); document.body.appendChild(div); var svg = document.createElementNS(graph.svgns, 'svg'); @@ -410,23 +412,25 @@ if (ui.isIE()) { return false; bringtotop(graph.dragging); var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - graph.dragX = pos.clientX; - graph.dragY = pos.clientY; + graph.dragX = pos.screenX; + graph.dragY = pos.screenY; return false; }; svg.ontouchstart = svg.onmousedown; - svg.onmouseup = function(e) { + window.onmouseup = function(e) { if (graph.dragging == null) return false; graph.dragging = null; return false; }; - svg.ontouchend = svg.onmouseup; + window.top.onmouseup = window.onmouseup; + window.ontouchend = window.onmouseup; + window.top.ontouchend = window.onmouseup; - svg.onmousemove = function(e) { + window.onmousemove = function(e) { if (graph.dragging == null) return false; var pmatrix = graph.dragging.parentNode.getCTM(); @@ -434,10 +438,16 @@ if (ui.isIE()) { var curX = pmatrix != null? (Number(matrix.e) - Number(pmatrix.e)): Number(matrix.e); var curY = pmatrix != null? (Number(matrix.f) - Number(pmatrix.f)): Number(matrix.f); var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - var newX = curX + (pos.clientX - graph.dragX); - var newY = curY + (pos.clientY - graph.dragY); - graph.dragX = pos.clientX; - graph.dragY = pos.clientY; + var newX = curX + (pos.screenX - graph.dragX); + var newY = curY + (pos.screenY - graph.dragY); + if (newX >= 0) + graph.dragX = pos.screenX; + else + newX = 0; + if (newY >= 0) + graph.dragY = pos.screenY; + else + newY = 0; if (graph.dragging.id.substring(0, 8) == 'palette:') { // Clone an element dragged from the palette @@ -449,7 +459,9 @@ if (ui.isIE()) { return false; }; - svg.ontouchmove = svg.onmousemove; + window.top.onmousemove = window.onmousemove; + window.ontouchmove = window.onmousemove; + window.top.ontouchmove = window.onmousemove; graph.titlewidthsvg = document.createElementNS(graph.svgns, 'svg'); graph.titlewidthsvg.style.visibility = 'hidden'; @@ -630,7 +642,7 @@ graph.title = function(e) { graph.tsvcs = function(comp) { return memo(comp, 'tsvcs', function() { var svcs = scdl.services(comp); - var l = filter(function(s) { return scdl.align(s) == 'top'; }, svcs); + var l = filter(function(s) { return scdl.align(s) == 'top' && scdl.visible(s) != 'false'; }, svcs); if (isNil(l)) return mklist(); return mklist(car(l)); @@ -642,7 +654,11 @@ graph.lsvcs = function(comp) { var svcs = scdl.services(comp); if (isNil(svcs)) return mklist(mklist("'element","'service","'attribute","'name",scdl.name(comp))); - var l = filter(function(s) { var a = scdl.align(s); return a == null || a == 'left'; }, svcs); + var l = filter(function(s) { + var a = scdl.align(s); + var v = scdl.visible(s); + return (a == null || a == 'left') && v != 'false'; + }, svcs); if (isNil(l)) return mklist(); if (!isNil(graph.tsvcs(comp))) @@ -677,7 +693,7 @@ graph.color = function(comp) { * Return the height of a reference on the right side of a component. */ graph.rrefheight = function(ref, cassoc) { - return memo(ref, 'height', function() { + return memo(ref, 'rheight', function() { var target = assoc(scdl.target(ref), cassoc); if (isNil(target)) return 60; @@ -685,6 +701,18 @@ graph.rrefheight = function(ref, cassoc) { }); }; +/** + * Return the height of a reference on the bottom side of a component. + */ +graph.brefheight = function(ref, cassoc) { + return memo(ref, 'bheight', function() { + var target = assoc(scdl.target(ref), cassoc); + if (isNil(target)) + return 0; + return graph.compclosureheight(cadr(target), cassoc); + }); +}; + /** * Return the total height of the references on the right side of a component. */ @@ -700,7 +728,7 @@ graph.rrefsheight = function(refs, cassoc) { graph.brefsheight = function(refs, cassoc) { if (isNil(refs)) return 0; - return Math.max(graph.rrefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc)); + return Math.max(graph.brefheight(car(refs), cassoc), graph.brefsheight(cdr(refs), cassoc)); }; /** @@ -869,16 +897,6 @@ graph.buttonpath = function(t) { return path.end(); }; -/** - * Append a list of graphical elements to a parent. - */ -graph.append = function(nodes, p) { - if (isNil(nodes)) - return p; - p.appendChild(car(nodes)); - return graph.append(cdr(nodes), p); -}; - /** * Render a composite. */ @@ -927,11 +945,11 @@ graph.composite = function(compos, pos) { var rrefs = graph.rrefs(comp); var rpos = graph.mkpath().rmove(graph.compwidth(comp, cassoc), 0); - graph.append(renderrrefs(rrefs, cassoc, rpos), gcomp); + appendNodes(renderrrefs(rrefs, cassoc, rpos), gcomp); var brefs = graph.brefs(comp); var bpos = graph.mkpath().rmove(0 , graph.compheight(comp, cassoc)); - graph.append(renderbrefs(brefs, cassoc, bpos), gcomp); + appendNodes(renderbrefs(brefs, cassoc, bpos), gcomp); return mklist(gcomp); } @@ -951,7 +969,7 @@ graph.composite = function(compos, pos) { } function rendermove(comp, cassoc, pos) { - return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + 20); + return pos.clone().rmove(0, graph.compclosureheight(comp, cassoc) + 40); } if (isNil(svcs)) diff --git a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html index 105e240389..c02f7b44d0 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/graph/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/graph/index.html @@ -19,7 +19,9 @@ App Editor - + + + @@ -32,8 +34,6 @@
diff --git a/sca-cpp/trunk/modules/edit/htdocs/menu.html b/sca-cpp/trunk/modules/edit/htdocs/menu.html index 7bf2ef931e..50bc2371fb 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/menu.html +++ b/sca-cpp/trunk/modules/edit/htdocs/menu.html @@ -28,8 +28,21 @@ diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/index.html b/sca-cpp/trunk/modules/edit/htdocs/page/index.html index e34aca0bea..839c246122 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/index.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/index.html @@ -19,22 +19,47 @@ App Page Editor - - + + + + -

Editing: HTML Page

+

+
diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.html b/sca-cpp/trunk/modules/edit/htdocs/page/page.html index 75405ce163..ca2d51af19 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.html +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.html @@ -30,20 +30,78 @@ -
+
+

Palette

 +

Page

 +
+ +
- - -sample text +

Header1

 +

Header2

 + + + +checkbox + +link +text +
+ + diff --git a/sca-cpp/trunk/modules/edit/htdocs/page/page.js b/sca-cpp/trunk/modules/edit/htdocs/page/page.js index e4554195c1..25f6399075 100644 --- a/sca-cpp/trunk/modules/edit/htdocs/page/page.js +++ b/sca-cpp/trunk/modules/edit/htdocs/page/page.js @@ -25,7 +25,7 @@ var page = new Object(); if (ui.isIE()) { /** - * Init a page. + * Init a page editor. */ page.initpage = function(elem) { page.dragging = null; @@ -35,14 +35,14 @@ if (ui.isIE()) { return null; if (n.id != '') return n; + if (n.covered) + return n.covered; return draggable(n.parentNode); } function bringtotop(n) { - if (n == elem) - return null; n.parentNode.appendChild(n); - return bringtotop(n.parentNode); + n.cover.parentNode.appendChild(n.cover); } elem.onmousedown = function() { @@ -68,12 +68,18 @@ if (ui.isIE()) { elem.onmousemove = function() { if (page.dragging == null) return false; - var origX = page.dragging.coordorigin.X; - var origY = page.dragging.coordorigin.Y; - var newX = origX - (window.event.clientX - page.dragX); - var newY = origY - (window.event.clientY - page.dragY); - page.dragX = window.event.clientX; - page.dragY = window.event.clientY; + var curX = ui.posn(page.dragging.style.left); + var curY = ui.posn(page.dragging.style.top); + var newX = curX + (window.event.clientX - page.dragX); + var newY = curY + (window.event.clientY - page.dragY); + if (newX >= 0) + page.dragX = window.event.clientX; + else + newX = 0; + if (newY >= 0) + page.dragY = window.event.clientY; + else + newY = 0; if (page.dragging.id.substring(0, 8) == 'palette:') { // Clone the dragged element @@ -81,16 +87,21 @@ if (ui.isIE()) { } page.dragging.style.left = newX; page.dragging.style.top = newY; - return false; + page.dragging.cover.style.left = newX; + page.dragging.cover.style.top = newY; + }; + // Cover child elements with span elements + map(page.cover, nodeList(elem.childNodes)); + return elem; }; } else { /** - * Init a page. + * Init a page editor. */ page.initpage = function(elem) { page.dragging = null; @@ -100,14 +111,14 @@ if (ui.isIE()) { return null; if (n.id != '') return n; + if (n.covered) + return n.covered; return draggable(n.parentNode); } function bringtotop(n) { - if (n == elem) - return null; n.parentNode.appendChild(n); - return bringtotop(n.parentNode); + n.cover.parentNode.appendChild(n.cover); } elem.onmousedown = function(e) { @@ -120,32 +131,40 @@ if (ui.isIE()) { return false; bringtotop(page.dragging); var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - page.dragX = pos.clientX; - page.dragY = pos.clientY; + page.dragX = pos.screenX; + page.dragY = pos.screenY; return false; }; elem.ontouchstart = elem.onmousedown; - elem.onmouseup = function(e) { + window.onmouseup = function(e) { if (page.dragging == null) return false; page.dragging = null; return false; }; - elem.ontouchend = elem.onmouseup; + window.top.onmouseup = window.onmouseup; + window.ontouchend = window.onmouseup; + window.top.ontouchend = window.onmouseup; - elem.onmousemove = function(e) { + window.onmousemove = function(e) { if (page.dragging == null) return false; var curX = ui.posn(page.dragging.style.left); var curY = ui.posn(page.dragging.style.top); var pos = typeof e.touches != "undefined" ? e.touches[0] : e; - var newX = curX + (pos.clientX - page.dragX); - var newY = curY + (pos.clientY - page.dragY); - page.dragX = pos.clientX; - page.dragY = pos.clientY; + var newX = curX + (pos.screenX - page.dragX); + var newY = curY + (pos.screenY - page.dragY); + if (newX >= 0) + page.dragX = pos.screenX; + else + newX = 0; + if (newY >= 0) + page.dragY = pos.screenY; + else + newY = 0; if (page.dragging.id.substring(0, 8) == 'palette:') { // Clone the dragged element @@ -153,42 +172,50 @@ if (ui.isIE()) { } page.dragging.style.left = newX; page.dragging.style.top = newY; + page.dragging.cover.style.left = newX; + page.dragging.cover.style.top = newY; return false; }; - elem.ontouchmove = elem.onmousemove; + window.top.onmousemove = window.onmousemove; + window.ontouchmove = window.onmousemove; + window.top.ontouchmove = window.onmousemove; + + // Cover child elements with span elements + map(page.cover, nodeList(elem.childNodes)); return elem; }; } /** - * Clone an HTML element. + * Cover a page element with a element to prevent mouse events to reach it. */ -page.elemcount = 0; +page.cover = function(e) { + if (e.id == '' || isNil(e.style)) + return e; + var cover = document.createElement('span'); + cover.style.position = 'absolute'; + cover.style.left = ui.posn(e.style.left) - 5; + cover.style.top = ui.posn(e.style.top) - 5; + cover.style.width = e.clientWidth + 10; + cover.style.height = e.clientHeight + 10; + cover.style.visibility = 'visible'; + cover.covered = e; + e.cover = cover; + e.parentNode.appendChild(cover); + return e; +} +/** + * Clone a page element. + */ page.clone = function(e) { function mkclone(e) { - if (e.nodeName == 'INPUT' && e.type == 'button') { - var ne = document.createElement('input'); - ne.type = 'button'; - ne.id = 'button' + (++page.elemcount); - ne.value = ne.id; - return ne; - } - if (e.nodeName == 'INPUT' && e.type == 'text') { - var ne = document.createElement('input'); - ne.type = 'text'; - ne.id = 'entry' + (++page.elemcount); - ne.value = ne.id; - return ne; - } - if (e.nodeName == 'SPAN') { - var ne = document.createElement('span'); - ne.id = 'text' + (++page.elemcount); - ne.innerHTML = ne.id; - return ne; - } + var ne = document.createElement('span'); + ne.id = e.id.substr(8); + ne.innerHTML = e.innerHTML; + return ne; } function posclone(ne, e) { @@ -196,6 +223,7 @@ page.clone = function(e) { ne.style.left = ui.posn(e.style.left); ne.style.top = ui.posn(e.style.top); e.parentNode.appendChild(ne); + page.cover(ne); return ne; } -- cgit v1.2.3