liubin/ContextOS
1
0
Fork 0
forked from x/ContextOS
Code Pull Requests Activity

opt Canvas.example.js

Browse Source
This commit is contained in:
shaoying 2019-07-08 09:16:31 +08:00
parent b6c3c38bd3
commit e8abca5015
7 changed files with 642 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/contexts/cli/cli.go
View File

@ -668,7 +668,7 @@ var Index = &ctx.Context{Name: "cli", Help: "管理中心",
m.Cmd("cli.version", "create")
if len(arg) > 0 && arg[0] == "self" {
if m.Cmdy("cli.system", "go", "install", m.Cmdx("nfs.path", m.Conf("compile", "bench"))); m.Result(0) == "" {
m.Echo("version %v ", version.self)
m.Echo("%v: %v ", version.host, version.self)
m.Cmdy("cli.quit", 1)
}
return

2
src/contexts/cli/version.go
View File

@ -4,5 +4,5 @@ var version = struct {
host string
self int
}{
"2019-07-05 23:09:46", "com.mac", 42,
"2019-07-07 16:45:43", "com.mac", 55,
}

74
src/contexts/nfs/nfs.go
View File

@ -3,6 +3,7 @@ package nfs
import (
"contexts/ctx"
"crypto/md5"
"math/rand"
"toolkit"
"crypto/sha1"
@ -1390,46 +1391,41 @@ var Index = &ctx.Context{Name: "nfs", Help: "存储中心",
}},
"draw": &ctx.Command{Name: "draw", Help: "", Hand: func(m *ctx.Message, c *ctx.Context, key string, arg ...string) (e error) {
m.Add("append", "data", 10)
m.Add("append", "data", 40)
m.Add("append", "data", 30)
m.Add("append", "data", 20)
if len(arg) == 0 {
m.Cmdy("nfs.dir", "src", "filename", "line", "size", "dir_deep", "dir_type", "file", "dir_sort", "line", "int_r")
return
}
m.Add("append", "seed", 30)
m.Add("append", "seed", 20)
m.Add("append", "seed", 30)
m.Add("append", "seed", 40)
return
for len(arg) > 0 {
switch arg[0] {
case "trend":
m.Add("append", "type", arg[0])
m.Add("append", "meta", kit.Formats(arg[1:]))
arg = arg[:0]
case "begin":
m.Add("append", "type", arg[0])
m.Add("append", "meta", "{}")
arg = arg[1:]
case "circle":
m.Add("append", "type", arg[0])
m.Add("append", "meta", kit.Format(map[string]string{
"x": arg[1], "y": arg[2], "r": arg[3],
}))
arg = arg[4:]
case "stroke":
m.Add("append", "type", arg[0])
m.Add("append", "meta", kit.Format(map[string]string{
"width": arg[1],
"color": arg[2],
}))
arg = arg[3:]
default:
arg = arg[1:]
}
m.Append("text", m.Time())
m.Append("style", map[int]string{
0: "black",
1: "red",
2: "green",
3: "yellow",
4: "blue",
5: "purple",
6: "cyan",
7: "white",
}[rand.Intn(8)])
switch arg[2] {
case "drawText":
x, y := rand.Intn(400), rand.Intn(300)
m.Append("ps", kit.Format([]interface{}{
map[string]int{"x": x, "y": y},
map[string]int{"x": x + 200, "y": y},
}))
case "drawRect":
x, y, l := rand.Intn(400), rand.Intn(300), rand.Intn(100)
m.Append("ps", kit.Format([]interface{}{
map[string]int{"x": x, "y": y},
map[string]int{"x": x + l + l, "y": y + l},
}))
case "drawCircle":
x, y, l := rand.Intn(400), rand.Intn(300), rand.Intn(100)
m.Append("ps", kit.Format([]interface{}{
map[string]int{"x": x, "y": y},
map[string]int{"x": x + l, "y": y},
}))
}
return
}},

12
src/contexts/ssh/ssh.go
View File

@ -232,16 +232,8 @@ var Index = &ctx.Context{Name: "ssh", Help: "集群中心",
"componet_tmpl": "componet", "componet_view": "Context", "componet_init": "",
"componet_type": "public", "componet_ctx": "nfs", "componet_cmd": "draw",
"componet_args": []interface{}{}, "inputs": []interface{}{
map[string]interface{}{"type": "text", "name": "type"},
map[string]interface{}{"type": "button", "value": "查看"},
},
"display": map[string]interface{}{"deal": "trend"},
},
map[string]interface{}{"componet_name": "draw", "componet_help": "绘图",
"componet_tmpl": "componet", "componet_view": "Context", "componet_init": "",
"componet_type": "public", "componet_ctx": "nfs", "componet_cmd": "dir",
"componet_args": []interface{}{"src", "dir_deep", "path", "line", "size", "dir_sort", "line", "int_r"}, "inputs": []interface{}{
map[string]interface{}{"type": "button", "value": "查看"},
map[string]interface{}{"type": "text", "name": "content", "view": "long"},
map[string]interface{}{"type": "button", "value": "画图"},
},
"display": map[string]interface{}{"deal": "trend"},
},

23
usr/librarys/example.css
View File

@ -15,6 +15,7 @@ fieldset {
legend {
margin-left:10px;
}
fieldset>form.option div {
margin-right:6px;
float:left;
@ -176,12 +177,34 @@ fieldset.item>div.output {
fieldset.item>div.output>canvas {
background-color:#8dd09e;
}
fieldset.item>div.output>div.action>button.trap {
background-color:lightblue;
border:2px blue solid;
}
fieldset.item>div.output>div.action>div.space {
width:10px;
display:inline-block;
}
fieldset.item>div.output>div.status>div {
float:left;
height:20px;
border:1px solid black;
}
fieldset.item>div.output>div.status>input.cmd {
float:left;
background-color:black;
color:lightgreen;;
font-size:16px;
width:250px;
}
.hidden {
display:none;
}
.normal {
}
.choice {
}
fieldset table {
font-size:14px;

705
usr/librarys/example.js
View File

@ -183,7 +183,21 @@ function Page(page) {
event.preventDefault()
return true
}
var his = target.History
var pos = target.Current
switch (event.key) {
case "p":
if (!his) { break }
pos = (pos-1+his.length+1) % (his.length+1)
target.value = pos < his.length? his[pos]: ""
target.Current = pos
break
case "n":
if (!his) { break }
pos = (pos+1) % (his.length+1)
target.value = pos < his.length? his[pos]: ""
target.Current = pos
break
case "a":
case "e":
case "f":
@ -388,6 +402,9 @@ function Page(page) {
// page.onscroll && page.onscroll(event, window, "scroll")
// }
document.body.onkeydown = function(event) {
if (page.localMap && page.localMap(event)) {
return
}
page.oncontrol && page.oncontrol(event, document.body, "control")
}
}
@ -704,22 +721,23 @@ function Plugin(page, pane, field) {
item == target && (index == list.length-1? plugin.Runs(event, cb): page.plugin == field && list[index+1].focus())
})
},
Runs: function(event, cb) {
page.footer.Pane.State("ncmd", kit.History.get("cmd").length)
var args = kit.Selector(option, ".args", function(item, index) {
return item.value
})
Run: function(event, args, cb) {
var show = true
setTimeout(function() {
show && page.ontoast(kit.Format(args||["running..."]), meta.name, -1)
}, 1000)
event.Plugin = plugin, field.Run(event, args, function(msg) {
show = false, page.ontoast("")
output.innerHTML = ""
plugin.ondaemon[display.deal||"table"](msg)
typeof cb == "function" && cb(msg)
plugin.ondaemon[display.deal||"table"](msg, cb)
})
},
Runs: function(event, cb) {
page.footer.Pane.State("ncmd", kit.History.get("cmd").length)
var args = kit.Selector(option, ".args", function(item, index) {
return item.value
})
this.Run(event, args, cb)
},
Delay: function(time, event, text) {
page.ontoast(text, "", -1)
setTimeout(function() {
@ -732,32 +750,16 @@ function Plugin(page, pane, field) {
output.innerHTML = ""
},
ondaemon: {
void: function(msg) {},
table: function(msg) {
table: function(msg, cb) {
output.innerHTML = ""
!display.hide_append && msg.append && kit.OrderTable(kit.AppendTable(kit.AppendChild(output, "table"), ctx.Table(msg), msg.append), exports[1], function(event, value, name, line) {
page.Sync("plugin_"+exports[0]).set(plugin.onexport[exports[2]||""](value, name, line))
});
(display.show_result || !msg.append) && msg.result && kit.OrderCode(kit.AppendChild(output, [{view: ["code", "div", msg.Results()]}]).first)
typeof cb == "function" && cb(msg)
},
trend: function(msg) {
var id = "canvas"+page.ID()
var width = output.clientWidth-40, height = 230, space = 10
var action = kit.AppendChild(output, [{view: ["action"]}]).last
var item = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {id: id, width: width+20, height: height+20}}]).last
var point = kit.AppendChild(output, [{text: ["point"]}]).last
canvas = item.getContext("2d")
cc = Canvas(canvas, width, height, space, msg).drawData()
for (var k in cc.button) {
kit.AppendChild(action, [{button: [k, cc.button[k]]}])
}
item.onclick = function(event) {
cc.pushPoint(point, event.offsetX-space, height-event.offsetY+space, event.clientX, event.clientY)
}
item.onmousemove = function(event) {
cc.movePoint(point, event.offsetX-space, height-event.offsetY+space, event.clientX, event.clientY)
}
trend: function(msg, cb) {
typeof cb == "function" && !cb(msg) || Canvas(plugin, output, output.clientWidth-40, 400, 10, msg)
},
point: function(msg) {
var id = "canvas"+page.ID()
@ -844,58 +846,191 @@ function Plugin(page, pane, field) {
plugin.init(page, pane, field, option, output)
return page[field.id] = pane[field.id] = plugin.Field = field, field.Plugin = plugin
}
function Canvas(canvas, width, height, space, msg) {
var type = "weight"
var shape = "drawLine"
var what = {
reset: function() {
canvas.resetTransform()
canvas.clearRect(0, 0, width+20*space, height+20*space)
},
drawAxies: function(space, style) {
this.reset()
canvas.setTransform(1, 0, 0, -1, space, height)
function Canvas(plugin, output, width, height, space, msg) {
var view = [], ps = [], point = [], index = 0, now = {}
var trap = false, label = false
var conf = {
font: "monospace", text: "hi", tool: "stroke", style: "black",
type: "trend", shape: "drawText", means: "drawPoint",
limits: {scale: 3, drawPoint: 1, drawPoly: 3},
axies: {style: "black", width: 2},
xlabel: {style: "red", width: 2, height: 5},
play: 500,
mpoint: 10,
}
var what = {
reset: function(x, y) {
canvas.resetTransform()
canvas.setTransform(1, 0, 0, -1, space+(x||0), height+space-(y||0))
return what
},
clear: function() {
var p0 = what.transform({x:-width, y:-height})
var p1 = what.transform({x:2*width, y:2*height})
canvas.clearRect(p0.x, p0.y, p1.x-p0.x, p1.y-p0.y)
return what
},
move: function(meta) {
var p0 = meta.ps[0] || {x:0, y:0}
var p1 = meta.ps[1] || now
canvas.save(), what.clear().drawLine(meta)
canvas.translate(p1.x-p0.x, p1.y-p0.y)
what.drawData().drawView()
meta.ps.length < 2 && canvas.restore()
},
scale: function(meta) {
var ps = meta.ps
var p0 = ps[0] || {x:0, y:0}
var p1 = ps[1] || now
var p2 = ps[2] || now
if (ps.length > 1) {
canvas.save(), what.clear()
what.drawLine({ps: [p0, {x: p1.x, y: p0.y}]})
what.drawLine({ps: [{x: p1.x, y: p0.y}, p1]})
what.drawLine({ps: [p0, {x: p2.x, y: p0.y}]})
what.drawLine({ps: [{x: p2.x, y: p0.y}, p2]})
canvas.scale((p2.x-p0.x)/(p1.x-p0.x), (p2.y-p0.y)/(p1.y-p0.y))
what.drawData().drawView()
meta.ps.length < 3 && canvas.restore()
}
},
rotate: function(meta) {
var p0 = meta.ps[0] || {x:0, y:0}
var p1 = meta.ps[1] || now
canvas.save(), what.clear().drawLine(meta)
canvas.rotate(Math.atan2(p1.y-p0.y, p1.x-p0.x))
what.drawData().drawView()
meta.ps.length < 2 && canvas.restore()
},
draw: function(meta) {
canvas.strokeStyle = meta.style || conf.style
canvas.fillStyle = meta.style || conf.style
canvas[meta.tool||conf.tool]()
return meta
},
drawText: function(meta) {
var p0 = meta.ps[0] || {x:0, y:0}
var p1 = meta.ps[1] || now
var t = meta.text||status.cmd.value||conf.text
canvas.save()
canvas.translate(p0.x, p0.y)
canvas.scale(1, -1)
canvas.rotate(-Math.atan2(p1.y-p0.y, p1.x-p0.x))
what.draw(meta)
canvas.font=kit.distance(p0.x, p0.y, p1.x, p1.y)/t.length*2+"px "+conf.font
canvas[(meta.tool||conf.tool)+"Text"](t, 0, 0)
canvas.restore()
return meta
},
drawPoint: function(meta) {
meta.ps.concat(now).forEach(function(p) {
canvas.save()
canvas.translate(p.x, p.y)
canvas.beginPath()
canvas.moveTo(-conf.mpoint, 0)
canvas.lineTo(conf.mpoint, 0)
canvas.moveTo(0, -conf.mpoint)
canvas.lineTo(0, conf.mpoint)
what.draw(meta)
canvas.restore()
})
return meta
},
drawLine: function(meta) {
var p0 = meta.ps[0] || {x:0, y:0}
var p1 = meta.ps[1] || now
canvas.save()
canvas.beginPath()
canvas.moveTo(-10, 0)
canvas.moveTo(p0.x, p0.y)
canvas.lineTo(p1.x, p1.y)
what.draw(meta)
canvas.restore()
return meta
},
drawPoly: function(meta) {
var ps = meta.ps
canvas.save()
canvas.beginPath()
canvas.moveTo(ps[0].x, ps[0].y)
for (var i = 1; i < ps.length; i++) {
canvas.lineTo(ps[i].x, ps[i].y)
}
ps.length < conf.limits.drawPoly && canvas.lineTo(now.x, now.y)
what.draw(meta)
canvas.restore()
return meta
},
drawRect: function(meta) {
var p0 = meta.ps[0] || {x:0, y:0}
var p1 = meta.ps[1] || now
canvas.save()
what.draw(meta)
canvas[(meta.tool||conf.tool)+"Rect"](p0.x, p0.y, p1.x-p0.x, p1.y-p0.y)
canvas.restore()
return meta
},
drawCircle: function(meta) {
var p0 = meta.ps[0] || {x:0, y:0}
var p1 = meta.ps[1] || now
canvas.save()
canvas.beginPath()
canvas.arc(p0.x, p0.y, kit.distance(p0.x, p0.y, p1.x, p1.y), 0, Math.PI*2, true)
what.draw(meta)
canvas.restore()
return meta
},
drawEllipse: function(meta) {
var p0 = meta.ps[0] || {x:0, y:0}
var p1 = meta.ps[1] || now
var r0 = Math.abs(p1.x-p0.x)
var r1 = Math.abs(p1.y-p0.y)
canvas.save()
canvas.beginPath()
canvas.translate(p0.x, p0.y)
r1 > r0? (canvas.scale(r0/r1, 1), r0 = r1): canvas.scale(1, r1/r0)
canvas.arc(0, 0, r0, 0, Math.PI*2, true)
what.draw(meta)
canvas.restore()
return meta
},
drawAxies: function(space, style) {
canvas.beginPath()
canvas.moveTo(-space, 0)
canvas.lineTo(width+space, 0)
canvas.moveTo(0, -10)
canvas.moveTo(0, -space)
canvas.lineTo(0, height+space)
canvas.strokeStyle = style||"gray"
canvas.lineWidth = 2
canvas.strokeStyle = conf.axies.style
canvas.lineWidth = conf.axies.width
canvas.stroke()
return this
return what
},
drawXLabel: function(step) {
canvas.beginPath()
for (var pos = step; pos < width; pos += step) {
canvas.moveTo(pos, 0)
canvas.lineTo(pos, -5)
canvas.lineTo(pos, -conf.xlabel.height)
}
canvas.strokeStyle = "red"
canvas.lineWidth = 2
canvas.strokeStyle = conf.xlabel.style
canvas.lineWidth = conf.xlabel.width
canvas.stroke()
return this
},
drawYGrid: function(step) {
canvas.beginPath()
for (var pos = step; pos < height; pos += step) {
canvas.moveTo(-5, pos)
canvas.lineTo(width, pos)
}
canvas.strokeStyle = "#999"
canvas.lineWidth = 1
canvas.stroke()
return this
return what
},
drawData: function() {
var col = msg.append.length
var row = msg[msg.append[0]].length
var step = width / (row - 1)
switch (type) {
switch (conf.type) {
case "trend":
this.drawAxies(10).drawXLabel(step)
what.drawAxies(10).drawXLabel(step)
canvas.beginPath()
msg.append.forEach(function(key) {
var max = 0
@ -916,8 +1051,7 @@ function Canvas(canvas, width, height, space, msg) {
break
case "weight":
this.reset()
what.reset(0, height/2)
var nline = 0
msg.append.forEach(function(key, index) {
!isNaN(parseInt(msg[key][0])) && nline++
@ -925,22 +1059,21 @@ function Canvas(canvas, width, height, space, msg) {
var space = width / (nline+1)
var order = 0
msg.append.forEach(function(key, index) {
msg.append.forEach(function(key, i) {
if (isNaN(parseInt(msg[key][0]))) {
return
}
order++
canvas.resetTransform()
canvas.setTransform(1, 0, 0, -1, space*order, height/2)
canvas.translate(space, 0)
var total = 0
msg[key].forEach(function(value, index, array) {
msg[key].forEach(function(value, i, array) {
total += parseInt(value)/1
})
var sum = 0
msg[key].forEach(function(value, index, array) {
msg[key].forEach(function(value, i, array) {
value = parseInt(parseInt(value)/1)
if ((value)/total < 0.01) {
return
@ -949,132 +1082,350 @@ function Canvas(canvas, width, height, space, msg) {
canvas.moveTo(0, 0)
var a = sum/total*Math.PI*2
var b = (sum+value)/total*Math.PI*2
kit.Log(a, b)
canvas.arc(0, 0, (space/2)-20, a, b, false)
canvas.closePath()
canvas.strokeStyle = "black"
canvas.lineWidth = 1
canvas.stroke()
if (i == index) {
canvas.fillStyle = "white"
canvas.fill()
} else {
canvas.strokeStyle = "black"
canvas.lineWidth = 1
canvas.stroke()
}
sum+=value
})
})
break
}
return this
return what
},
view: [],
drawView: function() {
var that = this
this.view.forEach(function(view) {
that[view.type](view.meta)
view.forEach(function(view) {
view.meta && what[view.type](view.meta)
})
return what
},
drawLabel: function() {
if (!label) { return what }
var p = now
var q = what.reverse(p)
var weight = 0
index = 0
canvas.save()
if (conf.type == "trend") {
index = parseInt(p.x/space)
canvas.moveTo(p.x, -10)
canvas.lineTo(p.x, height)
canvas.moveTo(-10, p.y)
canvas.lineTo(width, p.y)
} else {
var a = Math.atan2(p.y, p.x)
a < 0 && (a += Math.PI*2)
var pos = a/2/Math.PI
var total = 0
msg[msg.append[msg.append.length-1]].forEach(function(value) {
total += parseInt(value)
})
var sum = 0
msg[msg.append[msg.append.length-1]].forEach(function(value, i) {
sum += parseInt(value), sum / total < pos && (index = i+1)
index == i && (weight = parseInt(value/total*100))
})
canvas.moveTo(0, 0)
canvas.lineTo(p.x, p.y)
canvas.lineTo(p.x+10, p.y)
}
canvas.strokeStyle = conf.style
canvas.stroke()
canvas.resetTransform()
canvas.font="16px monospace"
canvas.fillStyle = conf.style
weight && canvas.fillText("weight: "+weight+"%", q.x+10, q.y+10+i*20)
canvas.fillText("index: "+index, q.x+10, q.y+30+i*20)
msg.append.forEach(function(key, i, n) {
msg[key][index] && canvas.fillText(key+": "+msg[key][index], q.x+10, q.y+50+i*20)
})
canvas.restore()
return what
},
drawShape: function() {
point.length > 0 && (what[conf.shape]({ps: point}), what[conf.means]({ps: point, tool: "stroke", style: "red"}))
return what
},
refresh: function() {
return what.clear().drawData().drawView().drawLabel().drawShape()
},
cancel: function() {
point = [], what.refresh()
return what
},
play: function() {
function cb() {
view[i] && what[view[i].type](view[i].meta) && (t = kit.Delay(view[i].type == "drawPoint"? 10: conf.play, cb))
i++
status.nshape.innerText = i+"/"+view.length
}
var i = 0
what.clear().drawData()
kit.Delay(10, cb)
return what
},
back: function() {
view.pop(), status.nshape.innerText = view.length
return what.refresh()
},
push: function(item) {
item.meta && item.meta.ps < (conf.limits[item.type]||2) && ps.push(item)
status.nshape.innerText = view.push(item)
return what
},
wait: function() {
status.cmd.focus()
return what
},
trap: function(value, event) {
event.target.className = (trap = !trap)? "trap": "normal"
page.localMap = trap? what.input: undefined
},
label: function(value, event) {
event.target.className = (label = !label)? "trap": "normal"
},
movePoint: function(p) {
now = p, status.xy.innerHTML = p.x+","+p.y;
(point.length > 0 || ps.length > 0 || label) && what.refresh()
},
pushPoint: function(p) {
if (ps.length > 0) {
ps[0].meta.ps.push(p) > 1 && ps.pop(), what.refresh()
return
}
point.push(p) >= (conf.limits[conf.shape]||2) && what.push({type: conf.shape,
meta: what[conf.shape]({ps: point, text: status.cmd.value||conf.text, tool: conf.tool, style: conf.style}),
}) && (point = [])
conf.means == "drawPoint" && what.push({type: conf.means, meta: what[conf.means]({ps: [p], tool: "stroke", style: "red"})})
},
transform: function(p) {
var t = canvas.getTransform()
return {
x: (p.x-t.c/t.d*p.y+t.c*t.f/t.d-t.e)/(t.a-t.c*t.b/t.d),
y: (p.y-t.b/t.a*p.x+t.b*t.e/t.a-t.f)/(t.d-t.b*t.c/t.a),
}
},
reverse: function(p) {
var t = canvas.getTransform()
return {
x: t.a*p.x+t.c*p.y+t.e,
y: t.b*p.x+t.d*p.y+t.f,
}
},
check: function() {
view.forEach(function(item, index, view) {
item && item.send && plugin.Run(window.event||{}, item.send.concat(["type", item.type]), function(msg) {
msg.text && msg.text[0] && (item.meta.text = msg.text[0])
msg.style && msg.style[0] && (item.meta.style = msg.style[0])
msg.ps && msg.ps[0] && (item.meta.ps = JSON.parse(msg.ps[0]))
what.refresh()
})
index == view.length -1 && kit.Delay(1000, what.check)
})
},
drawPoint: function(meta) {
canvas.save()
canvas.translate(meta.x0, meta.y0)
canvas.beginPath()
canvas.moveTo(-10, 0)
canvas.lineTo(10, 0)
canvas.moveTo(0, -10)
canvas.lineTo(0, 10)
canvas.strokeStyle = meta.style
canvas.stroke()
canvas.restore()
return meta
},
drawLine: function(meta) {
canvas.save()
canvas.beginPath()
canvas.moveTo(meta.x0, meta.y0)
canvas.lineTo(meta.x1, meta.y1)
canvas.strokeStyle = meta.style
canvas.stroke()
canvas.restore()
return meta
},
drawRect: function(meta) {
canvas.save()
canvas.strokeStyle = meta.style
canvas.strokeRect(meta.x0, meta.y0, meta.x1-meta.x0, meta.y1-meta.y0)
canvas.restore()
return meta
},
drawCircle: function(meta) {
var r = Math.sqrt((meta.x1-meta.x0)*(meta.x1-meta.x0)+(meta.y1-meta.y0)*(meta.y1-meta.y0))
canvas.save()
canvas.beginPath()
canvas.arc(meta.x0, meta.y0, r, 0, Math.PI*2, true)
canvas.strokeStyle = meta.style
canvas.stroke()
canvas.restore()
return meta
},
drawEllipse: function(meta) {
var r0 = Math.abs(meta.x1-meta.x0)
var r1 = Math.abs(meta.y1-meta.y0)
parse: function(txt) {
var meta = {}, cmds = [], rest = -1, send = []
txt.trim().split(" ").forEach(function(item) {
switch (item) {
case "stroke":
case "fill":
meta.tool = item
break
case "black":
case "white":
case "red":
case "yellow":
case "green":
case "cyan":
case "blue":
case "purple":
meta.style = item
break
case "cmds":
rest = cmds.length
default:
cmds.push(item)
}
}), rest != -1 && (send = cmds.slice(rest+1), cmds = cmds.slice(0, rest))
canvas.save()
canvas.beginPath()
canvas.translate(meta.x0, meta.y0)
var cmd = {
"t": "drawText",
"l": "drawLine",
"p": "drawPoly",
"r": "drawRect",
"c": "drawCircle",
"e": "drawEllipse",
}[cmds[0]] || cmds[0]
cmds = cmds.slice(1)
if (r1 > r0) {
canvas.scale(1, r1/r0)
canvas.arc(0, 0, r1, 0, Math.PI*2, true)
//
// canvas.scale((meta.x1-meta.x0)/(meta.y1-meta.y0), (meta.y1-meta.y0)/(meta.x1-meta.x0))
// canvas.arc(0, 0, Math.sqrt((meta.y1-meta.y0)*(meta.x1-meta.x0)), 0, Math.PI*2, true)
} else {
canvas.scale(r0/r1, 1)
canvas.arc(0, 0, r0, 0, Math.PI*2, true)
var args = []
switch (cmd) {
case "send":
plugin.Run(window.event, cmds, function(msg) {
kit.Log(msg)
})
return
default:
meta.ps = []
for (var i = 0; i < cmds.length; i+=2) {
var x = parseInt(cmds[i])
var y = parseInt(cmds[i+1])
!isNaN(x) && !isNaN(y) && meta.ps.push({x: x, y: y}) || (args.push(cmds[i]), i--)
}
}
meta.args = args
switch (cmd) {
case "drawText":
meta.text = args.join(" "), delete(meta.args)
case "drawLine":
case "drawPoly":
case "drawRect":
case "drawCircle":
case "drawEllipse":
what.push({type: cmd, meta: what[cmd](meta), send:send})
}
canvas.strokeStyle = meta.style
canvas.stroke()
canvas.restore()
return meta
return (what[cmd] || function() {
return what
})(meta)
},
shape: "drawLine",
movePoint: function(point, x, y) {
if (this.begin) {
this.drawData()
this.drawView()
this[shape]({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y})
// this.drawRect({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y, style: "red"})
}
point.innerHTML = x+","+y
},
pushPoint: function(point, x, y) {
if (this.begin) {
this.view.push({type: "drawPoint", meta: this["drawPoint"]({x0: x, y0: y, style: "red"})})
this.view.push({type: shape, meta: this[shape]({x0: this.begin.x, y0: this.begin.y, x1: x, y1: y})})
delete(this.begin)
} else {
this.view.push({type: "drawPoint", meta: this["drawPoint"]({x0: x, y0: y, style: "red"})})
this.begin = {x: x, y:y}
input: function(event) {
switch (event.key) {
default:
var map = what.trans[event.key]
map && action[map[0]] && (action[map[0]].value = map[1])
map && what.trans[map[0]] && (map = what.trans[map[1]]) && (conf[map[0]] && (conf[map[0]] = map[1]) || what[map[0]] && what[map[0]]())
break
}
},
button: {
"trend": function() {
type = "trend"
what.drawData()
},
"weight": function() {
type = "weight"
what.drawData()
},
"line": function() {
shape = "drawLine"
},
"rect": function() {
shape = "drawRect"
},
"circle": function() {
shape = "drawCircle"
},
"ellipse": function() {
shape = "drawEllipse"
},
trans: {
"折线图": ["type", "trend"],
"饼状图": ["type", "weight"],
"移动": ["shape", "move"],
"旋转": ["shape", "rotate"],
"缩放": ["shape", "scale"],
"文本": ["shape", "drawText"],
"直线": ["shape", "drawLine"],
"折线": ["shape", "drawPoly"],
"矩形": ["shape", "drawRect"],
"圆形": ["shape", "drawCircle"],
"椭圆": ["shape", "drawEllipse"],
"辅助点": ["means", "drawPoint"],
"辅助线": ["means", "drawRect"],
"画笔": ["tool", "stroke"],
"画刷": ["tool", "fill"],
"黑色": ["style", "black"],
"红色": ["style", "red"],
"绿色": ["style", "green"],
"黄色": ["style", "yellow"],
"蓝色": ["style", "blue"],
"紫色": ["style", "purple"],
"青色": ["style", "cyan"],
"白色": ["style", "white"],
"随机色": ["style", "random"],
"默认色": ["style", "default"],
"清屏": ["clear"],
"刷新": ["refresh"],
"取消": ["cancel"],
"播放": ["play"],
"回退": ["back"],
"输入": ["wait"],
"标签": ["label"],
"快捷键": ["trap"],
"x": ["折线图", "折线图"],
"y": ["折线图", "饼状图"],
"a": ["移动", "旋转"],
"m": ["移动", "移动"],
"z": ["移动", "缩放"],
"t": ["文本", "文本"],
"l": ["文本", "直线"],
"v": ["文本", "折线"],
"r": ["文本", "矩形"],
"c": ["文本", "圆形"],
"e": ["文本", "椭圆"],
"s": ["画笔", "画笔"],
"f": ["画笔", "画刷"],
"0": ["黑色", "黑色"],
"1": ["黑色", "红色"],
"2": ["黑色", "绿色"],
"3": ["黑色", "黄色"],
"4": ["黑色", "蓝色"],
"5": ["黑色", "紫色"],
"6": ["黑色", "青色"],
"7": ["黑色", "白色"],
"8": ["黑色", "随机色"],
"9": ["黑色", "默认色"],
"j": ["刷新", "刷新"],
"g": ["播放", "播放"],
"b": ["回退", "回退"],
"q": ["清空", "清空"],
"Escape": ["取消", "取消"],
" ": ["输入", "输入"],
},
}
return what
var action = kit.AppendAction(kit.AppendChild(output, [{view: ["action"]}]).last, [
["折线图", "饼状图"],
["移动", "旋转", "缩放"],
["文本", "直线", "折线", "矩形", "圆形", "椭圆"],
["辅助点", "辅助线"],
["画笔", "画刷"],
["黑色", "白色", "红色", "黄色", "绿色", "青色", "蓝色", "紫色"],
"", "清屏", "刷新", "播放", "回退",
"", "标签", "快捷键",
], function(value, event) {
var map = what.trans[value]
conf[map[0]] && (conf[map[0]] = map[1]) || what[map[0]] && what[map[0]](value, event)
})
var canvas = kit.AppendChild(output, [{view: ["draw", "canvas"], data: {width: width+20, height: height+20,
onclick: function(event) {
what.pushPoint(what.transform({x: event.offsetX, y: event.offsetY}), event.clientX, event.clientY)
}, onmousemove: function(event) {
what.movePoint(what.transform({x: event.offsetX, y: event.offsetY}), event.clientX, event.clientY)
},
}}]).last.getContext("2d")
var status = kit.AppendStatus(kit.AppendChild(output, [{view: ["status"]}]).last, [{name: "nshape"}, {"className": "cmd", style: {width: (output.clientWidth - 100)+"px"}, data: {autocomplete: "off"}, input: ["cmd", function(event) {
var target = event.target
event.type == "keyup" && event.key == "Enter" && what.parse(target.value) && (!target.History && (target.History=[]),
target.History.push(target.value), target.Current=target.History.length, target.value = "")
event.type == "keyup" && page.oninput(event), event.stopPropagation()
}]}, {name: "xy"}], function(value, name, event) {
})
return what.reset().refresh()
}

62
usr/librarys/toolkit.js
View File

@ -29,6 +29,7 @@ kit = toolkit = {
return args
},
Delay: function(time, cb) {
return setTimeout(cb, time)
},
ModifyView: function(which, args) {
@ -114,11 +115,13 @@ kit = toolkit = {
return elm
}
// 基本属性: name value inner style
// 基本属性: name value inner
// 基本样式: style className
// 基本事件: dataset click
//
// dataset click
// button input label img
// select
// 按键: button select
// 输入: input password
// 输出: label img
//
// 树状结构: tree fork leaf
// 普通视图: view text code
@ -145,9 +148,6 @@ kit = toolkit = {
if (child.inner) {
child.data["innerHTML"] = child.inner
}
if (child.className) {
child.data["className"] = child.className
}
if (typeof(child.style) == "object") {
var str = []
for (var k in child.style) {
@ -158,6 +158,9 @@ kit = toolkit = {
}
child.data["style"] = str.join("")
}
if (child.className) {
child.data["className"] = child.className
}
if (child.dataset) {
child.data["dataset"] = child.dataset
}
@ -167,21 +170,27 @@ kit = toolkit = {
if (child.button) {
child.type = "button"
child.data["onclick"] = child.button[1]
child.data["onclick"] = function(event) {
child.button[1](child.button[0], event)
}
child.data["innerText"] = child.button[0]
child.name = child.name || child.button[0]
} else if (child.select) {
child.type = "select"
child.name = child.select[0][0]
child.list = child.select[0].map(function(value) {
return {type: "option", value: value, inner: value}
})
child.data["onchange"] = child.select[1]
child.data["onchange"] = function(event) {
child.select[1](event.target.value, event)
}
} else if (child.input) {
child.type = "input"
child.data["onkeyup"] = child.input[1]
child.data["name"] = child.input[0]
child.data["onkeyup"] = child.input[1]
child.data["onkeydown"] = child.input[1]
child.name = child.name || child.input[0]
} else if (child.password) {
@ -289,6 +298,36 @@ kit = toolkit = {
return parent.insertBefore(elm, position || parent.firstElementChild)
},
AppendAction: function(parent, list, cb) {
var result = []
list.forEach(function(item, index) {
if (item == "") {
result.push({view: ["space"]})
} else if (typeof item == "string") {
result.push({button: [item, cb]})
} else if (item.forEach) {
result.push({select: [item, cb]})
} else {
result.push(item)
}
})
return kit.AppendChild(parent, result)
},
AppendStatus: function(parent, list, cb) {
var result = []
list.forEach(function(item, index) {
if (item == "") {
result.push({view: ["space"]})
} else if (typeof item == "string") {
result.push({button: [item, cb]})
} else if (item.forEach) {
result.push({select: [item, cb]})
} else {
result.push(item)
}
})
return kit.AppendChild(parent, result)
},
AppendTable: function(table, data, fields, cb) {
if (!data || !fields) {
return
@ -648,5 +687,8 @@ kit = toolkit = {
}
})
},
distance: function(x0, y0, x1, y1) {
return Math.sqrt(Math.pow(x1-x0, 2)+Math.pow(y1-y0, 2))
},
}