mirror of
https://shylinux.com/x/volcanos
synced 2025-04-26 09:14:06 +08:00
opt draw.js
This commit is contained in:
harveyshao
parent
d33fa59499
commit
604ab45f2f
4
frame.js
4
frame.js
@ -230,7 +230,7 @@ Volcanos("onappend", {help: "渲染引擎", list: [], _init: function(can, meta,
|
|||||||
var ui = can.page.Append(can, target, [{view: [type, html.DIV, item.nick||item.name],
|
var ui = can.page.Append(can, target, [{view: [type, html.DIV, item.nick||item.name],
|
||||||
onclick: function(event) { cb(event, ui.first)
|
onclick: function(event) { cb(event, ui.first)
|
||||||
can.onmotion.select(can, target, can.core.Keys(html.DIV, type), ui.first)
|
can.onmotion.select(can, target, can.core.Keys(html.DIV, type), ui.first)
|
||||||
}, oncontextmenu: function(event) { cbs(event, ui.first) },
|
}, onmouseenter: function(event) { cbs(event, ui.first) },
|
||||||
}]); return ui.first
|
}]); return ui.first
|
||||||
},
|
},
|
||||||
tree: function(can, list, field, split, cb, target, node) {
|
tree: function(can, list, field, split, cb, target, node) {
|
||||||
@ -615,7 +615,7 @@ Volcanos("onmotion", {help: "动态特效", list: [], _init: function(can, targe
|
|||||||
can.base.isFunc(cb) && cb(target)
|
can.base.isFunc(cb) && cb(target)
|
||||||
},
|
},
|
||||||
show: function(can, time, cb, target) { target = target||can._target
|
show: function(can, time, cb, target) { target = target||can._target
|
||||||
time = can.base.isObject(time)? time: {value: 10, length: time||20}
|
time = can.base.isObject(time)? time: {interval: 100, length: time||20}
|
||||||
|
|
||||||
can.page.Modify(can, target, {style: {opacity: 0, display: html.BLOCK}})
|
can.page.Modify(can, target, {style: {opacity: 0, display: html.BLOCK}})
|
||||||
can.core.Timer(time, function(event, value, index) {
|
can.core.Timer(time, function(event, value, index) {
|
||||||
|
|||||||
11
lib/user.js
11
lib/user.js
@ -72,6 +72,9 @@ Volcanos("user", {help: "用户操作", agent: {
|
|||||||
"start": "启动", "stop": "停止",
|
"start": "启动", "stop": "停止",
|
||||||
"open": "打开", "close": "关闭",
|
"open": "打开", "close": "关闭",
|
||||||
"run": "执行", "done": "完成",
|
"run": "执行", "done": "完成",
|
||||||
|
"remove": "删除",
|
||||||
|
"hide": "隐藏", "show": "显示",
|
||||||
|
"edit": "编辑", "project": "项目", "actions": "参数",
|
||||||
}[text]||text
|
}[text]||text
|
||||||
},
|
},
|
||||||
toast: function(can, content, title, duration, progress) {
|
toast: function(can, content, title, duration, progress) {
|
||||||
@ -196,6 +199,14 @@ Volcanos("user", {help: "用户操作", agent: {
|
|||||||
}
|
}
|
||||||
return event.stopPropagation(), event.preventDefault(), carte
|
return event.stopPropagation(), event.preventDefault(), carte
|
||||||
},
|
},
|
||||||
|
cartes: function(event, can, meta, list, cb, parent) {
|
||||||
|
var carte = can.user.carte(event, can, meta, list, cb, parent)
|
||||||
|
can.page.Modify(can, carte._target, {style: {
|
||||||
|
left: event.clientX-event.offsetX+event.target.offsetWidth-3,
|
||||||
|
top: carte._target.offsetTop-event.target.offsetHeight+5,
|
||||||
|
}})
|
||||||
|
return carte
|
||||||
|
},
|
||||||
input: function(event, can, form, cb, button) { // form [ string, array, object, {type: "select", values: []}
|
input: function(event, can, form, cb, button) { // form [ string, array, object, {type: "select", values: []}
|
||||||
var msg = can.request(event)
|
var msg = can.request(event)
|
||||||
var ui = can.page.Append(can, document.body, [{view: ["input"], style: {left: 0, top: 0}, list: [
|
var ui = can.page.Append(can, document.body, [{view: ["input"], style: {left: 0, top: 0}, list: [
|
||||||
|
|||||||
@ -88,11 +88,7 @@ Volcanos("onaction", {help: "控件交互", list: [], _init: function(can, msg,
|
|||||||
},
|
},
|
||||||
|
|
||||||
carte: function(event, can, list, cb) {
|
carte: function(event, can, list, cb) {
|
||||||
var carte = can.user.carte(event, can, can.ondetail, list, cb)
|
can.user.cartes(event, can, can.ondetail, list, cb)
|
||||||
can.page.Modify(can, carte._target, {style: {
|
|
||||||
left: event.clientX-event.offsetX+event.target.offsetWidth-3,
|
|
||||||
top: carte._target.offsetTop-event.target.offsetHeight,
|
|
||||||
}})
|
|
||||||
},
|
},
|
||||||
storm: function(event, can, river) { can.sublist = can.sublist||{}
|
storm: function(event, can, river) { can.sublist = can.sublist||{}
|
||||||
can.onmotion.select(can, can._output, "div.item", can.river_list[river])
|
can.onmotion.select(can, can._output, "div.item", can.river_list[river])
|
||||||
|
|||||||
@ -3,4 +3,6 @@ fieldset.draw div.output div.content svg {
|
|||||||
}
|
}
|
||||||
fieldset.draw div.output {
|
fieldset.draw div.output {
|
||||||
background-color:#1b5b738c;
|
background-color:#1b5b738c;
|
||||||
|
font-size:20px;
|
||||||
|
font-family:monospace;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,57 +1,48 @@
|
|||||||
Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) {
|
Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) {
|
||||||
can.onmotion.clear(can)
|
can.onmotion.clear(can), can.onmotion.hidden(can, can._action)
|
||||||
can.onkeypop._build(can)
|
can.onimport._show(can, msg), can.base.isFunc(cb) && cb(msg)
|
||||||
can.onmotion.hidden(can, can._action)
|
can.point = [], can.keylist = [], can.onkeypop._build(can)
|
||||||
can.base.isFunc(cb) && cb(msg)
|
|
||||||
|
|
||||||
// 交互数据
|
|
||||||
can.svg = null, can.group = null
|
|
||||||
can.temp = null , can.current = null
|
|
||||||
can.keylist = []
|
|
||||||
|
|
||||||
can.onimport._show(can, msg)
|
|
||||||
},
|
},
|
||||||
_show: function(can, msg) {
|
_show: function(can, msg) {
|
||||||
can.ui = can.onlayout.profile(can)
|
can.svg = null, can.group = null, can.temp = null, can.current = null
|
||||||
can.point = []
|
|
||||||
|
|
||||||
// 加载绘图
|
// 加载图形
|
||||||
|
can.ui = can.onlayout.profile(can), can.onmotion.hidden(can, can.ui.project)
|
||||||
can.page.Modify(can, can.ui.content, msg.Result()||can.onexport.content(can))
|
can.page.Modify(can, can.ui.content, msg.Result()||can.onexport.content(can))
|
||||||
can.page.Select(can, can.ui.content, "svg", function(svg) {
|
can.page.Select(can, can.ui.content, html.SVG, function(svg) {
|
||||||
can.svg = can.group = svg, can.onimport._group(can, svg).click()
|
can.svg = can.group = can.onimport._block(can, svg), can.onimport._group(can, svg).click()
|
||||||
can.core.ItemCB(can.onimport, function(key, cb) {
|
can.core.ItemCB(can.onaction, function(key, cb) { svg[key] = function(event) { cb(event, can) } })
|
||||||
svg[key] = function(event) { cb(event, can) }
|
can.page.Select(can, svg, "*", function(item, index) { can.onimport._block(can, item)
|
||||||
})
|
item.tagName == "g" && item.Value(html.CLASS) && can.onimport._group(can, item)
|
||||||
can.page.Select(can, svg, "*", function(item, index) {
|
|
||||||
item.tagName == "g"? can.onimport._group(can, item): can.onimport._block(can, item)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// 默认参数
|
// 默认参数
|
||||||
can.core.Timer(10, function() { can.core.Item({
|
can.core.Timer(10, function() { can.core.Item({
|
||||||
"stroke-width": 2, "stroke": "yellow", "fill": "purple", "font-size": "24",
|
"stroke-width": 2, "stroke": cli.YELLOW, "fill": cli.MAGENTA,
|
||||||
"shape": "rect", "grid": "10", "go": "run",
|
"font-size": "24", "font-family": html.MONOSPACE,
|
||||||
|
"go": cli.RUN, "shape": "rect", "grid": "10",
|
||||||
}, function(key, value) { can.svg.Value(key, can.Action(key, can.svg.Value(key)||value)) }) })
|
}, function(key, value) { can.svg.Value(key, can.Action(key, can.svg.Value(key)||value)) }) })
|
||||||
},
|
},
|
||||||
_group: function(can, target, name) { can.onimport._block(can, target)
|
_group: function(can, target) { var name = target.Groups()
|
||||||
function show(event) { can.group = target
|
function show(event) { can.group = target
|
||||||
can.core.List(["stroke-width", "stroke", "fill", "font-size"], function(key) {
|
can.core.List([html.STROKE_WIDTH, html.STROKE, html.FILL, html.FONT_SIZE], function(key) {
|
||||||
can.Action(key, target.Value(key)||can.Action(key))
|
can.Action(key, target.Value(key)||can.Action(key))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
name = name || target.Groups()
|
return (name || target == can.svg) && can.onappend.item(can, html.ITEM, {name: name||html.SVG}, function(event) { show(event)
|
||||||
return (name || target == can.svg) && can.onappend.item(can, "item", {name: name||"svg"}, function(event) { show(event)
|
can.onaction.show(event, can)
|
||||||
can.onaction["显示"](event, can)
|
|
||||||
}, function(event) { show(event)
|
}, function(event) { show(event)
|
||||||
can.user.carte(event, can, can.onaction, ["隐藏", "显示", "添加", "删除", "清空"])
|
can.user.cartes(event, can, can.onaction, [ice.HIDE, ice.SHOW, mdb.CREATE, mdb.REMOVE, cli.CLEAR])
|
||||||
}, can.ui.project)
|
}, can.ui.project)
|
||||||
},
|
},
|
||||||
_block: function(can, target) {
|
_block: function(can, target) {
|
||||||
|
// target.oncontextmenu = function(event) { can.user.carte(event, can, can.ondetail) }
|
||||||
target.Val = function(key, value) {
|
target.Val = function(key, value) {
|
||||||
return parseInt(target.Value(key, value == undefined? value: parseInt(value)||0))||0
|
return parseInt(target.Value(key, value == undefined? value: parseInt(value)||0))||0
|
||||||
}
|
}
|
||||||
target.Value = function(key, value) { if (typeof key == undefined) { return }
|
target.Value = function(key, value) { if (typeof key == undefined) { return }
|
||||||
if (typeof key == "object") { can.core.Item(key, target.Value); return }
|
if (can.base.isObject(key)) { can.core.Item(key, target.Value); return }
|
||||||
|
|
||||||
var figure = can.onfigure._get(can, target)
|
var figure = can.onfigure._get(can, target)
|
||||||
key = figure && figure.data && figure.data.size && figure.data.size[key] || key
|
key = figure && figure.data && figure.data.size && figure.data.size[key] || key
|
||||||
@ -62,220 +53,132 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
|
|||||||
if (key == "inner") {
|
if (key == "inner") {
|
||||||
return value != undefined && (target.innerHTML = value), target.innerHTML
|
return value != undefined && (target.innerHTML = value), target.innerHTML
|
||||||
}
|
}
|
||||||
if (key == "ship") {
|
if (key == ice.SHIP) {
|
||||||
return value != undefined && target.setAttribute(key, JSON.stringify(value)), can.base.Obj(target.getAttribute(key), [])
|
return value != undefined && target.setAttribute(key, JSON.stringify(value)), can.base.Obj(target.getAttribute(key), [])
|
||||||
}
|
}
|
||||||
return value != undefined && target.setAttribute(key, value), target.getAttribute(key||"class")
|
return value != undefined && target.setAttribute(key, value), target.getAttribute(key||html.CLASS)
|
||||||
|| target[key]&&target[key].baseVal&&target[key].baseVal.value
|
|| target[key]&&target[key].baseVal&&target[key].baseVal.value || target[key]&&target[key].baseVal || ""
|
||||||
|| target[key]&&target[key].baseVal || ""
|
|
||||||
}
|
}
|
||||||
target.Group = function() { var item = target
|
target.Group = function() { var item = target
|
||||||
while (item) { if (["svg", "g"].indexOf(item.tagName) > -1) { return item }; item = item.parentNode }
|
while (item) { if ([html.SVG, "g"].indexOf(item.tagName) > -1) { return item }; item = item.parentNode }
|
||||||
return can.svg
|
return can.svg
|
||||||
}
|
}
|
||||||
target.Groups = function() { var item = target
|
target.Groups = function() { var item = target
|
||||||
var list = []; while (item && item.tagName != "svg") {
|
var list = []; while (item && item.tagName != html.SVG) {
|
||||||
item.tagName == "g" && item.Value("class") && list.push(item.Value("class"))
|
item.tagName == "g" && item.Value(html.CLASS) && list.push(item.Value(html.CLASS))
|
||||||
item = item.parentNode
|
item = item.parentNode
|
||||||
}
|
}
|
||||||
return list.reverse().join(".")
|
return list.reverse().join(ice.PT)
|
||||||
}
|
}
|
||||||
return target
|
return target
|
||||||
},
|
},
|
||||||
_point: function(event, can) {
|
|
||||||
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"))
|
|
||||||
return can.Status("坐标", point.x+","+point.y), point
|
|
||||||
},
|
|
||||||
_figure: function(event, can, points, target) {
|
|
||||||
can.temp && can.page.Remove(can, can.temp) && delete(can.temp)
|
|
||||||
can.temp = can.core.CallFunc([can.onaction._mode, can.Action("mode")], [event, can, points, target])
|
|
||||||
can.point.length == 0 && delete(can.temp)
|
|
||||||
},
|
|
||||||
draw: function(event, can, value) {
|
draw: function(event, can, value) {
|
||||||
var figure = can.onfigure[value.shape]
|
var figure = can.onfigure[value.shape]
|
||||||
var data = figure.draw(event, can, value.point, value.style)
|
var data = figure.draw(event, can, value.point, value.style)
|
||||||
can.core.Item(value.style, function(key, value) { data[key] = value })
|
can.core.Item(value.style, function(key, value) { data[key] = value })
|
||||||
var item = can.onfigure._push(can, data, value.shape, can.group||can.svg)
|
var item = can.onfigure._push(can, value.shape, data, can.group||can.svg)
|
||||||
can.core.ItemCB(value, function(key, cb) { item[key] = cb })
|
can.core.ItemCB(value, function(key, cb) { item[key] = cb })
|
||||||
value._init && value._init(item)
|
return value._init && value._init(item), item
|
||||||
return item
|
|
||||||
},
|
},
|
||||||
|
|
||||||
ondblclick: function(event, can) {
|
|
||||||
if (can.Action("go") == "run") { return }
|
|
||||||
can.ondetail["标签"](event, can)
|
|
||||||
},
|
|
||||||
onclick: function(event, can) { var point = can.onimport._point(event, can)
|
|
||||||
if (can.Action("go") == "run") { return can.onaction._mode.run(event, can) }
|
|
||||||
can.onimport._figure(event, can, can.point = can.point.concat(point))
|
|
||||||
},
|
|
||||||
onmousemove: function(event, can) { var point = can.onimport._point(event, can)
|
|
||||||
can.onaction.Prepos(event, event.target)
|
|
||||||
if (can.Action("go") == "run") { return can.page.Modify(can, event.target, {style: {cursor: ""}}) }
|
|
||||||
if (can.Action("go") == "auto") { can.onaction._auto(can, event.target) }
|
|
||||||
can.onimport._figure(event, can, can.point.concat(point))
|
|
||||||
},
|
|
||||||
onmouseleave: function(event, can) {
|
|
||||||
can.onengine.signal(can, "keymap.focus", can.request(event, {cb: null}))
|
|
||||||
},
|
|
||||||
onmouseenter: function(event, can) {
|
|
||||||
can.onengine.signal(can, "keymap.focus", can.request(event, {cb: function(event) {
|
|
||||||
can.keylist = can.onkeypop._parse(event, can, "normal", can.keylist, can.group)
|
|
||||||
}}))
|
|
||||||
},
|
|
||||||
onmouseover: function(event, can) { can.onexport._show(can, event.target) },
|
|
||||||
oncontextmenu: function(event, can) { can.onexport._show(can, event.target) },
|
|
||||||
}, ["/plugin/local/wiki/draw.css"])
|
}, ["/plugin/local/wiki/draw.css"])
|
||||||
Volcanos("onfigure", {help: "图形绘制", list: [],
|
Volcanos("onfigure", {help: "图形绘制", list: [],
|
||||||
_get: function(can, item, name) {
|
_get: function(can, item, name) {
|
||||||
return can.onfigure[name]||can.onfigure[item.getAttribute("name")]||can.onfigure[item.tagName]
|
return can.onfigure[name]||can.onfigure[item.getAttribute(kit.MDB_NAME)]||can.onfigure[item.tagName]
|
||||||
},
|
},
|
||||||
_ship: function(can, target, value) {
|
_ship: function(can, target, value) {
|
||||||
return target.Value("ship", target.Value("ship").concat([value]))
|
return target.Value(ice.SHIP, target.Value(ice.SHIP).concat([value]))
|
||||||
},
|
},
|
||||||
_push: function(can, data, cmd, target) {
|
_push: function(can, type, data, target) {
|
||||||
var rect = document.createElementNS("http://www.w3.org/2000/svg", cmd)
|
var item = document.createElementNS("http://www.w3.org/2000/svg", type)
|
||||||
target.appendChild(can.onimport._block(can, rect))
|
target.appendChild(can.onimport._block(can, item)), item.Value(data)
|
||||||
rect.Value(data); if (can.point.length == 0) {
|
return item
|
||||||
var pid = "p"+can.svg.Val("count", can.svg.Val("count")+1)
|
|
||||||
rect.Value("class", (rect.Value("class") + " " + rect.Value("pid", pid)).trim())
|
|
||||||
}
|
|
||||||
return rect
|
|
||||||
},
|
},
|
||||||
_copy: function(event, can, target) {
|
_copy: function(event, can, target) {
|
||||||
var figure = can.onfigure._get(can, target).data
|
var data = {}, figure = can.onfigure._get(can, target), size = figure.data.size
|
||||||
|
can.core.List(figure.data.copy, function(item) { data[item] = target.Value(item) })
|
||||||
|
data[size.x||"x"] = target.Val(size.x||"x")+10
|
||||||
|
data[size.y||"y"] = target.Val(size.y||"y")+10
|
||||||
|
|
||||||
var data = {}
|
var p = data && can.onfigure._push(can, target.tagName, data, can.group||can.svg)
|
||||||
can.core.List(figure.copy, function(item) { data[item] = target.Value(item) })
|
can.page.Select(can, can.svg, ice.PT+target.Value(kit.MDB_TEXT), function(item) {
|
||||||
data[figure.size.x||"x"] = target.Val(figure.size.x||"x")+10
|
can.ondetail[html.LABEL](event, can, {silent: true, def: item.Value("inner")}, "", p)
|
||||||
data[figure.size.y||"y"] = target.Val(figure.size.y||"y")+10
|
|
||||||
|
|
||||||
var p = data && can.onfigure._push(can, data, target.tagName, can.group||can.svg)
|
|
||||||
can.page.Select(can, can.svg, "."+target.Value("text"), function(item) {
|
|
||||||
can.ondetail["标签"](event, can, {silent: true, def: item.Value("inner")}, "", p)
|
|
||||||
})
|
})
|
||||||
return p
|
return p
|
||||||
},
|
},
|
||||||
|
_move: function(can, target, list) {
|
||||||
|
can.core.List(list||target.Value(ice.SHIP), function(ship) {
|
||||||
|
ship.target = can.page.Select(can, can.svg, ice.PT+ship.pid)[0]
|
||||||
|
var p = can.onexport.anchor(target, ship.anchor, {})
|
||||||
|
if (ship.which == 1) {
|
||||||
|
ship.target.Val("x1", p.x), ship.target.Val("y1", p.y)
|
||||||
|
} else if (ship.which == 2) {
|
||||||
|
ship.target.Val("x2", p.x), ship.target.Val("y2", p.y)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
svg: { // <svg width="600" height="200" count="0" grid="10" stroke-width="2" stroke="yellow" fill="purple" font-size="24"/>
|
svg: { // <svg height="200" width="600" count="0" grid="10" stroke-width="2" stroke="yellow" fill="purple" font-size="24"/>
|
||||||
data: {size: {}, copy: []},
|
data: {size: {}, copy: []},
|
||||||
show: function(can, target) { return target.Val("width") +","+ target.Val("height") },
|
show: function(can, target, figure) { return can.onexport._size(can, target, figure) }
|
||||||
},
|
},
|
||||||
text: { // <text x="60" y="10">hi<text>
|
text: { // <text x="60" y="10">hi<text>
|
||||||
data: {size: {x: "x", y: "y"}, copy: ["inner"]},
|
data: {points: 1, size: {}, copy: ["inner"]},
|
||||||
draw: function(event, can, point, style) { if (point.length < 1 || event.type == "mousemove") { return }
|
draw: function(event, can, point, style) { if (point.length < 1 || event.type == "mousemove") { return }
|
||||||
var p0 = point[0]; var data = {"x": p0.x, "y": p0.y, "inner": style&&style.inner || can.user.prompt("text")}
|
var p0 = point[0], text = style&&style.inner||can.user.prompt(kit.MDB_TEXT)
|
||||||
return can.point = [], data
|
return text? {x: p0.x, y: p0.y, inner: text}: null
|
||||||
},
|
},
|
||||||
show: function(can, target) { return ": (" + target.Val("x") + "," + target.Val("y")+ ")" }
|
show: function(can, target, figure) { return can.onexport._position(can, target, figure) }
|
||||||
},
|
},
|
||||||
rect: { // <rect rx="10" ry="10" x="60" y="10" width="30" height="30"/>
|
circle: { // <circle r="20" cx="25" cy="75"/>
|
||||||
data: {rx: 4, ry: 4, size: {x: "x", y: "y"}, copy: ["width", "height", "rx", "ry"]},
|
data: {points: 2, size: {height: "r", width: "r", x: "cx", y: "cy"}, copy: ["r"]},
|
||||||
draw: function(event, can, point) { if (point.length < 2) { return }
|
draw: function(event, can, point) { if (point.length < 2) { return }
|
||||||
var p0 = point[0], p1 = point[1]; var data = {
|
var p0 = point[0], p1 = point[1]
|
||||||
"rx": this.data.rx, "ry": this.data.ry,
|
return {r: Math.sqrt(Math.pow(p0.x-p1.x, 2)+Math.pow(p0.y-p1.y, 2)), cx: p0.x, cy: p0.y}
|
||||||
"x": p0.x > p1.x? p1.x: p0.x, "y": p0.y > p1.y? p1.y: p0.y,
|
},
|
||||||
"width": Math.abs(p0.x-p1.x), "height": Math.abs(p0.y-p1.y),
|
},
|
||||||
|
ellipse: { // <ellipse ry="5" rx="20" cx="75" cy="75"/>
|
||||||
|
data: {points: 2, size: {height: "ry", width: "rx", x: "cx", y: "cy"}, copy: ["ry", "rx"]},
|
||||||
|
draw: function(event, can, point) { if (point.length < 2) { return }
|
||||||
|
var p0 = point[0], p1 = point[1]
|
||||||
|
return {ry: Math.abs(p0.y - p1.y), rx: Math.abs(p0.x - p1.x), cx: p0.x, cy: p0.y}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rect: { // <rect height="30" width="30" ry="10" rx="10" x="60" y="10"/>
|
||||||
|
data: {points: 2, ry: 4, rx: 4, size: {}, copy: [chat.HEIGHT, chat.WIDTH, "ry", "rx"]},
|
||||||
|
draw: function(event, can, point) { if (point.length < 2) { return }
|
||||||
|
var p0 = point[0], p1 = point[1]
|
||||||
|
return {
|
||||||
|
height: Math.abs(p0.y-p1.y), width: Math.abs(p0.x-p1.x), ry: this.data.ry, rx: this.data.rx,
|
||||||
|
x: p0.x > p1.x? p1.x: p0.x, y: p0.y > p1.y? p1.y: p0.y,
|
||||||
}
|
}
|
||||||
return event.type == "click" && point.length == 2 && (can.point = []), data
|
|
||||||
},
|
},
|
||||||
text: function(can, data, target) {
|
text: function(can, data, target) { return data.x = target.Val("x")+target.Val(chat.WIDTH)/2, data.y = target.Val("y")+target.Val(chat.HEIGHT)/2, data },
|
||||||
data.x = target.Val("x")+target.Val("width")/2
|
|
||||||
data.y = target.Val("y")+target.Val("height")/2
|
|
||||||
return data
|
|
||||||
},
|
},
|
||||||
show: function(can, target) {
|
block: { // <rect height="30" width="30" ry="10" rx="10" x="60" y="10"/>
|
||||||
return ": (" + target.Val("x") + "," + target.Val("y") + ")"
|
data: {points: 2, ry: 4, rx: 4, size: {}, copy: [chat.HEIGHT, chat.WIDTH, "ry", "rx"]},
|
||||||
+ " + (" + target.Val("width") + "," + target.Val("height") + ")"
|
draw: function(event, can, point) { if (point.length < 2) { return }
|
||||||
|
this._temp && can.page.Remove(can, this._temp) && delete(this._temp)
|
||||||
|
this._temp = can.onfigure._push(can, "g", {}, can.group||can.svg)
|
||||||
|
|
||||||
|
var rect = can.onfigure._push(can, "rect", can.onfigure.rect.draw(event, can, point), this._temp)
|
||||||
|
if (event.type == html.CLICK) { delete(this._temp) }
|
||||||
},
|
},
|
||||||
|
text: function(can, data, target) { can.onfigure.rect.text(can, data, target) },
|
||||||
},
|
},
|
||||||
line: { // <line x1="10" y1="50" x2="110" y2="150" xx="100" yy="100"/>
|
line: { // <line x1="10" y1="50" x2="110" y2="150" xx="100" yy="100"/>
|
||||||
data: {size: {}, copy: ["x1", "y1", "x2", "y2"],
|
data: {points: 2, size: {x: "x1", y: "y1"}, copy: ["x1", "y1", "x2", "y2"]},
|
||||||
x: function(can, value, cmd, target) {
|
|
||||||
if (value != undefined) {
|
|
||||||
var offset = value - target.Val("xx")
|
|
||||||
target.Val("x1", target.Val("x1") + offset)
|
|
||||||
target.Val("x2", target.Val("x2") + offset)
|
|
||||||
target.Val("xx", value)
|
|
||||||
}
|
|
||||||
return target.Val("xx")
|
|
||||||
},
|
|
||||||
y: function(can, value, cmd, target) {
|
|
||||||
if (value != undefined) {
|
|
||||||
var offset = value - target.Val("yy")
|
|
||||||
target.Val("y1", target.Val("y1") + offset)
|
|
||||||
target.Val("y2", target.Val("y2") + offset)
|
|
||||||
target.Val("yy", value)
|
|
||||||
}
|
|
||||||
return target.Val("yy")
|
|
||||||
},
|
|
||||||
width: function(can, value, cmd, target) {
|
|
||||||
return value != undefined && target.Val("x2", target.Val("x1") + parseInt(value)), target.Val("x2") - target.Val("x1")
|
|
||||||
},
|
|
||||||
height: function(can, value, cmd, target) {
|
|
||||||
return value != undefined && target.Val("y2", target.Val("y1") + parseInt(value)), target.Val("y2") - target.Val("y1")
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: function(event, can, point) { var target = event.target
|
grid: function(event, can, point) { var target = event.target
|
||||||
if (target == can.svg) { return }
|
if (target == can.svg) { return }
|
||||||
var p = point[point.length-1], pos = can.onaction.Prepos(event, target)
|
var p = point[point.length-1], pos = can.onexport.cursor(event, can, target)
|
||||||
target.Val && can.onaction.Anchor(event, target, pos, p)
|
target.Val && can.onexport.anchor(target, pos, p)
|
||||||
return p.target = target, p.anchor = pos, point
|
return p.target = target, p.anchor = pos, point
|
||||||
},
|
},
|
||||||
draw: function(event, can, point) { if (point.length < 2) { return }
|
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, "x2": p1.x, "y2": p1.y}
|
var p0 = point[0], p1 = point[1]
|
||||||
return event.type == "click" && point.length == 2 && (can.point = []), data
|
return {x1: p0.x, y1: p0.y, x2: p1.x, y2: p1.y}
|
||||||
},
|
|
||||||
text: function(can, target, data) {
|
|
||||||
data.x = (target.Val("x1") + target.Val("x2")) / 2
|
|
||||||
data.y = (target.Val("y1") + target.Val("y2")) / 2
|
|
||||||
return data
|
|
||||||
},
|
|
||||||
show: function(can, target) {
|
|
||||||
return ": (" + target.Val("x1") + "," + target.Val("y1") + ")"
|
|
||||||
+ " - (" + target.Val("x2") + "," + target.Val("y2") + ")"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
circle: { // <circle cx="25" cy="75" r="20"/>
|
|
||||||
data: {size: {x: "cx", y: "cy", width: "r", height: "r"}, copy: ["r"]},
|
|
||||||
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))}
|
|
||||||
return event.type == "click" && point.length == 2 && (can.point = []), data
|
|
||||||
},
|
|
||||||
text: function(can, target, data) { return data.x = target.Val("cx"), data.y = target.Val("cy"), data },
|
|
||||||
show: function(can, target) { return ": (" + target.Val("cx") + "," + target.Val("cy") + ")" + " > (" + parseInt(target.Val("r")) + ")" },
|
|
||||||
},
|
|
||||||
ellipse: { // <ellipse cx="75" cy="75" rx="20" ry="5"/>
|
|
||||||
data: {size: {x: "cx", y: "cy", width: "rx", height: "ry"}, copy: ["rx", "ry"]},
|
|
||||||
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)}
|
|
||||||
return event.type == "click" && point.length == 2 && (can.point = []), data
|
|
||||||
},
|
|
||||||
text: function(can, target, data) { return data.x = target.Val("cx"), data.y = target.Val("cy"), data },
|
|
||||||
show: function(can, target) { return ": (" + target.Val("cx") + "," + target.Val("cy") + ")" + " > (" + target.Val("rx") + "," + target.Val("ry") + ")" },
|
|
||||||
},
|
|
||||||
block: { // <rect rx="10" ry="10" x="60" y="10" width="30" height="30"/>
|
|
||||||
data: {rx: 4, ry: 4, size: {x: "x", y: "y"}, copy: ["width", "height", "rx", "ry"]},
|
|
||||||
draw: function(event, can, point) { if (point.length < 2) { return }
|
|
||||||
this._temp && can.page.Remove(can, this._temp) && delete(this._temp)
|
|
||||||
this._temp = can.onfigure._push(can, {}, "g", can.group||can.svg)
|
|
||||||
|
|
||||||
var rect = can.onfigure._push(can, can.onfigure.rect.draw(event, can, point), "rect", this._temp)
|
|
||||||
if (event.type != "click" || point.length != 2) { return }
|
|
||||||
delete(this._temp)
|
|
||||||
},
|
|
||||||
text: function(can, target, data) {
|
|
||||||
data.x = target.Val("x")+target.Val("width")/2
|
|
||||||
data.y = target.Val("y")+target.Val("height")/2
|
|
||||||
return data
|
|
||||||
},
|
|
||||||
show: function(can, target) {
|
|
||||||
return ": (" + target.Val("x") + "," + target.Val("y") + ")"
|
|
||||||
+ " + (" + target.Val("width") + "," + target.Val("height") + ")"
|
|
||||||
},
|
},
|
||||||
|
text: function(can, target, data) { return data.x = (target.Val("x1")+target.Val("x2"))/2, data.y = (target.Val("y1")+target.Val("y2"))/2, data },
|
||||||
|
show: function(can, target, figure) { return "<("+(target.Val("y2")-target.Val("y1"))+ice.FS+(target.Val("x2")-target.Val("x1"))+")"+can.onexport._position(can, target, figure) },
|
||||||
},
|
},
|
||||||
}, [])
|
}, [])
|
||||||
Volcanos("onkeypop", {help: "键盘交互", list: [],
|
Volcanos("onkeypop", {help: "键盘交互", list: [],
|
||||||
@ -316,80 +219,52 @@ Volcanos("onkeypop", {help: "键盘交互", list: [],
|
|||||||
})
|
})
|
||||||
Volcanos("onaction", {help: "组件菜单", list: [
|
Volcanos("onaction", {help: "组件菜单", list: [
|
||||||
["stroke-width", 1, 2, 3, 4, 5],
|
["stroke-width", 1, 2, 3, 4, 5],
|
||||||
["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"],
|
["stroke", cli.RED, cli.YELLOW, cli.GREEN, cli.CYAN, cli.BLUE, cli.MAGENTA, cli.BLACK, cli.WHITE],
|
||||||
["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black", "#0000"],
|
["fill", cli.RED, cli.YELLOW, cli.GREEN, cli.CYAN, cli.BLUE, cli.MAGENTA, cli.BLACK, cli.WHITE, "#0000"],
|
||||||
["font-size", 12, 16, 18, 24, 32],
|
["font-size", 12, 16, 18, 24, 32],
|
||||||
|
|
||||||
["shape", "text", "rect", "line", "circle", "ellipse", "block"],
|
|
||||||
["mode", "draw", "resize"],
|
|
||||||
["grid", 1, 2, 3, 4, 5, 10, 20],
|
|
||||||
["go", "run", "auto", "manual"],
|
["go", "run", "auto", "manual"],
|
||||||
|
["mode", "draw", "resize"],
|
||||||
|
["shape", "text", "circle", "ellipse", "rect", "block", "line"],
|
||||||
|
["grid", 1, 2, 3, 4, 5, 10, 20],
|
||||||
],
|
],
|
||||||
_change: function(can, key, value) {
|
_change: function(can, key, value) { can.Action(key, value), can.group.Value(key, value) },
|
||||||
can.Action(key, value), can.group.Value(key, value)
|
"stroke-width": function(event, can, key, value) { can.onaction._change(can, key, value) },
|
||||||
},
|
stroke: function(event, can, key, value) { can.onaction._change(can, key, value) },
|
||||||
"编辑": function(event, can, key) { can.Action("go", "auto") },
|
fill: function(event, can, key, value) { can.onaction._change(can, key, value) },
|
||||||
"save": function(event, can, key) {
|
"font-size": function(event, can, key, value) { can.onaction._change(can, key, value) },
|
||||||
|
|
||||||
|
go: function(event, can, key, value) { can.Action(key, value) },
|
||||||
|
mode: function(event, can, key, value) { can.Action(key, value) },
|
||||||
|
shape: function(event, can, key, value) { can.Action(key, value) },
|
||||||
|
|
||||||
|
edit: function(event, can) { can.Action("go", can.Action("go") == "run"? "auto": "run") },
|
||||||
|
save: function(event, can, button) {
|
||||||
var msg = can.request(event, {content: can.onexport.content(can, can.svg)})
|
var msg = can.request(event, {content: can.onexport.content(can, can.svg)})
|
||||||
can.run(event, [ctx.ACTION, "save", can.Option("path")], function(msg) {
|
can.run(event, [ctx.ACTION, button, can.Option(nfs.PATH)], function(msg) {
|
||||||
can.user.toast(can, "保存成功")
|
can.user.toast(can, ice.SUCCESS, button)
|
||||||
}, true)
|
}, true)
|
||||||
},
|
},
|
||||||
"项目": function(event, can) { can.onmotion.toggle(can, can.ui.project) },
|
|
||||||
"显示": function(event, can) { can.onmotion.show(can, {value: 100, length: 10}, null, can.group) },
|
project: function(event, can) { can.onmotion.toggle(can, can.ui.project) },
|
||||||
"隐藏": function(event, can) { can.onmotion.hide(can, {value: 100, length: 10}, null, can.group) },
|
show: function(event, can) { can.onmotion.show(can, {interval: 100, length: 10}, null, can.group) },
|
||||||
"添加": function(event, can) {
|
hide: function(event, can) { can.onmotion.hide(can, {interval: 100, length: 10}, null, can.group) },
|
||||||
can.user.prompt("add group", function(name) {
|
create: function(event, can) {
|
||||||
|
can.user.prompt("group", function(name) {
|
||||||
var group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
|
var group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
|
||||||
can.group.append(group), can.onimport._group(can, group, name).click()
|
can.group.append(group), can.onimport._block(can, group)
|
||||||
group.Value("class", name), can.core.List(["stroke-width", "stroke", "fill", "font-size"], function(name) {
|
group.Value(html.CLASS, name), can.core.List([html.STROKE_WIDTH, html.STROKE, html.FILL, html.FONT_SIZE], function(name) {
|
||||||
group.Value(name, can.Action(name))
|
group.Value(name, can.Action(name))
|
||||||
})
|
}), can.onimport._group(can, group).click()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
"删除": function(event, can) { if (can.group == can.svg) { return }
|
remove: function(event, can) { if (can.group == can.svg) { return }
|
||||||
can.page.Remove(can, event.target)
|
|
||||||
can.page.Remove(can, can.group)
|
can.page.Remove(can, can.group)
|
||||||
can.Action("group", "svg")
|
|
||||||
},
|
},
|
||||||
"清空": function(event, can) {
|
clear: function(event, can) {
|
||||||
can.onmotion.clear(can, can.group), can.point = [], delete(can.temp)
|
can.onmotion.clear(can, can.group), can.point = [], delete(can.temp)
|
||||||
},
|
},
|
||||||
|
|
||||||
"font-size": function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) },
|
|
||||||
"stroke-width": function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) },
|
|
||||||
stroke: function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) },
|
|
||||||
fill: function(event, can, key, value) { can.Action(key, value), can.group.Value(key, value) },
|
|
||||||
|
|
||||||
shape: function(event, can, key, value) { can.Action(key, value) },
|
|
||||||
mode: function(event, can, key, value) { can.Action(key, value) },
|
|
||||||
go: function(event, can, key, value) { can.Action(key, value) },
|
|
||||||
|
|
||||||
_auto: function(can, target) {
|
|
||||||
if (can.point.length > 0) { return }
|
|
||||||
var pos = can.onaction.Prepos(event, event.target)
|
|
||||||
if (target.tagName == "text") {
|
|
||||||
|
|
||||||
} else if (target == can.svg) {
|
|
||||||
if (pos == 5) {
|
|
||||||
can.Action("mode", "draw")
|
|
||||||
can.Action("shape", "block")
|
|
||||||
can.page.Modify(can, target, {style: {cursor: "crosshair"}})
|
|
||||||
} else {
|
|
||||||
can.Action("mode", "resize")
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
switch (pos) {
|
|
||||||
case 5:
|
|
||||||
case 9:
|
|
||||||
can.Action("mode", "resize")
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
can.Action("mode", "draw")
|
|
||||||
can.Action("shape", "line")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_mode: {
|
_mode: {
|
||||||
draw: function(event, can, point) {
|
draw: function(event, can, point) {
|
||||||
var shape = can.Action("shape")
|
var shape = can.Action("shape")
|
||||||
@ -397,164 +272,97 @@ Volcanos("onaction", {help: "组件菜单", list: [
|
|||||||
figure.grid && figure.grid(event, can, point)
|
figure.grid && figure.grid(event, can, point)
|
||||||
|
|
||||||
var data = figure.draw && figure.draw(event, can, point)
|
var data = figure.draw && figure.draw(event, can, point)
|
||||||
var obj = data && can.onfigure._push(can, data, figure.data.name||shape, can.group||can.svg)
|
var obj = data && can.onfigure._push(can, figure.data.name||shape, data, can.group||can.svg)
|
||||||
|
event.type == html.CLICK && point.length === figure.data.points && (can.point = [])
|
||||||
|
|
||||||
event.type == "click" && obj && can.core.List(point, function(item, index) {
|
if (event.type == html.CLICK && obj) {
|
||||||
item.target && can.onfigure._ship(can, item.target, {pid: obj.Value("pid"), which: index, anchor: item.anchor})
|
var pid = "p"+can.svg.Val(kit.MDB_COUNT, can.svg.Val(kit.MDB_COUNT)+1)
|
||||||
|
obj.Value(html.CLASS, (obj.Value(html.CLASS)+ice.SP+obj.Value("pid", pid)).trim())
|
||||||
|
can.core.List(point, function(item, index) {
|
||||||
|
item.target && can.onfigure._ship(can, item.target, {pid: obj.Value("pid"), which: index+1, anchor: item.anchor})
|
||||||
})
|
})
|
||||||
|
}
|
||||||
return obj
|
return obj
|
||||||
},
|
},
|
||||||
resize: function(event, can, point, target) { target = target||event.target
|
resize: function(event, can, point, target) { target = target||event.target
|
||||||
|
if (event.type == html.CLICK) {
|
||||||
if (point.length == 1) {
|
if (point.length == 1) {
|
||||||
if (event.type == "click") {
|
|
||||||
can.current = {target: target, begin: can.core.List([target], function(item) { if (item.tagName == "g") { return }
|
can.current = {target: target, begin: can.core.List([target], function(item) { if (item.tagName == "g") { return }
|
||||||
return {
|
return {
|
||||||
x: item.Val("x"), y: item.Val("y"), width: item.Val("width"), height: item.Val("height"),
|
height: item.Val(chat.HEIGHT), width: item.Val(chat.WIDTH), x: item.Val("x"), y: item.Val("y"),
|
||||||
target: item, ship: can.core.List(item.Value("ship"), function(ship) {
|
target: item, ship: can.core.List(item.Value(ice.SHIP), function(ship) {
|
||||||
return ship.pid && (ship.target = can.page.Select(can, can.svg, "."+ship.pid)[0]) && ship
|
return ship.pid && (ship.target = can.page.Select(can, can.svg, ice.PT+ship.pid)[0]) && ship
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}), pos: can.onaction.Prepos(event, target)}
|
}), pos: can.onexport.cursor(event, can, target)}
|
||||||
}
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (event.type == "click") {
|
|
||||||
return can.point = [], delete(can.current)
|
return can.point = [], delete(can.current)
|
||||||
}
|
}
|
||||||
|
|
||||||
can.core.List(can.current.begin, function(item) { var figure = can.onfigure._get(can, item.target)
|
can.current && can.core.List(can.current.begin, function(item) { var figure = can.onfigure._get(can, item.target)
|
||||||
can.onaction.Resizes(event, item.target, item, point[0], point[1], can.current.pos)
|
can.onexport.resize(event, item.target, item, point[0], point[1], can.current.pos)
|
||||||
can.page.Select(can, can.svg, "."+item.target.Value("text"), function(text) {
|
can.page.Select(can, can.svg, ice.PT+item.target.Value(kit.MDB_TEXT), function(text) {
|
||||||
text.Value(figure.text(can, {}, item.target))
|
text.Value(can.onexport._text(can, item.target, figure, {}))
|
||||||
})
|
|
||||||
can.core.List(item.ship, function(ship) {
|
|
||||||
var p = can.onaction.Anchor(event, item.target, ship.anchor, {})
|
|
||||||
if (ship.which == 0) {
|
|
||||||
ship.target.Val("x1", p.x)
|
|
||||||
ship.target.Val("y1", p.y)
|
|
||||||
}
|
|
||||||
if (ship.which == 1) {
|
|
||||||
ship.target.Val("x2", p.x)
|
|
||||||
ship.target.Val("y2", p.y)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
|
can.onfigure._move(can, item.target, item.ship)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
run: function(event, can) { var target = event.target
|
run: function(event, can) { var target = event.target
|
||||||
event.type == "click" && target.Value("type") && can.run(event, [ctx.ACTION, "run", target.Value("zone"), target.Value("type"), target.Value("name"), target.Value("text")], function(msg) {
|
var figure = can.onfigure._get(can, target)
|
||||||
can.onappend.table(can, msg, function() {}, can.ui.display)
|
can.page.Appends(can, can.ui.profile, [{type: html.TABLE, list: [{th: [kit.MDB_KEY, kit.MDB_VALUE]}].concat(can.core.List([chat.HEIGHT, chat.WIDTH, "x", "y"], function(key) {
|
||||||
can.onappend.board(can, msg.Result(), can.ui.display)
|
return key = figure.data.size[key]||key, {td: [key, target.Value(key)], ondblclick: function(event) {
|
||||||
}, true)
|
can.onmotion.modify(can, event.target, function(event, value, old) {
|
||||||
|
target.Value(key, value), can.onfigure._move(can, target)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
})) }]), can.onmotion.hidden(can, can.ui.profile, true)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
Resizes: function(event, item, begin, p0, p1, pos) {
|
_auto: function(can, target) {
|
||||||
|
if (can.point.length > 0) { return }
|
||||||
|
if (target.tagName == kit.MDB_TEXT) { return }
|
||||||
|
|
||||||
|
var pos = can.onexport.cursor(event, can, event.target)
|
||||||
|
if (target == can.svg) {
|
||||||
|
if (pos == 5) {
|
||||||
|
can.Action(ice.MODE, "draw"), can.Action("shape", html.BLOCK)
|
||||||
|
can.page.Modify(can, target, {style: {cursor: "crosshair"}})
|
||||||
|
} else {
|
||||||
|
can.Action(ice.MODE, "resize")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
switch (pos) {
|
switch (pos) {
|
||||||
case 5:
|
case 5:
|
||||||
item.Value("x", begin.x + p1.x - p0.x)
|
case 9: can.Action(ice.MODE, "resize"); break
|
||||||
item.Value("y", begin.y + p1.y - p0.y)
|
default: can.Action(ice.MODE, "draw"), can.Action("shape", "line")
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (pos) {
|
|
||||||
case 1:
|
|
||||||
case 2:
|
|
||||||
case 3:
|
|
||||||
item.Value("y", begin.y + p1.y - p0.y)
|
|
||||||
item.Value("height", begin.height - p1.y + p0.y)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
switch (pos) {
|
|
||||||
case 1:
|
|
||||||
case 4:
|
|
||||||
case 7:
|
|
||||||
item.Value("x", begin.x + p1.x - p0.x)
|
|
||||||
item.Value("width", begin.width - p1.x + p0.x)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
switch (pos) {
|
|
||||||
case 3:
|
|
||||||
case 6:
|
|
||||||
case 9:
|
|
||||||
item.Value("width", begin.width + p1.x - p0.x)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
switch (pos) {
|
|
||||||
case 7:
|
|
||||||
case 8:
|
|
||||||
case 9:
|
|
||||||
item.Value("height", begin.height + p1.y - p0.y)
|
|
||||||
break
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
Anchor: function(event, target, pos, point) {
|
_figure: function(event, can, points, target) {
|
||||||
switch (pos) {
|
can.temp && can.page.Remove(can, can.temp) && delete(can.temp)
|
||||||
case 1:
|
can.temp = can.core.CallFunc([can.onaction._mode, can.Action(ice.MODE)], [event, can, points, target])
|
||||||
case 2:
|
can.point.length == 0 && delete(can.temp)
|
||||||
case 3:
|
|
||||||
point.y = target.Val("y")
|
|
||||||
break
|
|
||||||
case 4:
|
|
||||||
case 5:
|
|
||||||
case 6:
|
|
||||||
point.y = target.Val("y") + target.Val("height") / 2
|
|
||||||
break
|
|
||||||
case 7:
|
|
||||||
case 8:
|
|
||||||
case 9:
|
|
||||||
point.y = target.Val("y") + target.Val("height")
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (pos) {
|
|
||||||
case 1:
|
|
||||||
case 4:
|
|
||||||
case 7:
|
|
||||||
point.x = target.Val("x")
|
|
||||||
break
|
|
||||||
case 2:
|
|
||||||
case 5:
|
|
||||||
case 8:
|
|
||||||
point.x = target.Val("x") + target.Val("width") / 2
|
|
||||||
break
|
|
||||||
case 3:
|
|
||||||
case 6:
|
|
||||||
case 9:
|
|
||||||
point.x = target.Val("x") + target.Val("width")
|
|
||||||
break
|
|
||||||
}
|
|
||||||
return point
|
|
||||||
},
|
},
|
||||||
Prepos: function(event, item, p, q) {
|
|
||||||
var max = 20
|
|
||||||
p = p || item.getBoundingClientRect()
|
|
||||||
q = q || {x: event.clientX, y: event.clientY}
|
|
||||||
|
|
||||||
var pos = 5
|
onmouseover: function(event, can) { can.onexport._show(can, event.target) },
|
||||||
var y = (q.y - p.y) / p.height
|
onmousemove: function(event, can) { var point = can.onexport._point(event, can)
|
||||||
if (y < 0.2 && q.y - p.y < max) {
|
can.onexport.cursor(event, can, event.target)
|
||||||
pos -= 3
|
if (can.Action("go") == ice.AUTO) { can.onaction._auto(can, event.target) }
|
||||||
} else if (y > 0.8 && q.y - p.y - p.height > -max) {
|
can.onaction._figure(event, can, can.point.concat(point))
|
||||||
pos += 3
|
},
|
||||||
}
|
onclick: function(event, can) { var point = can.onexport._point(event, can)
|
||||||
var x = (q.x - p.x) / p.width
|
if (can.Action("go") == cli.RUN) { return can.onaction._mode.run(event, can) }
|
||||||
if (x < 0.2 && q.x - p.x < max) {
|
can.onaction._figure(event, can, can.point = can.point.concat(point))
|
||||||
pos -= 1
|
},
|
||||||
} else if (x > 0.8 && q.x - p.x - p.width > -max) {
|
ondblclick: function(event, can) {
|
||||||
pos += 1
|
if (can.Action("go") == cli.RUN) { return }
|
||||||
}
|
can.ondetail.label(event, can)
|
||||||
|
|
||||||
var cursor = [
|
|
||||||
"nw-resize", "n-resize", "ne-resize",
|
|
||||||
"w-resize", "move", "e-resize",
|
|
||||||
"sw-resize", "s-resize", "se-resize",
|
|
||||||
]
|
|
||||||
item.style.cursor = cursor[pos-1]
|
|
||||||
return pos
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑", "删除"],
|
Volcanos("ondetail", {help: "组件详情", list: [ice.COPY, html.LABEL, mdb.MODIFY, mdb.DELETE],
|
||||||
"复制": function(event, can) { can.onfigure._copy(event, can, event.target) },
|
copy: function(event, can) { can.onfigure._copy(event, can, event.target) },
|
||||||
"标签": function(event, can) { var target = event.target
|
label: function(event, can) { var target = event.target
|
||||||
var def = target.Value("text"); def && can.page.Select(can, can.svg, ice.PT+def, function(item) {
|
var def = target.Value("text"); def && can.page.Select(can, can.svg, ice.PT+def, function(item) {
|
||||||
def = item.Value("inner")
|
def = item.Value("inner")
|
||||||
})
|
})
|
||||||
@ -568,12 +376,12 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑",
|
|||||||
}
|
}
|
||||||
|
|
||||||
var figure = can.onfigure._get(can, target)
|
var figure = can.onfigure._get(can, target)
|
||||||
var data = figure.text(can, {inner: text}, target)
|
var data = can.onexport._text(can, target, figure, {inner: text})
|
||||||
var obj = can.onfigure._push(can, data, "text", target.Group())
|
var obj = can.onfigure._push(can, "text", data, target.Group())
|
||||||
target.Value("text", obj.Value("pid"))
|
target.Value("text", obj.Value("pid"))
|
||||||
}, def)
|
}, def)
|
||||||
},
|
},
|
||||||
"编辑": function(event, can) { var target = event.target
|
"modify": function(event, can) { var target = event.target
|
||||||
var figure = can.onfigure._get(can, target)
|
var figure = can.onfigure._get(can, target)
|
||||||
can.user.input(event, can, can.core.List(["x", "y"].concat(figure.data.copy||[]), function(item) {
|
can.user.input(event, can, can.core.List(["x", "y"].concat(figure.data.copy||[]), function(item) {
|
||||||
return {type: "text", name: item, value: target.Value(item)}
|
return {type: "text", name: item, value: target.Value(item)}
|
||||||
@ -583,8 +391,8 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑",
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
"删除": function(event, can) { if (event.target == can.svg) { return }
|
"delete": function(event, can) { if (event.target == can.svg) { return }
|
||||||
can.core.List(event.target.Value("ship"), function(value) {
|
can.core.List(event.target.Value(ice.SHIP), function(value) {
|
||||||
can.page.Select(can, can.svg, "."+value.pid, function(item) {
|
can.page.Select(can, can.svg, "."+value.pid, function(item) {
|
||||||
can.page.Remove(can, item)
|
can.page.Remove(can, item)
|
||||||
})
|
})
|
||||||
@ -595,18 +403,136 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑",
|
|||||||
can.page.Remove(can, event.target)
|
can.page.Remove(can, event.target)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
Volcanos("onexport", {help: "导出数据", list: ["分组", "图形", "坐标"],
|
Volcanos("onexport", {help: "导出数据", list: ["group", "figure", "pos"],
|
||||||
_show: function(can, target) { var figure = can.onfigure._get(can, target)
|
_show: function(can, target) { var figure = can.onfigure._get(can, target)
|
||||||
can.Status("图形", target.tagName + " " + (figure? figure.show(can, target): ""))
|
function show() { return can.onexport._size(can, target, figure)+ice.SP+can.onexport._position(can, target, figure) }
|
||||||
can.Status("分组", target.Groups()||can.group.Groups()||"svg")
|
can.Status("figure", target.tagName+ice.SP+(figure? (figure.show||show)(can, target, figure): ""))
|
||||||
|
can.Status("group", target.Groups()||can.group.Groups()||html.SVG)
|
||||||
},
|
},
|
||||||
|
_size: function(can, target, figure) { var size = figure.data.size||{}
|
||||||
|
return "<("+target.Val(size[chat.HEIGHT]||chat.HEIGHT)+ice.FS+target.Val(size[chat.WIDTH]||chat.WIDTH)+")"
|
||||||
|
},
|
||||||
|
_position: function(can, target, figure) { var size = figure.data.size||{}
|
||||||
|
return "@("+target.Val(size["x"]||"x")+ice.FS+target.Val(size["y"]||"y")+")"
|
||||||
|
},
|
||||||
|
_text: function(can, target, figure, data) { var size = figure.data.size||{}
|
||||||
|
if (figure.text) { return figure.text(can, data, target) }
|
||||||
|
return data.x = target.Val(size["x"]||"x"), data.y = target.Val(size["y"]||"y"), data
|
||||||
|
},
|
||||||
|
_point: function(event, can) {
|
||||||
|
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"))
|
||||||
|
return can.Status("pos", point.x+ice.FS+point.y), point
|
||||||
|
},
|
||||||
|
|
||||||
content: function(can, svg) {
|
content: function(can, svg) {
|
||||||
return ['<svg vertion="1.1" xmlns="https://www.w3.org/2000/svg" text-anchor="middle" dominant-baseline="middle"'].concat(
|
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", "count", "grid",
|
svg? can.core.List([chat.HEIGHT, chat.WIDTH, kit.MDB_COUNT, "grid", html.STROKE_WIDTH, html.STROKE, html.FILL, html.FONT_SIZE], function(item) {
|
||||||
"stroke-width", "stroke", "fill", "font-size",
|
return svg.Value(item)? ice.SP + item + '="' + svg.Value(item) + '"': ""
|
||||||
], function(item) {
|
}): [" height="+((can.Conf(chat.HEIGHT)||450)-50)+" width="+(can.Conf(chat.WIDTH)||600)]).concat(['>', svg? svg.innerHTML: "", "</svg>"]).join("")
|
||||||
return svg.Value(item)? ' ' + item + '="' + svg.Value(item) + '"': ""
|
},
|
||||||
}): [" width="+(can.Conf(chat.WIDTH)||600)+" height="+((can.Conf(chat.HEIGHT)||440)-40)]).concat(['>', svg? svg.innerHTML: "", "</svg>"]).join("")
|
cursor: function(event, can, item, show) {
|
||||||
|
var p = item.getBoundingClientRect()
|
||||||
|
var q = {x: event.clientX, y: event.clientY}
|
||||||
|
|
||||||
|
var pos = 5, margin = 20
|
||||||
|
var y = (q.y-p.y)/p.height
|
||||||
|
if (y < 0.2 && q.y-p.y < margin) {
|
||||||
|
pos -= 3
|
||||||
|
} else if (y > 0.8 && q.y-p.y-p.height > -margin) {
|
||||||
|
pos += 3
|
||||||
|
}
|
||||||
|
var x = (q.x-p.x)/p.width
|
||||||
|
if (x < 0.2 && q.x-p.x < margin) {
|
||||||
|
pos -= 1
|
||||||
|
} else if (x > 0.8 && q.x-p.x- p.width > -margin) {
|
||||||
|
pos += 1
|
||||||
|
}
|
||||||
|
|
||||||
|
return (show||can.svg).style.cursor = [
|
||||||
|
"nw-resize", "n-resize", "ne-resize",
|
||||||
|
"w-resize", "move", "e-resize",
|
||||||
|
"sw-resize", "s-resize", "se-resize",
|
||||||
|
][pos-1], pos
|
||||||
|
},
|
||||||
|
anchor: function(target, pos, point) {
|
||||||
|
switch (pos) {
|
||||||
|
case 1:
|
||||||
|
case 2:
|
||||||
|
case 3:
|
||||||
|
point.y = target.Val("y")
|
||||||
|
break
|
||||||
|
case 4:
|
||||||
|
case 5:
|
||||||
|
case 6:
|
||||||
|
point.y = target.Val("y") + target.Val(chat.HEIGHT) / 2
|
||||||
|
break
|
||||||
|
case 7:
|
||||||
|
case 8:
|
||||||
|
case 9:
|
||||||
|
point.y = target.Val("y") + target.Val(chat.HEIGHT)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (pos) {
|
||||||
|
case 1:
|
||||||
|
case 4:
|
||||||
|
case 7:
|
||||||
|
point.x = target.Val("x")
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
case 5:
|
||||||
|
case 8:
|
||||||
|
point.x = target.Val("x") + target.Val(chat.WIDTH) / 2
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
case 6:
|
||||||
|
case 9:
|
||||||
|
point.x = target.Val("x") + target.Val(chat.WIDTH)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
return point
|
||||||
|
},
|
||||||
|
resize: function(event, item, begin, p0, p1, pos) {
|
||||||
|
switch (pos) {
|
||||||
|
case 5:
|
||||||
|
item.Value("x", begin.x + p1.x - p0.x)
|
||||||
|
item.Value("y", begin.y + p1.y - p0.y)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (pos) {
|
||||||
|
case 1:
|
||||||
|
case 2:
|
||||||
|
case 3:
|
||||||
|
item.Value("y", begin.y + p1.y - p0.y)
|
||||||
|
item.Value(chat.HEIGHT, begin.height - p1.y + p0.y)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
switch (pos) {
|
||||||
|
case 1:
|
||||||
|
case 4:
|
||||||
|
case 7:
|
||||||
|
item.Value("x", begin.x + p1.x - p0.x)
|
||||||
|
item.Value(chat.WIDTH, begin.width - p1.x + p0.x)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
switch (pos) {
|
||||||
|
case 3:
|
||||||
|
case 6:
|
||||||
|
case 9:
|
||||||
|
item.Value(chat.WIDTH, begin.width + p1.x - p0.x)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
switch (pos) {
|
||||||
|
case 7:
|
||||||
|
case 8:
|
||||||
|
case 9:
|
||||||
|
item.Value(chat.HEIGHT, begin.height + p1.y - p0.y)
|
||||||
|
break
|
||||||
|
}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -167,6 +167,7 @@ Volcanos("onaction", {help: "交互操作", list: [
|
|||||||
},
|
},
|
||||||
|
|
||||||
"参数": function(event, can) { can.onmotion.toggle(can, can._action) },
|
"参数": function(event, can) { can.onmotion.toggle(can, can._action) },
|
||||||
|
actions: function(event, can) { can.onmotion.toggle(can, can._action) },
|
||||||
clear: function(event, can, name) { can.onmotion.clear(can, can._output) },
|
clear: function(event, can, name) { can.onmotion.clear(can, can._output) },
|
||||||
close: function(event, can) { can.page.Remove(can, can._target) },
|
close: function(event, can) { can.page.Remove(can, can._target) },
|
||||||
upload: function(event, can) { can.user.upload(event, can) },
|
upload: function(event, can) { can.user.upload(event, can) },
|
||||||
|
|||||||
@ -33,7 +33,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
|
|||||||
var c = color[index%color.length]; pie(p[0], p[1], r, begin, span, c, function(event) {
|
var c = color[index%color.length]; pie(p[0], p[1], r, begin, span, c, function(event) {
|
||||||
can.onmotion.clear(can, can.svg), can.onimport._draw(can, msg, field, x, y, r, margin, index)
|
can.onmotion.clear(can, can.svg), can.onimport._draw(can, msg, field, x, y, r, margin, index)
|
||||||
}), begin += span, msg.Push("color", '<span style="background-color:'+c+'"> </span>')
|
}), begin += span, msg.Push("color", '<span style="background-color:'+c+'"> </span>')
|
||||||
msg.Push("weight", parseInt(parseInt(value[field])*10000/total)/100)
|
msg.Push("weight", parseInt(parseInt(value[field])*10000/total)/100+"%")
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@ -9,6 +9,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
|
|||||||
|
|
||||||
can.size = 30, can.margin = 30
|
can.size = 30, can.margin = 30
|
||||||
can.require(["/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw/path.js"], function() {
|
can.require(["/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw/path.js"], function() {
|
||||||
|
can.page.ClassList.add(can, can._fields, "draw")
|
||||||
can.onimport._show(can, msg), can.onmotion.hidden(can, can.ui.project)
|
can.onimport._show(can, msg), can.onmotion.hidden(can, can.ui.project)
|
||||||
var p = can.Action("view", can.sup.view||can.Action("view"))
|
var p = can.Action("view", can.sup.view||can.Action("view"))
|
||||||
can.onaction[p](event, can, p)
|
can.onaction[p](event, can, p)
|
||||||
|
|||||||
@ -8,6 +8,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
|
|||||||
can.Action("speed", parseInt(msg.Option("speed")||"100"))
|
can.Action("speed", parseInt(msg.Option("speed")||"100"))
|
||||||
|
|
||||||
can.require(["/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw/path.js"], function() {
|
can.require(["/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw/path.js"], function() {
|
||||||
|
can.page.ClassList.add(can, can._fields, "draw")
|
||||||
can.onimport._show(can, msg), can.onmotion.hidden(can, can.ui.project)
|
can.onimport._show(can, msg), can.onmotion.hidden(can, can.ui.project)
|
||||||
can.onaction[can.Action("view")](event, can)
|
can.onaction[can.Action("view")](event, can)
|
||||||
})
|
})
|
||||||
|
|||||||
13
proto.js
13
proto.js
@ -22,6 +22,9 @@ var ice = {
|
|||||||
POD: "pod", CTX: "ctx", CMD: "cmd", ARG: "arg", OPT: "opt",
|
POD: "pod", CTX: "ctx", CMD: "cmd", ARG: "arg", OPT: "opt",
|
||||||
|
|
||||||
TRUE: "true",
|
TRUE: "true",
|
||||||
|
SUCCESS: "success",
|
||||||
|
FAILURE: "failure",
|
||||||
|
PROCESS: "process",
|
||||||
|
|
||||||
MSG_USERNAME: "user.name",
|
MSG_USERNAME: "user.name",
|
||||||
MSG_USERNICK: "user.nick",
|
MSG_USERNICK: "user.nick",
|
||||||
@ -46,6 +49,11 @@ var ice = {
|
|||||||
PROCESS_AGAIN: "_again",
|
PROCESS_AGAIN: "_again",
|
||||||
|
|
||||||
AUTO: "auto",
|
AUTO: "auto",
|
||||||
|
SHOW: "show",
|
||||||
|
HIDE: "hide",
|
||||||
|
COPY: "copy",
|
||||||
|
SHIP: "ship",
|
||||||
|
MODE: "mode",
|
||||||
}
|
}
|
||||||
|
|
||||||
var ctx = {
|
var ctx = {
|
||||||
@ -139,6 +147,11 @@ var html = {
|
|||||||
|
|
||||||
FORM: "form", FILE: "file",
|
FORM: "form", FILE: "file",
|
||||||
LIST: "list", ITEM: "item", MENU: "menu",
|
LIST: "list", ITEM: "item", MENU: "menu",
|
||||||
|
SVG: "svg",
|
||||||
|
CLASS: "class",
|
||||||
|
CLICK: "click",
|
||||||
|
|
||||||
|
STROKE_WIDTH: "stroke-width", STROKE: "stroke", FILL: "fill", FONT_SIZE: "font-size", MONOSPACE: "monospace",
|
||||||
}
|
}
|
||||||
var lang = {
|
var lang = {
|
||||||
STRING: "string", OBJECT: "object", FUNCTION: "function",
|
STRING: "string", OBJECT: "object", FUNCTION: "function",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user