diff --git a/frame.js b/frame.js index 5a0f048d..6135b851 100644 --- a/frame.js +++ b/frame.js @@ -259,14 +259,20 @@ var can = Volcanos("chat", { if (type == "inner" && (!msg.result || msg.result.length == 0)) {type = "table"} var output = Volcanos(type, {_type: "local", action: action, msg: msg, feature: feature, + Import: function(event, value, key) {var cb = output.onimport[key]; + typeof cb == "function" && cb(event, output, value, key, target); + }, Option: function(key, value) { can.page.Select(can, can.option, "input[name="+key+"],select[name="+key+"]", function(item) { value != undefined && (item.value = value), value = item.value }) return value }, - Import: function(event, value, key) {var cb = output.onimport[key]; - typeof cb == "function" && cb(event, output, value, key, target); + Action: function(key, value) { + can.page.Select(can, can.action, "input[name="+key+"],select."+key+",select[name="+key+"]", function(item) { + value != undefined && (item.value = value), value = item.value + }) + return value }, Status: function(event, value, key) {var cb = output.onstatus[key]; typeof cb == "function"? cb(event, output, value, key, can.page.Select(can, status, "div."+key)[0]): false && output.run(event, ["status", key, value], function(msg) { @@ -274,7 +280,7 @@ var can = Volcanos("chat", { }, true) }, Export: function(event, value, key, index) {var cb = output.onexport[key]; - typeof cb == "function"? cb(event, output, value, key, target): can.Report(event, value, key, index) + return typeof cb == "function"? cb(event, output, value, key, target): can.Report(event, value, key, index) }, run: function(event, cmd, cb, silent) {var msg = can.Event(event); diff --git a/plugin/wiki/mind.js b/plugin/wiki/mind.js index 1da5c9df..4491cb27 100644 --- a/plugin/wiki/mind.js +++ b/plugin/wiki/mind.js @@ -5,8 +5,9 @@ Volcanos("onimport", {help: "导入数据", list: [], table.onclick = function(event) {switch (event.target.tagName) { case "TD": can.onimport.which(event, table, msg.append, function(index, key) { - can.Option("name", event.target.innerHTML.trim()) - can.run(event, [event.target.innerHTML.trim()], function(msg) {}) + var name = event.target.innerHTML.trim() + can.Option("name", name) + can.run(event, [name]) }) break case "TH": @@ -17,12 +18,19 @@ Volcanos("onimport", {help: "导入数据", list: [], return typeof cb == "function" && cb(msg), table; } - var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()]}]).code; - can.page.Select(can, output, "svg", function(item) {can.svg = item, item.Value = function(key) {return item[key].baseVal.value}}); - can.page.Select(can, output, "svg *", function(item, index) { - can.onaction.init(event, can, msg, index, item); - }) - can.point = [] + var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()||can.Export(event, null, "file")]}]).code; + can.page.Select(can, output, "svg", function(svg) {can.group = can.svg = svg + can.onaction.init(event, can, msg, "init", svg); + can.onaction.list[1] = ["group", "svg", "add"] + can.page.Select(can, svg, "*", function(item, index) { + can.onaction.init(event, can, msg, index, item); + switch (item.tagName) { + case "g": + can.onaction.list[1].push(item.Value("class")) + break + } + }) + }), can.point = []; return typeof cb == "function" && cb(msg), code; }, which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")} @@ -34,9 +42,66 @@ Volcanos("onimport", {help: "导入数据", list: [], }, }) Volcanos("onfigure", {help: "图形绘制", list: [], + move: { + draw: function(event, can, point) { + if (point.length == 1) { + if (event.type != "click") {return} + // 记录图形 + can.current = {target: event.target} + } else if (point.length == 2) { + if (event.type == "click") {return can.point = [], delete(can.current)} + } + + var target = can.current.target + var figure = can.onfigure[can.current.target.tagName]; + var move = figure.data.move || {x: "x", y: "y"} + if (point.length == 1) { + // 记录起点 + can.current.x = parseInt(target.Value(move.x)) + can.current.y = parseInt(target.Value(move.y)) + } else { + // 移动图形 + target.Value(move.x, can.current.x+point[1].x-point[0].x) + target.Value(move.y, can.current.y+point[1].y-point[0].y) + } + }, + }, + resize: { + draw: function(event, can, point) { + if (point.length == 1) { + if (event.type != "click") {return} + // 记录图形 + can.current = {target: event.target} + } else if (point.length == 2) { + if (event.type == "click") {return can.point = [], delete(can.current)} + } + + var target = can.current.target + var figure = can.onfigure[can.current.target.tagName]; + var move = figure.data.move || {x: "x", y: "y"} + if (point.length == 1) { + // 记录起点 + can.core.List(figure.data.resize, function(item) { + can.current[item] = parseInt(target.Value(item)) + }) + } else { + // 绽放图形 + figure.resize(event, can, point, can.current, target) + } + }, + }, + text: { + data: {move: {x: "x", y: "y"}}, // hi + show: function(event, can, value, target) {} + }, rect: { - data: {rx: 4, ry: 4}, // - draw: function(event, can, point, color) { + data: { + resize: ["width", "height", "rx"], + move: {x: "x", y: "y"}, copy: ["width", "height", "rx", "ry"], + rx: 4, ry: 4, + }, // + draw: function(event, can, point) { + if (point.length == 1) {return} var p0 = point[0], p1 = point[1]; var data = { "x": p0.x > p1.x? p1.x: p0.x, @@ -46,33 +111,34 @@ Volcanos("onfigure", {help: "图形绘制", list: [], } can.core.Item(can.onfigure.rect.data, function(key, value) { data[key] = value - }), data.fill = color + }) can.Status(event, data, "width"); event.type == "click" && point.length == 2 && (can.point = []) return data; }, + resize: function(event, can, point, current, target) { + target.Value("width", current.width + point[1].x - point[0].x) + target.Value("height", current.height + point[1].y - point[0].y) + }, text: function(event, can, data, target) { data.x = target.x.baseVal.value+target.width.baseVal.value/2 data.y = target.y.baseVal.value+target.height.baseVal.value/2 return data - }, - copy: function(event, can) { - }, show: function(event, can, value, target) { - return value.tagName + return value.parentNode.Value("class") + " " + value.tagName + ": (" + value.x.baseVal.value + "," + value.y.baseVal.value+ ")" + " + (" + value.width.baseVal.value + "," + value.height.baseVal.value+ ")" }, }, circle: { - data: {}, // - draw: function(event, can, point, color) { + data: {move: {x: "cx", y: "cy"}, copy: ["r"]}, // + draw: function(event, can, point) { + if (point.length == 1) {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)), - "fill": color, } event.type == "click" && point.length == 2 && (can.point = []) return data; @@ -83,19 +149,18 @@ Volcanos("onfigure", {help: "图形绘制", list: [], return data }, show: function(event, can, value, target) { - return value.tagName + return value.parentNode.Value("class") + " " + value.tagName + ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")" + " > (" + parseInt(value.r.baseVal.value) + ")" }, }, ellipse: { data: {}, // - draw: function(event, can, point, color) { + draw: function(event, can, point) { 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), - "fill": color, } event.type == "click" && point.length == 2 && (can.point = []) return data; @@ -113,12 +178,11 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, line: { data: {}, // - draw: function(event, can, point, color) { + draw: function(event, can, point) { var p0 = point[0], p1 = point[1]; var data = { "x1": p0.x, "y1": p0.y, "x2": p1.x, "y2": p1.y, - "stroke": color, } event.type == "click" && point.length == 2 && (can.point = []) return data; @@ -136,7 +200,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, path: { data: {}, // - draw: function(event, can, point, color) { + draw: function(event, can, point) { var data = { d: can.core.List(point, function(p, i) { switch (i) { @@ -164,7 +228,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, polyline: { data: {}, // - draw: function(event, can, point, color) {if (point.length < 2) {return} + draw: function(event, can, point) {if (point.length < 2) {return} var data = { points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ") } @@ -181,7 +245,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, polygon: { data: {}, // - draw: function(event, can, point, color) {if (point.length < 2) {return} + draw: function(event, can, point) {if (point.length < 2) {return} var data = { points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ") } @@ -198,19 +262,43 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, }) Volcanos("onaction", {help: "组件菜单", list: ["保存", - ["color", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"], - ["shape", "rect", "circle", "ellipse", "path", "line", "polyline", "polygon"], + ["group", "svg", "add"], + ["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"], + ["shape", "move", "resize", "rect", "circle", "ellipse", "path", "line", "polyline", "polygon"], ], "保存": function(event, can, msg, cmd, target) { - can.run(event, ["action", cmd, can.Option("name"), - '', - can.svg.innerHTML, - "", - ], function() { + can.run(event, ["action", cmd, can.Option("name"), can.Export(event, can.svg, "file")], function() { can.user.toast("保存成功") }, true) }, - color: function(event, can, value, cmd, target) {can.color = value}, + group: function(event, can, value, cmd, target) { + switch (value) { + case "svg": return can.group = can.svg; + case "add": + can.user.prompt("add group", function(name) { + can.svg.append(can.group = document.createElementNS('http://www.w3.org/2000/svg', 'g')) + can.group.Value("class", name) + can.core.List(["stroke-width", "stroke", "fill"], function(name) { + can.group.Value(name, can.Action(name)) + }) + can.page.Select(can, can.action, "select.group", function(item) { + can.page.Append(can, item, [{type: "option", value: name, inner: name}]); + item.value = name + }) + }) + break + default: + can.page.Select(can, can.svg, "g."+value, function(item) { + can.group = item + }) + } + return can.group + }, + "stroke-width": function(event, can, value, cmd, target) {can.group.Value(cmd, value)}, + stroke: function(event, can, value, cmd, target) {can.group.Value(cmd, value)}, + fill: function(event, can, value, cmd, target) {can.group.Value(cmd, value)}, shape: function(event, can, value, cmd, target) {can.shape = value}, resize: function(event, can, value, cmd, item) {var target = can.target.firstChild; @@ -224,26 +312,24 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", }), can), event.stopPropagation(), event.preventDefault()} item.onclick = function() { } + item.Value = function(key, value) {return value && item.setAttribute(key, value), item.getAttribute(key||"class")||""} return item; }, push: function(event, can, msg, cmd, target) { var rect = document.createElementNS("http://www.w3.org/2000/svg", cmd); - can.core.Item(msg, function(key, value) {rect.setAttribute(key, value)}); target.appendChild(can.onaction.init(event, can, msg, cmd, rect)); + can.core.Item(msg, function(key, value) {rect.Value(key, value)}); return rect; }, draw: function(event, can, point) { can.Status(event, null, "width"); can.Status(event, null, "begin"); - if (point.length == 1) {return} can.Status(event, point[0], "begin") - var color = can.page.Select(can, can.action, "select.color", function(item) {return item.value})[0] - var shape = can.page.Select(can, can.action, "select.shape", function(item) {return item.value})[0] var figure = can.onfigure[shape]; - var data = figure && figure.draw(event, can, point, color); - return data && can.onaction.push(event, can, data, shape, can.svg) + var data = figure && figure.draw(event, can, point); + return data && can.onaction.push(event, can, data, shape, can.group||can.svg) }, onclick: function(event, can) {if (!can.svg) {return} @@ -256,7 +342,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", onmouseover: function(event, can) { can.Status(event, event.target, "which") }, - onmousemove: function(event, can) {if (!can.svg) {return} + onmousemove: function(event, can) {if (!can.svg || can.point.length == 0) {return} var p = can.svg.getBoundingClientRect() var point = {x: event.clientX-p.x, y: event.clientY-p.y} @@ -277,14 +363,12 @@ Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", console.log("choice", cmd) }, }) -Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"], +Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"], "编辑": function(event, can, msg, index, key, cmd, target) { can.user.prompt("文字", function(text) { if (target.tagName == "text") {return target.innerHTML = text} - var color = can.page.Select(can, can.action, "select.color", function(item) {return item.value})[0] - - var data = {"text-anchor": "middle", "dominant-baseline": "middle", "stroke": color} + var data = {"text-anchor": "middle", "dominant-baseline": "middle"} var figure = can.onfigure[target.tagName] figure.text(event, can, data, target) @@ -296,8 +380,12 @@ Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"], }, target.Text && target.Text.innerText || "") }, "复制": function(event, can, msg, index, key, cmd, target) { - var figure = can.onfigure[target.tagName] - figure.copy(event, can, target) + var figure = can.onfigure[target.tagName].data + var data = {} + data[figure.move.x] = parseInt(target.Value(figure.move.x))+20; + data[figure.move.y] = parseInt(target.Value(figure.move.y))+20; + can.core.List(figure.copy, function(item) {data[item] = target.Value(item)}); + return data && can.onaction.push(event, can, data, target.tagName, can.group||can.svg) }, "删除": function(event, can, msg, index, key, cmd, target) { can.page.Remove(can, target) @@ -311,5 +399,11 @@ Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "w target.innerHTML = figure? figure.show(event, can, value, target): value.tagName; }, }) -Volcanos("onexport", {help: "导出数据", list: []}) +Volcanos("onexport", {help: "导出数据", list: [], + file: function(event, can, svg, cmd, target) { + return ['', svg?svg.innerHTML:"", ""]).join("") + }, +})