diff --git a/frame.js b/frame.js index 9fbafe57..38ff5324 100644 --- a/frame.js +++ b/frame.js @@ -230,7 +230,7 @@ Volcanos("onappend", {help: "渲染引擎", list: [], _init: function(can, meta, var ui = can.page.Append(can, target, [{view: [type, html.DIV, item.nick||item.name], onclick: function(event) { cb(event, ui.first) can.onmotion.select(can, target, can.core.Keys(html.DIV, type), ui.first) - }, oncontextmenu: function(event) { cbs(event, ui.first) }, + }, onmouseenter: function(event) { cbs(event, ui.first) }, }]); return ui.first }, tree: function(can, list, field, split, cb, target, node) { @@ -615,7 +615,7 @@ Volcanos("onmotion", {help: "动态特效", list: [], _init: function(can, targe can.base.isFunc(cb) && cb(target) }, show: function(can, time, cb, target) { target = target||can._target - time = can.base.isObject(time)? time: {value: 10, length: time||20} + time = can.base.isObject(time)? time: {interval: 100, length: time||20} can.page.Modify(can, target, {style: {opacity: 0, display: html.BLOCK}}) can.core.Timer(time, function(event, value, index) { diff --git a/lib/user.js b/lib/user.js index 97b30573..5b2f896e 100644 --- a/lib/user.js +++ b/lib/user.js @@ -72,7 +72,10 @@ Volcanos("user", {help: "用户操作", agent: { "start": "启动", "stop": "停止", "open": "打开", "close": "关闭", "run": "执行", "done": "完成", - }[text] || text + "remove": "删除", + "hide": "隐藏", "show": "显示", + "edit": "编辑", "project": "项目", "actions": "参数", + }[text]||text }, toast: function(can, content, title, duration, progress) { var meta = typeof content == "object"? content: {content: content, title: title||can._help, duration: duration, progress: progress} @@ -196,6 +199,14 @@ Volcanos("user", {help: "用户操作", agent: { } return event.stopPropagation(), event.preventDefault(), carte }, + cartes: function(event, can, meta, list, cb, parent) { + var carte = can.user.carte(event, can, meta, list, cb, parent) + can.page.Modify(can, carte._target, {style: { + left: event.clientX-event.offsetX+event.target.offsetWidth-3, + top: carte._target.offsetTop-event.target.offsetHeight+5, + }}) + return carte + }, input: function(event, can, form, cb, button) { // form [ string, array, object, {type: "select", values: []} var msg = can.request(event) var ui = can.page.Append(can, document.body, [{view: ["input"], style: {left: 0, top: 0}, list: [ diff --git a/panel/river.js b/panel/river.js index 2bb05407..9f9468f0 100644 --- a/panel/river.js +++ b/panel/river.js @@ -88,11 +88,7 @@ Volcanos("onaction", {help: "控件交互", list: [], _init: function(can, msg, }, carte: function(event, can, list, cb) { - var carte = can.user.carte(event, can, can.ondetail, list, cb) - can.page.Modify(can, carte._target, {style: { - left: event.clientX-event.offsetX+event.target.offsetWidth-3, - top: carte._target.offsetTop-event.target.offsetHeight, - }}) + can.user.cartes(event, can, can.ondetail, list, cb) }, storm: function(event, can, river) { can.sublist = can.sublist||{} can.onmotion.select(can, can._output, "div.item", can.river_list[river]) diff --git a/plugin/local/wiki/draw.css b/plugin/local/wiki/draw.css index ebbd0319..60badf22 100644 --- a/plugin/local/wiki/draw.css +++ b/plugin/local/wiki/draw.css @@ -3,4 +3,6 @@ fieldset.draw div.output div.content svg { } fieldset.draw div.output { background-color:#1b5b738c; + font-size:20px; + font-family:monospace; } diff --git a/plugin/local/wiki/draw.js b/plugin/local/wiki/draw.js index 38d0f2cd..fc92cfd3 100644 --- a/plugin/local/wiki/draw.js +++ b/plugin/local/wiki/draw.js @@ -1,57 +1,48 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) { - can.onmotion.clear(can) - can.onkeypop._build(can) - can.onmotion.hidden(can, can._action) - can.base.isFunc(cb) && cb(msg) - - // 交互数据 - can.svg = null, can.group = null - can.temp = null , can.current = null - can.keylist = [] - - can.onimport._show(can, msg) + can.onmotion.clear(can), can.onmotion.hidden(can, can._action) + can.onimport._show(can, msg), can.base.isFunc(cb) && cb(msg) + can.point = [], can.keylist = [], can.onkeypop._build(can) }, _show: function(can, msg) { - can.ui = can.onlayout.profile(can) - can.point = [] + can.svg = null, can.group = null, can.temp = null, can.current = null - // 加载绘图 + // 加载图形 + can.ui = can.onlayout.profile(can), can.onmotion.hidden(can, can.ui.project) can.page.Modify(can, can.ui.content, msg.Result()||can.onexport.content(can)) - can.page.Select(can, can.ui.content, "svg", function(svg) { - can.svg = can.group = svg, can.onimport._group(can, svg).click() - can.core.ItemCB(can.onimport, function(key, cb) { - svg[key] = function(event) { cb(event, can) } - }) - can.page.Select(can, svg, "*", function(item, index) { - item.tagName == "g"? can.onimport._group(can, item): can.onimport._block(can, item) + can.page.Select(can, can.ui.content, html.SVG, function(svg) { + can.svg = can.group = can.onimport._block(can, svg), can.onimport._group(can, svg).click() + can.core.ItemCB(can.onaction, function(key, cb) { svg[key] = function(event) { cb(event, can) } }) + can.page.Select(can, svg, "*", function(item, index) { can.onimport._block(can, item) + item.tagName == "g" && item.Value(html.CLASS) && can.onimport._group(can, item) }) }) // 默认参数 can.core.Timer(10, function() { can.core.Item({ - "stroke-width": 2, "stroke": "yellow", "fill": "purple", "font-size": "24", - "shape": "rect", "grid": "10", "go": "run", + "stroke-width": 2, "stroke": cli.YELLOW, "fill": cli.MAGENTA, + "font-size": "24", "font-family": html.MONOSPACE, + "go": cli.RUN, "shape": "rect", "grid": "10", }, function(key, value) { can.svg.Value(key, can.Action(key, can.svg.Value(key)||value)) }) }) }, - _group: function(can, target, name) { can.onimport._block(can, target) + _group: function(can, target) { var name = target.Groups() function show(event) { can.group = target - can.core.List(["stroke-width", "stroke", "fill", "font-size"], function(key) { + can.core.List([html.STROKE_WIDTH, html.STROKE, html.FILL, html.FONT_SIZE], function(key) { can.Action(key, target.Value(key)||can.Action(key)) }) } - name = name || target.Groups() - return (name || target == can.svg) && can.onappend.item(can, "item", {name: name||"svg"}, function(event) { show(event) - can.onaction["显示"](event, can) + return (name || target == can.svg) && can.onappend.item(can, html.ITEM, {name: name||html.SVG}, function(event) { show(event) + can.onaction.show(event, can) }, function(event) { show(event) - can.user.carte(event, can, can.onaction, ["隐藏", "显示", "添加", "删除", "清空"]) + can.user.cartes(event, can, can.onaction, [ice.HIDE, ice.SHOW, mdb.CREATE, mdb.REMOVE, cli.CLEAR]) }, can.ui.project) }, _block: function(can, target) { + // target.oncontextmenu = function(event) { can.user.carte(event, can, can.ondetail) } target.Val = function(key, value) { - return parseInt(target.Value(key, value == undefined? value: parseInt(value)||0)) || 0 + return parseInt(target.Value(key, value == undefined? value: parseInt(value)||0))||0 } target.Value = function(key, value) { if (typeof key == undefined) { return } - if (typeof key == "object") { can.core.Item(key, target.Value); return } + if (can.base.isObject(key)) { can.core.Item(key, target.Value); return } var figure = can.onfigure._get(can, target) key = figure && figure.data && figure.data.size && figure.data.size[key] || key @@ -62,220 +53,132 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, if (key == "inner") { return value != undefined && (target.innerHTML = value), target.innerHTML } - if (key == "ship") { + if (key == ice.SHIP) { return value != undefined && target.setAttribute(key, JSON.stringify(value)), can.base.Obj(target.getAttribute(key), []) } - return value != undefined && target.setAttribute(key, value), target.getAttribute(key||"class") - || target[key]&&target[key].baseVal&&target[key].baseVal.value - || target[key]&&target[key].baseVal || "" + return value != undefined && target.setAttribute(key, value), target.getAttribute(key||html.CLASS) + || target[key]&&target[key].baseVal&&target[key].baseVal.value || target[key]&&target[key].baseVal || "" } target.Group = function() { var item = target - while (item) { if (["svg", "g"].indexOf(item.tagName) > -1) { return item }; item = item.parentNode } + while (item) { if ([html.SVG, "g"].indexOf(item.tagName) > -1) { return item }; item = item.parentNode } return can.svg } target.Groups = function() { var item = target - var list = []; while (item && item.tagName != "svg") { - item.tagName == "g" && item.Value("class") && list.push(item.Value("class")) + var list = []; while (item && item.tagName != html.SVG) { + item.tagName == "g" && item.Value(html.CLASS) && list.push(item.Value(html.CLASS)) item = item.parentNode } - return list.reverse().join(".") + return list.reverse().join(ice.PT) } return target }, - _point: function(event, can) { - var p = can.svg.getBoundingClientRect() - var point = {x: event.clientX-p.x, y: event.clientY-p.y} - point.x = point.x - point.x % parseInt(can.Action("grid")) - point.y = point.y - point.y % parseInt(can.Action("grid")) - return can.Status("坐标", point.x+","+point.y), point - }, - _figure: function(event, can, points, target) { - can.temp && can.page.Remove(can, can.temp) && delete(can.temp) - can.temp = can.core.CallFunc([can.onaction._mode, can.Action("mode")], [event, can, points, target]) - can.point.length == 0 && delete(can.temp) - }, draw: function(event, can, value) { var figure = can.onfigure[value.shape] var data = figure.draw(event, can, value.point, value.style) can.core.Item(value.style, function(key, value) { data[key] = value }) - var item = can.onfigure._push(can, data, value.shape, can.group||can.svg) + var item = can.onfigure._push(can, value.shape, data, can.group||can.svg) can.core.ItemCB(value, function(key, cb) { item[key] = cb }) - value._init && value._init(item) - return item + return value._init && value._init(item), item }, - - ondblclick: function(event, can) { - if (can.Action("go") == "run") { return } - can.ondetail["标签"](event, can) - }, - onclick: function(event, can) { var point = can.onimport._point(event, can) - if (can.Action("go") == "run") { return can.onaction._mode.run(event, can) } - can.onimport._figure(event, can, can.point = can.point.concat(point)) - }, - onmousemove: function(event, can) { var point = can.onimport._point(event, can) - can.onaction.Prepos(event, event.target) - if (can.Action("go") == "run") { return can.page.Modify(can, event.target, {style: {cursor: ""}}) } - if (can.Action("go") == "auto") { can.onaction._auto(can, event.target) } - can.onimport._figure(event, can, can.point.concat(point)) - }, - onmouseleave: function(event, can) { - can.onengine.signal(can, "keymap.focus", can.request(event, {cb: null})) - }, - onmouseenter: function(event, can) { - can.onengine.signal(can, "keymap.focus", can.request(event, {cb: function(event) { - can.keylist = can.onkeypop._parse(event, can, "normal", can.keylist, can.group) - }})) - }, - onmouseover: function(event, can) { can.onexport._show(can, event.target) }, - oncontextmenu: function(event, can) { can.onexport._show(can, event.target) }, }, ["/plugin/local/wiki/draw.css"]) Volcanos("onfigure", {help: "图形绘制", list: [], _get: function(can, item, name) { - return can.onfigure[name]||can.onfigure[item.getAttribute("name")]||can.onfigure[item.tagName] + return can.onfigure[name]||can.onfigure[item.getAttribute(kit.MDB_NAME)]||can.onfigure[item.tagName] }, _ship: function(can, target, value) { - return target.Value("ship", target.Value("ship").concat([value])) + return target.Value(ice.SHIP, target.Value(ice.SHIP).concat([value])) }, - _push: function(can, data, cmd, target) { - var rect = document.createElementNS("http://www.w3.org/2000/svg", cmd) - target.appendChild(can.onimport._block(can, rect)) - rect.Value(data); if (can.point.length == 0) { - var pid = "p"+can.svg.Val("count", can.svg.Val("count")+1) - rect.Value("class", (rect.Value("class") + " " + rect.Value("pid", pid)).trim()) - } - return rect + _push: function(can, type, data, target) { + var item = document.createElementNS("http://www.w3.org/2000/svg", type) + target.appendChild(can.onimport._block(can, item)), item.Value(data) + return item }, _copy: function(event, can, target) { - var figure = can.onfigure._get(can, target).data + var data = {}, figure = can.onfigure._get(can, target), size = figure.data.size + can.core.List(figure.data.copy, function(item) { data[item] = target.Value(item) }) + data[size.x||"x"] = target.Val(size.x||"x")+10 + data[size.y||"y"] = target.Val(size.y||"y")+10 - var data = {} - can.core.List(figure.copy, function(item) { data[item] = target.Value(item) }) - data[figure.size.x||"x"] = target.Val(figure.size.x||"x")+10 - data[figure.size.y||"y"] = target.Val(figure.size.y||"y")+10 - - var p = data && can.onfigure._push(can, data, target.tagName, can.group||can.svg) - can.page.Select(can, can.svg, "."+target.Value("text"), function(item) { - can.ondetail["标签"](event, can, {silent: true, def: item.Value("inner")}, "", p) + var p = data && can.onfigure._push(can, target.tagName, data, can.group||can.svg) + can.page.Select(can, can.svg, ice.PT+target.Value(kit.MDB_TEXT), function(item) { + can.ondetail[html.LABEL](event, can, {silent: true, def: item.Value("inner")}, "", p) }) return p }, + _move: function(can, target, list) { + can.core.List(list||target.Value(ice.SHIP), function(ship) { + ship.target = can.page.Select(can, can.svg, ice.PT+ship.pid)[0] + var p = can.onexport.anchor(target, ship.anchor, {}) + if (ship.which == 1) { + ship.target.Val("x1", p.x), ship.target.Val("y1", p.y) + } else if (ship.which == 2) { + ship.target.Val("x2", p.x), ship.target.Val("y2", p.y) + } + }) + }, - svg: { // + svg: { // data: {size: {}, copy: []}, - show: function(can, target) { return target.Val("width") +","+ target.Val("height") }, + show: function(can, target, figure) { return can.onexport._size(can, target, figure) } }, text: { // hi - data: {size: {x: "x", y: "y"}, copy: ["inner"]}, + data: {points: 1, size: {}, copy: ["inner"]}, draw: function(event, can, point, style) { if (point.length < 1 || event.type == "mousemove") { return } - var p0 = point[0]; var data = {"x": p0.x, "y": p0.y, "inner": style&&style.inner || can.user.prompt("text")} - return can.point = [], data + var p0 = point[0], text = style&&style.inner||can.user.prompt(kit.MDB_TEXT) + return text? {x: p0.x, y: p0.y, inner: text}: null }, - show: function(can, target) { return ": (" + target.Val("x") + "," + target.Val("y")+ ")" } + show: function(can, target, figure) { return can.onexport._position(can, target, figure) } }, - rect: { // - data: {rx: 4, ry: 4, size: {x: "x", y: "y"}, copy: ["width", "height", "rx", "ry"]}, + circle: { // + data: {points: 2, size: {height: "r", width: "r", x: "cx", y: "cy"}, copy: ["r"]}, draw: function(event, can, point) { if (point.length < 2) { return } - var p0 = point[0], p1 = point[1]; var data = { - "rx": this.data.rx, "ry": this.data.ry, - "x": p0.x > p1.x? p1.x: p0.x, "y": p0.y > p1.y? p1.y: p0.y, - "width": Math.abs(p0.x-p1.x), "height": Math.abs(p0.y-p1.y), + var p0 = point[0], p1 = point[1] + return {r: Math.sqrt(Math.pow(p0.x-p1.x, 2)+Math.pow(p0.y-p1.y, 2)), cx: p0.x, cy: p0.y} + }, + }, + ellipse: { // + data: {points: 2, size: {height: "ry", width: "rx", x: "cx", y: "cy"}, copy: ["ry", "rx"]}, + draw: function(event, can, point) { if (point.length < 2) { return } + var p0 = point[0], p1 = point[1] + return {ry: Math.abs(p0.y - p1.y), rx: Math.abs(p0.x - p1.x), cx: p0.x, cy: p0.y} + }, + }, + rect: { // + data: {points: 2, ry: 4, rx: 4, size: {}, copy: [chat.HEIGHT, chat.WIDTH, "ry", "rx"]}, + draw: function(event, can, point) { if (point.length < 2) { return } + var p0 = point[0], p1 = point[1] + return { + height: Math.abs(p0.y-p1.y), width: Math.abs(p0.x-p1.x), ry: this.data.ry, rx: this.data.rx, + x: p0.x > p1.x? p1.x: p0.x, y: p0.y > p1.y? p1.y: p0.y, } - return event.type == "click" && point.length == 2 && (can.point = []), data }, - text: function(can, data, target) { - data.x = target.Val("x")+target.Val("width")/2 - data.y = target.Val("y")+target.Val("height")/2 - return data - }, - show: function(can, target) { - return ": (" + target.Val("x") + "," + target.Val("y") + ")" - + " + (" + target.Val("width") + "," + target.Val("height") + ")" + text: function(can, data, target) { return data.x = target.Val("x")+target.Val(chat.WIDTH)/2, data.y = target.Val("y")+target.Val(chat.HEIGHT)/2, data }, + }, + block: { // + data: {points: 2, ry: 4, rx: 4, size: {}, copy: [chat.HEIGHT, chat.WIDTH, "ry", "rx"]}, + draw: function(event, can, point) { if (point.length < 2) { return } + this._temp && can.page.Remove(can, this._temp) && delete(this._temp) + this._temp = can.onfigure._push(can, "g", {}, can.group||can.svg) + + var rect = can.onfigure._push(can, "rect", can.onfigure.rect.draw(event, can, point), this._temp) + if (event.type == html.CLICK) { delete(this._temp) } }, + text: function(can, data, target) { can.onfigure.rect.text(can, data, target) }, }, line: { // - data: {size: {}, copy: ["x1", "y1", "x2", "y2"], - x: function(can, value, cmd, target) { - if (value != undefined) { - var offset = value - target.Val("xx") - target.Val("x1", target.Val("x1") + offset) - target.Val("x2", target.Val("x2") + offset) - target.Val("xx", value) - } - return target.Val("xx") - }, - y: function(can, value, cmd, target) { - if (value != undefined) { - var offset = value - target.Val("yy") - target.Val("y1", target.Val("y1") + offset) - target.Val("y2", target.Val("y2") + offset) - target.Val("yy", value) - } - return target.Val("yy") - }, - width: function(can, value, cmd, target) { - return value != undefined && target.Val("x2", target.Val("x1") + parseInt(value)), target.Val("x2") - target.Val("x1") - }, - height: function(can, value, cmd, target) { - return value != undefined && target.Val("y2", target.Val("y1") + parseInt(value)), target.Val("y2") - target.Val("y1") - }, - }, + data: {points: 2, size: {x: "x1", y: "y1"}, copy: ["x1", "y1", "x2", "y2"]}, grid: function(event, can, point) { var target = event.target if (target == can.svg) { return } - var p = point[point.length-1], pos = can.onaction.Prepos(event, target) - target.Val && can.onaction.Anchor(event, target, pos, p) + var p = point[point.length-1], pos = can.onexport.cursor(event, can, target) + target.Val && can.onexport.anchor(target, pos, p) return p.target = target, p.anchor = pos, point }, draw: function(event, can, point) { if (point.length < 2) { return } - var p0 = point[0], p1 = point[1]; var data = {"x1": p0.x, "y1": p0.y, "x2": p1.x, "y2": p1.y} - return event.type == "click" && point.length == 2 && (can.point = []), data - }, - text: function(can, target, data) { - data.x = (target.Val("x1") + target.Val("x2")) / 2 - data.y = (target.Val("y1") + target.Val("y2")) / 2 - return data - }, - show: function(can, target) { - return ": (" + target.Val("x1") + "," + target.Val("y1") + ")" - + " - (" + target.Val("x2") + "," + target.Val("y2") + ")" - }, - }, - circle: { // - data: {size: {x: "cx", y: "cy", width: "r", height: "r"}, copy: ["r"]}, - draw: function(event, can, point) { if (point.length < 2) { return } - var p0 = point[0], p1 = point[1]; var data = {"cx": p0.x, "cy": p0.y, "r": Math.sqrt(Math.pow(p0.x-p1.x, 2)+Math.pow(p0.y-p1.y, 2))} - return event.type == "click" && point.length == 2 && (can.point = []), data - }, - text: function(can, target, data) { return data.x = target.Val("cx"), data.y = target.Val("cy"), data }, - show: function(can, target) { return ": (" + target.Val("cx") + "," + target.Val("cy") + ")" + " > (" + parseInt(target.Val("r")) + ")" }, - }, - ellipse: { // - data: {size: {x: "cx", y: "cy", width: "rx", height: "ry"}, copy: ["rx", "ry"]}, - draw: function(event, can, point) { if (point.length < 2) { return } - var p0 = point[0], p1 = point[1]; var data = {"cx": p0.x, "cy": p0.y, "rx": Math.abs(p0.x - p1.x), "ry": Math.abs(p0.y - p1.y)} - return event.type == "click" && point.length == 2 && (can.point = []), data - }, - text: function(can, target, data) { return data.x = target.Val("cx"), data.y = target.Val("cy"), data }, - show: function(can, target) { return ": (" + target.Val("cx") + "," + target.Val("cy") + ")" + " > (" + target.Val("rx") + "," + target.Val("ry") + ")" }, - }, - block: { // - data: {rx: 4, ry: 4, size: {x: "x", y: "y"}, copy: ["width", "height", "rx", "ry"]}, - draw: function(event, can, point) { if (point.length < 2) { return } - this._temp && can.page.Remove(can, this._temp) && delete(this._temp) - this._temp = can.onfigure._push(can, {}, "g", can.group||can.svg) - - var rect = can.onfigure._push(can, can.onfigure.rect.draw(event, can, point), "rect", this._temp) - if (event.type != "click" || point.length != 2) { return } - delete(this._temp) - }, - text: function(can, target, data) { - data.x = target.Val("x")+target.Val("width")/2 - data.y = target.Val("y")+target.Val("height")/2 - return data - }, - show: function(can, target) { - return ": (" + target.Val("x") + "," + target.Val("y") + ")" - + " + (" + target.Val("width") + "," + target.Val("height") + ")" + var p0 = point[0], p1 = point[1] + return {x1: p0.x, y1: p0.y, x2: p1.x, y2: p1.y} }, + text: function(can, target, data) { return data.x = (target.Val("x1")+target.Val("x2"))/2, data.y = (target.Val("y1")+target.Val("y2"))/2, data }, + show: function(can, target, figure) { return "<("+(target.Val("y2")-target.Val("y1"))+ice.FS+(target.Val("x2")-target.Val("x1"))+")"+can.onexport._position(can, target, figure) }, }, }, []) Volcanos("onkeypop", {help: "键盘交互", list: [], @@ -316,80 +219,52 @@ Volcanos("onkeypop", {help: "键盘交互", list: [], }) Volcanos("onaction", {help: "组件菜单", list: [ ["stroke-width", 1, 2, 3, 4, 5], - ["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"], - ["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black", "#0000"], + ["stroke", cli.RED, cli.YELLOW, cli.GREEN, cli.CYAN, cli.BLUE, cli.MAGENTA, cli.BLACK, cli.WHITE], + ["fill", cli.RED, cli.YELLOW, cli.GREEN, cli.CYAN, cli.BLUE, cli.MAGENTA, cli.BLACK, cli.WHITE, "#0000"], ["font-size", 12, 16, 18, 24, 32], - ["shape", "text", "rect", "line", "circle", "ellipse", "block"], - ["mode", "draw", "resize"], - ["grid", 1, 2, 3, 4, 5, 10, 20], ["go", "run", "auto", "manual"], + ["mode", "draw", "resize"], + ["shape", "text", "circle", "ellipse", "rect", "block", "line"], + ["grid", 1, 2, 3, 4, 5, 10, 20], ], - _change: function(can, key, value) { - can.Action(key, value), can.group.Value(key, value) - }, - "编辑": function(event, can, key) { can.Action("go", "auto") }, - "save": function(event, can, key) { + _change: function(can, key, value) { can.Action(key, value), can.group.Value(key, value) }, + "stroke-width": function(event, can, key, value) { can.onaction._change(can, key, value) }, + stroke: function(event, can, key, value) { can.onaction._change(can, key, value) }, + fill: function(event, can, key, value) { can.onaction._change(can, key, value) }, + "font-size": function(event, can, key, value) { can.onaction._change(can, key, value) }, + + go: function(event, can, key, value) { can.Action(key, value) }, + mode: function(event, can, key, value) { can.Action(key, value) }, + shape: function(event, can, key, value) { can.Action(key, value) }, + + edit: function(event, can) { can.Action("go", can.Action("go") == "run"? "auto": "run") }, + save: function(event, can, button) { var msg = can.request(event, {content: can.onexport.content(can, can.svg)}) - can.run(event, [ctx.ACTION, "save", can.Option("path")], function(msg) { - can.user.toast(can, "保存成功") + can.run(event, [ctx.ACTION, button, can.Option(nfs.PATH)], function(msg) { + can.user.toast(can, ice.SUCCESS, button) }, true) }, - "项目": function(event, can) { can.onmotion.toggle(can, can.ui.project) }, - "显示": function(event, can) { can.onmotion.show(can, {value: 100, length: 10}, null, can.group) }, - "隐藏": function(event, can) { can.onmotion.hide(can, {value: 100, length: 10}, null, can.group) }, - "添加": function(event, can) { - can.user.prompt("add group", function(name) { + + project: function(event, can) { can.onmotion.toggle(can, can.ui.project) }, + show: function(event, can) { can.onmotion.show(can, {interval: 100, length: 10}, null, can.group) }, + hide: function(event, can) { can.onmotion.hide(can, {interval: 100, length: 10}, null, can.group) }, + create: function(event, can) { + can.user.prompt("group", function(name) { var group = document.createElementNS('http://www.w3.org/2000/svg', 'g') - can.group.append(group), can.onimport._group(can, group, name).click() - group.Value("class", name), can.core.List(["stroke-width", "stroke", "fill", "font-size"], function(name) { + can.group.append(group), can.onimport._block(can, group) + group.Value(html.CLASS, name), can.core.List([html.STROKE_WIDTH, html.STROKE, html.FILL, html.FONT_SIZE], function(name) { group.Value(name, can.Action(name)) - }) + }), can.onimport._group(can, group).click() }) }, - "删除": function(event, can) { if (can.group == can.svg) { return } - can.page.Remove(can, event.target) + remove: function(event, can) { if (can.group == can.svg) { return } can.page.Remove(can, can.group) - can.Action("group", "svg") }, - "清空": function(event, can) { + clear: function(event, can) { can.onmotion.clear(can, can.group), can.point = [], delete(can.temp) }, - "font-size": function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) }, - "stroke-width": function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) }, - stroke: function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) }, - fill: function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) }, - - shape: function(event, can, key, value) { can.Action(key, value) }, - mode: function(event, can, key, value) { can.Action(key, value) }, - go: function(event, can, key, value) { can.Action(key, value) }, - - _auto: function(can, target) { - if (can.point.length > 0) { return } - var pos = can.onaction.Prepos(event, event.target) - if (target.tagName == "text") { - - } else if (target == can.svg) { - if (pos == 5) { - can.Action("mode", "draw") - can.Action("shape", "block") - can.page.Modify(can, target, {style: {cursor: "crosshair"}}) - } else { - can.Action("mode", "resize") - } - } else { - switch (pos) { - case 5: - case 9: - can.Action("mode", "resize") - break - default: - can.Action("mode", "draw") - can.Action("shape", "line") - } - } - }, _mode: { draw: function(event, can, point) { var shape = can.Action("shape") @@ -397,164 +272,97 @@ Volcanos("onaction", {help: "组件菜单", list: [ figure.grid && figure.grid(event, can, point) var data = figure.draw && figure.draw(event, can, point) - var obj = data && can.onfigure._push(can, data, figure.data.name||shape, can.group||can.svg) + var obj = data && can.onfigure._push(can, figure.data.name||shape, data, can.group||can.svg) + event.type == html.CLICK && point.length === figure.data.points && (can.point = []) - event.type == "click" && obj && can.core.List(point, function(item, index) { - item.target && can.onfigure._ship(can, item.target, {pid: obj.Value("pid"), which: index, anchor: item.anchor}) - }) + if (event.type == html.CLICK && obj) { + var pid = "p"+can.svg.Val(kit.MDB_COUNT, can.svg.Val(kit.MDB_COUNT)+1) + obj.Value(html.CLASS, (obj.Value(html.CLASS)+ice.SP+obj.Value("pid", pid)).trim()) + can.core.List(point, function(item, index) { + item.target && can.onfigure._ship(can, item.target, {pid: obj.Value("pid"), which: index+1, anchor: item.anchor}) + }) + } return obj }, - resize: function(event, can, point, target) { target = target || event.target - if (point.length == 1) { - if (event.type == "click") { + resize: function(event, can, point, target) { target = target||event.target + if (event.type == html.CLICK) { + if (point.length == 1) { can.current = {target: target, begin: can.core.List([target], function(item) { if (item.tagName == "g") { return } return { - x: item.Val("x"), y: item.Val("y"), width: item.Val("width"), height: item.Val("height"), - target: item, ship: can.core.List(item.Value("ship"), function(ship) { - return ship.pid && (ship.target = can.page.Select(can, can.svg, "."+ship.pid)[0]) && ship + height: item.Val(chat.HEIGHT), width: item.Val(chat.WIDTH), x: item.Val("x"), y: item.Val("y"), + target: item, ship: can.core.List(item.Value(ice.SHIP), function(ship) { + return ship.pid && (ship.target = can.page.Select(can, can.svg, ice.PT+ship.pid)[0]) && ship }) } - }), pos: can.onaction.Prepos(event, target)} + }), pos: can.onexport.cursor(event, can, target)} + return } - return - } - if (event.type == "click") { return can.point = [], delete(can.current) } - can.core.List(can.current.begin, function(item) { var figure = can.onfigure._get(can, item.target) - can.onaction.Resizes(event, item.target, item, point[0], point[1], can.current.pos) - can.page.Select(can, can.svg, "."+item.target.Value("text"), function(text) { - text.Value(figure.text(can, {}, item.target)) - }) - can.core.List(item.ship, function(ship) { - var p = can.onaction.Anchor(event, item.target, ship.anchor, {}) - if (ship.which == 0) { - ship.target.Val("x1", p.x) - ship.target.Val("y1", p.y) - } - if (ship.which == 1) { - ship.target.Val("x2", p.x) - ship.target.Val("y2", p.y) - } + can.current && can.core.List(can.current.begin, function(item) { var figure = can.onfigure._get(can, item.target) + can.onexport.resize(event, item.target, item, point[0], point[1], can.current.pos) + can.page.Select(can, can.svg, ice.PT+item.target.Value(kit.MDB_TEXT), function(text) { + text.Value(can.onexport._text(can, item.target, figure, {})) }) + can.onfigure._move(can, item.target, item.ship) }) }, run: function(event, can) { var target = event.target - event.type == "click" && target.Value("type") && can.run(event, [ctx.ACTION, "run", target.Value("zone"), target.Value("type"), target.Value("name"), target.Value("text")], function(msg) { - can.onappend.table(can, msg, function() {}, can.ui.display) - can.onappend.board(can, msg.Result(), can.ui.display) - }, true) + var figure = can.onfigure._get(can, target) + can.page.Appends(can, can.ui.profile, [{type: html.TABLE, list: [{th: [kit.MDB_KEY, kit.MDB_VALUE]}].concat(can.core.List([chat.HEIGHT, chat.WIDTH, "x", "y"], function(key) { + return key = figure.data.size[key]||key, {td: [key, target.Value(key)], ondblclick: function(event) { + can.onmotion.modify(can, event.target, function(event, value, old) { + target.Value(key, value), can.onfigure._move(can, target) + }) + }} + })) }]), can.onmotion.hidden(can, can.ui.profile, true) }, }, - Resizes: function(event, item, begin, p0, p1, pos) { - switch (pos) { - case 5: - item.Value("x", begin.x + p1.x - p0.x) - item.Value("y", begin.y + p1.y - p0.y) - return - } + _auto: function(can, target) { + if (can.point.length > 0) { return } + if (target.tagName == kit.MDB_TEXT) { return } - switch (pos) { - case 1: - case 2: - case 3: - item.Value("y", begin.y + p1.y - p0.y) - item.Value("height", begin.height - p1.y + p0.y) - break - } - switch (pos) { - case 1: - case 4: - case 7: - item.Value("x", begin.x + p1.x - p0.x) - item.Value("width", begin.width - p1.x + p0.x) - break - } - switch (pos) { - case 3: - case 6: - case 9: - item.Value("width", begin.width + p1.x - p0.x) - break - } - switch (pos) { - case 7: - case 8: - case 9: - item.Value("height", begin.height + p1.y - p0.y) - break + var pos = can.onexport.cursor(event, can, event.target) + if (target == can.svg) { + if (pos == 5) { + can.Action(ice.MODE, "draw"), can.Action("shape", html.BLOCK) + can.page.Modify(can, target, {style: {cursor: "crosshair"}}) + } else { + can.Action(ice.MODE, "resize") + } + } else { + switch (pos) { + case 5: + case 9: can.Action(ice.MODE, "resize"); break + default: can.Action(ice.MODE, "draw"), can.Action("shape", "line") + } } }, - Anchor: function(event, target, pos, point) { - switch (pos) { - case 1: - case 2: - case 3: - point.y = target.Val("y") - break - case 4: - case 5: - case 6: - point.y = target.Val("y") + target.Val("height") / 2 - break - case 7: - case 8: - case 9: - point.y = target.Val("y") + target.Val("height") - break - } - - switch (pos) { - case 1: - case 4: - case 7: - point.x = target.Val("x") - break - case 2: - case 5: - case 8: - point.x = target.Val("x") + target.Val("width") / 2 - break - case 3: - case 6: - case 9: - point.x = target.Val("x") + target.Val("width") - break - } - return point + _figure: function(event, can, points, target) { + can.temp && can.page.Remove(can, can.temp) && delete(can.temp) + can.temp = can.core.CallFunc([can.onaction._mode, can.Action(ice.MODE)], [event, can, points, target]) + can.point.length == 0 && delete(can.temp) }, - Prepos: function(event, item, p, q) { - var max = 20 - p = p || item.getBoundingClientRect() - q = q || {x: event.clientX, y: event.clientY} - var pos = 5 - var y = (q.y - p.y) / p.height - if (y < 0.2 && q.y - p.y < max) { - pos -= 3 - } else if (y > 0.8 && q.y - p.y - p.height > -max) { - pos += 3 - } - var x = (q.x - p.x) / p.width - if (x < 0.2 && q.x - p.x < max) { - pos -= 1 - } else if (x > 0.8 && q.x - p.x - p.width > -max) { - pos += 1 - } - - var cursor = [ - "nw-resize", "n-resize", "ne-resize", - "w-resize", "move", "e-resize", - "sw-resize", "s-resize", "se-resize", - ] - item.style.cursor = cursor[pos-1] - return pos + onmouseover: function(event, can) { can.onexport._show(can, event.target) }, + onmousemove: function(event, can) { var point = can.onexport._point(event, can) + can.onexport.cursor(event, can, event.target) + if (can.Action("go") == ice.AUTO) { can.onaction._auto(can, event.target) } + can.onaction._figure(event, can, can.point.concat(point)) + }, + onclick: function(event, can) { var point = can.onexport._point(event, can) + if (can.Action("go") == cli.RUN) { return can.onaction._mode.run(event, can) } + can.onaction._figure(event, can, can.point = can.point.concat(point)) + }, + ondblclick: function(event, can) { + if (can.Action("go") == cli.RUN) { return } + can.ondetail.label(event, can) }, }) -Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑", "删除"], - "复制": function(event, can) { can.onfigure._copy(event, can, event.target) }, - "标签": function(event, can) { var target = event.target +Volcanos("ondetail", {help: "组件详情", list: [ice.COPY, html.LABEL, mdb.MODIFY, mdb.DELETE], + copy: function(event, can) { can.onfigure._copy(event, can, event.target) }, + label: function(event, can) { var target = event.target var def = target.Value("text"); def && can.page.Select(can, can.svg, ice.PT+def, function(item) { def = item.Value("inner") }) @@ -568,12 +376,12 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑", } var figure = can.onfigure._get(can, target) - var data = figure.text(can, {inner: text}, target) - var obj = can.onfigure._push(can, data, "text", target.Group()) + var data = can.onexport._text(can, target, figure, {inner: text}) + var obj = can.onfigure._push(can, "text", data, target.Group()) target.Value("text", obj.Value("pid")) }, def) }, - "编辑": function(event, can) { var target = event.target + "modify": function(event, can) { var target = event.target var figure = can.onfigure._get(can, target) can.user.input(event, can, can.core.List(["x", "y"].concat(figure.data.copy||[]), function(item) { return {type: "text", name: item, value: target.Value(item)} @@ -583,8 +391,8 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑", }) }) }, - "删除": function(event, can) { if (event.target == can.svg) { return } - can.core.List(event.target.Value("ship"), function(value) { + "delete": function(event, can) { if (event.target == can.svg) { return } + can.core.List(event.target.Value(ice.SHIP), function(value) { can.page.Select(can, can.svg, "."+value.pid, function(item) { can.page.Remove(can, item) }) @@ -595,18 +403,136 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑", can.page.Remove(can, event.target) }, }) -Volcanos("onexport", {help: "导出数据", list: ["分组", "图形", "坐标"], +Volcanos("onexport", {help: "导出数据", list: ["group", "figure", "pos"], _show: function(can, target) { var figure = can.onfigure._get(can, target) - can.Status("图形", target.tagName + " " + (figure? figure.show(can, target): "")) - can.Status("分组", target.Groups()||can.group.Groups()||"svg") + function show() { return can.onexport._size(can, target, figure)+ice.SP+can.onexport._position(can, target, figure) } + can.Status("figure", target.tagName+ice.SP+(figure? (figure.show||show)(can, target, figure): "")) + can.Status("group", target.Groups()||can.group.Groups()||html.SVG) }, + _size: function(can, target, figure) { var size = figure.data.size||{} + return "<("+target.Val(size[chat.HEIGHT]||chat.HEIGHT)+ice.FS+target.Val(size[chat.WIDTH]||chat.WIDTH)+")" + }, + _position: function(can, target, figure) { var size = figure.data.size||{} + return "@("+target.Val(size["x"]||"x")+ice.FS+target.Val(size["y"]||"y")+")" + }, + _text: function(can, target, figure, data) { var size = figure.data.size||{} + if (figure.text) { return figure.text(can, data, target) } + return data.x = target.Val(size["x"]||"x"), data.y = target.Val(size["y"]||"y"), data + }, + _point: function(event, can) { + var p = can.svg.getBoundingClientRect() + var point = {x: event.clientX-p.x, y: event.clientY-p.y} + point.x = point.x - point.x % parseInt(can.Action("grid")) + point.y = point.y - point.y % parseInt(can.Action("grid")) + return can.Status("pos", point.x+ice.FS+point.y), point + }, + content: function(can, svg) { return ['"]).join("") + svg? can.core.List([chat.HEIGHT, chat.WIDTH, kit.MDB_COUNT, "grid", html.STROKE_WIDTH, html.STROKE, html.FILL, html.FONT_SIZE], function(item) { + return svg.Value(item)? ice.SP + item + '="' + svg.Value(item) + '"': "" + }): [" height="+((can.Conf(chat.HEIGHT)||450)-50)+" width="+(can.Conf(chat.WIDTH)||600)]).concat(['>', svg? svg.innerHTML: "", ""]).join("") + }, + cursor: function(event, can, item, show) { + var p = item.getBoundingClientRect() + var q = {x: event.clientX, y: event.clientY} + + var pos = 5, margin = 20 + var y = (q.y-p.y)/p.height + if (y < 0.2 && q.y-p.y < margin) { + pos -= 3 + } else if (y > 0.8 && q.y-p.y-p.height > -margin) { + pos += 3 + } + var x = (q.x-p.x)/p.width + if (x < 0.2 && q.x-p.x < margin) { + pos -= 1 + } else if (x > 0.8 && q.x-p.x- p.width > -margin) { + pos += 1 + } + + return (show||can.svg).style.cursor = [ + "nw-resize", "n-resize", "ne-resize", + "w-resize", "move", "e-resize", + "sw-resize", "s-resize", "se-resize", + ][pos-1], pos + }, + anchor: function(target, pos, point) { + switch (pos) { + case 1: + case 2: + case 3: + point.y = target.Val("y") + break + case 4: + case 5: + case 6: + point.y = target.Val("y") + target.Val(chat.HEIGHT) / 2 + break + case 7: + case 8: + case 9: + point.y = target.Val("y") + target.Val(chat.HEIGHT) + break + } + + switch (pos) { + case 1: + case 4: + case 7: + point.x = target.Val("x") + break + case 2: + case 5: + case 8: + point.x = target.Val("x") + target.Val(chat.WIDTH) / 2 + break + case 3: + case 6: + case 9: + point.x = target.Val("x") + target.Val(chat.WIDTH) + break + } + return point + }, + resize: function(event, item, begin, p0, p1, pos) { + switch (pos) { + case 5: + item.Value("x", begin.x + p1.x - p0.x) + item.Value("y", begin.y + p1.y - p0.y) + return + } + + switch (pos) { + case 1: + case 2: + case 3: + item.Value("y", begin.y + p1.y - p0.y) + item.Value(chat.HEIGHT, begin.height - p1.y + p0.y) + break + } + switch (pos) { + case 1: + case 4: + case 7: + item.Value("x", begin.x + p1.x - p0.x) + item.Value(chat.WIDTH, begin.width - p1.x + p0.x) + break + } + switch (pos) { + case 3: + case 6: + case 9: + item.Value(chat.WIDTH, begin.width + p1.x - p0.x) + break + } + switch (pos) { + case 7: + case 8: + case 9: + item.Value(chat.HEIGHT, begin.height + p1.y - p0.y) + break + } }, }) diff --git a/plugin/state.js b/plugin/state.js index a0f80102..ace067e8 100644 --- a/plugin/state.js +++ b/plugin/state.js @@ -167,6 +167,7 @@ Volcanos("onaction", {help: "交互操作", list: [ }, "参数": function(event, can) { can.onmotion.toggle(can, can._action) }, + actions: function(event, can) { can.onmotion.toggle(can, can._action) }, clear: function(event, can, name) { can.onmotion.clear(can, can._output) }, close: function(event, can) { can.page.Remove(can, can._target) }, upload: function(event, can) { can.user.upload(event, can) }, diff --git a/plugin/story/pie.js b/plugin/story/pie.js index 66ff259c..092a2014 100644 --- a/plugin/story/pie.js +++ b/plugin/story/pie.js @@ -33,7 +33,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, var c = color[index%color.length]; pie(p[0], p[1], r, begin, span, c, function(event) { can.onmotion.clear(can, can.svg), can.onimport._draw(can, msg, field, x, y, r, margin, index) }), begin += span, msg.Push("color", ' ') - msg.Push("weight", parseInt(parseInt(value[field])*10000/total)/100) + msg.Push("weight", parseInt(parseInt(value[field])*10000/total)/100+"%") }) }, }) diff --git a/plugin/story/spide.js b/plugin/story/spide.js index 3cb5c463..c40633f6 100644 --- a/plugin/story/spide.js +++ b/plugin/story/spide.js @@ -9,6 +9,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, can.size = 30, can.margin = 30 can.require(["/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw/path.js"], function() { + can.page.ClassList.add(can, can._fields, "draw") can.onimport._show(can, msg), can.onmotion.hidden(can, can.ui.project) var p = can.Action("view", can.sup.view||can.Action("view")) can.onaction[p](event, can, p) diff --git a/plugin/story/trend.js b/plugin/story/trend.js index a992d261..c967cd22 100644 --- a/plugin/story/trend.js +++ b/plugin/story/trend.js @@ -8,6 +8,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, can.Action("speed", parseInt(msg.Option("speed")||"100")) can.require(["/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw/path.js"], function() { + can.page.ClassList.add(can, can._fields, "draw") can.onimport._show(can, msg), can.onmotion.hidden(can, can.ui.project) can.onaction[can.Action("view")](event, can) }) diff --git a/proto.js b/proto.js index 9a61c526..0de17202 100644 --- a/proto.js +++ b/proto.js @@ -22,6 +22,9 @@ var ice = { POD: "pod", CTX: "ctx", CMD: "cmd", ARG: "arg", OPT: "opt", TRUE: "true", + SUCCESS: "success", + FAILURE: "failure", + PROCESS: "process", MSG_USERNAME: "user.name", MSG_USERNICK: "user.nick", @@ -46,6 +49,11 @@ var ice = { PROCESS_AGAIN: "_again", AUTO: "auto", + SHOW: "show", + HIDE: "hide", + COPY: "copy", + SHIP: "ship", + MODE: "mode", } var ctx = { @@ -139,6 +147,11 @@ var html = { FORM: "form", FILE: "file", LIST: "list", ITEM: "item", MENU: "menu", + SVG: "svg", + CLASS: "class", + CLICK: "click", + + STROKE_WIDTH: "stroke-width", STROKE: "stroke", FILL: "fill", FONT_SIZE: "font-size", MONOSPACE: "monospace", } var lang = { STRING: "string", OBJECT: "object", FUNCTION: "function",