mirror of
https://shylinux.com/x/volcanos
synced 2025-04-25 16:58:06 +08:00
opt trend.js
This commit is contained in:
shylinux
parent
36abc32595
commit
9f5a704f2d
8
frame.js
8
frame.js
@ -299,9 +299,11 @@ var can = Volcanos("chat", {
|
||||
}), 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) {
|
||||
output.Export(event, msg, key)
|
||||
}, true)
|
||||
typeof cb == "function" && cb(event, output, value, key, can.page.Select(can, status, "span."+key, function(item) {
|
||||
value? can.page.ClassList.del(can, item.previousSibling, "hidden"):
|
||||
can.page.ClassList.add(can, item.previousSibling, "hidden")
|
||||
return item
|
||||
})[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)
|
||||
|
||||
@ -295,9 +295,9 @@ Volcanos("page", {help: "网页模块",
|
||||
}]}: 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) {
|
||||
return {view: [line]}
|
||||
return {view: "item " + line, list: [{text: [line+": ", "span", meta[line]? "": "hidden"]}, {text: [meta[line]||"", "span", line]}]}
|
||||
}))
|
||||
}),
|
||||
|
||||
|
||||
@ -1,65 +1,81 @@
|
||||
Volcanos("onimport", {help: "导入数据", list: [],
|
||||
init: function(can, meta, cb, target, action, option) {target.innerHTML = ""
|
||||
if (can.msg.Option("_display") == "table") {
|
||||
// 文件目录
|
||||
can.page.AppendTable(can, target, can.msg, can.msg.append, function(event, value, key, index, tr, td) {
|
||||
can.Export(event, value, key)
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
can.data = can.msg.Table()
|
||||
can.ui = can.page.Append(can, target, [{view: "action"}, {view: "output"}, {view: "total"}, {view: "status"}])
|
||||
can.ui = can.page.Append(can, target, [{view: "action"}, {view: "output"}, {view: "status"}, {view: "total"}, {
|
||||
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.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.onaction["表格"]({}, can)
|
||||
can.onaction["编辑"]({}, can)
|
||||
can.onaction["股价图"]({}, can)
|
||||
}, can.ui.output, can.ui.action, option, can.ui.status)
|
||||
},
|
||||
})
|
||||
|
||||
Volcanos("onaction", {help: "组件菜单", list: ["股价图", "趋势", "比例", "表格", "编辑"],
|
||||
"表格": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
|
||||
can.page.ClassList.neg(can, can.ui.table, "hidden")
|
||||
Volcanos("onaction", {help: "组件菜单", list: ["编辑", "清空", "股价图", "趋势", "比例", ["width", "200", "400", "600", "800", "1000"], ["height", "200", "400", "600"], "表格"],
|
||||
"编辑": function(event, can, value, cmd, target) {
|
||||
can.page.ClassList.neg(can, can.ui.action, "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;
|
||||
if (!can.list) {
|
||||
var add = 0, del = 0, count = 0, max = 0
|
||||
can.total = 0, can.list = can.core.List(data, function(value, index) {
|
||||
var count = 0, add = 0, del = 0, max = 0
|
||||
can.max = 0, can.rest = 0, can.list = can.core.List(data, function(value, index) {
|
||||
var line = {};
|
||||
line.note = value[can.msg.append[4]]
|
||||
line.date = value[can.msg.append[0]]
|
||||
line.add = parseInt(value[can.msg.append[1]])
|
||||
line.del = parseInt(value[can.msg.append[2]])
|
||||
|
||||
line.begin = can.total
|
||||
line.max = can.total + line.add
|
||||
line.min = can.total - line.del
|
||||
line.close = can.total = can.total + line.add - line.del
|
||||
line.begin = can.rest
|
||||
line.max = can.rest + line.add
|
||||
line.min = can.rest - line.del
|
||||
line.close = can.rest = can.rest + line.add - line.del
|
||||
|
||||
count++
|
||||
add += line.add
|
||||
del += line.del
|
||||
if (line.max - line.min > max) {
|
||||
max = line.max - line.min
|
||||
}
|
||||
count++
|
||||
if (line.max > can.max) {
|
||||
can.max = line.max
|
||||
}
|
||||
return line
|
||||
})
|
||||
|
||||
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.ui.total.innerHTML = can.base.Duration(end-begin) + " count: " + count + " add: " + add + " del: " + del
|
||||
+ " max: " + max + " avg: " + avg + " rest: " + can.total
|
||||
can.page.AppendStatus(can, can.ui.total, ["count", "avg", "max", "add", "del", "rest"], {
|
||||
count: count,
|
||||
avg: avg,
|
||||
max: max,
|
||||
del: del,
|
||||
rest: can.rest,
|
||||
})
|
||||
}
|
||||
|
||||
var step = 20
|
||||
var view = 200
|
||||
var space = 10
|
||||
var max = 600
|
||||
|
||||
if (can.list.length * space > max) {
|
||||
step = parseInt(max / can.list.length)||2
|
||||
}
|
||||
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)
|
||||
@ -67,72 +83,117 @@ Volcanos("onaction", {help: "组件菜单", list: ["股价图", "趋势", "比
|
||||
var height = view + space * 2
|
||||
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) {
|
||||
sub.onimport.draw({}, sub, {
|
||||
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.max/can.total*view},
|
||||
], style: {
|
||||
{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.max*view},
|
||||
], 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, {
|
||||
shape: "rect", point: [
|
||||
{x: space/2+step*index, y: space/2+view-line.begin/can.total*view},
|
||||
{x: space/2+step*index+step/2, y: space/2+view-line.close/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.max*view},
|
||||
], style: {
|
||||
"rx": 0, "ry": 0,
|
||||
"stroke-width": 1,
|
||||
"fill": "white",
|
||||
"stroke-width": 1, "stroke": "white", "fill": "white",
|
||||
},
|
||||
}): sub.onimport.draw({}, sub, {
|
||||
shape: "rect", point: [
|
||||
{x: space/2+step*index, y: space/2+view-line.close/can.total*view},
|
||||
{x: space/2+step*index+step/2, y: space/2+view-line.begin/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.max*view},
|
||||
], style: {
|
||||
"rx": 0, "ry": 0,
|
||||
"stroke-width": 1,
|
||||
"fill": "black",
|
||||
"stroke-width": 1, "stroke": "black", "fill": "black",
|
||||
},
|
||||
})
|
||||
|
||||
one.onmouseover = function(event) {
|
||||
can.page.ClassList.del(can, display, "hidden")
|
||||
display.style.left = event.clientX+space/2+"px"
|
||||
display.style.top = event.clientY+space/2+"px"
|
||||
display.innerHTML =
|
||||
"date: "+line.date+"\n"
|
||||
+ "note: "+line.note+"\n"
|
||||
+ "begin: "+line.begin+"\n"
|
||||
+ "add: "+line.add+"\n"
|
||||
+ "del: "+line.del+"\n"
|
||||
+ "close: "+line.close+"\n"
|
||||
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(line, ["date", "note", "begin", "add", "del", "close"], "detail")
|
||||
can.ui.display.innerHTML = ""
|
||||
can.page.AppendTable(can, can.ui.display, msg, msg.append)
|
||||
}
|
||||
})
|
||||
},
|
||||
"趋势": 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)
|
||||
|
||||
var height = can.msg.append.length * 100 + 10
|
||||
sub.svg.Val("height", height)
|
||||
var height = 0
|
||||
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(data, function(value, index) {
|
||||
var y = (space*2+view)*(which+1)
|
||||
sub.onimport.draw({}, sub, {
|
||||
shape: "rect",
|
||||
point: [{x: 10+20*index, y: 100*(which+1)}, {x: 20*index+20, y: 100*(which+1)-parseInt(value[key])}],
|
||||
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",
|
||||
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) {
|
||||
can.page.ClassList.neg(can, can.ui.action, "hidden")
|
||||
can.page.ClassList.neg(can, can.ui.status, "hidden")
|
||||
"表格": function(event, can, value, cmd, target) {var sub = can.sub, data = can.data;
|
||||
can.page.ClassList.neg(can, can.ui.table, "hidden")
|
||||
},
|
||||
})
|
||||
Volcanos("onchoice", {help: "组件交互", list: []})
|
||||
Volcanos("ondetail", {help: "组件详情", list: []})
|
||||
Volcanos("onexport", {help: "导出数据", list: []})
|
||||
|
||||
@ -3,45 +3,55 @@ Volcanos("onimport", {help: "导入数据", list: [],
|
||||
_start: function(can) {
|
||||
var def = {
|
||||
"font-size": "24",
|
||||
"fill": "purple",
|
||||
"stroke": "yellow",
|
||||
"stroke-width": 2,
|
||||
"stroke": "yellow",
|
||||
"fill": "purple",
|
||||
"grid": "10",
|
||||
}
|
||||
// 默认参数
|
||||
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")
|
||||
},
|
||||
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.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;
|
||||
can.page.Select(can, output, "svg", function(svg) {
|
||||
can.group = can.svg = 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") {
|
||||
// 清空分组
|
||||
return can.onaction.list[index] = ["group", "svg"]
|
||||
}})[0]
|
||||
|
||||
// 分组
|
||||
can.page.Select(can, svg, "*", function(item, index) {
|
||||
// 元素
|
||||
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);
|
||||
},
|
||||
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) {
|
||||
can.keys.push(value)
|
||||
|
||||
@ -107,17 +117,12 @@ Volcanos("onimport", {help: "导入数据", list: [],
|
||||
call(prefix.concat(list.list))
|
||||
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"])
|
||||
Volcanos("onfigure", {help: "图形绘制", list: [],
|
||||
svg: {
|
||||
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) {
|
||||
return can.svg.Val("width") +","+ can.svg.Val("width")
|
||||
},
|
||||
@ -127,8 +132,8 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
|
||||
rx: 4, ry: 4,
|
||||
size: {x: "x", y: "y"},
|
||||
copy: ["width", "height", "rx", "ry"],
|
||||
}, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
|
||||
draw: function(event, can, point, style) {if (point.length < 2) {return}
|
||||
}, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30" rx="4" ry="4"/>
|
||||
draw: function(event, can, point) {if (point.length < 2) {return}
|
||||
var p0 = point[0], p1 = point[1];
|
||||
var data = {
|
||||
"x": p0.x > p1.x? p1.x: p0.x,
|
||||
@ -138,28 +143,16 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
|
||||
"rx": this.data.rx,
|
||||
"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;
|
||||
},
|
||||
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) {
|
||||
data.x = target.x.baseVal.value+target.width.baseVal.value/2
|
||||
data.y = target.y.baseVal.value+target.height.baseVal.value/2
|
||||
data.x = target.Val("x")+target.Val("width")/2
|
||||
data.y = target.Val("y")+target.Val("height")/2
|
||||
return data
|
||||
},
|
||||
show: function(event, can, value, target) {
|
||||
return value.parentNode.Value("class") + " " + value.tagName
|
||||
+ ": (" + value.x.baseVal.value + "," + value.y.baseVal.value+ ")"
|
||||
+ " + (" + value.width.baseVal.value + "," + value.height.baseVal.value+ ")"
|
||||
return ": (" + value.Val("x") + "," + value.Val("y") + ")"
|
||||
+ " + (" + value.Val("width") + "," + value.Val("height") + ")"
|
||||
},
|
||||
},
|
||||
circle: {
|
||||
@ -167,75 +160,69 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
|
||||
size: {x: "cx", y: "cy", width: "r", height: "r"},
|
||||
copy: ["r"],
|
||||
}, // <circle cx="25" cy="75" r="20"/>
|
||||
draw: function(event, can, point) {
|
||||
if (point.length == 1) {return}
|
||||
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)),
|
||||
}
|
||||
event.type == "click" && point.length == 2 && (can.point = [])
|
||||
return data;
|
||||
return event.type == "click" && point.length == 2 && (can.point = []), data;
|
||||
},
|
||||
text: function(event, can, data, target) {
|
||||
data.x = target.cx.baseVal.value
|
||||
data.y = target.cy.baseVal.value
|
||||
data.x = target.Val("cx")
|
||||
data.y = target.Val("cy")
|
||||
return data
|
||||
},
|
||||
show: function(event, can, value, target) {
|
||||
return value.parentNode.Value("class") + " " + value.tagName
|
||||
+ ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")"
|
||||
+ " > (" + parseInt(value.r.baseVal.value) + ")"
|
||||
return ": (" + value.Val("cx") + "," + value.Val("cy") + ")"
|
||||
+ " > (" + parseInt(value.Val("r")) + ")"
|
||||
},
|
||||
},
|
||||
ellipse: {
|
||||
data: {
|
||||
size: {x: "cx", y: "cy", width: "rx", height: "ry"},
|
||||
copy: ["rx", "ry"],
|
||||
}, // <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 data = {
|
||||
"cx": p0.x, "cy": p0.y,
|
||||
"rx": Math.abs(p0.x - p1.x), "ry": Math.abs(p0.y - p1.y),
|
||||
}
|
||||
event.type == "click" && point.length == 2 && (can.point = [])
|
||||
return data;
|
||||
return event.type == "click" && point.length == 2 && (can.point = []), data;
|
||||
},
|
||||
text: function(event, can, data, target) {
|
||||
data.x = target.cx.baseVal.value
|
||||
data.y = target.cy.baseVal.value
|
||||
data.x = target.Val("cx")
|
||||
data.y = target.Val("cy")
|
||||
return data
|
||||
},
|
||||
show: function(event, can, value, target) {
|
||||
return value.tagName
|
||||
+ ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")"
|
||||
+ " > (" + parseInt(value.rx.baseVal.value) + parseInt(value.ry.baseVal.value) + ")"
|
||||
return ": (" + value.Val("cx") + "," + value.Val("cy") + ")"
|
||||
+ " > (" + value.Val("rx") + value.Val("ry") + ")"
|
||||
},
|
||||
},
|
||||
text: {
|
||||
data: {
|
||||
size: {x: "x", y: "y"},
|
||||
}, // <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 data = {
|
||||
"x": p0.x, "y": p0.y,
|
||||
"inner": can.user.prompt("text"),
|
||||
"inner": style.inner||can.user.prompt("text"),
|
||||
}
|
||||
return can.point = [], data;
|
||||
},
|
||||
show: function(event, can, value, target) {
|
||||
return value.parentNode.Value("class") + " " + value.tagName
|
||||
+ ": (" + target.Val("x") + "," + target.Val("y")+ ")"
|
||||
return ": (" + target.Val("x") + "," + target.Val("y")+ ")"
|
||||
}
|
||||
},
|
||||
line: {
|
||||
data: {
|
||||
size: {x: "x1", y: "y1", x2: "x2", y: "y2"},
|
||||
size: {x: "x1", y: "y1"},
|
||||
copy: ["x1", "y1", "x2", "y2"],
|
||||
}, // <line x1="10" x2="50" y1="110" y2="150"/>
|
||||
draw: function(event, can, point) {
|
||||
if (point.length < 2) {return}
|
||||
}, // <line x1="10" y1="50" x2="110" y2="150"/>
|
||||
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,
|
||||
@ -244,14 +231,13 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
|
||||
return event.type == "click" && point.length == 2 && (can.point = []), data;
|
||||
},
|
||||
text: function(event, can, data, target) {
|
||||
data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2
|
||||
data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2
|
||||
data.x = (target.Val("x1") + target.Val("x2")) / 2
|
||||
data.y = (target.Val("y1") + target.Val("y2")) / 2
|
||||
return data
|
||||
},
|
||||
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+ ")"
|
||||
return ": (" + value.Val("x1") + "," + value.Val("y1") + ")"
|
||||
+ " - (" + value.Val("x2") + "," + value.Val("y2") + ")"
|
||||
},
|
||||
},
|
||||
|
||||
@ -323,7 +309,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
["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", "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"],
|
||||
["grid", 1, 2, 3, 4, 5, 10, 20],
|
||||
],
|
||||
@ -333,10 +319,8 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
}, true)
|
||||
},
|
||||
"清空": function(event, can, msg, cmd, target) {can.svg.innerHTML = ""},
|
||||
"删除": 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) {
|
||||
"删除": 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)
|
||||
})
|
||||
can.Action("group", "svg")
|
||||
@ -370,11 +354,12 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
})
|
||||
return can.group
|
||||
},
|
||||
"font-size": function(event, can, value, cmd, target) {can.group.Value(value, cmd)},
|
||||
"stroke-width": 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.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))},
|
||||
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)},
|
||||
|
||||
init: function(event, can, msg, cmd, item) {
|
||||
@ -387,8 +372,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
item.Val = function(key, value) {
|
||||
return parseInt(item.Value(key, value == undefined? value: parseInt(value)||0));
|
||||
}
|
||||
item.Group = function() {
|
||||
var target = item
|
||||
item.Group = function() {var target = item
|
||||
while (target) {
|
||||
if (["svg", "g"].indexOf(target.tagName) > -1) {
|
||||
return target;
|
||||
@ -399,21 +383,15 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
}
|
||||
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);
|
||||
target.appendChild(can.onaction.init(event, can, msg, cmd, rect));
|
||||
can.core.Item(msg, function(key, value) {
|
||||
if (key == "inner") {
|
||||
rect.innerHTML = value
|
||||
return
|
||||
}
|
||||
if (key == "inner") {return rect.innerHTML = value}
|
||||
rect.Value(key, value)
|
||||
});
|
||||
return rect;
|
||||
},
|
||||
mode: function(event, can, value, cmd) {
|
||||
cmd && can.Action("mode", cmd)
|
||||
},
|
||||
_draw: function(event, can, point) {
|
||||
can.Status(event, null, "width");
|
||||
can.Status(event, null, "begin");
|
||||
@ -426,12 +404,11 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
},
|
||||
_move: function(event, can, point) {
|
||||
if (point.length == 1) {if (event.type != "click") {return}
|
||||
// 记录图形
|
||||
can.onaction._select(event, can, point)
|
||||
can.point = point, can.current = {target: can.group}
|
||||
} else if (point.length == 2) {
|
||||
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"
|
||||
can.current.pos = 5, can.current.begin = can.page.Select(can, target, "*", function(item) {
|
||||
if (item.tagName == "g") {return}
|
||||
target.style.cursor = "move"
|
||||
return {
|
||||
return target.style.cursor = "move", {
|
||||
target: item,
|
||||
x: item.Val("x"),
|
||||
y: item.Val("y"),
|
||||
@ -450,19 +426,19 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
height: item.Val("height"),
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return
|
||||
}
|
||||
|
||||
can.core.List(can.current.begin, function(item) {
|
||||
can.page.Resizes(event, item.target, item, point[0], point[1], can.current.pos)
|
||||
})
|
||||
}
|
||||
},
|
||||
_resize: 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") {
|
||||
can.point = [], delete(can.current); return
|
||||
return can.point = [], delete(can.current)
|
||||
}
|
||||
}
|
||||
|
||||
@ -476,14 +452,12 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
width: target.Val("width"),
|
||||
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
|
||||
}
|
||||
|
||||
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) {
|
||||
can.last && can.page.Remove(can, can.last)
|
||||
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)+")")
|
||||
},
|
||||
_delete: function(event, can, point) {
|
||||
event.target != can.svg && can.page.Remove(can, event.target)
|
||||
can.point = []
|
||||
can.point = [], event.target != can.svg && can.page.Remove(can, event.target)
|
||||
},
|
||||
_select: function(event, can, point) {
|
||||
var target = event.target
|
||||
_select: function(event, can, point) {var target = event.target
|
||||
while (target) {
|
||||
if (target.tagName == "g") {
|
||||
can.Action("group", target.Value("class"))
|
||||
@ -529,11 +501,6 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
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
|
||||
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};
|
||||
point.x = point.x - point.x % parseInt(can.Action("grid"));
|
||||
point.y = point.y - point.y % parseInt(can.Action("grid"));
|
||||
|
||||
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);
|
||||
},
|
||||
@ -559,19 +526,18 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存", "清空", "删除",
|
||||
can.current || can.page.Prepos(event, event.target)
|
||||
}
|
||||
|
||||
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}
|
||||
point.x = point.x - point.x % 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.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: ["编辑", "复制", "删除"],
|
||||
"编辑": function(event, can, value, cmd, target) {
|
||||
can.user.prompt("文字", function(text) {
|
||||
@ -591,27 +557,30 @@ Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"]
|
||||
"复制": function(event, can, value, cmd, 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;
|
||||
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)},
|
||||
})
|
||||
Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which", "keys"],
|
||||
"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.width+","+value.height: ""},
|
||||
"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];
|
||||
target.innerHTML = figure? figure.show(event, can, value, value): value.tagName;
|
||||
Volcanos("onstatus", {help: "组件状态", list: ["which", "point", "begin", "width", "keys"],
|
||||
"which": function(event, can, value, cmd, target) {
|
||||
var figure = can.onfigure[value.tagName];
|
||||
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},
|
||||
})
|
||||
Volcanos("onexport", {help: "导出数据", list: [],
|
||||
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) + '"': ""
|
||||
}): []).concat(['>', svg?svg.innerHTML:"", "</svg>"]).join("")
|
||||
}): []).concat(['>', svg? svg.innerHTML: "", "</svg>"]).join("")
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
11
proto.js
11
proto.js
@ -134,12 +134,12 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
|
||||
}).length > 0 || msg.option.push(key)
|
||||
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") {
|
||||
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]||"")
|
||||
}): can.core.Item(key, function(key, value) {
|
||||
msg.Push(key, value||"")
|
||||
})
|
||||
return
|
||||
}
|
||||
@ -151,7 +151,8 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块
|
||||
}
|
||||
if (i >= msg.append.length) {msg.append.push(key)}
|
||||
msg[key] = msg[key] || []
|
||||
msg[key].push(""+value)
|
||||
msg[key].push(""+value+"")
|
||||
return msg
|
||||
},
|
||||
Echo: shy("输出响应", function(res) {msg.result = msg.result || []
|
||||
msg._hand = true
|
||||
|
||||
10
style.css
10
style.css
@ -94,6 +94,14 @@ fieldset div.output>div.item:hover {
|
||||
background-color:red;
|
||||
border:ridge 2px yellow;
|
||||
}
|
||||
fieldset div.status {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
fieldset div.status>div.item {
|
||||
margin:0 2px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
fieldset.dialog {
|
||||
padding:10px;
|
||||
@ -156,7 +164,7 @@ fieldset div.code {
|
||||
color:white;
|
||||
font-size:14px;
|
||||
font-family:monospace;
|
||||
background-color:#272822;
|
||||
background-color:#343a34f2;
|
||||
white-space:pre;
|
||||
padding:10px;
|
||||
overflow:auto;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user