You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
479 lines
14 KiB
479 lines
14 KiB
<?xml version="1.0" encoding="utf-8" ?>
|
|
<?xml-stylesheet type="text/xsl" href="jsml.xsl"?>
|
|
<jsml xmlns="http://cutesoft.net/jsml"
|
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://cutesoft.net/jsml ../../JSML/jsml.xsd">
|
|
<panel jsml-class="border_item" height="94" width="140" border_color="#cccccc" border_width="1">
|
|
<property name="framepadding">
|
|
<get>
|
|
return self._framepadding || [0,0,0,0];
|
|
</get>
|
|
<set arguments="val">
|
|
<![CDATA[
|
|
var arr = val.split(",");
|
|
if(arr.length==1) {
|
|
var ret = IntSure(arr[0]);
|
|
self._framepadding = [ret,ret,ret,ret];
|
|
return;
|
|
}
|
|
self._framepadding = [0,0,0,0];
|
|
for(var i=0;i<4;i++) {
|
|
if(arr.length>i) {
|
|
var ret = IntSure(arr[i]);
|
|
self._framepadding[i] = ret;
|
|
}
|
|
}
|
|
|
|
function IntSure(v)
|
|
{
|
|
if(typeof(v)=="undefined" || v==null || v=="" || isNaN(v))
|
|
return 0;
|
|
return parseInt(v);
|
|
}
|
|
]]>
|
|
</set>
|
|
</property>
|
|
<property name="framename">
|
|
<get>
|
|
return self._framename;
|
|
</get>
|
|
<set>
|
|
self._framename = value;
|
|
</set>
|
|
</property>
|
|
<property name="emptycorner">
|
|
<get>
|
|
if(!self._emptycorner) return ",";
|
|
return "," + self._emptycorner + ",";
|
|
</get>
|
|
<set>
|
|
<![CDATA[
|
|
self._emptycorner = value;
|
|
]]>
|
|
</set>
|
|
</property>
|
|
<property name="emptyborder">
|
|
<get>
|
|
if(!self._emptyborder) return ",";
|
|
return "," + self._emptyborder + ",";
|
|
</get>
|
|
<set>
|
|
<![CDATA[
|
|
self._emptyborder = value;
|
|
]]>
|
|
</set>
|
|
</property>
|
|
<property name="cornersize">
|
|
<get>
|
|
<![CDATA[
|
|
//four corners, [width,height]
|
|
return self._cornersize || [[0,0],[0,0],[0,0],[0,0]];
|
|
]]>
|
|
</get>
|
|
<set>
|
|
<![CDATA[
|
|
if(!value) return;
|
|
var val = eval("("+value+")");
|
|
if(val.length == 0)
|
|
return;
|
|
if(val.length==1)
|
|
{
|
|
self._cornersize = [val[0],val[0],val[0],val[0]];
|
|
return;
|
|
}
|
|
self._cornersize = [[0,0],[0,0],[0,0],[0,0]];
|
|
for(var i=0;i<4;i++)
|
|
{
|
|
if(val.length<=i) continue;
|
|
self._cornersize[i] = val[i];
|
|
}
|
|
]]>
|
|
</set>
|
|
</property>
|
|
<property name="mode">
|
|
<get>
|
|
return self._mode || "tile";
|
|
</get>
|
|
<set>
|
|
<![CDATA[
|
|
if(value=="single") self._mode = "single";
|
|
else if(value=="corner") self._mode = "corner";
|
|
else self._mode = "tile";
|
|
]]>
|
|
</set>
|
|
</property>
|
|
<panel jsml-local="btn_use" dock="bottom" margin="2" height="24" visible="0">
|
|
<panel dock="right" width="60" margin="2" css_text="text-shadow: 2px 2px 5px #99999;border:solid #d1decd 1px; background:#f3f3f3;color:#333333;border-radius:2px; -webkit-border-radius:2px;">
|
|
<image dock="left" margin="0,0,0,2" src="images/accept.png" vertical_align="middle" horizontal_align="center" width="16" cursor="default"></image>
|
|
<label dock="fill" text="@Btn_Apply" margin="0,0,0,3" css_text="font-weight:bold;" vertical_align="middle" horizontal_align="left"></label>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.set_selection(null);
|
|
var pd = instance.get_framepadding();
|
|
var pdo = pd;
|
|
var es = ImageEditorDocument.GetOption("Ctx_FrameExpandSize");
|
|
if(!es) pd = [0,0,0,0];
|
|
var mode = instance.get_mode();
|
|
ImageEditorDocument.$0105(pd,DrawBorder);
|
|
function DrawBorder(layer)
|
|
{
|
|
if(mode=="tile" || mode=="single")
|
|
{
|
|
instance.PreviewTile(pdo, layer);
|
|
}
|
|
if(mode=="corner")
|
|
{
|
|
instance.PreviewCorner(pdo, layer);
|
|
}
|
|
}
|
|
instance.get_parent().get_parent().Remove();
|
|
]]>
|
|
</attach>
|
|
<initialize>
|
|
<![CDATA[
|
|
ImageEditorDocument.$043(self.get_element(),"top","#fce877","#dfb642");
|
|
]]>
|
|
</initialize>
|
|
<attach name="mousehover">
|
|
<![CDATA[
|
|
ImageEditorDocument.$043(self.get_element(),"top","#f1f6fa","#b0bce2");
|
|
]]>
|
|
</attach>
|
|
<attach name="mouseleave">
|
|
<![CDATA[
|
|
ImageEditorDocument.$043(self.get_element(),"top","#fce877","#dfb642");
|
|
return;
|
|
self.get_element().style.background = "";
|
|
if(jsml.msie) self.get_element().style.filter = "";
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
</panel>
|
|
<panel jsml-local="backpanel" dock="fill" vertical_align="middle" horizontal_align="center"></panel>
|
|
<panel jsml-local="fillpanel" dock="fill"></panel>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
self.Preview();
|
|
self.get_parent().SelectFrame(self);
|
|
return;
|
|
]]>
|
|
</attach>
|
|
<method name="Preview">
|
|
<![CDATA[
|
|
var pd = self.get_framepadding();
|
|
var pdo = pd;
|
|
var es = ImageEditorDocument.GetOption("Ctx_FrameExpandSize");
|
|
if(!es) pd = [0,0,0,0];
|
|
var rs = ImageEditorDocument.GetOption("CanvasRealSize");
|
|
ImageEditorDocument._canvas.width = rs.width+pd[1]+pd[3];
|
|
ImageEditorDocument._canvas.height = rs.height+pd[0]+pd[2];
|
|
ImageEditorDocument._2d.clearRect(0,0, ImageEditorDocument._canvas.width, ImageEditorDocument._canvas.height);
|
|
|
|
try{ImageEditorDocument._canvas.calcpos();}catch(x){}
|
|
|
|
var layers = ImageEditorDocument._history._layers;
|
|
for(var i=0;i<layers.length;i++)
|
|
{
|
|
var layer = layers[i];
|
|
if(ImageEditorDocument._history.$040(layer, "Hidden"))
|
|
continue;
|
|
var sx = layer._canvas_x + pd[3];
|
|
var sy = layer._canvas_y + pd[0];
|
|
var dx = layer._canvas.width;
|
|
var dy = layer._canvas.height;
|
|
ImageEditorDocument._2d.drawImage(layer._cacheCanvas || layer._canvas, sx, sy, dx, dy);
|
|
}
|
|
|
|
var mode = self.get_mode();
|
|
if(mode=="tile" || mode=="single")
|
|
{
|
|
self.PreviewTile(pdo);
|
|
return;
|
|
}
|
|
if(mode=="corner")
|
|
{
|
|
self.PreviewCorner(pdo);
|
|
return;
|
|
}
|
|
]]>
|
|
</method>
|
|
<method name="PreviewCorner" arguments="pdo,layer">
|
|
<![CDATA[
|
|
var ec = self.get_emptycorner();
|
|
var eb = self.get_emptyborder();
|
|
var cs = self.get_cornersize();
|
|
var _doc = ImageEditorDocument;
|
|
var drawobj = _doc;
|
|
if(layer) drawobj=layer;
|
|
var canvas = document.createElement("canvas");
|
|
canvas.width = drawobj._canvas.width;
|
|
canvas.height = drawobj._canvas.height;
|
|
var ctx = canvas.getContext("2d");
|
|
var count = 0;
|
|
for(var i=1;i<=4;i++)
|
|
{
|
|
if(ec.indexOf(","+i+",")!=-1)
|
|
{
|
|
calctime();
|
|
continue;
|
|
}
|
|
var img = new Image();
|
|
img.ix = i;
|
|
img.onload = function()
|
|
{
|
|
var x = 0;
|
|
var y = 0;
|
|
if(this.ix==2 || this.ix==3) x = drawobj._canvas.width-this.width;
|
|
if(this.ix==4 || this.ix==3) y = drawobj._canvas.height-this.height;
|
|
drawobj._2d.drawImage(this, x, y,this.width,this.height);
|
|
calctime();
|
|
}
|
|
img.src = "images/frame/" + self.get_framename() + "_"+i+".png";
|
|
}
|
|
var icanvas = document.createElement("canvas");
|
|
var i2d = icanvas.getContext("2d");
|
|
for(var i=1;i<=4;i++)
|
|
{
|
|
if(eb.indexOf(","+i+",")!=-1)
|
|
{
|
|
calctime();
|
|
continue;
|
|
}
|
|
var img = new Image();
|
|
img.ix = i;
|
|
img.onload = function()
|
|
{
|
|
var ix = this.ix;
|
|
var c_prev = cs[ix-1];
|
|
var c_next = ix==4?cs[0]:cs[ix];
|
|
var h = this.height;
|
|
var w = this.width;
|
|
var x = 0;
|
|
var y = 0;
|
|
var patt = null
|
|
if(ix==1)
|
|
{
|
|
x = c_prev[0];
|
|
w = drawobj._canvas.width - c_prev[0] - c_next[0];
|
|
patt = i2d.createPattern(this,"repeat-x");
|
|
}
|
|
if(ix==2)
|
|
{
|
|
x = drawobj._canvas.width - this.width;
|
|
y = c_prev[1];
|
|
h = drawobj._canvas.height - c_prev[1] - c_next[1];
|
|
patt = i2d.createPattern(this,"repeat-y");
|
|
}
|
|
if(ix==3)
|
|
{
|
|
x = c_next[0];
|
|
y = drawobj._canvas.height - this.height;
|
|
w = drawobj._canvas.width - c_prev[0] - c_next[0];
|
|
patt = i2d.createPattern(this,"repeat-x");
|
|
}
|
|
if(ix == 4)
|
|
{
|
|
y = c_next[1];
|
|
h = drawobj._canvas.height - c_prev[1] - c_next[1];
|
|
patt = i2d.createPattern(this,"repeat-y");
|
|
}
|
|
icanvas.width = w;
|
|
icanvas.height = h;
|
|
i2d.fillStyle = patt;
|
|
i2d.fillRect(0,0,w,h);
|
|
|
|
drawobj._2d.drawImage(icanvas,x,y,w,h);
|
|
calctime();
|
|
}
|
|
img.src = "images/frame/" + self.get_framename() + "_"+i+"0.png";
|
|
}
|
|
function calctime()
|
|
{
|
|
count++;
|
|
if(count>=8 && layer) _doc.$0118();
|
|
}
|
|
]]>
|
|
</method>
|
|
<method name="PreviewTile" arguments="pdo,layer">
|
|
<![CDATA[
|
|
var _doc = ImageEditorDocument;
|
|
var drawobj = _doc;
|
|
if(layer) drawobj = layer;
|
|
var img = new Image();
|
|
img.onload = function()
|
|
{
|
|
if(self.get_mode()=="tile")
|
|
{
|
|
var canvas = document.createElement("canvas");
|
|
canvas.width = drawobj._canvas.width;
|
|
canvas.height = drawobj._canvas.height;
|
|
var ctx = canvas.getContext("2d");
|
|
var pattern = ctx.createPattern(img,"repeat");
|
|
ctx.fillStyle = pattern;
|
|
ctx.fillRect(0,0,canvas.width,canvas.height);
|
|
ctx.clearRect(pdo[0],pdo[3],canvas.width-pdo[1]-pdo[3],canvas.height-pdo[0]-pdo[2]);
|
|
|
|
drawobj._2d.drawImage(canvas,0,0);
|
|
}
|
|
else
|
|
{
|
|
var scalex = drawobj._canvas.width/img.width;
|
|
var scaley = drawobj._canvas.height/img.height;
|
|
|
|
var canvas = document.createElement("canvas");
|
|
canvas.width = drawobj._canvas.width;
|
|
canvas.height = drawobj._canvas.height;
|
|
var ctx = canvas.getContext("2d");
|
|
ctx.scale(scalex,scaley);
|
|
ctx.drawImage(img,0,0);
|
|
drawobj._2d.drawImage(canvas,0,0);
|
|
}
|
|
if(layer) _doc.$0118();
|
|
}
|
|
img.src = "images/frame/" + self.get_framename() + ".png";
|
|
]]>
|
|
</method>
|
|
<method name="SetButtonEnable" arguments="val">
|
|
<![CDATA[
|
|
if(val==true)
|
|
{
|
|
btn_use.set_visible(1);
|
|
self.set_height(114);
|
|
}
|
|
else
|
|
{
|
|
btn_use.set_visible(0);
|
|
self.set_height(90);
|
|
}
|
|
]]>
|
|
</method>
|
|
<initialize>
|
|
<![CDATA[
|
|
var div = backpanel.get_element();
|
|
setTimeout(function(){
|
|
var w = self.get_current_width();
|
|
var pd = self.get_framepadding();
|
|
fillpanel.set_margin(pd);
|
|
if(self.get_mode()=="tile")
|
|
{
|
|
backpanel.set_background("url(images/frame/" + self.get_framename() + ".png)");
|
|
fillpanel.set_back_color("gray");
|
|
return;
|
|
}
|
|
var img = new Image();
|
|
img.onload = function()
|
|
{
|
|
if(img.width>w || img.height>90)
|
|
{
|
|
if(img.width/img.height<w/90)
|
|
{
|
|
img.style.height = "90px";
|
|
img.style.width = parseInt(img.width*90/img.height+"") + "px";
|
|
img.style.marginLeft = parseInt((w-img.width*90/img.height)/2 + "") + "px";
|
|
}
|
|
else
|
|
{
|
|
img.style.width = w + "px";
|
|
img.style.height = parseInt(img.height*w/img.width+"") + "px";
|
|
img.style.marginTop = parseInt((90-img.height*w/img.width)/2 + "") + "px";
|
|
}
|
|
}
|
|
else
|
|
{
|
|
img.style.marginLeft = parseInt((w-img.width)/2 + "") + "px";
|
|
img.style.marginTop = parseInt((90-img.height)/2 + "") + "px";
|
|
}
|
|
div.appendChild(img);
|
|
}
|
|
img.src = "images/frame/" + self.get_framename() + ".png";
|
|
},100);
|
|
]]>
|
|
</initialize>
|
|
</panel>
|
|
<panel jsml-class="borderlist" right="0" width="150" border_width="0,1,1,1" back_color="#eeeeee" border_color="#cccccc">
|
|
<panel dock="top" height="24" css_text="background:#bcc3c6 url(images/back/group.gif) repeat-x;">
|
|
<image dock="right" src="images/close.gif" tooltip="@Title_Close" vertical_align="middle" width="16" cursor="default">
|
|
<attach name="click">
|
|
if(instance._selectedframe)
|
|
{
|
|
instance._selectedframe = null;
|
|
ImageEditorDocument.$0118();
|
|
}
|
|
instance.Remove();
|
|
</attach>
|
|
</image>
|
|
<label dock="fill" width="10" overflow="visible" text="@Tool_Frame_Head" vertical_align="middle" text_color="#545454" css_text="font-weight:bold;" margin="0,0,0,3"></label>
|
|
</panel>
|
|
<panel dock="bottom" height="22">
|
|
<checkbox dock="left" width="20" vertical_align="middle" margin="0,0,2,0">
|
|
<initialize>
|
|
<![CDATA[
|
|
self.set_checked(ImageEditorDocument.GetOption("Ctx_FrameExpandSize"));
|
|
]]>
|
|
</initialize>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.SetOption("Ctx_FrameExpandSize",self.get_checked());
|
|
]]>
|
|
</attach>
|
|
</checkbox>
|
|
<label dock="fill" vertical_align="middle" horizontal_align="left" text="@Tool_Frame_Expand"></label>
|
|
</panel>
|
|
<panel dock="fill" overflow_y="scroll">
|
|
<panel jsml-base="border_item" dock="top" framepadding="10" framename="greenflower" mode="tile" margin="3"></panel>
|
|
<panel jsml-base="border_item" dock="top" framepadding="40,45,40,45" framename="rope" mode="single" margin="3"></panel>
|
|
<panel jsml-base="border_item" dock="top" framepadding="80" framename="leaf" mode="single" margin="3"></panel>
|
|
<panel jsml-base="border_item" dock="top" framepadding="35" framename="fallleaf" mode="corner" emptycorner="2,4" emptyborder="1,2,3,4" margin="3"></panel>
|
|
<panel jsml-base="border_item" dock="top" framepadding="30" framename="redline" mode="corner" cornersize="[[138,122]]" emptycorner="" emptyborder="" margin="3"></panel>
|
|
<panel jsml-base="border_item" dock="top" framepadding="19,19,21,18" framename="brooch" mode="corner" cornersize="[[47,42],[23,24],[39,45],[22,25]]" margin="3"></panel>
|
|
<method name="SelectFrame" arguments="frame">
|
|
<![CDATA[
|
|
var arr = self.get_children();
|
|
for(var i=0;i<arr.length;i++)
|
|
{
|
|
arr[i].set_border_color("#cccccc");
|
|
arr[i].SetButtonEnable(false);
|
|
}
|
|
if(frame)
|
|
{
|
|
frame.set_border_color("red");
|
|
frame.SetButtonEnable(true);
|
|
instance._selectedframe = frame;
|
|
}
|
|
]]>
|
|
</method>
|
|
</panel>
|
|
<initialize>
|
|
<![CDATA[
|
|
ImageEditorDocument._framelist = self;
|
|
setInterval(function(){
|
|
self.AdjustHight();
|
|
},100);
|
|
self.AdjustHight();
|
|
]]>
|
|
</initialize>
|
|
<method name="AdjustHight">
|
|
<![CDATA[
|
|
var rect=jsml.get_body_rect();
|
|
self.set_left(rect.width-150);
|
|
if(rect.height==self.get_height())
|
|
return;
|
|
self.set_height(rect.height);
|
|
]]>
|
|
</method>
|
|
<method name="Remove">
|
|
<![CDATA[
|
|
ImageEditorDocument._framelist = null;
|
|
self.dispose();
|
|
]]>
|
|
</method>
|
|
</panel>
|
|
<execute>
|
|
<![CDATA[
|
|
plugin.LoadUI = function(ctrl)
|
|
{
|
|
ctrl.append_child(jsml.class_create_instance("borderlist"));
|
|
}
|
|
]]>
|
|
</execute>
|
|
</jsml>
|