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

add mind.move

Browse Source
This commit is contained in:
shaoying 2020-02-04 00:43:41 +08:00
parent 50ba923b33
commit 3ca7d99f9c
2 changed files with 151 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frame.js
View File

@ -259,14 +259,20 @@ var can = Volcanos("chat", {
if (type == "inner" && (!msg.result || msg.result.length == 0)) {type = "table"}
var output = Volcanos(type, {_type: "local", action: action, msg: msg, feature: feature,
Import: function(event, value, key) {var cb = output.onimport[key];
typeof cb == "function" && cb(event, output, value, key, target);
},
Option: function(key, value) {
can.page.Select(can, can.option, "input[name="+key+"],select[name="+key+"]", function(item) {
value != undefined && (item.value = value), value = item.value
})
return value
},
Import: function(event, value, key) {var cb = output.onimport[key];
typeof cb == "function" && cb(event, output, value, key, target);
Action: function(key, value) {
can.page.Select(can, can.action, "input[name="+key+"],select."+key+",select[name="+key+"]", function(item) {
value != undefined && (item.value = value), value = item.value
})
return value
},
Status: function(event, value, key) {var cb = output.onstatus[key];
typeof cb == "function"? cb(event, output, value, key, can.page.Select(can, status, "div."+key)[0]): false && output.run(event, ["status", key, value], function(msg) {
@ -274,7 +280,7 @@ var can = Volcanos("chat", {
}, true)
},
Export: function(event, value, key, index) {var cb = output.onexport[key];
typeof cb == "function"? cb(event, output, value, key, target): can.Report(event, value, key, index)
return typeof cb == "function"? cb(event, output, value, key, target): can.Report(event, value, key, index)
},
run: function(event, cmd, cb, silent) {var msg = can.Event(event);

190
plugin/wiki/mind.js
View File

@ -5,8 +5,9 @@ Volcanos("onimport", {help: "导入数据", list: [],
table.onclick = function(event) {switch (event.target.tagName) {
case "TD":
can.onimport.which(event, table, msg.append, function(index, key) {
can.Option("name", event.target.innerHTML.trim())
can.run(event, [event.target.innerHTML.trim()], function(msg) {})
var name = event.target.innerHTML.trim()
can.Option("name", name)
can.run(event, [name])
})
break
case "TH":
@ -17,12 +18,19 @@ Volcanos("onimport", {help: "导入数据", list: [],
return typeof cb == "function" && cb(msg), table;
}
var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()]}]).code;
can.page.Select(can, output, "svg", function(item) {can.svg = item, item.Value = function(key) {return item[key].baseVal.value}});
can.page.Select(can, output, "svg *", function(item, index) {
can.onaction.init(event, can, msg, index, item);
})
can.point = []
var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()||can.Export(event, null, "file")]}]).code;
can.page.Select(can, output, "svg", function(svg) {can.group = can.svg = svg
can.onaction.init(event, can, msg, "init", svg);
can.onaction.list[1] = ["group", "svg", "add"]
can.page.Select(can, svg, "*", function(item, index) {
can.onaction.init(event, can, msg, index, item);
switch (item.tagName) {
case "g":
can.onaction.list[1].push(item.Value("class"))
break
}
})
}), can.point = [];
return typeof cb == "function" && cb(msg), code;
},
which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")}
@ -34,9 +42,66 @@ Volcanos("onimport", {help: "导入数据", list: [],
},
})
Volcanos("onfigure", {help: "图形绘制", list: [],
move: {
draw: function(event, can, point) {
if (point.length == 1) {
if (event.type != "click") {return}
// 记录图形
can.current = {target: event.target}
} else if (point.length == 2) {
if (event.type == "click") {return can.point = [], delete(can.current)}
}
var target = can.current.target
var figure = can.onfigure[can.current.target.tagName];
var move = figure.data.move || {x: "x", y: "y"}
if (point.length == 1) {
// 记录起点
can.current.x = parseInt(target.Value(move.x))
can.current.y = parseInt(target.Value(move.y))
} else {
// 移动图形
target.Value(move.x, can.current.x+point[1].x-point[0].x)
target.Value(move.y, can.current.y+point[1].y-point[0].y)
}
},
},
resize: {
draw: function(event, can, point) {
if (point.length == 1) {
if (event.type != "click") {return}
// 记录图形
can.current = {target: event.target}
} else if (point.length == 2) {
if (event.type == "click") {return can.point = [], delete(can.current)}
}
var target = can.current.target
var figure = can.onfigure[can.current.target.tagName];
var move = figure.data.move || {x: "x", y: "y"}
if (point.length == 1) {
// 记录起点
can.core.List(figure.data.resize, function(item) {
can.current[item] = parseInt(target.Value(item))
})
} else {
// 绽放图形
figure.resize(event, can, point, can.current, target)
}
},
},
text: {
data: {move: {x: "x", y: "y"}}, // <text x="60" y="10">hi<text>
show: function(event, can, value, target) {}
},
rect: {
data: {rx: 4, ry: 4}, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
draw: function(event, can, point, color) {
data: {
resize: ["width", "height", "rx"],
move: {x: "x", y: "y"}, copy: ["width", "height", "rx", "ry"],
rx: 4, ry: 4,
}, // <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
draw: function(event, can, point) {
if (point.length == 1) {return}
var p0 = point[0], p1 = point[1];
var data = {
"x": p0.x > p1.x? p1.x: p0.x,
@ -46,33 +111,34 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
}
can.core.Item(can.onfigure.rect.data, function(key, value) {
data[key] = value
}), data.fill = color
})
can.Status(event, data, "width");
event.type == "click" && point.length == 2 && (can.point = [])
return data;
},
resize: function(event, can, point, current, target) {
target.Value("width", current.width + point[1].x - point[0].x)
target.Value("height", current.height + point[1].y - point[0].y)
},
text: function(event, can, data, target) {
data.x = target.x.baseVal.value+target.width.baseVal.value/2
data.y = target.y.baseVal.value+target.height.baseVal.value/2
return data
},
copy: function(event, can) {
},
show: function(event, can, value, target) {
return value.tagName
return value.parentNode.Value("class") + " " + value.tagName
+ ": (" + value.x.baseVal.value + "," + value.y.baseVal.value+ ")"
+ " + (" + value.width.baseVal.value + "," + value.height.baseVal.value+ ")"
},
},
circle: {
data: {}, // <circle cx="25" cy="75" r="20"/>
draw: function(event, can, point, color) {
data: {move: {x: "cx", y: "cy"}, copy: ["r"]}, // <circle cx="25" cy="75" r="20"/>
draw: function(event, can, point) {
if (point.length == 1) {return}
var p0 = point[0], p1 = point[1];
var data = {
"cx": p0.x, "cy": p0.y,
"r": Math.sqrt(Math.pow(p0.x-p1.x, 2)+Math.pow(p0.y-p1.y, 2)),
"fill": color,
}
event.type == "click" && point.length == 2 && (can.point = [])
return data;
@ -83,19 +149,18 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
return data
},
show: function(event, can, value, target) {
return value.tagName
return value.parentNode.Value("class") + " " + value.tagName
+ ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")"
+ " > (" + parseInt(value.r.baseVal.value) + ")"
},
},
ellipse: {
data: {}, // <ellipse cx="75" cy="75" rx="20" ry="5"/>
draw: function(event, can, point, color) {
draw: function(event, can, point) {
var p0 = point[0], p1 = point[1];
var data = {
"cx": p0.x, "cy": p0.y,
"rx": Math.abs(p0.x - p1.x), "ry": Math.abs(p0.y - p1.y),
"fill": color,
}
event.type == "click" && point.length == 2 && (can.point = [])
return data;
@ -113,12 +178,11 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
},
line: {
data: {}, // <line x1="10" x2="50" y1="110" y2="150"/>
draw: function(event, can, point, color) {
draw: function(event, can, point) {
var p0 = point[0], p1 = point[1];
var data = {
"x1": p0.x, "y1": p0.y,
"x2": p1.x, "y2": p1.y,
"stroke": color,
}
event.type == "click" && point.length == 2 && (can.point = [])
return data;
@ -136,7 +200,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
},
path: {
data: {}, // <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
draw: function(event, can, point, color) {
draw: function(event, can, point) {
var data = {
d: can.core.List(point, function(p, i) {
switch (i) {
@ -164,7 +228,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
},
polyline: {
data: {}, // <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
draw: function(event, can, point, color) {if (point.length < 2) {return}
draw: function(event, can, point) {if (point.length < 2) {return}
var data = {
points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ")
}
@ -181,7 +245,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
},
polygon: {
data: {}, // <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
draw: function(event, can, point, color) {if (point.length < 2) {return}
draw: function(event, can, point) {if (point.length < 2) {return}
var data = {
points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ")
}
@ -198,19 +262,43 @@ Volcanos("onfigure", {help: "图形绘制", list: [],
},
})
Volcanos("onaction", {help: "组件菜单", list: ["保存",
["color", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
["shape", "rect", "circle", "ellipse", "path", "line", "polyline", "polygon"],
["group", "svg", "add"],
["stroke-width", 1, 2, 3, 4, 5],
["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
["shape", "move", "resize", "rect", "circle", "ellipse", "path", "line", "polyline", "polygon"],
],
"保存": function(event, can, msg, cmd, target) {
can.run(event, ["action", cmd, can.Option("name"),
'<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg" width="'+can.svg.Value("width")+'" height="'+can.svg.Value("height")+'">',
can.svg.innerHTML,
"</svg>",
], function() {
can.run(event, ["action", cmd, can.Option("name"), can.Export(event, can.svg, "file")], function() {
can.user.toast("保存成功")
}, true)
},
color: function(event, can, value, cmd, target) {can.color = value},
group: function(event, can, value, cmd, target) {
switch (value) {
case "svg": return can.group = can.svg;
case "add":
can.user.prompt("add group", function(name) {
can.svg.append(can.group = document.createElementNS('http://www.w3.org/2000/svg', 'g'))
can.group.Value("class", name)
can.core.List(["stroke-width", "stroke", "fill"], function(name) {
can.group.Value(name, can.Action(name))
})
can.page.Select(can, can.action, "select.group", function(item) {
can.page.Append(can, item, [{type: "option", value: name, inner: name}]);
item.value = name
})
})
break
default:
can.page.Select(can, can.svg, "g."+value, function(item) {
can.group = item
})
}
return can.group
},
"stroke-width": function(event, can, value, cmd, target) {can.group.Value(cmd, value)},
stroke: function(event, can, value, cmd, target) {can.group.Value(cmd, value)},
fill: function(event, can, value, cmd, target) {can.group.Value(cmd, value)},
shape: function(event, can, value, cmd, target) {can.shape = value},
resize: function(event, can, value, cmd, item) {var target = can.target.firstChild;
@ -224,26 +312,24 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存",
}), can), event.stopPropagation(), event.preventDefault()}
item.onclick = function() {
}
item.Value = function(key, value) {return value && item.setAttribute(key, value), item.getAttribute(key||"class")||""}
return item;
},
push: function(event, can, msg, cmd, target) {
var rect = document.createElementNS("http://www.w3.org/2000/svg", cmd);
can.core.Item(msg, function(key, value) {rect.setAttribute(key, value)});
target.appendChild(can.onaction.init(event, can, msg, cmd, rect));
can.core.Item(msg, function(key, value) {rect.Value(key, value)});
return rect;
},
draw: function(event, can, point) {
can.Status(event, null, "width");
can.Status(event, null, "begin");
if (point.length == 1) {return}
can.Status(event, point[0], "begin")
var color = can.page.Select(can, can.action, "select.color", function(item) {return item.value})[0]
var shape = can.page.Select(can, can.action, "select.shape", function(item) {return item.value})[0]
var figure = can.onfigure[shape];
var data = figure && figure.draw(event, can, point, color);
return data && can.onaction.push(event, can, data, shape, can.svg)
var data = figure && figure.draw(event, can, point);
return data && can.onaction.push(event, can, data, shape, can.group||can.svg)
},
onclick: function(event, can) {if (!can.svg) {return}
@ -256,7 +342,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["保存",
onmouseover: function(event, can) {
can.Status(event, event.target, "which")
},
onmousemove: function(event, can) {if (!can.svg) {return}
onmousemove: function(event, can) {if (!can.svg || can.point.length == 0) {return}
var p = can.svg.getBoundingClientRect()
var point = {x: event.clientX-p.x, y: event.clientY-p.y}
@ -277,14 +363,12 @@ Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect",
console.log("choice", cmd)
},
})
Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"],
Volcanos("ondetail", {help: "组件详情", list: ["编辑", "复制", "删除"],
"编辑": function(event, can, msg, index, key, cmd, target) {
can.user.prompt("文字", function(text) {
if (target.tagName == "text") {return target.innerHTML = text}
var color = can.page.Select(can, can.action, "select.color", function(item) {return item.value})[0]
var data = {"text-anchor": "middle", "dominant-baseline": "middle", "stroke": color}
var data = {"text-anchor": "middle", "dominant-baseline": "middle"}
var figure = can.onfigure[target.tagName]
figure.text(event, can, data, target)
@ -296,8 +380,12 @@ Volcanos("ondetail", {help: "组件详情", list: ["编辑", "删除"],
}, target.Text && target.Text.innerText || "")
},
"复制": function(event, can, msg, index, key, cmd, target) {
var figure = can.onfigure[target.tagName]
figure.copy(event, can, target)
var figure = can.onfigure[target.tagName].data
var data = {}
data[figure.move.x] = parseInt(target.Value(figure.move.x))+20;
data[figure.move.y] = parseInt(target.Value(figure.move.y))+20;
can.core.List(figure.copy, function(item) {data[item] = target.Value(item)});
return data && can.onaction.push(event, can, data, target.tagName, can.group||can.svg)
},
"删除": function(event, can, msg, index, key, cmd, target) {
can.page.Remove(can, target)
@ -311,5 +399,11 @@ Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "w
target.innerHTML = figure? figure.show(event, can, value, target): value.tagName;
},
})
Volcanos("onexport", {help: "导出数据", list: []})
Volcanos("onexport", {help: "导出数据", list: [],
file: function(event, can, svg, cmd, target) {
return ['<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg"'].concat(svg? can.core.List(["width", "height", "stroke-width", "stroke", "fill"], function(item) {
return svg.Value(item)? ' ' + item + '="' + svg.Value(item) + '"': ""
}): []).concat(['>', svg?svg.innerHTML:"", "</svg>"]).join("")
},
})