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.
876 lines
30 KiB
876 lines
30 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">
|
|
<include src="uielement.xml?{now}"></include>
|
|
<include src="common.xml?{now}"></include>
|
|
<panel jsml-class="html5_ui" parent="container_panel">
|
|
<panel height="36" back_color="#ebebeb" dock="top" text_color="" horizontal_align="left" border_color="#a4a4a4" border_width="0,0,1,0" css_text="background:url('images/back/menubar.gif') left bottom repeat-x;">
|
|
<!--
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" menuname="File" menuimg="images/menu/new.png" tooltip="@Title_New">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.$094("create",function(plugin)
|
|
{
|
|
if(!plugin.LoadUI)return;
|
|
plugin.LoadUI(instance);
|
|
});
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
-->
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Save" menuname="Save" menuimg="images/menu/save.png">
|
|
<attach name="click">
|
|
//ImageEditorDocument.set_SelectedTool("save");
|
|
ImageEditorDocument.$053();
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Undo" menuname="Undo" menuimg="images/menu/undo.png">
|
|
<initialize>
|
|
<![CDATA[
|
|
setInterval(function(){
|
|
var _his = ImageEditorDocument.get_history();
|
|
if(_his == ImageEditorDocument.$057()[0])
|
|
self.set_opacity(50);
|
|
else
|
|
self.set_opacity(100);
|
|
},500);
|
|
]]>
|
|
</initialize>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(self.get_opacity()==50) return;
|
|
var oldtool = ImageEditorDocument.get_SelectedTool();
|
|
ImageEditorDocument.set_SelectedTool("undo");
|
|
if(oldtool)
|
|
{
|
|
setTimeout(function(){ImageEditorDocument.set_SelectedTool(oldtool);},50);
|
|
}
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Redo" menuname="Redo" menuimg="images/menu/redo.png">
|
|
<initialize>
|
|
<![CDATA[
|
|
setInterval(function(){
|
|
var _his = ImageEditorDocument.get_history();
|
|
var _hislist = ImageEditorDocument.$057();
|
|
if(_his == _hislist[_hislist.length-1])
|
|
self.set_opacity(50);
|
|
else
|
|
self.set_opacity(100);
|
|
},500);
|
|
]]>
|
|
</initialize>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(self.get_opacity()==50) return;
|
|
var oldtool = ImageEditorDocument.get_SelectedTool();
|
|
ImageEditorDocument.set_SelectedTool("redo");
|
|
if(oldtool)
|
|
{
|
|
setTimeout(function(){ImageEditorDocument.set_SelectedTool(oldtool);},50);
|
|
}
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Cut" menuname="Cut" menuimg="images/menu/cut.png">
|
|
<initialize>
|
|
<![CDATA[
|
|
setInterval(function(){
|
|
var sel = ImageEditorDocument.get_selection();
|
|
if(sel)
|
|
self.set_opacity(100);
|
|
else
|
|
self.set_opacity(50);
|
|
},500);
|
|
]]>
|
|
</initialize>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(self.get_opacity()==50) return;
|
|
ImageEditorDocument.set_SelectedTool("cut");
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Copy" menuname="Copy" menuimg="images/menu/copy.png">
|
|
<initialize>
|
|
<![CDATA[
|
|
setInterval(function(){
|
|
var sel = ImageEditorDocument.get_selection();
|
|
if(sel)
|
|
self.set_opacity(100);
|
|
else
|
|
self.set_opacity(50);
|
|
},500);
|
|
]]>
|
|
</initialize>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(self.get_opacity()==50) return;
|
|
ImageEditorDocument.set_SelectedTool("copy");
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Paste" menuname="Paste" menuimg="images/menu/paste.png">
|
|
<initialize>
|
|
<![CDATA[
|
|
setInterval(function(){
|
|
var sel = ImageEditorDocument._clipboard;
|
|
if(sel)
|
|
self.set_opacity(100);
|
|
else
|
|
self.set_opacity(50);
|
|
},500);
|
|
]]>
|
|
</initialize>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(self.get_opacity()==50) return;
|
|
ImageEditorDocument.set_SelectedTool("paste");
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Effect" menuname="Adjust" menuimg="images/menu/adjust.png">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.set_SelectedTool(null);
|
|
var box=jsml.class_create_instance("floatbox");
|
|
//box.set_manualclose(true);
|
|
box.show(self.get_element(),0,0,{"floatMode":"b-r"});
|
|
ImageEditorDocument.$094("adjust", function (plugin) {
|
|
if (!plugin.LoadUI) return;
|
|
plugin.LoadUI(box);
|
|
});
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Effect" menuname="Effect" menuimg="images/menu/effect.png">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.set_SelectedTool(null);
|
|
var box=jsml.class_create_instance("floatbox");
|
|
box.show(self.get_element(),0,0,{"floatMode":"b-r"});
|
|
ImageEditorDocument.$094("effect", function (plugin) {
|
|
if (!plugin.LoadUI) return;
|
|
plugin.LoadUI(box);
|
|
});
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Rotate90Left" menuname="Rotate90Left" menuimg="images/rotateleft90.png">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.$0122(270);
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_Rotate90Right" menuname="Rotate90Right" menuimg="images/rotateright90.png">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.$0122(90);
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_FlipH" menuname="FlipH" menuimg="images/fliph.png">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.$0128("h");
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="left" margin="1,0,1,3" jsml-base="menuitem" width="30" tooltip="@Title_FlipV" menuname="FlipV" menuimg="images/flipv.png">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
ImageEditorDocument.$0128("v");
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
</panel>
|
|
<panel width="150" dock="right" back_color="#eeeeee" border_color="#cccccc" border_width="0,1,1,1" padding="0">
|
|
<panel dock="top" height="24" css_text="background:#bcc3c6 url(images/back/group.gif) repeat-x;">
|
|
<label dock="fill" text="@Layer_HistoryList" vertical_align="middle" text_color="#545454" css_text="font-weight:bold;" margin="0,0,0,3"></label>
|
|
</panel>
|
|
<panel jsml-base="historypanel" dock="top" height="270" css_text="background:#ffffff url(images/back/list.gif) top left repeat-x;"></panel>
|
|
<htmlcontrol dock="bottom" height="1" overflow="none">
|
|
<xmldata>
|
|
<input id="imageeditorloadfile" type="file" accept="image/*" />
|
|
</xmldata>
|
|
</htmlcontrol>
|
|
<panel dock="bottom" height="22" border_color="#cccccc" border_width="1,0,0,0">
|
|
<image dock="left" width="16" zoom="out" src="images/toolopenfile.gif" tooltip="@Title_LoadFile">
|
|
<initialize>
|
|
<![CDATA[
|
|
if(typeof(FileReader)=="undefined")
|
|
self.set_visible(0);
|
|
]]>
|
|
</initialize>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
var input=document.getElementById("imageeditorloadfile");
|
|
if(!input.files || typeof(FileReader)=="undefined")
|
|
{
|
|
alert(ImageEditorDocument.Text["FileAPI"]);
|
|
return;
|
|
}
|
|
input.onchange=function()
|
|
{
|
|
var file=input.files[0];
|
|
ImageEditorDocument.$0109(file);
|
|
input.value = "";
|
|
}
|
|
input.click();
|
|
]]>
|
|
</attach>
|
|
</image>
|
|
<image dock="left" width="16" zoom="out" src="images/toolnewlayer.gif" tooltip="@Title_NewLayer">
|
|
<attach name="click">
|
|
ImageEditorDocument.$0111();
|
|
</attach>
|
|
</image>
|
|
<image dock="left" width="16" zoom="out" src="images/toolmoveup.gif" tooltip="@Title_MoveUp">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
var layerlist = ImageEditorDocument.$073();
|
|
var currlayer = ImageEditorDocument.get_layer();
|
|
if(currlayer==layerlist[layerlist.length-1])
|
|
return;
|
|
ImageEditorDocument.$082(currlayer);
|
|
]]>
|
|
</attach>
|
|
</image>
|
|
<image dock="left" width="16" zoom="out" src="images/toolmerge.gif" tooltip="@Title_Merge">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
var layerlist = ImageEditorDocument.$073();
|
|
if(layerlist.length==1)
|
|
return;
|
|
if(!confirm(ImageEditorDocument.Text["ConfirmMergeLayer"]))
|
|
return;
|
|
ImageEditorDocument.$085();
|
|
]]>
|
|
</attach>
|
|
</image>
|
|
<image dock="left" width="16" zoom="out" src="images/toolrecycle.gif" tooltip="@Title_DeleteLayer">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(!confirm(ImageEditorDocument.Text["ConfirmDelete"]))
|
|
return;
|
|
|
|
var currlayer = ImageEditorDocument.get_layer();
|
|
|
|
var newlayer = jsml.class_create_instance("$042", [ImageEditorDocument]);
|
|
newlayer.set_name(ImageEditorDocument.Text["Layer_Remove"]);
|
|
|
|
ImageEditorDocument.set_selection(null);
|
|
ImageEditorDocument.$097(newlayer);
|
|
|
|
var ls = ImageEditorDocument.get_history()._layers;
|
|
if(ls.length>2)
|
|
ls.splice(ls.length-1,1);
|
|
else
|
|
newlayer.set_name(ImageEditorDocument.Text["Layer_Background"]);
|
|
|
|
var selix=0;
|
|
for (var i = ls.length - 1; i >= 0; i--) {
|
|
if (ls[i]._layerid != currlayer._layerid)
|
|
continue;
|
|
ls.splice(i,1);
|
|
selix = i-1;
|
|
break;
|
|
}
|
|
if(selix<0)selix=0;
|
|
ImageEditorDocument.set_layer(ls[selix]);
|
|
ImageEditorDocument.$0118();
|
|
ImageEditorDocument.invoke_event("HistorySelected");
|
|
]]>
|
|
</attach>
|
|
</image>
|
|
</panel>
|
|
<panel dock="top" height="24" css_text="background:#bcc3c6 url(images/back/group.gif) repeat-x;">
|
|
<label dock="fill" text="@Layer_LayerList" vertical_align="middle" text_color="#545454" css_text="font-weight:bold;" margin="0,0,0,3"></label>
|
|
</panel>
|
|
<panel jsml-base="layerpanel" dock="fill" css_text="background:#ffffff url(images/back/list.gif) top left repeat-x;">
|
|
</panel>
|
|
</panel>
|
|
<panel height="23" back_color="#666666" text_color="white" dock="bottom">
|
|
<label dock="left" width="10" margin="0,0,0,8" overflow="visible" vertical_align="middle">
|
|
<attach name="attach_dom">
|
|
<![CDATA[
|
|
if(self._eventattached)return;
|
|
self._eventattached=true;
|
|
self._handleMousePosChanged=function(evtname,mxy)
|
|
{
|
|
if(!mxy || !mxy.offsetX)
|
|
{
|
|
self.set_text("x:, y:");
|
|
return;
|
|
}
|
|
self.set_text("x:"+mxy.offsetX+", y:" + mxy.offsetY);
|
|
}
|
|
ImageEditorDocument.attach_event("MousePosChanged",self._handleMousePosChanged);
|
|
]]>
|
|
</attach>
|
|
<attach name="detach_dom">
|
|
<![CDATA[
|
|
self._eventattached=false;
|
|
ImageEditorDocument.detach_event("MousePosChanged",self._handleMousePosChanged);
|
|
]]>
|
|
</attach>
|
|
</label>
|
|
<panel dock="right" width="60" margin="0,5,0,3" vertical_align="middle">
|
|
<label dock="top" jsml-local="txt_zoom" height="23" width="60" margin="0,5,0,0" vertical_align="middle" css_text="font-size:11px;">
|
|
<initialize>
|
|
<![CDATA[
|
|
var myself = self;
|
|
function RefreshZoomStatus()
|
|
{
|
|
var zf = ImageEditorDocument.GetOption("ZoomFactor");
|
|
var zc = ImageEditorDocument.GetOption("ZoomCount");
|
|
|
|
var za = 1;
|
|
if(zc>0)
|
|
za = zf["In"][zc-1];
|
|
if(zc<0)
|
|
za = zf["Out"][0-zc-1];
|
|
var zastr = za*100 + "%";
|
|
|
|
myself.set_text(zastr);
|
|
|
|
setTimeout(RefreshZoomStatus,500);
|
|
}
|
|
setTimeout(RefreshZoomStatus,500);
|
|
]]>
|
|
</initialize>
|
|
<attach name="mousehover">
|
|
if(ImageEditorDocument._selectedtool == "freesize")
|
|
return;
|
|
self.set_visible(0);
|
|
ddl_zoom.set_visible(1);
|
|
ddl_zoom.LoadDefault();
|
|
</attach>
|
|
</label>
|
|
<dropdown dock="top" jsml-local="ddl_zoom" visible="0" border_width="0" width="60" margin="2" height="19" vertical_align="middle" css_text="font-size:11px; border-width:0px;">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(ImageEditorDocument._selectedtool == "freesize")
|
|
return;
|
|
if(!self._openlist && !jsml.safari)
|
|
{
|
|
self._openlist = true;
|
|
return;
|
|
}
|
|
self._openlist = null;
|
|
var curval = self.get_text();
|
|
if(curval == self.oldval)
|
|
{
|
|
ddl_zoom.set_visible(0);
|
|
txt_zoom.set_visible(1);
|
|
return;
|
|
}
|
|
self.oldval = curval;
|
|
ImageEditorDocument.SetOption("ZoomCount",curval);
|
|
ImageEditorDocument.$0118();
|
|
if(ImageEditorDocument._cropcomp._cropdiv.style.display != "none")
|
|
ImageEditorDocument.$061();
|
|
txt_zoom.set_visible(1);
|
|
ddl_zoom.set_visible(0);
|
|
]]>
|
|
</attach>
|
|
<attach name="mousehover">
|
|
<![CDATA[
|
|
if(!jsml.firefox)
|
|
self._openlist = null;
|
|
]]>
|
|
</attach>
|
|
<attach name="mouseleave">
|
|
<![CDATA[
|
|
if(self._openlist)
|
|
return;
|
|
txt_zoom.set_visible(1);
|
|
ddl_zoom.set_visible(0);
|
|
]]>
|
|
</attach>
|
|
<method name="LoadDefault">
|
|
<![CDATA[
|
|
var zc = ImageEditorDocument.GetOption("ZoomCount");
|
|
self.oldval = zc;
|
|
self.set_text(zc+"");
|
|
]]>
|
|
</method>
|
|
<initialize>
|
|
<![CDATA[
|
|
self.LoadDefault();
|
|
self._sel.style.borderWidth = "0px";
|
|
self._sel.style.fontSize = "11px";
|
|
self._sel.style.height = "19px";
|
|
]]>
|
|
</initialize>
|
|
<listitem value="-7" text="20%"></listitem>
|
|
<listitem value="-6" text="30%"></listitem>
|
|
<listitem value="-5" text="40%"></listitem>
|
|
<listitem value="-4" text="50%"></listitem>
|
|
<listitem value="-3" text="60%"></listitem>
|
|
<listitem value="-2" text="80%"></listitem>
|
|
<listitem value="-1" text="90%"></listitem>
|
|
<listitem value="0" text="100%"></listitem>
|
|
<listitem value="1" text="200%"></listitem>
|
|
<listitem value="2" text="300%"></listitem>
|
|
<listitem value="3" text="400%"></listitem>
|
|
<listitem value="4" text="500%"></listitem>
|
|
<listitem value="5" text="600%"></listitem>
|
|
<listitem value="6" text="700%"></listitem>
|
|
<listitem value="7" text="800%"></listitem>
|
|
<listitem value="8" text="900%"></listitem>
|
|
<listitem value="9" text="1000%"></listitem>
|
|
</dropdown>
|
|
</panel>
|
|
<label dock="right" width="10" overflow="visible" vertical_align="middle" horizontal_align="right" css_text="font-size:11px;" text="@Status_Zoom"></label>
|
|
<label dock="right" width="80" margin="0,10,0,0" vertical_align="middle" css_text="font-size:11px;">
|
|
<initialize>
|
|
<![CDATA[
|
|
var myself = self;
|
|
function RefreshCanvasStatus()
|
|
{
|
|
var w = ImageEditorDocument._canvas.width;
|
|
var h = ImageEditorDocument._canvas.height;
|
|
|
|
var str = " " + w + "*" + h+ ", ";
|
|
myself.set_text(str);
|
|
|
|
setTimeout(RefreshCanvasStatus,2000);
|
|
}
|
|
setTimeout(RefreshCanvasStatus,500);
|
|
]]>
|
|
</initialize>
|
|
</label>
|
|
<label dock="right" width="10" overflow="visible" vertical_align="middle" horizontal_align="right" css_text="font-size:11px;" text="@Status_Size"></label>
|
|
</panel>
|
|
<panel dock="fill">
|
|
<panel width="70" dock="left" padding="4" border_color="gray" css_text="background:#fcfcfc url('images/back/toolbar.gif') bottom left repeat-x;" back_color="" border_width="0,0,0,0">
|
|
<panel dock="bottom" height="150" border_width="1,0,0,0" border_color="#eeeeee">
|
|
<panel dock="top" height="30" margin="5,0,0,0">
|
|
<panel left="30">
|
|
<image src="images/exchange.gif" border_width="0" tooltip="@Title_Exchange" cursor="default">
|
|
<attach name="click">
|
|
<![CDATA[
|
|
var _forecolor = ImageEditorDocument.GetOption("Ctx_ForeColor") || "Black";
|
|
var _backcolor = ImageEditorDocument.GetOption("Ctx_BackColor") || "White";
|
|
ImageEditorDocument.SetOption("Ctx_ForeColor",_backcolor);
|
|
ImageEditorDocument.SetOption("Ctx_BackColor",_forecolor);
|
|
//Ctx_LineWidth.set_back_color(_backcolor);
|
|
Ctx_ForeColor.set_back_color(_backcolor);
|
|
Ctx_BackColor.set_back_color(_forecolor);
|
|
]]>
|
|
</attach>
|
|
</image>
|
|
</panel>
|
|
<panel jsml-local="Ctx_ForeColor" left="17" top="13" width="16" height="16" border_width="1" border_color="gray" tooltip="@Title_ForeColor">
|
|
<attach name="click" arguments="sender,evt">
|
|
<![CDATA[
|
|
//popup color picker dialog likes PS
|
|
var cp = ImageEditorDocument.$050();
|
|
cp.set_target(self);
|
|
cp.set_visible(1);
|
|
//var style = cp._element.style;
|
|
function AdjustPos()
|
|
{
|
|
var target = self.get_element();
|
|
var y = 0;
|
|
var x = 0;
|
|
while(target != document.body)
|
|
{
|
|
x += parseInt(target.offsetLeft)||0;
|
|
y += parseInt(target.offsetTop)||0;
|
|
target = target.parentNode;
|
|
}
|
|
var left = x + self.get_current_width() + 5;
|
|
var top = y - cp.get_current_height() + self.get_current_height();
|
|
if(top<0) top =0;
|
|
cp.set_offset_x(left);
|
|
cp.set_offset_y(top);
|
|
}
|
|
AdjustPos();
|
|
ImageEditorDocument.CancelBubble(evt);
|
|
return false;
|
|
]]>
|
|
</attach>
|
|
<method name="SaveColor" arguments="color">
|
|
self.set_back_color(color);
|
|
ImageEditorDocument.SetOption("Ctx_ForeColor",color);
|
|
</method>
|
|
<initialize>
|
|
self.set_back_color(ImageEditorDocument.GetOption('Ctx_ForeColor') || 'Black');
|
|
</initialize>
|
|
<attach name="attach_dom">
|
|
<![CDATA[
|
|
if(self._eventattached)return;
|
|
self._eventattached=true;
|
|
self._handleOptionChanged=function()
|
|
{
|
|
var color = ImageEditorDocument.GetOption('Ctx_ForeColor');
|
|
if(self.get_back_color()!=color)
|
|
self.set_back_color(color);
|
|
}
|
|
ImageEditorDocument.attach_event("OptionChanged",self._handleOptionChanged);
|
|
]]>
|
|
</attach>
|
|
<attach name="detach_dom">
|
|
<![CDATA[
|
|
self._eventattached=false;
|
|
ImageEditorDocument.detach_event("OptionChanged",self._handleOptionChanged);
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel jsml-local="Ctx_BackColor" left="5" top="2" width="16" height="16" border_width="1" border_color="gray" tooltip="@Title_BackColor">
|
|
<attach name="click" arguments="sender,evt">
|
|
<![CDATA[
|
|
//popup color picker dialog likes PS
|
|
var cp = ImageEditorDocument.$050();
|
|
cp.set_target(self);
|
|
cp.set_visible(1);
|
|
function AdjustPos()
|
|
{
|
|
var target = self.get_element();
|
|
var y = 0;
|
|
var x = 0;
|
|
while(target != document.body)
|
|
{
|
|
x += parseInt(target.offsetLeft)||0;
|
|
y += parseInt(target.offsetTop)||0;
|
|
target = target.parentNode;
|
|
}
|
|
var left = x + self.get_current_width() + 5;
|
|
var top = y - cp.get_current_height() + self.get_current_height();
|
|
if(top<0) top =0;
|
|
cp.set_offset_x(left);
|
|
cp.set_offset_y(top);
|
|
}
|
|
AdjustPos();
|
|
ImageEditorDocument.CancelBubble(evt);
|
|
return false;
|
|
]]>
|
|
</attach>
|
|
<method name="SaveColor" arguments="color">
|
|
self.set_back_color(color);
|
|
ImageEditorDocument.SetOption("Ctx_BackColor",color);
|
|
</method>
|
|
<initialize>
|
|
self.set_back_color(ImageEditorDocument.GetOption('Ctx_BackColor'));
|
|
</initialize>
|
|
<attach name="attach_dom">
|
|
<![CDATA[
|
|
if(self._eventattached)return;
|
|
self._eventattached=true;
|
|
self._handleOptionChanged=function()
|
|
{
|
|
self.set_back_color(ImageEditorDocument.GetOption('Ctx_BackColor'));
|
|
}
|
|
ImageEditorDocument.attach_event("OptionChanged",self._handleOptionChanged);
|
|
]]>
|
|
</attach>
|
|
<attach name="detach_dom">
|
|
<![CDATA[
|
|
self._eventattached=false;
|
|
ImageEditorDocument.detach_event("OptionChanged",self._handleOptionChanged);
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
</panel>
|
|
<panel dock="top" height="24" horizontal_align="center" vertical_align="middle" tooltip="@Title_LineWidth">
|
|
<panel jsml-local="Ctx_LineWidth" width="50" height="1" back_color="black">
|
|
<initialize>
|
|
self.set_height(ImageEditorDocument.GetOption('Ctx_LineWidth') || 1);
|
|
</initialize>
|
|
</panel>
|
|
<attach name="attach_dom">
|
|
<![CDATA[
|
|
if(self._eventattached)return;
|
|
self._eventattached=true;
|
|
self._handleOptionChanged=function()
|
|
{
|
|
Ctx_LineWidth.set_height(ImageEditorDocument.GetOption("Ctx_LineWidth")||1);
|
|
}
|
|
ImageEditorDocument.attach_event("OptionChanged",self._handleOptionChanged);
|
|
]]>
|
|
</attach>
|
|
<attach name="detach_dom">
|
|
<![CDATA[
|
|
self._eventattached=false;
|
|
ImageEditorDocument.detach_event("OptionChanged",self._handleOptionChanged);
|
|
]]>
|
|
</attach>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
//lineselector.set_target(self);
|
|
var box=jsml.class_create_instance("floatbox");
|
|
box.set_vertical_align("middle");
|
|
box.set_horizontal_align("center");
|
|
box.show(self.get_element(),0,0,{"floatMode":"r-b"});
|
|
var panel = jsml.class_create_instance("lineselectorpanel");
|
|
panel.set_target(self);
|
|
panel._box = box;
|
|
box.append_child(panel);
|
|
]]>
|
|
</attach>
|
|
<attach name="mousehover">
|
|
self.set_back_color("white");
|
|
</attach>
|
|
<attach name="mouseleave">
|
|
self.set_back_color("");
|
|
</attach>
|
|
</panel>
|
|
<panel dock="top" height="24" margin="2,2,0,0" css_text="border:solid #999999 1px; background:#f3f3f3;color:#333333;border-radius:2px; -webkit-border-radius:2px;">
|
|
<image src="images/frame.png" width="16" margin="0,1,0,1" dock="left" vertical_align="middle"></image>
|
|
<label dock="fill" vertical_align="middle" horizontal_align="center" text="@Tool_Frame_Head"></label>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(ImageEditorDocument._watermarklist)
|
|
ImageEditorDocument._watermarklist.Remove();
|
|
if(ImageEditorDocument._framelist)
|
|
return;
|
|
ImageEditorDocument.set_SelectedTool(null);
|
|
ImageEditorDocument.$083();
|
|
ImageEditorDocument.$094("border", function (plugin) {
|
|
if (!plugin.LoadUI) return;
|
|
plugin.LoadUI(instance);
|
|
});
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
<panel dock="top" height="24" margin="5,2,0,0" css_text="border:solid #999999 1px; background:#f3f3f3;color:#333333;border-radius:2px; -webkit-border-radius:2px;">
|
|
<label dock="fill" vertical_align="middle" text_align="center" text="@Tool_Water_Head"></label>
|
|
<attach name="click">
|
|
<![CDATA[
|
|
if(ImageEditorDocument._framelist) ImageEditorDocument._framelist.Remove();
|
|
if(ImageEditorDocument._watermarklist)
|
|
return;
|
|
ImageEditorDocument.set_SelectedTool(null);
|
|
ImageEditorDocument.$083();
|
|
ImageEditorDocument.$094("watermark", function (plugin) {
|
|
if (!plugin.LoadUI) return;
|
|
plugin.LoadUI(instance);
|
|
});
|
|
]]>
|
|
</attach>
|
|
</panel>
|
|
</panel>
|
|
<panel dock="fill">
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="arrow" tooltip="@Title_Arrow" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="freesize" tooltip="Free Transform" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="select" tooltip="@Title_Select" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="crop" tooltip="@Title_Crop"/>
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="resize" tooltip="@Title_Resize" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="rotate" tooltip="@Title_Rotate" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="rect" tooltip="@Title_Rect" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="arc" tooltip="@Title_Arc" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="polygon" tooltip="@Title_Polygon" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="star" tooltip="@Title_Star" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="pen" tooltip="@Title_Pen" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="line" tooltip="@Title_Line" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="grad" tooltip="@Title_Gradient" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="fill" tooltip="@Title_Fill" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="erase" tooltip="@Title_Erase" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="stamp" tooltip="@Title_Stamp" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="text" tooltip="@Title_Text"/>
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="colorpicker" tooltip="@Title_Colorpicker" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="zoom" tooltip="@Title_Zoom" />
|
|
<image jsml-base="toolbutton" dock="flow" ToolName="redeye" tooltip="@Title_Redeye" />
|
|
</panel>
|
|
</panel>
|
|
<panel dock="top" height="32" padding="5,0,5,5" overflow="none" border_color="#cccccc" border_width="0,0,1,0" back_color="#eeeeee">
|
|
<method name="UpdateSubMenu" arguments="toolname">
|
|
<![CDATA[
|
|
while(self.get_children().length)
|
|
self.remove_child(self.get_children()[0]);
|
|
|
|
ImageEditorDocument._submenu = null;
|
|
ImageEditorDocument.textcontainer.SetVisible(0);
|
|
var submenu = "";
|
|
switch(toolname)
|
|
{
|
|
case "rect":
|
|
submenu = "submenudrawarea";
|
|
break;
|
|
case "arc":
|
|
submenu = "submenudrawarc";
|
|
break;
|
|
case "grad":
|
|
submenu = "submenugradient";
|
|
break;
|
|
case "pen":
|
|
submenu = "submenudrawpen";
|
|
break;
|
|
case "line":
|
|
submenu = "submenudrawline";
|
|
break;
|
|
case "rotate":
|
|
submenu = "submenurotate";
|
|
break;
|
|
case "polygon":
|
|
submenu = "submenupolygon";
|
|
break;
|
|
case "star":
|
|
submenu = "submenustar";
|
|
break;
|
|
case "crop":
|
|
submenu = "submenucrop";
|
|
break;
|
|
case "erase":
|
|
submenu = "submenuerase";
|
|
break;
|
|
case "text":
|
|
submenu = "submenutext";
|
|
break;
|
|
case "stamp":
|
|
submenu = "submenustamp";
|
|
break;
|
|
case "resize":
|
|
submenu = "submenuresize";
|
|
break;
|
|
case "zoom":
|
|
submenu = "submenuzoom";
|
|
break;
|
|
case "save":
|
|
submenu = "submenusave";
|
|
break;
|
|
case "fill":
|
|
submenu = "submenuvarnish";
|
|
break;
|
|
case "redeye":
|
|
submenu = "submenuredeye";
|
|
break;
|
|
}
|
|
if(submenu=="")
|
|
return;
|
|
|
|
function AfterLoad(ctrl,item)
|
|
{
|
|
ImageEditorDocument._submenu = item;
|
|
item.set_dock("fill");
|
|
item._element.style.marginTop = "30px";
|
|
ctrl.append_child(item);
|
|
|
|
function AnimationShow()
|
|
{
|
|
var mt = parseInt(item._element.style.marginTop);
|
|
mt -= 3;
|
|
if(mt<=0)
|
|
{
|
|
mt=0;
|
|
item._element.style.marginTop = mt+"px";
|
|
return;
|
|
}
|
|
item._element.style.marginTop = mt+"px";
|
|
setTimeout(AnimationShow,20);
|
|
}
|
|
setTimeout(AnimationShow,20);
|
|
}
|
|
ImageEditorDocument.$094("submenu",function(plugin)
|
|
{
|
|
if(!plugin.LoadUI)return;
|
|
plugin.LoadUI(self,submenu,AfterLoad);
|
|
});
|
|
//var item=jsml.class_create_instance(submenu);
|
|
]]>
|
|
</method>
|
|
<attach name="attach_dom">
|
|
<![CDATA[
|
|
if(self._eventattached)return;
|
|
self._eventattached=true;
|
|
self._handleToolChanged=function()
|
|
{
|
|
var _toolname = ImageEditorDocument.get_SelectedTool();
|
|
self.UpdateSubMenu(_toolname);
|
|
}
|
|
ImageEditorDocument.attach_event("SelectedToolChanged",self._handleToolChanged);
|
|
]]>
|
|
</attach>
|
|
<attach name="detach_dom">
|
|
self._eventattached=false;
|
|
ImageEditorDocument.detach_event("SelectedToolChanged",self._handleToolChanged);
|
|
</attach>
|
|
</panel>
|
|
|
|
<panel jsml-local="canvaspanel" dock="fill" overflow="scroll" back_color="#bdbdbd">
|
|
<htmlcontrol jsml-local="canvashtml" border_width="0">
|
|
<xmldata>
|
|
<div id="thecanvasdiv" style="background-color:#bdbdbd;position:relative;"></div>
|
|
</xmldata>
|
|
<initialize>
|
|
<![CDATA[
|
|
self.div=self.find_element("thecanvasdiv");
|
|
self.canvas=ImageEditorDocument.get_canvas();
|
|
self.canvas.calcpos = function()
|
|
{
|
|
self.AdjustPos();
|
|
}
|
|
self.div.appendChild(self.canvas);
|
|
self.div.parentNode.style.border = "0px";
|
|
var cropdiv = ImageEditorDocument.$081();
|
|
var freediv = ImageEditorDocument.$080();
|
|
var textdiv = ImageEditorDocument.$036();
|
|
self.div.appendChild(textdiv);
|
|
self.div.appendChild(cropdiv);
|
|
self.div.appendChild(freediv);
|
|
//canvaspanel.get_element().appendChild(freediv);
|
|
ImageEditorDocument._canvasdiv = self.div;
|
|
]]>
|
|
</initialize>
|
|
<method name="AdjustPos">
|
|
//canvashtml._element.style.width = self.canvas.width + "px";
|
|
//canvashtml._element.style.height = self.canvas.height + "px";
|
|
var dw = Math.max(canvaspanel.get_current_width()-18, self.canvas.width);
|
|
var dh = Math.max(canvaspanel.get_current_height()-18, self.canvas.height);
|
|
var left = Math.max(0,dw-self.canvas.width)/2;
|
|
var top = Math.max(0,dh-self.canvas.height)/2;
|
|
self.set_width(dw-left);
|
|
self.set_height(dh-top);
|
|
self.set_left(left);
|
|
self.set_top(top);
|
|
</method>
|
|
</htmlcontrol>
|
|
<attach name="resize">
|
|
canvashtml.AdjustPos();
|
|
</attach>
|
|
</panel>
|
|
</panel>
|
|
<initialize>
|
|
<![CDATA[
|
|
self.set_parent(document.body);
|
|
jsml.dom_attach_event(window,"resize",function()
|
|
{
|
|
self.setwinsize();
|
|
});
|
|
setTimeout(function()
|
|
{
|
|
self.setwinsize();
|
|
},10);
|
|
self.setwinsize();
|
|
]]>
|
|
</initialize>
|
|
<method name="setwinsize">
|
|
<![CDATA[
|
|
var rect=jsml.get_body_rect();
|
|
var ua=navigator.userAgent;
|
|
if(ua!=null&&(ua.indexOf("iPhone")!=-1||ua.indexOf("Android")!=-1))
|
|
{
|
|
if(rect.width>rect.height)
|
|
{
|
|
rect.width=480;
|
|
rect.height=360;
|
|
}
|
|
else
|
|
{
|
|
rect.width=360;
|
|
rect.height=480;
|
|
}
|
|
}
|
|
self.set_width(rect.width);
|
|
self.set_height(rect.height);
|
|
]]>
|
|
</method>
|
|
</panel>
|
|
</jsml>
|