x/volcanos
1
0
Fork 1
mirror of https://shylinux.com/x/volcanos synced 2025-04-26 01:04:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

opt trend.js

Browse Source
This commit is contained in:
shylinux 2020-02-26 16:42:21 +08:00
parent 36abc32595
commit 9f5a704f2d
6 changed files with 237 additions and 196 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frame.js
View File

@ -299,9 +299,11 @@ var can = Volcanos("chat", {
}), value }), value
}, },
Status: function(event, value, key) {var cb = output.onstatus[key]; 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) { typeof cb == "function" && cb(event, output, value, key, can.page.Select(can, status, "span."+key, function(item) {
output.Export(event, msg, key) value? can.page.ClassList.del(can, item.previousSibling, "hidden"):
}, true) can.page.ClassList.add(can, item.previousSibling, "hidden")
return item
})[0]||{})
}, },
Export: function(event, value, key, index) {var cb = output.onexport[key]; 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(event, value, key, index)

4
lib/page.js
View File

@ -295,9 +295,9 @@ Volcanos("page", {help: "网页模块",
}]}: line]} }]}: line]}
})) }))
}), }),
AppendStatus: shy("添加控件", function(can, status, list, cb) { AppendStatus: shy("添加控件", function(can, status, list, meta) {meta = meta || {}
can.page.Append(can, status, can.core.List(list, function(line) { can.page.Append(can, status, can.core.List(list, function(line) {
return {view: [line]} return {view: "item " + line, list: [{text: [line+": ", "span", meta[line]? "": "hidden"]}, {text: [meta[line]||"", "span", line]}]}
})) }))
}), }),

175
plugin/story/trend.js
View File

@ -1,65 +1,81 @@
Volcanos("onimport", {help: "导入数据", list: [], Volcanos("onimport", {help: "导入数据", list: [],
init: function(can, meta, cb, target, action, option) {target.innerHTML = "" init: function(can, meta, cb, target, action, option) {target.innerHTML = ""
if (can.msg.Option("_display") == "table") { if (can.msg.Option("_display") == "table") {
// 文件目录
can.page.AppendTable(can, target, can.msg, can.msg.append, function(event, value, key, index, tr, td) { can.page.AppendTable(can, target, can.msg, can.msg.append, function(event, value, key, index, tr, td) {
can.Export(event, value, key) can.Export(event, value, key)
}) })
return return
} }
can.data = can.msg.Table() can.ui = can.page.Append(can, target, [{view: "action"}, {view: "output"}, {view: "status"}, {view: "total"}, {
can.ui = can.page.Append(can, target, [{view: "action"}, {view: "output"}, {view: "total"}, {view: "status"}]) view: "display", style: {position: "absolute", "white-space": "pre", color: "yellow"}, onclick: function(event) {
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 = can.page.AppendTable(can, target, can.msg, can.msg.append)
can.ui.table.style.clear = "both" 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.sub = can.Output(can, {}, "/plugin/wiki/draw", can.Event({}), function() {
can.onaction["编辑"]({}, can)
can.onaction["表格"]({}, can) can.onaction["表格"]({}, can)
can.onaction["编辑"]({}, can)
can.onaction["股价图"]({}, can) can.onaction["股价图"]({}, can)
}, can.ui.output, can.ui.action, option, can.ui.status) }, can.ui.output, can.ui.action, option, can.ui.status)
}, },
}) })
Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价图", "趋势", "比例", ["width", "200", "400", "600", "800", "1000"], ["height", "200", "400", "600"], "表格"],
Volcanos("onaction", {help: "组件菜单", list: ["股价图", "趋势", "比例", "表格", "编辑"], "编辑": function(event, can, value, cmd, target) {
"表格": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data; can.page.ClassList.neg(can, can.ui.action, "hidden")
can.page.ClassList.neg(can, can.ui.table, "hidden") can.page.ClassList.neg(can, can.ui.status, "hidden")
},
"清空": function(event, can, value, cmd, target) {
can.sub.svg.innerHTML = ""
}, },
"股价图": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data; "股价图": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
if (!can.list) { if (!can.list) {
var add = 0, del = 0, count = 0, max = 0 var count = 0, add = 0, del = 0, max = 0
can.total = 0, can.list = can.core.List(data, function(value, index) { can.max = 0, can.rest = 0, can.list = can.core.List(data, function(value, index) {
var line = {}; var line = {};
line.note = value[can.msg.append[4]] line.note = value[can.msg.append[4]]
line.date = value[can.msg.append[0]] line.date = value[can.msg.append[0]]
line.add = parseInt(value[can.msg.append[1]]) line.add = parseInt(value[can.msg.append[1]])
line.del = parseInt(value[can.msg.append[2]]) line.del = parseInt(value[can.msg.append[2]])
line.begin = can.total line.begin = can.rest
line.max = can.total + line.add line.max = can.rest + line.add
line.min = can.total - line.del line.min = can.rest - line.del
line.close = can.total = can.total + line.add - line.del line.close = can.rest = can.rest + line.add - line.del
count++
add += line.add add += line.add
del += line.del del += line.del
if (line.max - line.min > max) { if (line.max - line.min > max) {
max = line.max - line.min max = line.max - line.min
} }
count++ if (line.max > can.max) {
can.max = line.max
}
return line return line
}) })
var begin = new Date(data[0].date) var begin = new Date(data[0].date)
var end = new Date(data[data.length-1].date) var end = new Date(data[data.length-1].date)
var avg = parseInt((add + del) / (end - begin) * 1000 * 3600 * 24) var avg = parseInt((add + del) / (end - begin) * 1000 * 3600 * 24)
can.ui.total.innerHTML = can.base.Duration(end-begin) + " count: " + count + " add: " + add + " del: " + del can.page.AppendStatus(can, can.ui.total, ["count", "avg", "max", "add", "del", "rest"], {
+ " max: " + max + " avg: " + avg + " rest: " + can.total count: count,
avg: avg,
max: max,
del: del,
rest: can.rest,
})
} }
var step = 20
var view = 200
var space = 10 var space = 10
var max = 600 var view = parseInt(can.Action("height"))
var max = parseInt(can.Action("width"))
if (can.list.length * space > max) { var step = parseInt(max / can.list.length)||2
step = parseInt(max / can.list.length)||2
}
var width = can.list.length * step + space * 2 var width = can.list.length * step + space * 2
sub.svg.Val("width", width) sub.svg.Val("width", width)
@ -67,72 +83,117 @@ Volcanos("onaction", {help: "组件菜单", list: ["股价图", "趋势", "比
var height = view + space * 2 var height = view + space * 2
sub.svg.Val("height", height) sub.svg.Val("height", height)
var display = can.page.Append(can, can.target, [{view: ["display"], style: {position: "absolute", "white-space": "pre"}, onclick: function() {
can.page.ClassList.add(can, display, "hidden")
}}]).first
can.core.List(can.list, function(line, index) { can.core.List(can.list, function(line, index) {
sub.onimport.draw({}, sub, { sub.onimport.draw({}, sub, {
shape: "line", point: [ shape: "line", point: [
{x: space/2+step*index+step/4, y: space/2+view-line.min/can.total*view}, {x: space/2+step*index+step/4, y: space/2+view-line.min/can.max*view},
{x: space/2+step*index+step/4, y: space/2+view-line.max/can.total*view}, {x: space/2+step*index+step/4, y: space/2+view-line.max/can.max*view},
], style: { ], style: line.begin < line.close? {
"stroke-width": 1, "stroke": "white",
}: {
"stroke-width": 1, "stroke": "black",
}, },
}) })
var one = line.begin < line.close? sub.onimport.draw({}, sub, { var one = line.begin < line.close? sub.onimport.draw({}, sub, {
shape: "rect", point: [ shape: "rect", point: [
{x: space/2+step*index, y: space/2+view-line.begin/can.total*view}, {x: space/2+step*index, y: space/2+view-line.begin/can.max*view},
{x: space/2+step*index+step/2, y: space/2+view-line.close/can.total*view}, {x: space/2+step*index+step/2, y: space/2+view-line.close/can.max*view},
], style: { ], style: {
"rx": 0, "ry": 0, "rx": 0, "ry": 0,
"stroke-width": 1, "stroke-width": 1, "stroke": "white", "fill": "white",
"fill": "white",
}, },
}): sub.onimport.draw({}, sub, { }): sub.onimport.draw({}, sub, {
shape: "rect", point: [ shape: "rect", point: [
{x: space/2+step*index, y: space/2+view-line.close/can.total*view}, {x: space/2+step*index, y: space/2+view-line.close/can.max*view},
{x: space/2+step*index+step/2, y: space/2+view-line.begin/can.total*view}, {x: space/2+step*index+step/2, y: space/2+view-line.begin/can.max*view},
], style: { ], style: {
"rx": 0, "ry": 0, "rx": 0, "ry": 0,
"stroke-width": 1, "stroke-width": 1, "stroke": "black", "fill": "black",
"fill": "black",
}, },
}) })
one.onmouseover = function(event) { one.onmouseover = function(event) {
can.page.ClassList.del(can, display, "hidden") can.page.ClassList.del(can, can.ui.display, "hidden")
display.style.left = event.clientX+space/2+"px" can.ui.display.style.left = event.clientX+space/2+"px"
display.style.top = event.clientY+space/2+"px" can.ui.display.style.top = event.clientY+space/2+"px"
display.innerHTML =
"date: "+line.date+"\n" var msg = can.Event(event);
+ "note: "+line.note+"\n" msg.Push(line, ["date", "note", "begin", "add", "del", "close"], "detail")
+ "begin: "+line.begin+"\n" can.ui.display.innerHTML = ""
+ "add: "+line.add+"\n" can.page.AppendTable(can, can.ui.display, msg, msg.append)
+ "del: "+line.del+"\n"
+ "close: "+line.close+"\n"
} }
}) })
}, },
"趋势": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data; "趋势": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
var width = data.length * 20 + 10 var space = 10
var view = parseInt(can.Action("height"))
var max = parseInt(can.Action("width"))
var step = parseInt(max / can.list.length)||2
var width = can.list.length * step + space * 2
sub.svg.Val("width", width) sub.svg.Val("width", width)
var height = can.msg.append.length * 100 + 10 var height = 0
sub.svg.Val("height", height) var max = {};
can.core.List(can.msg.append, function(key, which) {
height += view + space * 2
max[key] = 0;
can.core.List(data, function(value, index) {
if ((parseInt(value[key])||0) > max[key]) {
max[key] = parseInt(value[key])||0
}
})
})
sub.svg.Val("height", height+space*2)
can.core.List(can.msg.append, function(key, which) { can.core.List(can.msg.append, function(key, which) {
can.core.List(data, function(value, index) { var y = (space*2+view)*(which+1)
sub.onimport.draw({}, sub, { sub.onimport.draw({}, sub, {
shape: "text", point: [
{x: width/2, y: y+space},
],
style: {
"font-size": 20,
"stroke-width": 0,
"fill": "red",
inner: key,
},
})
can.core.List(data, function(value, index) {
var one = sub.onimport.draw({}, sub, {
shape: "rect", shape: "rect",
point: [{x: 10+20*index, y: 100*(which+1)}, {x: 20*index+20, y: 100*(which+1)-parseInt(value[key])}], point: [
{x: space+step*index, y: y},
{x: space+step*index+step/4, y: y-parseInt(value[key])/(max[key]||1)*view}
],
style: {
"rx": 0, "ry": 0,
"stroke-width": 1, "stroke": "white", "fill": "white",
},
}) })
one.onmouseover = function(event) {
can.page.ClassList.del(can, can.ui.display, "hidden")
can.ui.display.style.left = event.clientX+space/2+"px"
can.ui.display.style.top = event.clientY+space/2+"px"
var msg = can.Event(event);
msg.Push(value, can.core.Item(value, function(key) {
return msg[key] = [], key
}), "detail")
can.ui.display.innerHTML = ""
can.page.AppendTable(can, can.ui.display, msg, msg.append)
}
}) })
}) })
}, },
"编辑": function(event, can, value, cmd, target) { "表格": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
can.page.ClassList.neg(can, can.ui.action, "hidden") can.page.ClassList.neg(can, can.ui.table, "hidden")
can.page.ClassList.neg(can, can.ui.status, "hidden")
}, },
}) })
Volcanos("onchoice", {help: "组件交互", list: []})
Volcanos("ondetail", {help: "组件详情", list: []})
Volcanos("onexport", {help: "导出数据", list: []}) Volcanos("onexport", {help: "导出数据", list: []})

217
plugin/wiki/draw.js
View File

@ -3,45 +3,55 @@ Volcanos("onimport", {help: "导入数据", list: [],
_start: function(can) { _start: function(can) {
var def = { var def = {
"font-size": "24", "font-size": "24",
"fill": "purple",
"stroke": "yellow",
"stroke-width": 2, "stroke-width": 2,
"stroke": "yellow",
"fill": "purple",
"grid": "10", "grid": "10",
} }
// 默认参数
can.core.Item(def, function(key, value) { can.core.Item(def, function(key, value) {
can.svg && can.svg.Value(key, can.Action(key, can.svg.Value(key)||value)) can.svg.Value(key, can.Action(key, can.svg.Value(key)||value))
}) })
can.Action("mode", "select") can.Action("mode", "select")
}, },
init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; init: function(can, msg, cb, output, action, option) {output.innerHTML = "";
can.page.AppendTable(can, output, msg, msg.append, function(event, value, key, index, tr, td) { // 文件目录
msg.Option("_display") == "table" && can.page.AppendTable(can, output, msg, msg.append, function(event, value, key, index, tr, td) {
can.Export(event, value, key) can.Export(event, value, key)
}); });
// 用户操作
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.Append(can, output, [{view: ["code", "div", msg.Result()||can.Export(event, null, "file")]}]).code;
can.page.Select(can, output, "svg", function(svg) { can.page.Select(can, output, "svg", function(svg) {
can.group = can.svg = svg; // 画布
can.onaction.init(event, can, msg, "init", svg); can.onaction.init(event, can, msg, "init", svg);
can.group = can.svg = svg;
var list = can.core.List(can.onaction.list, function(item, index) {if (item[0] == "group") { var list = can.core.List(can.onaction.list, function(item, index) {if (item[0] == "group") {
// 清空分组
return can.onaction.list[index] = ["group", "svg"] return can.onaction.list[index] = ["group", "svg"]
}})[0] }})[0]
// 分组
can.page.Select(can, svg, "*", function(item, index) { can.page.Select(can, svg, "*", function(item, index) {
// 元素
can.onaction.init(event, can, msg, index, item); can.onaction.init(event, can, msg, index, item);
item.tagName == "g" && list.push(item.Value("class"));
})
})
switch (item.tagName) {
case "g":
list.push(item.Value("class"));
break
}
})
})
can.point = [];
can.keys = [];
return typeof cb == "function" && cb(msg); return typeof cb == "function" && cb(msg);
}, },
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})
return can.onaction.push(event, can, data, value.shape, can.group||can.svg)
},
keydown: function(event, can, value, cmd, target) { keydown: function(event, can, value, cmd, target) {
can.keys.push(value) can.keys.push(value)
@ -107,17 +117,12 @@ Volcanos("onimport", {help: "导入数据", list: [],
call(prefix.concat(list.list)) call(prefix.concat(list.list))
return can.keys = [], can.Status(event, can.keys, "keys") return can.keys = [], can.Status(event, can.keys, "keys")
}, },
draw: function(event, can, value) {
var figure = can.onfigure[value.shape]
var data = figure.draw(event, can, value.point, value.style)
return can.onaction.push(event, can, data, value.shape, can.group||can.svg)
},
}, ["/plugin/wiki/draw.css"]) }, ["/plugin/wiki/draw.css"])
Volcanos("onfigure", {help: "图形绘制", list: [], Volcanos("onfigure", {help: "图形绘制", list: [],
svg: { svg: {
data: { data: {
size: {x: "x", y: "y"}, size: {},
}, }, // <svg font-size="24" stroke="yellow" stroke-width="2" fill="purple" grid="10"/>
show: function(event, can, value, target) { show: function(event, can, value, target) {
return can.svg.Val("width") +","+ can.svg.Val("width") return can.svg.Val("width") +","+ can.svg.Val("width")
}, },
@ -127,8 +132,8 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
rx: 4, ry: 4, rx: 4, ry: 4,
size: {x: "x", y: "y"}, size: {x: "x", y: "y"},
copy: ["width", "height", "rx", "ry"], copy: ["width", "height", "rx", "ry"],
}, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> }, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30" rx="4" ry="4"/>
draw: function(event, can, point, style) {if (point.length < 2) {return} draw: function(event, can, point) {if (point.length < 2) {return}
var p0 = point[0], p1 = point[1]; var p0 = point[0], p1 = point[1];
var data = { var data = {
"x": p0.x > p1.x? p1.x: p0.x, "x": p0.x > p1.x? p1.x: p0.x,
@ -138,28 +143,16 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
"rx": this.data.rx, "rx": this.data.rx,
"ry": this.data.ry, "ry": this.data.ry,
} }
can.core.Item(style, function(key, value) {data[key] = value})
can.Status(event, data, "width");
return event.type == "click" && point.length == 2 && (can.point = []), data; return event.type == "click" && point.length == 2 && (can.point = []), data;
}, },
space: function(event, can) {
can.user.prompt("width", function(width) {
can.user.prompt("height", function(height) {
can.temp && can.page.Remove(can, can.temp) && delete(can.temp)
can.onaction.push(event, can, can.onfigure.rect.draw(event, can, [can.point[0], [can.point[0]+width, can.point[1]+height]]), "rect", can.group||can.svg)
can.point = []
})
})
},
text: function(event, can, data, target) { text: function(event, can, data, target) {
data.x = target.x.baseVal.value+target.width.baseVal.value/2 data.x = target.Val("x")+target.Val("width")/2
data.y = target.y.baseVal.value+target.height.baseVal.value/2 data.y = target.Val("y")+target.Val("height")/2
return data return data
}, },
show: function(event, can, value, target) { show: function(event, can, value, target) {
return value.parentNode.Value("class") + " " + value.tagName return ": (" + value.Val("x") + "," + value.Val("y") + ")"
+ ": (" + value.x.baseVal.value + "," + value.y.baseVal.value+ ")" + " + (" + value.Val("width") + "," + value.Val("height") + ")"
+ " + (" + value.width.baseVal.value + "," + value.height.baseVal.value+ ")"
}, },
}, },
circle: { circle: {
@ -167,75 +160,69 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
size: {x: "cx", y: "cy", width: "r", height: "r"}, size: {x: "cx", y: "cy", width: "r", height: "r"},
copy: ["r"], copy: ["r"],
}, // <circle cx="25" cy="75" r="20"/> }, // <circle cx="25" cy="75" r="20"/>
draw: function(event, can, point) { draw: function(event, can, point) {if (point.length < 2) {return}
if (point.length == 1) {return}
var p0 = point[0], p1 = point[1]; var p0 = point[0], p1 = point[1];
var data = { var data = {
"cx": p0.x, "cy": p0.y, "cx": p0.x, "cy": p0.y,
"r": Math.sqrt(Math.pow(p0.x-p1.x, 2)+Math.pow(p0.y-p1.y, 2)), "r": Math.sqrt(Math.pow(p0.x-p1.x, 2)+Math.pow(p0.y-p1.y, 2)),
} }
event.type == "click" && point.length == 2 && (can.point = []) return event.type == "click" && point.length == 2 && (can.point = []), data;
return data;
}, },
text: function(event, can, data, target) { text: function(event, can, data, target) {
data.x = target.cx.baseVal.value data.x = target.Val("cx")
data.y = target.cy.baseVal.value data.y = target.Val("cy")
return data return data
}, },
show: function(event, can, value, target) { show: function(event, can, value, target) {
return value.parentNode.Value("class") + " " + value.tagName return ": (" + value.Val("cx") + "," + value.Val("cy") + ")"
+ ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")" + " > (" + parseInt(value.Val("r")) + ")"
+ " > (" + parseInt(value.r.baseVal.value) + ")"
}, },
}, },
ellipse: { ellipse: {
data: { data: {
size: {x: "cx", y: "cy", width: "rx", height: "ry"}, size: {x: "cx", y: "cy", width: "rx", height: "ry"},
copy: ["rx", "ry"],
}, // <ellipse cx="75" cy="75" rx="20" ry="5"/> }, // <ellipse cx="75" cy="75" rx="20" ry="5"/>
draw: function(event, can, point) { draw: function(event, can, point) {if (point.length < 2) {return}
var p0 = point[0], p1 = point[1]; var p0 = point[0], p1 = point[1];
var data = { var data = {
"cx": p0.x, "cy": p0.y, "cx": p0.x, "cy": p0.y,
"rx": Math.abs(p0.x - p1.x), "ry": Math.abs(p0.y - p1.y), "rx": Math.abs(p0.x - p1.x), "ry": Math.abs(p0.y - p1.y),
} }
event.type == "click" && point.length == 2 && (can.point = []) return event.type == "click" && point.length == 2 && (can.point = []), data;
return data;
}, },
text: function(event, can, data, target) { text: function(event, can, data, target) {
data.x = target.cx.baseVal.value data.x = target.Val("cx")
data.y = target.cy.baseVal.value data.y = target.Val("cy")
return data return data
}, },
show: function(event, can, value, target) { show: function(event, can, value, target) {
return value.tagName return ": (" + value.Val("cx") + "," + value.Val("cy") + ")"
+ ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")" + " > (" + value.Val("rx") + value.Val("ry") + ")"
+ " > (" + parseInt(value.rx.baseVal.value) + parseInt(value.ry.baseVal.value) + ")"
}, },
}, },
text: { text: {
data: { data: {
size: {x: "x", y: "y"}, size: {x: "x", y: "y"},
}, // <text x="60" y="10">hi<text> }, // <text x="60" y="10">hi<text>
draw: function(event, can, point) {if (point.length < 1) {return} draw: function(event, can, point, style) {if (point.length < 1) {return}
var p0 = point[0]; var p0 = point[0];
var data = { var data = {
"x": p0.x, "y": p0.y, "x": p0.x, "y": p0.y,
"inner": can.user.prompt("text"), "inner": style.inner||can.user.prompt("text"),
} }
return can.point = [], data; return can.point = [], data;
}, },
show: function(event, can, value, target) { show: function(event, can, value, target) {
return value.parentNode.Value("class") + " " + value.tagName return ": (" + target.Val("x") + "," + target.Val("y")+ ")"
+ ": (" + target.Val("x") + "," + target.Val("y")+ ")"
} }
}, },
line: { line: {
data: { data: {
size: {x: "x1", y: "y1", x2: "x2", y: "y2"}, size: {x: "x1", y: "y1"},
copy: ["x1", "y1", "x2", "y2"], copy: ["x1", "y1", "x2", "y2"],
}, // <line x1="10" x2="50" y1="110" y2="150"/> }, // <line x1="10" y1="50" x2="110" y2="150"/>
draw: function(event, can, point) { draw: function(event, can, point) {if (point.length < 2) {return}
if (point.length < 2) {return}
var p0 = point[0], p1 = point[1]; var p0 = point[0], p1 = point[1];
var data = { var data = {
"x1": p0.x, "y1": p0.y, "x1": p0.x, "y1": p0.y,
@ -244,14 +231,13 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
return event.type == "click" && point.length == 2 && (can.point = []), data; return event.type == "click" && point.length == 2 && (can.point = []), data;
}, },
text: function(event, can, data, target) { text: function(event, can, data, target) {
data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2 data.x = (target.Val("x1") + target.Val("x2")) / 2
data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2 data.y = (target.Val("y1") + target.Val("y2")) / 2
return data return data
}, },
show: function(event, can, value, target) { show: function(event, can, value, target) {
return value.tagName return ": (" + value.Val("x1") + "," + value.Val("y1") + ")"
+ ": (" + value.x1.baseVal.value + "," + value.y1.baseVal.value+ ")" + " - (" + value.Val("x2") + "," + value.Val("y2") + ")"
+ " - (" + value.x2.baseVal.value + "," + value.y2.baseVal.value+ ")"
}, },
}, },
@ -323,7 +309,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
["stroke-width", 1, 2, 3, 4, 5], ["stroke-width", 1, 2, 3, 4, 5],
{text: "c"}, ["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"], {text: "c"}, ["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
{text: "f"}, ["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black", "#0000"], {text: "f"}, ["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black", "#0000"],
{text: "a"}, ["mode", "draw", "move", "resize", "select", "scale", "delete"], {text: "a"}, ["mode", "scale", "draw", "move", "resize", "select", "delete"],
{text: "s"}, ["shape", "rect", "circle", "ellipse", "text", "line", "path", "polyline", "polygon"], {text: "s"}, ["shape", "rect", "circle", "ellipse", "text", "line", "path", "polyline", "polygon"],
["grid", 1, 2, 3, 4, 5, 10, 20], ["grid", 1, 2, 3, 4, 5, 10, 20],
], ],
@ -333,10 +319,8 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
}, true) }, true)
}, },
"清空": function(event, can, msg, cmd, target) {can.svg.innerHTML = ""}, "清空": function(event, can, msg, cmd, target) {can.svg.innerHTML = ""},
"删除": function(event, can, msg, cmd, target) { "删除": function(event, can, msg, cmd, target) {if (can.group == can.svg) {return}
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, can.group)
can.page.Select(can, can.action, "option[value="+can.group.Value("class")+"]", function(item) {
can.page.Remove(can, item) can.page.Remove(can, item)
}) })
can.Action("group", "svg") can.Action("group", "svg")
@ -370,11 +354,12 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
}) })
return can.group return can.group
}, },
"font-size": function(event, can, value, cmd, target) {can.group.Value(value, cmd)}, "font-size": function(event, can, value, cmd, target) {can.Action(value, can.group.Value(value, cmd))},
"stroke-width": function(event, can, value, cmd, target) {can.group.Value(value, cmd)}, "stroke-width": function(event, can, value, cmd, target) {can.Action(value, can.group.Value(value, cmd))},
stroke: function(event, can, value, cmd, target) {can.Action(value, can.group.Value(value, cmd))}, stroke: function(event, can, value, cmd, target) {can.Action(value, can.group.Value(value, cmd))},
fill: function(event, can, value, cmd, target) {can.Action(value, can.group.Value(value, cmd))}, fill: function(event, can, value, cmd, target) {can.Action(value, can.group.Value(value, cmd))},
shape: function(event, can, value, cmd, target) {cmd && can.Action(value, cmd)}, shape: function(event, can, value, cmd, target) {cmd && can.Action(value, cmd)},
mode: function(event, can, value, cmd, target) {cmd && can.Action(value, cmd)},
grid: function(event, can, value, cmd, target) {cmd && can.Action(value, cmd)}, grid: function(event, can, value, cmd, target) {cmd && can.Action(value, cmd)},
init: function(event, can, msg, cmd, item) { init: function(event, can, msg, cmd, item) {
@ -387,8 +372,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
item.Val = function(key, value) { 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));
} }
item.Group = function() { item.Group = function() {var target = item
var target = item
while (target) { while (target) {
if (["svg", "g"].indexOf(target.tagName) > -1) { if (["svg", "g"].indexOf(target.tagName) > -1) {
return target; return target;
@ -399,21 +383,15 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
} }
return item; return item;
}, },
push: function(event, can, msg, cmd, target) {cmd = {select: "rect"}[cmd] || cmd push: function(event, can, msg, cmd, target) {
var rect = document.createElementNS("http://www.w3.org/2000/svg", cmd); var rect = document.createElementNS("http://www.w3.org/2000/svg", cmd);
target.appendChild(can.onaction.init(event, can, msg, cmd, rect)); target.appendChild(can.onaction.init(event, can, msg, cmd, rect));
can.core.Item(msg, function(key, value) { can.core.Item(msg, function(key, value) {
if (key == "inner") { if (key == "inner") {return rect.innerHTML = value}
rect.innerHTML = value
return
}
rect.Value(key, value) rect.Value(key, value)
}); });
return rect; return rect;
}, },
mode: function(event, can, value, cmd) {
cmd && can.Action("mode", cmd)
},
_draw: function(event, can, point) { _draw: function(event, can, point) {
can.Status(event, null, "width"); can.Status(event, null, "width");
can.Status(event, null, "begin"); can.Status(event, null, "begin");
@ -426,12 +404,11 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
}, },
_move: function(event, can, point) { _move: function(event, can, point) {
if (point.length == 1) {if (event.type != "click") {return} if (point.length == 1) {if (event.type != "click") {return}
// 记录图形
can.onaction._select(event, can, point) can.onaction._select(event, can, point)
can.point = point, can.current = {target: can.group} can.point = point, can.current = {target: can.group}
} else if (point.length == 2) { } else if (point.length == 2) {
if (event.type == "click") { if (event.type == "click") {
can.point = [], delete(can.current); return return can.point = [], delete(can.current)
} }
} }
@ -441,8 +418,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
target.style.cursor = "move" target.style.cursor = "move"
can.current.pos = 5, can.current.begin = can.page.Select(can, target, "*", function(item) { can.current.pos = 5, can.current.begin = can.page.Select(can, target, "*", function(item) {
if (item.tagName == "g") {return} if (item.tagName == "g") {return}
target.style.cursor = "move" return target.style.cursor = "move", {
return {
target: item, target: item,
x: item.Val("x"), x: item.Val("x"),
y: item.Val("y"), y: item.Val("y"),
@ -450,19 +426,19 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
height: item.Val("height"), height: item.Val("height"),
} }
}) })
} else { return
}
can.core.List(can.current.begin, function(item) { can.core.List(can.current.begin, function(item) {
can.page.Resizes(event, item.target, item, point[0], point[1], can.current.pos) can.page.Resizes(event, item.target, item, point[0], point[1], can.current.pos)
}) })
}
}, },
_resize: function(event, can, point) { _resize: function(event, can, point) {
if (point.length == 1) {if (event.type != "click") {return} if (point.length == 1) {if (event.type != "click") {return}
// 记录图形
can.current = {target: event.target} can.current = {target: event.target}
} else if (point.length == 2) { } else if (point.length == 2) {
if (event.type == "click") { if (event.type == "click") {
can.point = [], delete(can.current); return return can.point = [], delete(can.current)
} }
} }
@ -476,14 +452,12 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
width: target.Val("width"), width: target.Val("width"),
height: target.Val("height"), height: target.Val("height"),
} }
} else {
can.page.Resizes(event, target, can.current.begin, point[0], point[1], can.current.pos)
}
},
_scale: function(event, can, point) {
if (point.length < 2) {
return return
} }
can.page.Resizes(event, target, can.current.begin, point[0], point[1], can.current.pos)
},
_scale: function(event, can, point) {if (point.length < 2) {return}
if (point.length == 2) { if (point.length == 2) {
can.last && can.page.Remove(can, can.last) can.last && can.page.Remove(can, can.last)
var figure = can.onfigure["line"]; var figure = can.onfigure["line"];
@ -508,11 +482,9 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
can.group.Value("transform", "scale("+(point[2].x-point[0].x)/(point[1].x-point[0].x)+","+(point[2].y-point[0].y)/(point[1].y-point[0].y)+")") can.group.Value("transform", "scale("+(point[2].x-point[0].x)/(point[1].x-point[0].x)+","+(point[2].y-point[0].y)/(point[1].y-point[0].y)+")")
}, },
_delete: function(event, can, point) { _delete: function(event, can, point) {
event.target != can.svg && can.page.Remove(can, event.target) can.point = [], event.target != can.svg && can.page.Remove(can, event.target)
can.point = []
}, },
_select: function(event, can, point) { _select: function(event, can, point) {var target = event.target
var target = event.target
while (target) { while (target) {
if (target.tagName == "g") { if (target.tagName == "g") {
can.Action("group", target.Value("class")) can.Action("group", target.Value("class"))
@ -529,11 +501,6 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
can.point = [] can.point = []
}, },
space: function(event, can) {
if (!can.current) {return}
var figure = can.onfigure[can.current.tagName]
figure && figure.space(event, can)
},
oncontextmenu: function(event, can) {var target = event.target oncontextmenu: function(event, can) {var target = event.target
var figure = can.onfigure[event.target.tagName]||{data: {}} var figure = can.onfigure[event.target.tagName]||{data: {}}
@ -546,8 +513,8 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
var point = {x: event.clientX-p.x, y: event.clientY-p.y}; var point = {x: event.clientX-p.x, y: event.clientY-p.y};
point.x = point.x - point.x % parseInt(can.Action("grid")); point.x = point.x - point.x % parseInt(can.Action("grid"));
point.y = point.y - point.y % parseInt(can.Action("grid")); point.y = point.y - point.y % parseInt(can.Action("grid"));
can.point = (can.point || []).concat([point]); can.point = (can.point || []).concat([point]);
can.temp && can.page.Remove(can, can.temp) && delete(can.temp); can.temp && can.page.Remove(can, can.temp) && delete(can.temp);
can.onaction["_"+can.Action("mode")](event, can, can.point); can.onaction["_"+can.Action("mode")](event, can, can.point);
}, },
@ -559,19 +526,18 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
can.current || can.page.Prepos(event, event.target) can.current || can.page.Prepos(event, event.target)
} }
if (!can.svg || can.point.length == 0) {return}
var p = can.svg.getBoundingClientRect() var p = can.svg.getBoundingClientRect()
var point = {x: event.clientX-p.x, y: event.clientY-p.y} var point = {x: event.clientX-p.x, y: event.clientY-p.y}
point.x = point.x - point.x % parseInt(can.Action("grid")); point.x = point.x - point.x % parseInt(can.Action("grid"));
point.y = point.y - point.y % parseInt(can.Action("grid")); 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.page.Remove(can, can.temp) && delete(can.temp)
can.temp = can.onaction["_"+can.Action("mode")](event, can, can.point.concat(point)) can.temp = can.onaction["_"+can.Action("mode")](event, can, can.point.concat(point))
can.Status(event, point, "point")
}, },
}) })
Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空"]}) Volcanos("onchoice", {help: "组件交互", list: ["保存", "添加", "删除"]})
Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"], Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"],
"编辑": function(event, can, value, cmd, target) { "编辑": function(event, can, value, cmd, target) {
can.user.prompt("文字", function(text) { can.user.prompt("文字", function(text) {
@ -591,25 +557,28 @@ Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"]
"复制": function(event, can, value, cmd, target) { "复制": function(event, can, value, cmd, target) {
var figure = can.onfigure[target.tagName].data var figure = can.onfigure[target.tagName].data
var data = {} var data = {}
data[figure.move.x] = parseInt(target.Value(figure.move.x))+20; data[figure.size.x||"x"] = parseInt(target.Value(figure.size.x||"x"))+20;
data[figure.move.y] = parseInt(target.Value(figure.move.y))+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)}); 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) 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, key, cmd, target) {can.page.Remove(can, target)},
}) })
Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which", "keys"], Volcanos("onstatus", {help: "组件状态", list: ["which", "point", "begin", "width", "keys"],
"begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""}, "which": function(event, can, value, cmd, target) {
"width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""}, var figure = can.onfigure[value.tagName];
"point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y}, target.innerHTML = (value.Group && value.Group().Value("class") || "") + " " + value.tagName + " " + (
"which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName]; figure? figure.show(event, can, value, value): "")
target.innerHTML = figure? figure.show(event, can, value, value): value.tagName;
}, },
"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}, "keys": function(event, can, value, cmd, target) {target.innerHTML = value},
}) })
Volcanos("onexport", {help: "导出数据", list: [], Volcanos("onexport", {help: "导出数据", list: [],
file: function(event, can, svg, cmd, target) { file: function(event, can, svg, cmd, target) {
return ['<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg" text-anchor="middle" dominant-baseline="middle"'].concat(svg? can.core.List(["width", "height", "stroke", "fill", "stroke-width"], function(item) { return ['<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg" text-anchor="middle" dominant-baseline="middle"'].concat(
svg? can.core.List(["width", "height", "font-size", "stroke-width", "stroke", "fill"], function(item) {
return svg.Value(item)? ' ' + item + '="' + svg.Value(item) + '"': "" return svg.Value(item)? ' ' + item + '="' + svg.Value(item) + '"': ""
}): []).concat(['>', svg? svg.innerHTML: "", "</svg>"]).join("") }): []).concat(['>', svg? svg.innerHTML: "", "</svg>"]).join("")
}, },

11
proto.js
View File

@ -134,12 +134,12 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
}).length > 0 || msg.option.push(key) }).length > 0 || msg.option.push(key)
msg[key] = can.core.List(arguments).slice(1) msg[key] = can.core.List(arguments).slice(1)
}, },
Push: function(key, value) {msg.append = msg.append || [] Push: function(key, value, detail) {msg.append = msg.append || []
if (typeof key == "object") { if (typeof key == "object") {
value? can.core.List(value, function(item) { value = value || can.core.Item(key)
can.core.List(value, function(item) {
detail? msg.Push("key", item).Push("value", key[item]||""):
msg.Push(item, key[item]||"") msg.Push(item, key[item]||"")
}): can.core.Item(key, function(key, value) {
msg.Push(key, value||"")
}) })
return return
} }
@ -151,7 +151,8 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
} }
if (i >= msg.append.length) {msg.append.push(key)} if (i >= msg.append.length) {msg.append.push(key)}
msg[key] = msg[key] || [] msg[key] = msg[key] || []
msg[key].push(""+value) msg[key].push(""+value+"")
return msg
}, },
Echo: shy("输出响应", function(res) {msg.result = msg.result || [] Echo: shy("输出响应", function(res) {msg.result = msg.result || []
msg._hand = true msg._hand = true

10
style.css
View File

@ -94,6 +94,14 @@ fieldset div.output>div.item:hover {
background-color:red; background-color:red;
border:ridge 2px yellow; border:ridge 2px yellow;
} }
fieldset div.status {
clear:both;
}
fieldset div.status>div.item {
margin:0 2px;
float:left;
}
fieldset.dialog { fieldset.dialog {
padding:10px; padding:10px;
@ -156,7 +164,7 @@ fieldset div.code {
color:white; color:white;
font-size:14px; font-size:14px;
font-family:monospace; font-family:monospace;
background-color:#272822; background-color:#343a34f2;
white-space:pre; white-space:pre;
padding:10px; padding:10px;
overflow:auto; overflow:auto;