From c5b2d48b7b7e4e9223e5ca0b8ed6ce3d9b028698 Mon Sep 17 00:00:00 2001 From: shaoying Date: Tue, 7 Jul 2020 09:57:32 +0800 Subject: [PATCH] opt draw --- frame.js | 19 +++++ index.css | 34 ++++---- index.js | 2 +- pane/Search.js | 2 +- plugin/local/wiki/draw.css | 3 + plugin/local/wiki/draw.js | 140 ++++++++++++++++++++------------ plugin/local/wiki/draw/heart.js | 5 +- 7 files changed, 129 insertions(+), 76 deletions(-) diff --git a/frame.js b/frame.js index e030f172..b79f8f70 100644 --- a/frame.js +++ b/frame.js @@ -575,3 +575,22 @@ Volcanos("onkeypop", {help: "键盘交互", list: [], _init: function(can) { }, action: null, }) +Volcanos("onmotion", {help: "动态交互", list: [], _init: function(can) { +}, + show: function(can, target, time) { time = time || {value: 100, length: 30} + can.page.Modify(can, target, {style: {opacity: 0}}) + can.Timer(time, function(event, value, index) { + console.log(arguments) + can.page.Modify(can, target, {style: {opacity: (index+1)/time.length}}) + }, function() { + }) + }, + hide: function(can, target, time) { time = time || {value: 100, length: 30} + can.page.Modify(can, target, {style: {opacity: 1}}) + can.Timer(time, function(event, value, index) { + console.log(arguments) + can.page.Modify(can, target, {style: {opacity: 1-(index+1)/time.length}}) + }, function() { + }) + }, +}) diff --git a/index.css b/index.css index ca572101..5ca2b578 100644 --- a/index.css +++ b/index.css @@ -154,7 +154,6 @@ fieldset div.code { border:solid 3px green; /* max-height:640px; */ } - fieldset table { font-size:14px; cursor:pointer; @@ -189,22 +188,6 @@ fieldset table td.select { background-color:red; } -div.carte { - color:cyan; - background:black; - border:solid 2px red; - position:fixed; - z-index:100; -} -div.carte div.item { - padding:0 5px; -} -div.carte div.item:hover { - background:red; - border:solid 2px yellow; - cursor:pointer; -} - div.toast { color:yellow; background:black; @@ -225,6 +208,22 @@ div.toast div.duration { color:gray; } +div.carte { + color:cyan; + background:black; + border:solid 2px red; + position:fixed; + z-index:100; +} +div.carte div.item { + padding:0 5px; +} +div.carte div.item:hover { + background:red; + border:solid 2px yellow; + cursor:pointer; +} + div.upload { color:yellow; background:black; @@ -251,3 +250,4 @@ fieldset.input.date { fieldset.input.key { z-index:101; } + diff --git a/index.js b/index.js index 4355bb19..21634f83 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -Volcanos({name: "demo", volcano: "/frame.js", iceberg: "/chat/", intshell: "plug.sh", +Volcanos({name: "chat", volcano: "/frame.js", iceberg: "/chat/", intshell: "plug.sh", libs: ["/lib/base", "/lib/core", "/lib/misc", "/lib/page", "/lib/user"], panes: [ {name: "Header", help: "标题栏", pos: "head", state: ["time", "username"]}, {name: "River", help: "群聊组", pos: "left"}, diff --git a/pane/Search.js b/pane/Search.js index b634023d..51585fcd 100644 --- a/pane/Search.js +++ b/pane/Search.js @@ -13,7 +13,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, meta, return {text: [value, "td"], onclick: function(event) { can.Status("index", index) can.Status("value", value) - can.run(event, [line.type, line.name, line.text], function(msg) { + can.run(event, ["render", line.type, line.name, line.text], function(msg) { can.ui.display.innerHTML = "" can.onappend.table(can, can.ui.display, "table", msg) can.onappend.board(can, can.ui.display, "board", msg) diff --git a/plugin/local/wiki/draw.css b/plugin/local/wiki/draw.css index 6d1554ad..9e2683fd 100644 --- a/plugin/local/wiki/draw.css +++ b/plugin/local/wiki/draw.css @@ -2,6 +2,9 @@ fieldset.draw div.action { clear:none; } fieldset.draw div.output div.project { + min-width:60px; + max-width:120px; + overflow:auto; } fieldset.draw div.output div.project div.item.select { background-color:red; border:solid 2px yellow; diff --git a/plugin/local/wiki/draw.js b/plugin/local/wiki/draw.js index 6736281b..8e5ed493 100644 --- a/plugin/local/wiki/draw.js +++ b/plugin/local/wiki/draw.js @@ -1,22 +1,16 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) { can._output.innerHTML = "" can.onappend.table(can, target, "table", msg), can.ui = can.page.Append(can, target, [ - {view: "project", style: {display: "none"}}, {view: "profile"}, + {view: "project"}, {view: "profile"}, {view: "preview"}, {view: "content", onmouseenter: function(event) { can.onkeypop.action = can }}, {view: "display"}, ]) - can.core.Item(can.onaction, function(key, value) { - if (key.indexOf("on") == -1 || !can.onaction.hasOwnProperty(key)) { return } - can.ui.content[key] = can.ui.content[key] || function(event) { - value(event, can) - } - }) // 交互数据 can.point = [], can.keys = [] can.svg = null, can.group = null - can.temp = null, can.current = null - can.last = null + can.last = null, can.temp = null + can.current = null // 加载绘图 var code = can.page.AppendBoard(can, can.ui.content, msg.Result()||can.onexport.file(can)) @@ -29,6 +23,13 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, }) }) + can.core.Item(can.onaction, function(key, value) { + if (key.indexOf("on") == -1 || !can.onaction.hasOwnProperty(key)) { return } + can.svg[key] = can.ui.content[key] || function(event) { + value(event, can) + } + }) + can.Timer(10, function() { // 默认参数 can.core.Item({ @@ -45,11 +46,26 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, }) return typeof cb == "function" && cb(msg) }, - group: function(can, target) { var name = target.Value("class") || "svg" + group: function(can, target) { var name = target.Groups() || "svg" return can.onappend.item(can, can.ui.project, "item", {name: name}, function(event) { can.group = target, can.core.List(["font-size", "storke-width", "stroke", "fill"], function(key) { + can.onmotion.show(can, target, {value: 100, length: 10}) can.Action(key, target.Value(key)||can.Action(key)) - can.Status("group", name) + }) + }, function(event) { + can.user.carte(can, can.onaction||{}, ["隐藏", "显示", "添加", "删除", "清空"], function(ev, item, meta) { + switch (item) { + case "显示": + can.page.Select(can, can.ui.content, "g."+name, function(item) { + can.onmotion.show(can, target, {value: 100, length: 10}) + }); break + case "隐藏": + can.page.Select(can, can.ui.content, "g."+name, function(item) { + can.onmotion.hide(can, target, {value: 100, length: 10}) + }); break + default: + can.onaction[item](event, can, item) + } }) }) }, @@ -87,6 +103,14 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, }; item = item.parentNode } return can.svg } + target.Groups = function() { var item = target + var list = [] + while (item && item.tagName != "svg") { + item.tagName == "g" && list.push(item.Value("class")) + item = item.parentNode + } + return list.reverse().join(".") + } return target }, @@ -100,7 +124,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, if (["Control", "Shift", "Meta", "Alt"].indexOf(value) > -1 ) {return} can.keys.push((event.ctrlKey? "C-": "") + (event.shiftKey? value.toUpperCase(): value)) if (value == "Escape") { - can.point = [], delete(can._temp) + can.point = [], delete(can.temp) return } @@ -118,11 +142,11 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, s: {list: ["line"]}, r: {list: ["rect"]}, c: {list: ["circle"]}, - e: {list: ["ecllipse"]}, - t: {list: ["text"]}, + e: {list: ["ellipse"]}, l: {list: ["line"]}, + p: {list: ["path"]}, }, - f: {prefix: ["fill", "fill"], + c: {prefix: ["stroke", "stroke"], r: {list: ["red"]}, b: {list: ["blue"]}, g: {list: ["green"]}, @@ -132,7 +156,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, h: {list: ["black"]}, w: {list: ["white"]}, }, - c: {prefix: ["stroke", "stroke"], + f: {prefix: ["fill", "fill"], r: {list: ["red"]}, b: {list: ["blue"]}, g: {list: ["green"]}, @@ -148,7 +172,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, can.core.List(can.keys, function(key) { if (!list) { // 查找失败 - return can.keys = [], can.Status(event, can.keys, "keys") + return can.keys = [], can.Status("keys", can.keys) } // 查找递进 @@ -183,6 +207,20 @@ Volcanos("onfigure", {help: "图形绘制", list: [], } return can.last = rect }, + _copy: function(can, target) { + var figure = can.onfigure._get(can, target).data + + var data = {} + can.core.List(figure.copy, function(item) { data[item] = target.Value(item) }) + data[figure.size.x||"x"] = target.Val(figure.size.x||"x") + data[figure.size.y||"y"] = target.Val(figure.size.y||"y") + + 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 + }, _ship: function(can, target, value) { return target.Value("ship", target.Value("ship").concat([value])) }, @@ -417,7 +455,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [], return data }, show: function(can, target) { - return target.tagName + return target.tagName + " " + target.Value("d") }, }, circle: { @@ -459,7 +497,7 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, show: function(can, target) { return ": (" + target.Val("cx") + "," + target.Val("cy") + ")" - + " > (" + target.Val("rx") + target.Val("ry") + ")" + + " > (" + target.Val("rx") + "," + target.Val("ry") + ")" }, }, block: { @@ -512,17 +550,15 @@ Volcanos("onfigure", {help: "图形绘制", list: [], }, }, }, ["/plugin/local/wiki/draw/heart.js"]) -Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "清空", "删除", "添加", "", - ["font-size", 12, 16, 18, 24, 32], +Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "", + ["grid", 1, 2, 3, 4, 5, 10, 20], ["stroke-width", 1, 2, 3, 4, 5], + ["font-size", 12, 16, 18, 24, 32], {text: [" c:", "div", "item"]}, ["stroke", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black"], {text: [" f:", "div", "item"]}, ["fill", "red", "yellow", "green", "purple", "blue", "cyan", "white", "black", "#0000"], - "", {text: [" g:", "div", "item"]}, ["go", "run", "auto", "manual"], {text: [" a:", "div", "item"]}, ["mode", "draw", "resize", "delete"], {text: [" s:", "div", "item"]}, ["shape", "block", "rect", "text", "line", "path", "circle", "ellipse", "heart"], - "", - ["grid", 1, 2, 3, 4, 5, 10, 20], ], "项目": function(event, can, key) { can.page.Modify(can, can.ui.project, {style: {display: can.ui.project.style.display=="none"? "block": "none"}}) @@ -534,9 +570,10 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "清 }, true) }, "清空": function(event, can) { - can.point = [], can.keys = [], can.svg.innerHTML = "", can.group = can.svg + can.group.innerHTML = "", can.point = [], can.keys = [], delete(can.temp) }, - "删除": function(event, can) {if (can.group == can.svg) {return} + "删除": function(event, can) { if (can.group == can.svg) { return } + can.page.Remove(can, event.target) can.page.Remove(can, can.group), can.page.Select(can, can.action, "option[value="+can.group.Value("class")+"]", function(item) { can.page.Remove(can, item) }) @@ -582,9 +619,9 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "清 }) return obj }, - resize: function(event, can, point) { + resize: function(event, can, point, target) { target = target || event.target if (point.length == 1) { - if (event.type == "click") { var target = event.target + if (event.type == "click") { can.current = {target: target, begin: can.core.List([target], function(item) { if (item.tagName == "g") { return } return { x: item.Val("x"), y: item.Val("y"), width: item.Val("width"), height: item.Val("height"), @@ -622,6 +659,11 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "清 can.point = [], event.target != can.svg && can.page.Remove(can, event.target) }, }, + _action: function(event, can, points, target) { + can.temp && can.page.Remove(can, can.temp) && delete(can.temp) + can.temp = can.onaction._mode[can.Action("mode")](event, can, points, target) + can.point.length == 0 && delete(can.temp) + }, _point: function(event, can) { var p = can.svg.getBoundingClientRect() var point = {x: event.clientX-p.x, y: event.clientY-p.y} @@ -629,13 +671,9 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "清 point.y = point.y - point.y % parseInt(can.Action("grid")) return point }, - _action: function(event, can, points) { - can.temp && can.page.Remove(can, can.temp) && delete(can.temp) - can.temp = can.onaction._mode[can.Action("mode")](event, can, points) - can.point.length == 0 && delete(can.temp) - }, - _show: function(event, can, target) { var figure = can.onfigure._get(can, target) - can.Status("target", (target.Group && target.Group().Value("class") || "") + " " + target.tagName + " " + ( + _show: function(can, target) { var figure = can.onfigure._get(can, target) + can.Status("group", target.Groups()) + can.Status("target", target.tagName + " " + ( figure? figure.show(can, target): "")) if (target.Value) { can.Status("zone", target.Value("zone")) @@ -643,7 +681,7 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "清 can.Status("name", target.Value("name")) } }, - _auto: function(event, can, target, pos) { + _auto: function(can, target, pos) { if (target.tagName == "text") { } else if (target == can.svg) { @@ -671,9 +709,14 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "清 can.onaction._mode.run(event, can) return } + var target = event.target + if (event.altKey) { + target = can.onfigure._copy(can, event.target) + can.Action("mode", "resize") + } if (event.target == can._target) { return } var point = can.onaction._point(event, can) - can.onaction._action(event, can, can.point = can.point.concat(point)) + can.onaction._action(event, can, can.point = can.point.concat(point), target) }, onmousemove: function(event, can) { var point = can.onaction._point(event, can) @@ -682,15 +725,15 @@ Volcanos("onaction", {help: "组件菜单", list: ["", "项目", "保存", "清 var pos = can.page.Prepos(event, event.target) if (can.Action("go") == "auto" && can.point.length == 0) { - can.onaction._auto(event, can, event.target, pos) + can.onaction._auto(can, event.target, pos) } can.onaction._action(event, can, can.point.concat(point)) }, onmouseover: function(event, can) { - can.onaction._show(event, can, event.target) + can.onaction._show(can, event.target) }, oncontextmenu: function(event, can) { - can.onaction._show(event, can, event.target) + can.onaction._show(can, event.target) }, }) Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑", "删除"], @@ -724,22 +767,11 @@ Volcanos("ondetail", {help: "组件详情", list: ["复制", "标签", "编辑", target.Value("text", obj.Value("pid")) }, def) }, - "复制": function(event, can) { target = event.target - var figure = can.onfigure._get(can, target).data - - var data = {} - can.core.List(figure.copy, function(item) { data[item] = target.Value(item) }) - data[figure.size.x||"x"] = target.Val(figure.size.x||"x")+20 - data[figure.size.y||"y"] = target.Val(figure.size.y||"y")+20 - - 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 + "复制": function(event, can) { + can.onfigure._copy(can, event.target) }, }) -Volcanos("onexport", {help: "导出数据", list: ["group", "target", "zone", "type", "name", "point", "keys"], +Volcanos("onexport", {help: "导出数据", list: ["point", "group", "target", "zone", "type", "name", "keys"], file: function(can, svg) { return [' (" + target.Val("r") + ")" + return "heart " + target.Value("tt") }, })