From 0ac3f1906215e45b08e351d47a8420ad37e1d633 Mon Sep 17 00:00:00 2001 From: shylinux Date: Sun, 1 Mar 2020 04:26:47 +0800 Subject: [PATCH] opt wiki.draw --- frame.js | 8 +- lib/base.js | 32 +++-- lib/page.js | 8 +- page/black.css | 2 +- pane/Action.js | 2 +- plugin/input.js | 2 +- plugin/story/trend.js | 18 +-- plugin/wiki/draw.js | 290 ++++++++++++++++++++++++++++++++------ plugin/wiki/draw/heart.js | 71 ++++++++++ proto.js | 8 +- 10 files changed, 362 insertions(+), 79 deletions(-) create mode 100644 plugin/wiki/draw/heart.js diff --git a/frame.js b/frame.js index 49448c08..53205c73 100644 --- a/frame.js +++ b/frame.js @@ -141,9 +141,9 @@ var can = Volcanos("chat", { var history = [] - var args = typeof meta.args == "string"? JSON.parse(meta.args): meta.args || []; - var feature = JSON.parse(meta.feature||'{}'); - var exports = JSON.parse(meta.exports||'""')||feature.exports||[]; + var args = can.base.Obj(meta.args, []); + var feature = can.base.Obj(meta.feature); + var exports = can.base.Obj(meta.exports, feature.exports||[]); var plugin = Volcanos(name, {_type: "local", _local: {}, target: field, option: option, action: action, output: output, Plugin: can.Plugin, Inputs: can.Inputs, Output: can.Output, @@ -306,7 +306,7 @@ var can = Volcanos("chat", { })[0]||{}) }, Export: function(event, value, key, index) {var cb = output.onexport[key]; - return 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 && can.Report(event, value, key, index) }, run: function(event, cmd, cb, silent) {var msg = can.Event(event); diff --git a/lib/base.js b/lib/base.js index e4a5231f..efb98a3d 100644 --- a/lib/base.js +++ b/lib/base.js @@ -2,27 +2,15 @@ Volcanos("base", {help: "基础模块", isNone: function(c) {return c === undefined || c === null}, isSpace: function(c) {return c == " " || c == "Enter"}, + Int: function(value) {return parseInt(value)||0}, + Obj: function(value, def) {return typeof value == "string"? JSON.parse(value): value || def || {}}, + Args: function(obj) {var res = []; for (var k in obj) { res.push(encodeURIComponent(k)+"="+encodeURIComponent(obj[k])) } return res.join("&") }, - Int: function(value) {return parseInt(value)||0}, - Duration: function(n) {var res = "", h = 0; - h = parseInt(n/3600000/24), h > 0 && (res += h+"d"), n = n % (3600000*24); - h = parseInt(n/3600000), h > 0 && (res += h+"h"), n = n % 3600000; - h = parseInt(n/60000), h > 0 && (res += h+"m"), n = n % 60000; - h = parseInt(n/1000), h > 0 && (res += h), n = n % 1000; - return res + (n > 0? "."+parseInt(n/10): "") + "s"; - }, - Format: shy("数据格式化", function(obj) {return JSON.stringify(obj)}), - Number: shy("数字格式化", function(d, n) {var result = []; - while (d>0) {result.push(d % 10); d = parseInt(d / 10); n--} - while (n > 0) {result.push("0"); n--} - result.reverse(); - return result.join(""); - }), Size: function(size) {size = parseInt(size) if (size > 1000000000) { return parseInt(size / 1000000000) + "." + parseInt(size / 10000000 % 100) + "G" @@ -45,5 +33,19 @@ Volcanos("base", {help: "基础模块", fmt = fmt.replace("%S", this.Number(now.getSeconds(), 2)) return fmt }), + Duration: function(n) {var res = "", h = 0; + h = parseInt(n/3600000/24), h > 0 && (res += h+"d"), n = n % (3600000*24); + h = parseInt(n/3600000), h > 0 && (res += h+"h"), n = n % 3600000; + h = parseInt(n/60000), h > 0 && (res += h+"m"), n = n % 60000; + h = parseInt(n/1000), h > 0 && (res += h), n = n % 1000; + return res + (n > 0? "."+parseInt(n/10): "") + "s"; + }, + Number: shy("数字格式化", function(d, n) {var result = []; + while (d>0) {result.push(d % 10); d = parseInt(d / 10); n--} + while (n > 0) {result.push("0"); n--} + result.reverse(); + return result.join(""); + }), + Format: shy("数据格式化", function(obj) {return JSON.stringify(obj)}), }) diff --git a/lib/page.js b/lib/page.js index e7bb1300..30000e66 100644 --- a/lib/page.js +++ b/lib/page.js @@ -45,7 +45,6 @@ Volcanos("page", {help: "网页模块", // 基本结构: type name data list var type = item.type || "div", data = item.data || {}; var name = item.name || data.name; - name && (data.name = data.name || item.name); // 数据调整 can.core.Item(item, function(key, value) { @@ -143,8 +142,10 @@ Volcanos("page", {help: "网页模块", } + // 创建节点 name = name || data.className || type; + name && (data.name = data.name || item.name); var node = can.page.Create(can, type, data); value.last = node, value.first || (value.first = node), name && (value[name] = value[data.className||""] = value[type] = node); item.list && can.page.Append(can, node, item.list, value); @@ -207,7 +208,7 @@ Volcanos("page", {help: "网页模块", if (!msg.append || msg.append.length == 0) {return} var table = can.page.Append(can, target, "table"); - var tr = can.page.Append(can, table, "tr"); + var tr = can.page.Append(can, table, "tr", {dataset: {index: -1}}); can.core.List(list, function(key, index) {can.page.Append(can, tr, "th", key).onclick = function(event) { var dataset = event.target.dataset; dataset["sort_asc"] = (dataset["sort_asc"] == "1") ? 0: 1; @@ -277,6 +278,9 @@ Volcanos("page", {help: "网页模块", }) }, + AppendBoard: shy("添加控件", function(can, target, inner) { + return can.page.Append(can, target, [{view: ["code", "div", inner]}]).code; + }), AppendFigure: shy("添加控件", function(event, can, cmd, name) {if (can.figure) {return} return can.figure = can.page.Append(can, document.body, [{view: ["input "+cmd+" "+name, "fieldset"], style: { position: "absolute", left: event.clientX+"px", top: event.clientY+10+"px", diff --git a/page/black.css b/page/black.css index 373be3b7..b7bd995d 100644 --- a/page/black.css +++ b/page/black.css @@ -65,7 +65,7 @@ fieldset table td { max-width:1200px; font-family:monospace; padding: 0 6px; - /* white-space: pre; */ + white-space: pre; } fieldset table td:hover { background-color:red; diff --git a/pane/Action.js b/pane/Action.js index 1b75a02c..d9643d0e 100644 --- a/pane/Action.js +++ b/pane/Action.js @@ -61,7 +61,7 @@ Volcanos("onaction", {help: "组件交互", list: [ ["action", "正常", "竖排", "编排", "定位", "定形"], {input: "pod"}, {input: "you"}, {input: "hot"}, {input: "top"}, ], - layout: function(event, can, value, cmd, field) {can.Export(event, value, cmd)}, + layout: function(event, can, value, cmd, field) {can.Export(event, cmd, value)}, "清屏": function(event, can, msg, cmd, field) { can.page.Select(can, can.output, "fieldset.item>div.output", function(item) { diff --git a/plugin/input.js b/plugin/input.js index 36575a41..53ac6349 100644 --- a/plugin/input.js +++ b/plugin/input.js @@ -24,7 +24,7 @@ Volcanos("onimport", {help: "导入数据", list: [], } var target = can.Dream(option, "input", input)[input.name]; - !target.placeholder && (target.placeholder = item.name || ""); + item.type == "text" && !target.placeholder && (target.placeholder = item.name || ""); item.type != "button" && !target.title && (target.title = item.placeholder || item.name || ""); item.type == "textarea" && can.page.Append(can, option, [{type: "br"}]) item.type == "select" && (target.value = value || item.value || item.values[item.index||0]) diff --git a/plugin/story/trend.js b/plugin/story/trend.js index 387969b9..6a30be8c 100644 --- a/plugin/story/trend.js +++ b/plugin/story/trend.js @@ -13,13 +13,11 @@ Volcanos("onimport", {help: "导入数据", list: [], can.page.ClassList.add(can, can.ui.display, "hidden") }, }]) - can.ui.table = can.page.AppendTable(can, target, can.msg, can.msg.append) - can.ui.table.style.clear = "both" can.data = can.msg.Table() can.page.ClassList.add(can, can.ui.total, "status") can.sub = can.Output(can, {}, "/plugin/wiki/draw", can.Event({}), function() { - can.onaction["表格"]({}, can) + can.Action("width", 600) can.onaction["编辑"]({}, can) can.onaction["股价图"]({}, can) }, can.ui.output, can.ui.action, option, can.ui.status) @@ -63,12 +61,9 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价 var begin = new Date(data[0].date) var end = new Date(data[data.length-1].date) var avg = parseInt((add + del) / (end - begin) * 1000 * 3600 * 24) - can.page.AppendStatus(can, can.ui.total, ["count", "avg", "max", "add", "del", "rest"], { - count: count, - avg: avg, - max: max, - del: del, - rest: can.rest, + can.page.AppendStatus(can, can.ui.total, ["from", "days", "count", "avg", "max", "add", "del", "rest"], { + from: can.base.Time(begin).split(" ")[0], days: can.base.Duration(end-begin), + count: count, avg: avg, max: max, add: add, del: del, rest: can.rest, }) } @@ -191,6 +186,11 @@ Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价 }) }, "表格": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data; + if (!can.ui.table) { + can.ui.table = can.page.AppendTable(can, can.target, can.msg, can.msg.append) + can.ui.table.style.clear = "both" + return + } can.page.ClassList.neg(can, can.ui.table, "hidden") }, }) diff --git a/plugin/wiki/draw.js b/plugin/wiki/draw.js index 6bdaa226..53a16fb1 100644 --- a/plugin/wiki/draw.js +++ b/plugin/wiki/draw.js @@ -1,5 +1,4 @@ Volcanos("onimport", {help: "导入数据", list: [], - _begin: function(can) {}, _start: function(can) { var def = { "font-size": "24", @@ -13,20 +12,25 @@ Volcanos("onimport", {help: "导入数据", list: [], can.svg.Value(key, can.Action(key, can.svg.Value(key)||value)) }) can.Action("mode", "select") + can.Action("mode", "draw") + can.Action("shape", "path") }, init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; - // 文件目录 - msg.Option("_display") == "table" && can.page.AppendTable(can, output, msg, msg.append, function(event, value, key, index, tr, td) { - can.Export(event, value, key) - }); + if (msg.Option("_display") == "table") { + // 文件目录 + can.page.AppendTable(can, output, msg, msg.append, function(event, value, key, index, tr, td) { + can.Export(event, value, key) + }) + return typeof cb == "function" && cb(msg); + } - // 用户操作 + // 交互数据 can.point = [], can.keys = [] can.current = null, can.temp = null can.group = null, can.svg = null // 加载绘图 - var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()||can.Export(event, null, "file")]}]).code; + var code = can.page.AppendBoard(can, output, msg.Result()||can.Export(event, null, "file")) can.page.Select(can, output, "svg", function(svg) { // 画布 can.onaction.init(event, can, msg, "init", svg); @@ -52,8 +56,12 @@ Volcanos("onimport", {help: "导入数据", list: [], can.core.Item(value.style, function(key, value) {data[key] = value}) return can.onaction.push(event, can, data, value.shape, can.group||can.svg) }, - keydown: function(event, can, value, cmd, target) { - can.keys.push(value) + escape: function(event, can, value) { + can.point = can.point.slice(0, -1) + }, + keydown: function(event, can, value) { + if (["Shift", "Control", "Meta", "Alt"].indexOf(value) > -1 ) {return} + can.keys.push((event.ctrlKey? "C-": "") + (event.shiftKey? value.toUpperCase(): value)) var list = { a: {prefix: ["mode", "mode"], @@ -119,10 +127,16 @@ Volcanos("onimport", {help: "导入数据", list: [], }, }, ["/plugin/wiki/draw.css"]) Volcanos("onfigure", {help: "图形绘制", list: [], + _spawn: function(sup, can) {can.sup = sup}, + _swell: function(can, sub) { + can.sup && can.sup.action && sub.draw && can.page.Select(can, can.sup.action, "select.shape", function(shape) { + can.page.Append(can, shape, [{text: [sub._name, "option"]}]) + }) + }, svg: { data: { size: {}, - }, // + }, // show: function(event, can, value, target) { return can.svg.Val("width") +","+ can.svg.Val("width") }, @@ -204,12 +218,13 @@ Volcanos("onfigure", {help: "图形绘制", list: [], text: { data: { size: {x: "x", y: "y"}, + copy: ["inner"], }, // hi draw: function(event, can, point, style) {if (point.length < 1) {return} var p0 = point[0]; var data = { "x": p0.x, "y": p0.y, - "inner": style.inner||can.user.prompt("text"), + "inner": style&&style.inner||can.user.prompt("text"), } return can.point = [], data; }, @@ -219,8 +234,30 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, line: { data: { - size: {x: "x1", y: "y1"}, + size: {}, copy: ["x1", "y1", "x2", "y2"], + x: function(event, can, value, cmd, target) { + if (value != undefined) { + var offset = value - target.Val("xx", value) + target.Val("x1", target.Val("x1") + offset) + target.Val("x2", target.Val("x2") + offset) + } + return target.Val("xx") + }, + y: function(event, can, value, cmd, target) { + if (value != undefined) { + var offset = value - target.Val("yy", value) + target.Val("y1", target.Val("y1") + offset) + target.Val("y2", target.Val("y2") + offset) + } + return target.Val("yy") + }, + width: function(event, can, value, cmd, target) { + return value != undefined && target.Val("x2", target.Val("x1") + parseInt(value)), target.Val("x2") - target.Val("x1") + }, + height: function(event, can, value, cmd, target) { + return value != undefined && target.Val("y2", target.Val("y1") + parseInt(value)), target.Val("y2") - target.Val("y1") + }, }, // draw: function(event, can, point) {if (point.length < 2) {return} var p0 = point[0], p1 = point[1]; @@ -240,21 +277,128 @@ Volcanos("onfigure", {help: "图形绘制", list: [], + " - (" + value.Val("x2") + "," + value.Val("y2") + ")" }, }, - path: { - data: {}, // + data: { + size: {}, + x: function(event, can, value, cmd, target) { + var tt = JSON.parse(target.Value("tt")||'{"tx":0, "ty":0}') + if (value != undefined) { + tt.tx = value-target.Val("xx") + target.Value("tt", JSON.stringify(tt)) + target.Value("transform", "translate("+tt.tx+","+tt.ty+")") + } + return target.Val("xx")+tt.tx + }, + y: function(event, can, value, cmd, target) { + var tt = JSON.parse(target.Value("tt")||'{"tx":0, "ty":0}') + if (value != undefined) { + tt.ty = value-target.Val("yy") + target.Value("tt", JSON.stringify(tt)) + target.Value("transform", "translate("+tt.tx+","+tt.ty+")") + } + return target.Val("yy")+tt.ty + }, + copy: ["d", "cmd", "name", "meta", "tt", "xx", "yy", "fill"], + }, // draw: function(event, can, point) { + if (point.length == 1) { + can._temp = {} + } + if (point.length < 2) {return} + if (can.keys && can.keys.length > 0) { + switch (can._temp[point.length-1] = can.keys[0]) { + case "C": can._temp[point.length+1] = "," + case "Q": can._temp[point.length] = ","; break + default: + } + can.keys = can.keys.slice(1) + } + + var skip = 0; + var end = false; var data = { - d: can.core.List(point, function(p, i) { + d: can.core.List(point, function(p, i) {var k = p.k + if (i < skip) {return} switch (i) { - case 0: return "M " + p.x + " " + p.y; break - case 1: return "H " + p.x; break - case 2: return "V " + p.y; break - case 3: return "H " + p.x + " Z"; break + case 0: k = "M"; break + default: k = can._temp[i] || p.k || "L"; break + } + if (end) {return} + + switch (k) { + case "Z": return can.point = [], can._temp = {}, k + case "L": return k+" " + p.x + " " + p.y + case "M": return k+" " + p.x + " " + p.y + case "H": return k+" " + p.x + case "V": return k+" " + p.y + case "A": + switch (point.length - i) { + case 1: end = true; + return k+" " + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + " 0 0 0 " + p.x + " " + p.y + case 2: end = true; + var r = Math.sqrt(Math.pow(point[i+1].x - p.x, 2) + Math.pow(point[i+1].y - p.y, 2)) + return k+" " + r + " " + r + " 0 0 0 " + p.x + " " + p.y + case 3: + if (!p.done) { + var r = Math.sqrt(Math.pow(point[i+1].x - p.x, 2) + Math.pow(point[i+1].y - p.y, 2)) + var temp = point[i] + p = point[i] = point[i+1] + point[i+1] = temp + var temp = can.point[i] + p = can.point[i] = can.point[i+1] + can.point[i+1] = temp + p.x = r + p.y = r + p.done = true + p.arg = " 0 0 0 " + } + default: + skip = i + 2 + return k+" " + p.x + " " + p.y + " 0 0 0 " + point[i+1].x + " " + point[i+1].y + } + break + case "C": + switch (point.length - i) { + case 1: end = true; + return k+" " + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + "," + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + "," + p.x + " " + p.y + case 2: end = true; + return k+" " + point[i+1].x + " " + point[i+1].y + "," + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + "," + p.x + " " + p.y + case 3: + return k+" " + point[i+1].x + " " + point[i+1].y + "," + point[i+2].x + " " + point[i+2].y + "," + p.x + " " + p.y + case 4: + if (!p.done) { + var temp = point[i] + p = point[i] = point[i+1] + point[i+1] = temp + + var temp = point[i+1] + point[i+1] = point[i+2] + point[i+2] = temp + p.done = true + } + default: + return k+" " + p.x + " " + p.y + } + case "Q": + switch (point.length - i) { + case 1: end = true; + return k+" " + (point[i-1].x+p.x)/2 + " " + (point[i-1].y+p.y)/2 + "," + p.x + " " + p.y + case 2: end = true; + return k+" " + point[i+1].x + " " + point[i+1].y + "," + p.x + " " + p.y + case 3: + if (!p.done) { + var temp = point[i] + p = point[i] = point[i+1] + point[i+1] = temp + p.done = true + } + default: + return k+" " + p.x + " " + p.y + } + default: return k+" " + p.x + " " + p.y } }).join(" ") } - event.type == "click" && point.length == 4 && (can.point = []) return data; }, text: function(event, can, data, target) { @@ -264,10 +408,9 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, show: function(event, can, value, target) { return value.tagName - + ": (" + value.x1.baseVal.value + "," + value.y1.baseVal.value+ ")" - + " - (" + value.x2.baseVal.value + "," + value.y2.baseVal.value+ ")" }, }, + polyline: { data: {}, // draw: function(event, can, point) {if (point.length < 2) {return} @@ -302,14 +445,14 @@ Volcanos("onfigure", {help: "图形绘制", list: [], return value.tagName + ": (" + value.points.baseVal.value + ")" }, }, -}) +}, Config.libs.concat(["/plugin/wiki/draw/heart"])) Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", "添加", ["group", "svg"], ["font-size", 12, 16, 18, 24, 32], ["stroke-width", 1, 2, 3, 4, 5], {text: "c"}, ["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"], {text: "f"}, ["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black", "#0000"], - {text: "a"}, ["mode", "scale", "draw", "move", "resize", "select", "delete"], + {text: "a"}, ["mode", "run", "draw", "move", "resize", "select", "delete"], {text: "s"}, ["shape", "rect", "circle", "ellipse", "text", "line", "path", "polyline", "polygon"], ["grid", 1, 2, 3, 4, 5, 10, 20], ], @@ -318,7 +461,11 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", can.user.toast("保存成功") }, true) }, - "清空": function(event, can, msg, cmd, target) {can.svg.innerHTML = ""}, + "清空": function(event, can, msg, cmd, target) { + can.svg.innerHTML = "" + can.point = [] + can.keys = [] + }, "删除": function(event, can, msg, cmd, target) {if (can.group == can.svg) {return} can.page.Remove(can, can.group), can.page.Select(can, can.action, "option[value="+can.group.Value("class")+"]", function(item) { can.page.Remove(can, item) @@ -341,6 +488,9 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", }) }, + _get: function(can, item) { + return can.onfigure[item.getAttribute("name")||item.tagName]; + }, group: function(event, can, value, cmd, target) { if (cmd == "svg") { can.group = can.svg @@ -364,13 +514,18 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", init: function(event, can, msg, cmd, item) { item.Value = function(key, value) { - var figure = can.onfigure[item.tagName]; + var figure = can.onaction._get(can, item); key && (key = figure && figure.data && figure.data.size && figure.data.size[key] || key) - + if (figure && figure.data && typeof figure.data[key] == "function") { + return figure.data[key](event, can, value, key, item) + } + if (key == "inner") { + return value != undefined && (item.innerHTML = value), item.innerHTML + } return value && item.setAttribute(key, value), item.getAttribute(key||"class")||item[key]&&item[key].baseVal&&item[key].baseVal.value||item[key]&&item[key].baseVal||""; } item.Val = function(key, value) { - return parseInt(item.Value(key, value == undefined? value: parseInt(value)||0)); + return parseInt(item.Value(key, value == undefined? value: parseInt(value)||0))||0; } item.Group = function() {var target = item while (target) { @@ -392,6 +547,21 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", }); return rect; }, + _run: function(event, can, target) { + var figure = can.onaction._get(can, event.target); + var msg = can.Event(event); + figure && can.core.List(["x", "y", "cmd"].concat(figure.copy||[]), function(item) { + msg.Option(item, target.Value(item)) + }) + figure && figure.run? figure.run(event, can, figure, "run", event.target): (event.type == "click" && can.run(event, ["action", "执行", target.Value("cmd")], function(msg) { + msg.Table(function(value, index) { + index > 0 && can.core.Item(value, function(key, val) { + target.Value(key, val) + }) + }) + }, true)) + return + }, _draw: function(event, can, point) { can.Status(event, null, "width"); can.Status(event, null, "begin"); @@ -400,7 +570,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", 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); - return data && can.onaction.push(event, can, data, shape, can.group||can.svg) + return data && can.onaction.push(event, can, data, figure.data.name||shape, can.group||can.svg) }, _move: function(event, can, point) { if (point.length == 1) {if (event.type != "click") {return} @@ -413,7 +583,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", } var target = can.current.target - var figure = can.onfigure[target.tagName]; + var figure = can.onaction._get(can, target); if (point.length == 1) { target.style.cursor = "move" can.current.pos = 5, can.current.begin = can.page.Select(can, target, "*", function(item) { @@ -443,7 +613,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", } var target = can.current.target - var figure = can.onfigure[target.tagName]; + var figure = can.onaction._get(can, target); if (point.length == 1) { can.current.pos = can.page.Prepos(event, target) can.current.begin = { @@ -502,7 +672,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", }, oncontextmenu: function(event, can) {var target = event.target - var figure = can.onfigure[event.target.tagName]||{data: {}} + var figure = can.onaction._get(can, target); can.user.carte(event, shy("", can.ondetail, figure.data.detail || can.ondetail.list, function(event, key, meta) {var cb = meta[key]; typeof cb == "function" && cb(event, can, figure, key, target); @@ -516,7 +686,8 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", can.point = (can.point || []).concat([point]); can.temp && can.page.Remove(can, can.temp) && delete(can.temp); - can.onaction["_"+can.Action("mode")](event, can, can.point); + can.temp = can.onaction["_"+can.Action("mode")](event, can, can.point); + can.point.length == 0 && (can.temp = null) }, onmouseover: function(event, can) { can.Status(event, event.target, "which") @@ -532,19 +703,19 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除", point.y = point.y - point.y % parseInt(can.Action("grid")); can.Status(event, point, "point") - if (!can.svg || can.point.length == 0) {return} can.temp && can.page.Remove(can, can.temp) && delete(can.temp) can.temp = can.onaction["_"+can.Action("mode")](event, can, can.point.concat(point)) + can.point.length == 0 && (can.temp = null) }, }) Volcanos("onchoice", {help: "组件交互", list: ["保存", "添加", "删除"]}) -Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"], - "编辑": function(event, can, value, cmd, target) { +Volcanos("ondetail", {help: "组件详情", list: ["标签", "编辑", "复制", "运行", "变色", "删除"], + "标签": function(event, can, value, cmd, target) { can.user.prompt("文字", function(text) { if (target.tagName == "text") {return target.innerHTML = text} var data = {} - var figure = can.onfigure[target.tagName] + var figure = can.onaction._get(can, target); figure.text(event, can, data, target) var p = can.onaction.push(event, can, data, "text", target.Group()) @@ -554,23 +725,56 @@ Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"] target.Text = p }, target.Text && target.Text.innerText || "") }, + "编辑": function(event, can, value, cmd, target) { + var figure = can.onaction._get(can, target); + can.user.input(event, can, can.core.List(["x", "y", "cmd"].concat(figure.data.copy||[]), function(item) { + return {_input: "text", name: item, value: target.Value(item)} + }), function(event, cmd, meta, list) { + can.core.Item(meta, function(key, value) { + target.Value(key, value) + }) + }) + }, "复制": function(event, can, value, cmd, target) { - var figure = can.onfigure[target.tagName].data + var figure = can.onaction._get(can, target).data; var data = {} + can.core.List(figure.copy, function(item) {data[item] = target.Value(item)}); data[figure.size.x||"x"] = parseInt(target.Value(figure.size.x||"x"))+20; data[figure.size.y||"y"] = parseInt(target.Value(figure.size.y||"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, value, key, cmd, target) {can.page.Remove(can, target)}, + "变色": function(event, can, value, cmd, target) { + if (target._timer) { + target._timer.stop = true + delete(target._timer) + return + } + + var list = ["red", "green", "yellow", "blue"] + target._timer = can.Timer({value: 500, length: -1}, function() { + target.Value("fill", list[parseInt(Math.random()*list.length%list.length)]) + }) + }, + "运行": function(event, can, value, cmd, target) { + if (target._timer) { + target._timer.stop = true + delete(target._timer) + return + } + + target._timer = can.Timer({value: 500, length: -1}, function(event) { + can.onaction._run({type: "click", target: target}, can, target) + }) + }, + "删除": function(event, can, value, cmd, target) {can.page.Remove(can, target)}, }) -Volcanos("onstatus", {help: "组件状态", list: ["which", "point", "begin", "width", "keys"], +Volcanos("onstatus", {help: "组件状态", list: ["point", "which", "begin", "width", "keys"], + "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y}, "which": function(event, can, value, cmd, target) { - var figure = can.onfigure[value.tagName]; + var figure = can.onaction._get(can, target); target.innerHTML = (value.Group && value.Group().Value("class") || "") + " " + value.tagName + " " + ( figure? figure.show(event, can, value, value): "") }, - "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y}, "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""}, "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.Val("width")+","+value.Val("height"): ""}, "keys": function(event, can, value, cmd, target) {target.innerHTML = value}, diff --git a/plugin/wiki/draw/heart.js b/plugin/wiki/draw/heart.js new file mode 100644 index 00000000..c12d90c3 --- /dev/null +++ b/plugin/wiki/draw/heart.js @@ -0,0 +1,71 @@ +Volcanos("heart", {help: "心形", list: [], + data: {name: "path", + size: {}, + x: function(event, can, value, cmd, target) { + var tt = JSON.parse(target.Value("tt")||'{"tx":0, "ty":0}') + if (value != undefined) { + tt.tx = value-target.Val("xx") + target.Value("tt", JSON.stringify(tt)) + target.Value("transform", "translate("+tt.tx+","+tt.ty+")") + } + return target.Val("xx")+tt.tx + }, + y: function(event, can, value, cmd, target) { + var tt = JSON.parse(target.Value("tt")||'{"tx":0, "ty":0}') + if (value != undefined) { + tt.ty = value-target.Val("yy") + target.Value("tt", JSON.stringify(tt)) + target.Value("transform", "translate("+tt.tx+","+tt.ty+")") + } + return target.Val("yy")+tt.ty + }, + copy: ["d", "cmd", "name", "meta", "tt", "xx", "yy", "fill"], + }, // + draw: function(event, can, point) {if (point.length < 2) {return} + + var p0 = point[0], p1 = point[1], p2 = point[2]; + pl = {x: 2*p0.x - p1.x, y:2*p0.y-p1.y} + var r0 = Math.sqrt(Math.pow(p0.x - p1.x, 2), Math.pow(p0.y - p1.y, 2)) / 2 + var d = [ + "M", pl.x, pl.y, + "A", r0, r0, 0, 0, 0, p0.x, p0.y, + "A", r0, r0, 0, 0, 0, p1.x, p1.y, + ] + + if (point.length == 3) { + var r1 = Math.sqrt(Math.pow(p2.x - p1.x, 2), Math.pow(p2.y - p1.y, 2)) + d = d.concat([ + "A", r1, r1, 180, 0, 0, p2.x, p2.y, + "A", r1, r1, 180, 0, 0, pl.x, pl.y, + ]) + } + + var data = { + cmd: "pwd", + name: "heart", d: d.join(" "), + meta: JSON.stringify(point), + tt: JSON.stringify({tx: 0, ty: 0}), + xx: p0.x, yy:p1.y, + } + + // can._tmp && can.page.Remove(can, can._tmp) && delete(can._tmp) + // can._tmp = can.onaction.push(event, can, data, "path", can.group||can.svg) + // event.type == "click" && point.length == 3 && (can.point = [], can._tmp = null); + return event.type == "click" && point.length == 3 && (can.point = []), data; + }, + text: function(event, can, data, target) { + data.x = target.Val("cx") + data.y = target.Val("cy") + return data + }, + show: function(event, can, value, target) { + return ": (" + value.Val("cx") + "," + value.Val("cy") + ")" + + " > (" + parseInt(value.Val("r")) + ")" + }, + // run: function(event, can, value, cmd, target) { + // event.type == "click" && can.Run(event, ["action", "执行", target.Value("cmd")], function(msg) { + // can.user.toast(msg.Result()) + // }, true) + // }, +}) + diff --git a/proto.js b/proto.js index ea4564b6..287b75ba 100644 --- a/proto.js +++ b/proto.js @@ -26,6 +26,7 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块 // if (sub._name == can._name) {continue} // 加载索引 can[sub._name] = sub; + typeof can._swell == "function" && can._swell(can, sub) typeof sub._spawn == "function" && sub._spawn(can, sub) } return can @@ -38,6 +39,7 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块 // 加载缓存 can[sub._name] = sub; meta.cache[name].push(sub); + typeof can._swell == "function" && can._swell(can, sub) typeof sub._spawn == "function" && sub._spawn(can, sub) } meta.index = i; @@ -274,12 +276,12 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块 key? run(event, key, value, can.onaction[key]||can.onaction[value]): run(event, msg, value, can.onaction[value]); }) // 注册菜单 - can.target.oncontextmenu = function(event) {can.user.carte(event, shy("", can.onchoice, can.onchoice.list, function(event, key, meta) { + can.onchice && (can.target.oncontextmenu = function(event) {can.user.carte(event, shy("", can.onchoice, can.onchoice.list, function(event, key, meta) { run(event, msg, key, can.onchoice[key] || can.onaction[key]); - }), can), event.stopPropagation(), event.preventDefault()} + }), can), event.stopPropagation(), event.preventDefault()}) // 注册事件 - can.core.Item(can.onaction, function(key, cb) {key.indexOf("on") == 0 && (can.target[key] = function(event) {cb(event, can)})}); + can.core && can.core.Item(can.onaction, function(key, cb) {key.indexOf("on") == 0 && (can.target[key] = function(event) {cb(event, can)})}); } can.onimport && can.onimport._start && can.onimport._start(can) })