diff --git a/frame.js b/frame.js index 8b29c14b..5a0f048d 100644 --- a/frame.js +++ b/frame.js @@ -112,6 +112,7 @@ var can = Volcanos("chat", { var option = field.querySelector("form.option"); var action = field.querySelector("div.action"); var output = field.querySelector("div.output"); + var status = field.querySelector("div.status"); var history = [] @@ -190,7 +191,7 @@ var can = Volcanos("chat", { }) }, Show: function(type, msg, cb) {plugin.msg = msg, msg._plugin_name = name; - return plugin._output = plugin[type] = can.Output(plugin, feature, type, msg, cb, output, option) + return plugin._output = plugin[type] = can.Output(plugin, feature, type, msg, cb, output, action, option, status) }, Clone: function(event, cb) {meta.nick = meta.name + can.ID() meta.args = can.page.Select(can, plugin.option, ".args", function(item) {return item.value}) @@ -199,6 +200,31 @@ var can = Volcanos("chat", { }, Delete: function(event) {field.parentNode.removeChild(field)}, }, Config.libs.concat(["plugin/"+(meta.type||feature.active||"state")]), function(plugin) {plugin.Conf(meta); + var resize = false, last, size, change; + can.page.Select(can, field, "div.border-bottom", function(item) { + item.onmousedown = function(event) {resize = !resize; + can.escape = function(event) {resize = false + plugin._output.onaction && plugin._output.onaction.resize && plugin._output.onaction.resize(event, plugin._output, change, "y") + } + can.resize = plugin.resize = function(event) {change = event.clientY - last; + if (resize) {field.style.height = size + change + "px"} + } + size = field.offsetHeight; + last = event.clientY; + } + item.onmousemove = function(event) {plugin.resize && plugin.resize(event)} + }) + can.page.Select(can, field, "div.border-right", function(item) { + item.onmousedown = function(event) {resize = !resize; + can.escape = function(event) {resize = false} + can.resize = plugin.resize = function(event) { + if (resize) {field.style.width = size + event.clientX - last + "px"} + } + size = field.offsetWidth; + last = event.clientX; + } + item.onmousemove = function(event) {plugin.resize && plugin.resize(event)} + }) var list = JSON.parse(meta.inputs||"[]"); plugin.onimport._init? plugin.onimport._init(plugin, feature, plugin.output, plugin.action, plugin.option): can.core.Next(list.length>0? list: [{type: "text"}, {type: "button", value: "执行"}], plugin.Append, function() { @@ -229,24 +255,37 @@ var can = Volcanos("chat", { }) return input }), - Output: shy("构造组件", function(can, feature, type, msg, cb, target, option) { + Output: shy("构造组件", function(can, feature, type, msg, cb, target, action, option, status) { if (type == "inner" && (!msg.result || msg.result.length == 0)) {type = "table"} - var output = Volcanos(type, {_type: "local", msg: msg, feature: feature, + + var output = Volcanos(type, {_type: "local", action: action, msg: msg, feature: feature, + 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); }, + Status: function(event, value, key) {var cb = output.onstatus[key]; + typeof cb == "function"? cb(event, output, value, key, can.page.Select(can, status, "div."+key)[0]): false && output.run(event, ["status", key, value], function(msg) { + output.Export(event, msg, key) + }, true) + }, + 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) + }, - Export: function(event, value, key, index) {can.Report(event, value, key, index)}, - run: function(event, cmd, cb, silent) { - var msg = can.Event(event); + run: function(event, cmd, cb, silent) {var msg = can.Event(event); can.page.Select(can, option, "input,select", function(item) { item.name && item.value && msg.Option(item.name, item.value) }); (output[cmd[1]] || can[cmd[1]] || can.Run)(event, cmd, cb, silent); }, - }, Config.libs.concat(["plugin/"+type]), function(output) { - - output.onimport.init(output, msg, cb, target, option); + }, Config.libs.concat([(type.startsWith("/")? "": "plugin/")+type]), function(output) { + status.innerHTML = "", output.onstatus && can.page.AppendStatus(output, status, output.onstatus.list) + output.onimport.init(output, msg, cb, target, action, option); }, msg) return output.target = target, target.Output = output }), diff --git a/lib/page.js b/lib/page.js index f81f2d0f..2c8dde4f 100644 --- a/lib/page.js +++ b/lib/page.js @@ -86,12 +86,13 @@ Volcanos("page", {help: "网页模块", } else if (item.select) {var list = item.select; type = "select", name = name || list[0][0]; data.onchange = function(event) { - typeof list[1] == "function" && list[1](event, event.target.value); + typeof list[1] == "function" && list[1](event, event.target.value, name); } item.list = list[0].slice(1).map(function(value) { return {type: "option", value: value, inner: value}; }) data.className = list[0][0] || ""; + data.title = data.title || name; } else if (item.input) {var list = can.core.List(item.input); type = "input", name = name || list[0] || ""; @@ -129,6 +130,10 @@ Volcanos("page", {help: "网页模块", } else if (item.row) {type = "tr"; item.list = item.row.map(function(text) {return {text: [text, item.sub||"td"]}}); + } else if (item.include) {var list = can.core.List(item.include); + type = "script"; + data.src = list[0]; + data.onload = list[1]; } @@ -145,7 +150,7 @@ Volcanos("page", {help: "网页模块", return target.innerHTML = "", can.page.Append(can, target, key, value) }), Remove: shy("删除节点", function(can, target, key, value) { - target.parentNode.removeChild(target) + target.parentNode && target.parentNode.removeChild(target) }), CopySub: shy("复制节点", function(can, target, source) { @@ -184,10 +189,11 @@ Volcanos("page", {help: "网页模块", AppendField: shy("添加插件", function(can, target, type, item) { var dataset = {}; item && item.name && (dataset.names = item.name); var field = can.page.Append(can, target, [{view: [type, "fieldset"], list: [ + {view: ["border-left"]}, {view: ["border-right"]}, item.pos? undefined: {text: [(item.nick||item.name||"")+"("+(item.help||"")+")", "legend"]}, {view: ["option", "form"], dataset: dataset, list: [{type: "input", style: {display: "none"}}]}, - {view: ["action"]}, - {view: ["output"]}, + {view: ["action"]}, {view: ["output"]}, {view: ["status"]}, + {view: ["border-bottom"]}, ]}]).first; return field; }), @@ -253,6 +259,17 @@ Volcanos("page", {help: "网页模块", }) }, + AppendAction: shy("添加控件", function(can, action, list, cb) { + can.page.Append(can, action, can.core.List(list, function(line) { + return typeof line == "string"? {button: [line, cb]}: line.length > 0? {select: [line, cb]}: line + })) + }), + AppendStatus: shy("添加控件", function(can, status, list, cb) { + can.page.Append(can, status, can.core.List(list, function(line) { + return {view: [line]} + })) + }), + Display: function(text) { if (text.startsWith("http")) {return ""+text+""} text = text.replace(/\033\[31m/g, "") diff --git a/lib/user.js b/lib/user.js index 7772a100..3a030071 100644 --- a/lib/user.js +++ b/lib/user.js @@ -1,7 +1,7 @@ Volcanos("user", {help: "用户模块", alert: function(text) {alert(JSON.stringify(text))}, confirm: function(text) {return confirm(JSON.stringify(text))}, - prompt: function(text, cb) {(text = prompt(text)) != undefined && typeof cb == "function" && cb(text); return text}, + prompt: function(text, cb, def) {(text = prompt(text, def||"")) != undefined && typeof cb == "function" && cb(text); return text}, reload: function(force) {(force || confirm("重新加载页面？")) && location.reload()}, title: function(text) {document.title = text}, diff --git a/order.js b/order.js index a9287ebb..d02a77ac 100644 --- a/order.js +++ b/order.js @@ -31,6 +31,7 @@ var Config = {context: "/chat/", {group: "index", name: "Footer", pos: "foot", state: ["ntxt", "ncmd"], title: 'shylinux@163.com'}, ], layout: {def: "办公", list: ["工作", "办公", "聊天"], size: { + "最大": {head: 0, foot: 0, left: 0, right: 0, bottom: -1, center: 0, top: 0}, "工作": {head: 30, foot: 30, left: 0, right: 100, bottom: -1, center: 0, top: 0}, "办公": {head: 30, foot: 30, left: 100, right: 100, bottom: -1, center: 0, top: 0}, "聊天": {head: 30, foot: 30, left: 100, right: 100, bottom: 300, center: 40, top: -2}, diff --git a/page/chat.js b/page/chat.js index 0348d223..46593c19 100644 --- a/page/chat.js +++ b/page/chat.js @@ -18,6 +18,7 @@ Volcanos("onaction", {help: "组件交互", list: [], can.Report(event, {x: 0, y: 30}, "scroll") break case "Escape": + can.Action.escape && can.Action.escape(event) break case " ": can.Favor && can.page.Select(can, can.Favor.Show(), "input.cmd", function(item) { diff --git a/pane/Action.js b/pane/Action.js index 6f9ec4bd..45190b32 100644 --- a/pane/Action.js +++ b/pane/Action.js @@ -50,18 +50,14 @@ Volcanos("onimport", {help: "导入数据", list: [], can._plugin && can._plugin.Import(event, msg, cmd) }, }) -Volcanos("onaction", {help: "组件交互", list: [["layout", "工作", "办公", "聊天"], "清屏", "刷新", "串行", "并行", +Volcanos("onaction", {help: "组件交互", list: [["layout", "最大", "工作", "办公", "聊天"], "清屏", "刷新", "串行", "并行", {input: "pod"}, {input: "you"}, {input: "hot"}, {input: "top"}, ], - "工作": function(event, can, msg, cmd, output) { - - can.Export(event, cmd, "layout") + onmousemove: function(event, can, msg, cmd, output) { + can.resize && can.resize(event) }, - "办公": function(event, can, msg, cmd, output) { - can.Export(event, cmd, "layout") - }, - "聊天": function(event, can, msg, cmd, output) { - can.Export(event, cmd, "layout") + layout: function(event, can, value, cmd, output) { + can.Export(event, value, cmd) }, "清屏": function(event, can, msg, cmd, output) { can.page.Select(can, output, "fieldset.item>div.output", function(item) { diff --git a/plugin/china.js b/plugin/china.js new file mode 100644 index 00000000..7cabe88e --- /dev/null +++ b/plugin/china.js @@ -0,0 +1,133 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; + // can.page.Append(can, action, [{type: "script", src: "https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"}]); + can.page.Append(can, output, [{include: ["/plugin/github.com/shylinux/echarts/echarts.js", function(event) { + can.page.Append(can, output, [{include: ["/plugin/github.com/shylinux/echarts/china.js", function(event) { + var china_chart = echarts.init(can.page.Append(can, output, [{type: "div", style: {width: "600px", height: "400px"}}]).last); + var data = msg.Table() + + var yData = []; + var barData = []; + for (var i = 0; i < (data.length>10? 10: data.length); i++) { + yData.push(i + data[i].name); + barData.push(data[i]); + } + + var option = { + title: [{ + text: msg.Option("title"), + show: true, right: 250, top: 10, + textStyle: {color: '#2D3E53', fontSize: 18}, + }], + tooltip: { + show: true, formatter: function(params) { + return params.name + "
" + + ' 确认病例:' + params.data['confirm'] + '人
' + + ' 死亡病例:' + params.data['dead'] + '人
' + }, + }, + visualMap: { + type: 'continuous', + orient: 'horizontal', + itemWidth: 10, + itemHeight: 80, + text: ['高', '低'], + showLabel: true, + seriesIndex: [0], + min: 0, + max: data[1].value, + inRange: { + color: ['#6FCF6A', '#FFFD64', '#FF5000'] + }, + textStyle: { + color: '#7B93A7' + }, + bottom: 30, + left: 'left', + }, + grid: {right: 10, top: 135, bottom: 100, width: '20%'}, + xAxis: {show: false}, + yAxis: { + type: 'category', + inverse: true, + nameGap: 16, + axisLine: {show: false, lineStyle: {color: '#ddd'}}, + axisTick: {show: false, lineStyle: {color: '#ddd'}}, + axisLabel: { + margin: 0, + interval: 0, + textStyle: {color: '#455A74', align: 'left', fontSize: 14}, + rich: { + a: { + color: '#fff', + backgroundColor: '#FAAA39', + width: 20, + height: 20, + align: 'center', + borderRadius: 2 + }, + b: { + color: '#fff', + backgroundColor: '#4197FD', + width: 20, + height: 20, + align: 'center', + borderRadius: 2 + } + }, + formatter: function(params) { + if (parseInt(params.slice(0, 1)) < 3) { + return [ + '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1) + ].join('\n') + } else { + return [ + '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1) + ].join('\n') + } + } + }, + data: yData + }, + geo: { + map: 'china', left: 'left', right: '100', + label: {emphasis: {show: false}}, + itemStyle: {emphasis: {areaColor: '#fff464'}}, + }, + series: [{ + roam: false, type: 'map', name: 'mapSer', + geoIndex: 0, label: {show: false}, + data: data + }, { + roam: false, type: 'bar', name: 'barSer', + visualMap: false, barGap: 0, barMaxWidth: 8, + zlevel: 100, itemStyle: { + normal: { + color: function(params) { + // build a color map as your need. + var colorList = [{colorStops: [ + {offset: 0, color: '#FFD119'}, // 0% 处的颜色 + {offset: 1, color: '#FFAC4C'}, // 100% 处的颜色 + ]}, {colorStops: [ + {offset: 0, color: '#00C0FA'}, // 0% 处的颜色 + {offset: 1, color: '#2F95FA'}, // 100% 处的颜色 + ]}]; + return params.dataIndex < 3? colorList[0]: colorList[1] + }, + barBorderRadius: 15 + } + }, + data: barData + }] + }; + china_chart.setOption(option); + }]}]); + }]}]); + }, +}) +Volcanos("onaction", {help: "组件交互", list: []}) +Volcanos("onchoice", {help: "组件菜单", list: []}) +Volcanos("ondetail", {help: "组件详情", list: []}) +Volcanos("onexport", {help: "导出数据", list: []}) + + diff --git a/plugin/inner.js b/plugin/inner.js index 850a2be4..6a8bc056 100644 --- a/plugin/inner.js +++ b/plugin/inner.js @@ -1,5 +1,5 @@ Volcanos("onimport", {help: "导入数据", list: [], - init: function(can, msg, cb, output, option) {output.innerHTML = msg.Result(); + init: function(can, msg, cb, output, action, option) {output.innerHTML = msg.Result(); can.page.Select(can, output, "table", function(table) {can.page.OrderTable(can, table)}) can.page.Select(can, output, ".story", function(story) {var data = story.dataset||{}; story.oncontextmenu = function(event) {var detail = can.feature.detail || can.ondetail.list; diff --git a/plugin/media.js b/plugin/media.js index bd686e30..20c94c99 100644 --- a/plugin/media.js +++ b/plugin/media.js @@ -2,7 +2,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, output, action, option, field) { output.innerHTML = msg.Result(); }, - init: function(can, msg, cb, output, option) {output.innerHTML = msg.Result(); + init: function(can, msg, cb, output, action, option) {output.innerHTML = msg.Result(); }, favor: function(event, can, msg, cmd, output) {var key = msg.detail[0]; var cb = can.onaction[key]; if (typeof cb == "function") {cb(event, can, msg, cmd, output); return msg.Echo(can._name, " onaction ", key), msg._hand = true} diff --git a/plugin/table.js b/plugin/table.js index c50bbd3f..55d1b70e 100644 --- a/plugin/table.js +++ b/plugin/table.js @@ -1,5 +1,5 @@ Volcanos("onimport", {help: "导入数据", list: [], - init: function(can, msg, cb, output, option) {output.innerHTML = ""; + init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; if (!msg.append || msg.append.length == 0) { var code = can.page.Append(can, output, [{view: ["code", "div", msg.Result()]}]).code; return typeof cb == "function" && cb(msg), code; diff --git a/plugin/template.js b/plugin/template.js new file mode 100644 index 00000000..64581aec --- /dev/null +++ b/plugin/template.js @@ -0,0 +1,10 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; + }, +}) +Volcanos("onaction", {help: "组件交互", list: []}) +Volcanos("onchoice", {help: "组件菜单", list: []}) +Volcanos("ondetail", {help: "组件详情", list: []}) +Volcanos("onexport", {help: "导出数据", list: []}) + + diff --git a/plugin/wiki/data.js b/plugin/wiki/data.js new file mode 100644 index 00000000..9f1a13d8 --- /dev/null +++ b/plugin/wiki/data.js @@ -0,0 +1,85 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; + var isData = msg.result && msg.result.length > 0; + if (msg.append && msg.append.length > 0) { + var table = can.page.AppendTable(can, output, msg, msg.append); + table.onclick = function(event) {switch (event.target.tagName) { + case "TD": + if (isData) { + var target = event.target; + can.page.Appends(can, event.target, [{type: "input", value: target.innerHTML, onkeydown: function(event) { + if (event.key == "Enter") { + target.innerHTML = event.target.value + } + }}]) + break + } + + 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) {}) + }) + break + case "TH": + break + case "TR": + case "TABLE": + }} + return typeof cb == "function" && cb(msg), table; + } + }, + which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")} + can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")} + can.page.Select(can, tr, "th,td", function(td, order) { + if (event.target == td) {return cb(index-1, list[order])} + }) + }) + }, +}) +Volcanos("onaction", {help: "组件菜单", list: ["保存", + ], + "保存": function(event, can, msg, cmd, target) { + can.run(event, ["action", cmd, can.Option("name"), can.page.Select(can, target, "tr", function(tr) {return can.page.Select(can, tr, "th,td", function(td) {return td.innerHTML}).join(",")}).join("\n")], function() { + can.user.toast("保存成功") + }, true) + }, +}) +Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]], + "清空": function(event, can, msg, cmd, target) { + console.log("choice", cmd) + }, +}) +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 data = {"text-anchor": "middle", "dominant-baseline": "middle"} + var figure = can.onfigure[target.tagName] + figure.text(event, can, data, target) + + var p = can.onaction.push(event, can, data, "text", can.svg) + p.innerHTML = text; + + target.Text && can.page.Remove(can, target.Text) && delete(target.Text) + target.Text = p + }, target.Text && target.Text.innerText || "") + }, + "复制": function(event, can, msg, index, key, cmd, target) { + var figure = can.onfigure[target.tagName] + figure.copy(event, can, target) + }, + "删除": function(event, can, msg, index, key, cmd, target) { + can.page.Remove(can, target) + }, +}) +Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"], + "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""}, + "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""}, + "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y}, + "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName]; + target.innerHTML = figure? figure.show(event, can, value, target): value.tagName; + }, +}) +Volcanos("onexport", {help: "导出数据", list: []}) + diff --git a/plugin/wiki/feel.js b/plugin/wiki/feel.js new file mode 100644 index 00000000..97fd436c --- /dev/null +++ b/plugin/wiki/feel.js @@ -0,0 +1,90 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; + if (msg.append && msg.append.length > 0) { + var table = can.page.AppendTable(can, output, msg, msg.append); + var prefix = can.page.Append(can, output, [{view: ["prefix"], list: msg.Table(function(item) { + var items = item.path.split(".") + switch (items[items.length-1]) { + case "JPG": + return {img: "/share/local/"+item.path, width: "200"} + case "MOV": + return {type: "video", width: "200", + data: {controls: "controls", autoplay: false, loop: true, src: "/share/local/"+item.path}} + default: + return + } + })}]); + + table.onclick = function(event) {switch (event.target.tagName) { + case "TD": + can.onimport.which(event, table, msg.append, function(index, key) { + var name = event.target.innerHTML.trim() + if (name.endsWith("/")) { + can.Option("name", name) + can.run(event, [name], function(msg) {}) + } + }) + break + case "TH": + break + case "TR": + case "TABLE": + }} + return typeof cb == "function" && cb(msg), table; + } + }, + which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")} + can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")} + can.page.Select(can, tr, "th,td", function(td, order) { + if (event.target == td) {return cb(index-1, list[order])} + }) + }) + }, +}) +Volcanos("onaction", {help: "组件菜单", list: ["保存", + ], + "保存": function(event, can, msg, cmd, target) { + can.run(event, ["action", cmd, can.Option("name"), can.page.Select(can, target, "tr", function(tr) {return can.page.Select(can, tr, "th,td", function(td) {return td.innerHTML}).join(",")}).join("\n")], function() { + can.user.toast("保存成功") + }, true) + }, +}) +Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]], + "清空": function(event, can, msg, cmd, target) { + console.log("choice", cmd) + }, +}) +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 data = {"text-anchor": "middle", "dominant-baseline": "middle"} + var figure = can.onfigure[target.tagName] + figure.text(event, can, data, target) + + var p = can.onaction.push(event, can, data, "text", can.svg) + p.innerHTML = text; + + target.Text && can.page.Remove(can, target.Text) && delete(target.Text) + target.Text = p + }, target.Text && target.Text.innerText || "") + }, + "复制": function(event, can, msg, index, key, cmd, target) { + var figure = can.onfigure[target.tagName] + figure.copy(event, can, target) + }, + "删除": function(event, can, msg, index, key, cmd, target) { + can.page.Remove(can, target) + }, +}) +Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"], + "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""}, + "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""}, + "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y}, + "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName]; + target.innerHTML = figure? figure.show(event, can, value, target): value.tagName; + }, +}) +Volcanos("onexport", {help: "导出数据", list: []}) + diff --git a/plugin/wiki/mind.js b/plugin/wiki/mind.js new file mode 100644 index 00000000..1da5c9df --- /dev/null +++ b/plugin/wiki/mind.js @@ -0,0 +1,315 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; + if (msg.append && msg.append.length > 0) { + var table = can.page.AppendTable(can, output, msg, msg.append); + 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) {}) + }) + break + case "TH": + break + case "TR": + case "TABLE": + }} + 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 = [] + return typeof cb == "function" && cb(msg), code; + }, + which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")} + can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")} + can.page.Select(can, tr, "th,td", function(td, order) { + if (event.target == td) {return cb(index-1, list[order])} + }) + }) + }, +}) +Volcanos("onfigure", {help: "图形绘制", list: [], + rect: { + data: {rx: 4, ry: 4}, // + draw: function(event, can, point, color) { + var p0 = point[0], p1 = point[1]; + var data = { + "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), + } + 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; + }, + 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 + + ": (" + value.x.baseVal.value + "," + value.y.baseVal.value+ ")" + + " + (" + value.width.baseVal.value + "," + value.height.baseVal.value+ ")" + }, + }, + circle: { + data: {}, // + draw: function(event, can, point, color) { + 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; + }, + text: function(event, can, data, target) { + data.x = target.cx.baseVal.value + data.y = target.cy.baseVal.value + return data + }, + show: function(event, can, value, target) { + return value.tagName + + ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")" + + " > (" + parseInt(value.r.baseVal.value) + ")" + }, + }, + ellipse: { + data: {}, // + draw: function(event, can, point, color) { + 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; + }, + text: function(event, can, data, target) { + data.x = target.cx.baseVal.value + data.y = target.cy.baseVal.value + return data + }, + show: function(event, can, value, target) { + return value.tagName + + ": (" + value.cx.baseVal.value + "," + value.cy.baseVal.value+ ")" + + " > (" + parseInt(value.rx.baseVal.value) + parseInt(value.ry.baseVal.value) + ")" + }, + }, + line: { + data: {}, // + draw: function(event, can, point, color) { + 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; + }, + text: function(event, can, data, target) { + data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2 + data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2 + return data + }, + show: function(event, can, value, target) { + return value.tagName + + ": (" + value.x1.baseVal.value + "," + value.y1.baseVal.value+ ")" + + " - (" + value.x2.baseVal.value + "," + value.y2.baseVal.value+ ")" + }, + }, + path: { + data: {}, // + draw: function(event, can, point, color) { + var data = { + d: can.core.List(point, function(p, i) { + switch (i) { + case 0: return "M " + p.x + " " + p.y; break + case 1: return "H " + p.x; break + case 2: return "V " + p.y; break + case 3: return "H " + p.x + " Z"; break + } + }).join(" ") + } + console.log(data) + event.type == "click" && point.length == 4 && (can.point = []) + return data; + }, + text: function(event, can, data, target) { + data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2 + data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2 + return data + }, + show: function(event, can, value, target) { + return value.tagName + + ": (" + value.x1.baseVal.value + "," + value.y1.baseVal.value+ ")" + + " - (" + value.x2.baseVal.value + "," + value.y2.baseVal.value+ ")" + }, + }, + polyline: { + data: {}, // + draw: function(event, can, point, color) {if (point.length < 2) {return} + var data = { + points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ") + } + return data; + }, + text: function(event, can, data, target) { + data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2 + data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2 + return data + }, + show: function(event, can, value, target) { + return value.tagName + ": (" + value.points.baseVal.value + ")" + }, + }, + polygon: { + data: {}, // + draw: function(event, can, point, color) {if (point.length < 2) {return} + var data = { + points: can.core.List(point, function(item) {return item.x + " " + item.y}).join(", ") + } + return data; + }, + text: function(event, can, data, target) { + data.x = (target.x1.baseVal.value + target.x2.baseVal.value) / 2 + data.y = (target.y1.baseVal.value + target.y2.baseVal.value) / 2 + return data + }, + show: function(event, can, value, target) { + return value.tagName + ": (" + value.points.baseVal.value + ")" + }, + }, +}) +Volcanos("onaction", {help: "组件菜单", list: ["保存", + ["color", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"], + ["shape", "rect", "circle", "ellipse", "path", "line", "polyline", "polygon"], + ], + "保存": function(event, can, msg, cmd, target) { + can.run(event, ["action", cmd, can.Option("name"), + '', + can.svg.innerHTML, + "", + ], function() { + can.user.toast("保存成功") + }, true) + }, + color: function(event, can, value, cmd, target) {can.color = value}, + shape: function(event, can, value, cmd, target) {can.shape = value}, + + resize: function(event, can, value, cmd, item) {var target = can.target.firstChild; + if (cmd == "x") {target.style.width = target.offsetHeight + value + "px"} + if (cmd == "y") {target.style.height = target.offsetHeight + value + "px"} + }, + + init: function(event, can, msg, cmd, item) { + item.ondblclick = item.oncontextmenu = function(event) {can.user.carte(event, shy("", can.ondetail, can.ondetail.list, function(event, key, meta) {var cb = meta[key]; + typeof cb == "function" && cb(event, can, msg, cmd, key, key, item); + }), can), event.stopPropagation(), event.preventDefault()} + item.onclick = function() { + } + 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)); + 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) + }, + + onclick: function(event, can) {if (!can.svg) {return} + var p = can.svg.getBoundingClientRect() + var point = {x: event.clientX-p.x, y: event.clientY-p.y} + + can.point = (can.point || []).concat([point]) + can.onaction.draw(event, can, can.point) + }, + onmouseover: function(event, can) { + can.Status(event, event.target, "which") + }, + onmousemove: function(event, can) {if (!can.svg) {return} + var p = can.svg.getBoundingClientRect() + var point = {x: event.clientX-p.x, y: event.clientY-p.y} + + can.temp && can.page.Remove(can, can.temp) && delete(can.temp) + can.temp = can.onaction.draw(event, can, can.point.concat(point)) + + can.Status(event, point, "point") + }, + onkeydown: function(event, can) { + if (event.key == "Enter") { + can.point = [] + return + } + }, +}) +Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]], + "清空": function(event, can, msg, cmd, target) { + console.log("choice", cmd) + }, +}) +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 figure = can.onfigure[target.tagName] + figure.text(event, can, data, target) + + var p = can.onaction.push(event, can, data, "text", can.svg) + p.innerHTML = text; + + target.Text && can.page.Remove(can, target.Text) && delete(target.Text) + target.Text = p + }, target.Text && target.Text.innerText || "") + }, + "复制": function(event, can, msg, index, key, cmd, target) { + var figure = can.onfigure[target.tagName] + figure.copy(event, can, target) + }, + "删除": function(event, can, msg, index, key, cmd, target) { + can.page.Remove(can, target) + }, +}) +Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"], + "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""}, + "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""}, + "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y}, + "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName]; + target.innerHTML = figure? figure.show(event, can, value, target): value.tagName; + }, +}) +Volcanos("onexport", {help: "导出数据", list: []}) + diff --git a/plugin/wiki/walk.js b/plugin/wiki/walk.js new file mode 100644 index 00000000..5183387b --- /dev/null +++ b/plugin/wiki/walk.js @@ -0,0 +1,155 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; + if (!msg.result || msg.result.length == 0) { + var table = can.page.AppendTable(can, output, msg, msg.append); + table.onclick = function(event) {switch (event.target.tagName) { + case "TD": + can.onimport.which(event, table, msg.append, function(index, key) { + can.Option("file", event.target.innerHTML.trim()) + can.run(event, [event.target.innerHTML.trim()], function(msg) {}) + }) + break + case "TH": + break + case "TR": + case "TABLE": + }} + return typeof cb == "function" && cb(msg), table; + } + + // can.page.Append(can, action, [{type: "script", src: "https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"}]); + can.page.Append(can, output, [{include: ["/plugin/github.com/shylinux/echarts/echarts.js", function(event) { + can.page.Append(can, output, [{include: ["/plugin/github.com/shylinux/echarts/china.js", function(event) { + var china_chart = echarts.init(can.page.Append(can, output, [{type: "div", style: {width: "600px", height: "400px"}}]).last); + var data = msg.Table() + + var yData = []; + var barData = []; + for (var i = 0; i < (data.length>10? 10: data.length); i++) { + yData.push(i + data[i].name); + barData.push(data[i]); + } + + var option = { + title: [{ + text: msg.Option("title"), + show: true, right: 250, top: 10, + textStyle: {color: '#2D3E53', fontSize: 18}, + }], + tooltip: { + show: true, formatter: function(params) { + return params.name +": "+params.value + }, + }, + visualMap: { + type: 'continuous', + orient: 'horizontal', + itemWidth: 10, + itemHeight: 80, + text: ['高', '低'], + showLabel: true, + seriesIndex: [0], + min: 0, + max: data[1].value, + inRange: { + color: ['#6FCF6A', '#FFFD64', '#FF5000'] + }, + textStyle: { + color: '#7B93A7' + }, + bottom: 30, + left: 'left', + }, + grid: {right: 10, top: 135, bottom: 100, width: '20%'}, + xAxis: {show: false}, + yAxis: { + type: 'category', + inverse: true, + nameGap: 16, + axisLine: {show: false, lineStyle: {color: '#ddd'}}, + axisTick: {show: false, lineStyle: {color: '#ddd'}}, + axisLabel: { + margin: 0, + interval: 0, + textStyle: {color: '#455A74', align: 'left', fontSize: 14}, + rich: { + a: { + color: '#fff', + backgroundColor: '#FAAA39', + width: 20, + height: 20, + align: 'center', + borderRadius: 2 + }, + b: { + color: '#fff', + backgroundColor: '#4197FD', + width: 20, + height: 20, + align: 'center', + borderRadius: 2 + } + }, + formatter: function(params) { + if (parseInt(params.slice(0, 1)) < 3) { + return [ + '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1) + ].join('\n') + } else { + return [ + '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1) + ].join('\n') + } + } + }, + data: yData + }, + geo: { + map: 'china', left: 'left', right: '100', + label: {emphasis: {show: false}}, + itemStyle: {emphasis: {areaColor: '#fff464'}}, + }, + series: [{ + roam: false, type: 'map', name: 'mapSer', + geoIndex: 0, label: {show: false}, + data: data + }, { + roam: false, type: 'bar', name: 'barSer', + visualMap: false, barGap: 0, barMaxWidth: 8, + zlevel: 100, itemStyle: { + normal: { + color: function(params) { + // build a color map as your need. + var colorList = [{colorStops: [ + {offset: 0, color: '#FFD119'}, // 0% 处的颜色 + {offset: 1, color: '#FFAC4C'}, // 100% 处的颜色 + ]}, {colorStops: [ + {offset: 0, color: '#00C0FA'}, // 0% 处的颜色 + {offset: 1, color: '#2F95FA'}, // 100% 处的颜色 + ]}]; + return params.dataIndex < 3? colorList[0]: colorList[1] + }, + barBorderRadius: 15 + } + }, + data: barData + }] + }; + china_chart.setOption(option); + }]}]); + }]}]); + }, + which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")} + can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")} + can.page.Select(can, tr, "th,td", function(td, order) { + if (event.target == td) {return cb(index-1, list[order])} + }) + }) + }, +}) +Volcanos("onaction", {help: "组件交互", list: []}) +Volcanos("onchoice", {help: "组件菜单", list: []}) +Volcanos("ondetail", {help: "组件详情", list: []}) +Volcanos("onexport", {help: "导出数据", list: []}) + + diff --git a/plugin/wiki/word.js b/plugin/wiki/word.js new file mode 100644 index 00000000..a8a70e28 --- /dev/null +++ b/plugin/wiki/word.js @@ -0,0 +1,76 @@ +Volcanos("onimport", {help: "导入数据", list: [], + init: function(can, msg, cb, output, action, option) {output.innerHTML = ""; + if (msg.append && msg.append.length > 0) { + var table = can.page.AppendTable(can, output, msg, msg.append); + 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) {}) + }) + break + case "TH": + break + case "TR": + case "TABLE": + }} + return typeof cb == "function" && cb(msg), table; + } + + var last = can.page.Append(can, output, [{type: "textarea", cols: 40, rows: 18, inner: msg.Result()}]).last; + return typeof cb == "function" && cb(msg), can.view = last; + }, + which: function(event, table, list, cb) {if (event.target == table) {return cb(-1, "")} + can.page.Select(can, table, "tr", function(tr, index) {if (event.target == tr) {return cb(index-1, "")} + can.page.Select(can, tr, "th,td", function(td, order) { + if (event.target == td) {return cb(index-1, list[order])} + }) + }) + }, +}) +Volcanos("onaction", {help: "组件菜单", list: ["保存"], + "保存": function(event, can, msg, cmd, target) { + can.run(event, ["action", cmd, can.Option("name"), can.view.value], function() { + can.user.toast("保存成功") + }, true) + }, +}) +Volcanos("onchoice", {help: "组件交互", list: ["保存", "清空", ["rect", "rect", "line", "circle"]], + "清空": function(event, can, msg, cmd, target) { + console.log("choice", cmd) + }, +}) +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 data = {"text-anchor": "middle", "dominant-baseline": "middle"} + var figure = can.onfigure[target.tagName] + figure.text(event, can, data, target) + + var p = can.onaction.push(event, can, data, "text", can.svg) + p.innerHTML = text; + + target.Text && can.page.Remove(can, target.Text) && delete(target.Text) + target.Text = p + }, target.Text && target.Text.innerText || "") + }, + "复制": function(event, can, msg, index, key, cmd, target) { + var figure = can.onfigure[target.tagName] + figure.copy(event, can, target) + }, + "删除": function(event, can, msg, index, key, cmd, target) { + can.page.Remove(can, target) + }, +}) +Volcanos("onstatus", {help: "组件状态", list: ["begin", "width", "point", "which"], + "begin": function(event, can, value, cmd, target) {target.innerHTML = value? value.x+","+value.y: ""}, + "width": function(event, can, value, cmd, target) {target.innerHTML = value? value.width+","+value.height: ""}, + "point": function(event, can, value, cmd, target) {target.innerHTML = value.x+","+value.y}, + "which": function(event, can, value, cmd, target) {var figure = can.onfigure[value.tagName]; + target.innerHTML = figure? figure.show(event, can, value, target): value.tagName; + }, +}) +Volcanos("onexport", {help: "导出数据", list: []}) + diff --git a/proto.js b/proto.js index 3e205595..21ad0e1c 100644 --- a/proto.js +++ b/proto.js @@ -101,6 +101,9 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块 res.append && (msg.append = res.append) && res.append.forEach(function(item) { res[item] && (msg[item] = res[item]) }) + res.option && (msg.option = res.option) && res.option.forEach(function(item) { + res[item] && (msg[item] = res[item]) + }) return msg }, Table: shy("遍历数据", function(cb) {if (!msg.append || !msg.append.length || !msg[msg.append[0]]) {return} @@ -132,14 +135,14 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块 if (type.endsWith(".css")) { var style = document.createElement("link"); style.rel = "stylesheet", style.type = "text/css"; - style.href = (can._path||meta.path)+type + style.href = (type.startsWith("/")? "": (can._path||meta.path))+type style.onload = line; target.appendChild(style); return style } if (type.endsWith(".js")) { var script = document.createElement("script"); - script.src = (can._path||meta.path)+type, + script.src = (type.startsWith("/")? "": (can._path||meta.path))+type, script.onload = line; target.appendChild(script); return script @@ -182,22 +185,27 @@ function Volcanos(name, can, libs, cb, msg) { // 封装模块 // 加载模块 function next() { - libs && libs.length > 1? Volcanos(name, can, libs.slice(1), cb): - typeof cb == "function" && setTimeout(function() {cb(can); - if (!can.target) {return} - can.core.Item(can.onaction, function(key, cb) {key.indexOf("on") == 0 && (can.target[key] = function(event) { - cb(event, can); - })}); - - can.target.oncontextmenu = function(event) { - can.user.carte(event, shy("", can.onchoice, can.onchoice.list, function(event, key, meta) {var cb = meta[key]; - typeof cb == "function"? cb(event, can, msg, key, event.target): - can.run(event, [typeof cb == "string"? cb: key, event.target], null, true) - }), can) - event.stopPropagation() - event.preventDefault() + libs && libs.length > 1? Volcanos(name, can, libs.slice(1), cb): typeof cb == "function" && setTimeout(function() {cb(can); if (can.target) { + function run(event, msg, key, cb) { + if (typeof cb == "function") { + // 本地命令 + cb(event, can, msg, key, can.target) + } else { + // 本地命令 + can.run(event, ["action", key], function(msg) {can.Import(event, msg, key)}, true) } - }, 10); + } + // 注册event + can.core.Item(can.onaction, function(key, cb) {key.indexOf("on") == 0 && (can.target[key] = function(event) {cb(event, can)})}); + // 注册action + can.action && (can.action.innerHTML = ""), can.onaction && can.page.AppendAction(can, can.action, can.onaction.list, function(event, value, key) { + key? run(event, value, key, can.onaction[key]): run(event, msg, value, can.onaction[value]); + }) + // 注册choice + can.target.oncontextmenu = function(event) {can.user.carte(event, shy("", can.onchoice, can.onchoice.list, function(event, key, meta) { + run(event, msg, key, can.onchoice[key] || can.onaction[key]); + }), can), event.stopPropagation(), event.preventDefault()} + }}, 10); } if (libs && libs.length > 0) { if (can[libs[0]]) { diff --git a/style.css b/style.css index 242edb15..1907fe1d 100644 --- a/style.css +++ b/style.css @@ -61,6 +61,7 @@ fieldset>form.option div.item.textarea { } fieldset>div.action { padding:6px; + clear:both; } fieldset>div.action div.space { display:inline-block; @@ -178,6 +179,36 @@ fieldset.item>div.output>div.status>input.cmd { width:250px; } +fieldset.item>div.output>div.code svg { + border: solid 2px red; +} + +fieldset.item div.border-left { + position:absolute; + width:2px; + height:inherit; + height:-webkit-fill-available; + background:green; + cursor:ew-resize; +} +fieldset.item div.border-right { + position:absolute; + right:0px; + width:2px; + height:inherit; + height:-webkit-fill-available; + background:green; + cursor:ew-resize; +} +fieldset.item div.border-bottom { + position:absolute; + bottom:0px; + height:2px; + width:-webkit-fill-available; + background:green; + cursor:ns-resize; +} + fieldset table { font-size:14px; overflow: auto;