A fist stab at foreignObject support
Ability to resize (etc) the still-invisible element. Also, some improvements from SVG-Edit trunk.
This commit is contained in:
Jacques Distler
parent
f98802336f
commit
65b00d8551
8 changed files with 323 additions and 160 deletions
|
|
@ -14,8 +14,9 @@ fa: Payman Delshad <payman@opera.com> (فارسی)
|
|||
fr: wormsxulla <wormsxulla@yahoo.com> (Français)
|
||||
fy: Wander Nauta <info@wandernauta.nl> (Frysk)
|
||||
hi: Tavish Naruka <tavishnaruka@gmail.com> (हिन्दी)
|
||||
ja: Dong <iwadon@yarhalla.jpn.org> (日本語)
|
||||
nl: Jaap Blom <jaap.blom@gmail.com> (Nederlands)
|
||||
ro: Christian Tzurcanu <christian.tzurcanu@gmail.com> (Româneşte)
|
||||
ru: Laurent Dufloux <laurent.dufloux@etu.upmc.fr> (Русский язык)
|
||||
ru: Laurent Dufloux <laurent.dufloux@etu.upmc.fr> (Русский)
|
||||
sk: Pavol Rusnak <rusnakp@gmail.com> (Slovenčina)
|
||||
zh-TW: 黃瀚生(han sheng Huang) <zenixls2@gmail.com> (台灣正體)
|
||||
zh-TW: 黃瀚生(han sheng Huang) <zenixls2@gmail.com> (台灣正體)
|
||||
|
|
|
|||
|
|
@ -1,156 +1,156 @@
|
|||
[
|
||||
{"id": "align_relative_to", "title": "整列するために相対的な ..."},
|
||||
{"id": "angle", "title": "変更の回転角"},
|
||||
{"id": "align_relative_to", "title": "揃える"},
|
||||
{"id": "angle", "title": "回転角の変更"},
|
||||
{"id": "angleLabel", "textContent": "角度:"},
|
||||
{"id": "bkgnd_color", "title": "変更の背景色/不透明度"},
|
||||
{"id": "circle_cx", "title": "変更円の佐川急便の座標"},
|
||||
{"id": "circle_cy", "title": "変更サークルサイ座標"},
|
||||
{"id": "bkgnd_color", "title": "背景色/不透明度の変更"},
|
||||
{"id": "circle_cx", "title": "円の中心を変更（X座標）"},
|
||||
{"id": "circle_cy", "title": "円の中心を変更（Y座標）"},
|
||||
{"id": "circle_r", "title": "変更円の半径"},
|
||||
{"id": "cornerRadiusLabel", "textContent": "コーナー半径："},
|
||||
{"id": "curve_segments", "textContent": "Curve"},
|
||||
{"id": "ellipse_cx", "title": "の座標佐川急便楕円を変更する"},
|
||||
{"id": "ellipse_cy", "title": "変更楕円サイ座標"},
|
||||
{"id": "ellipse_rx", "title": "変更する楕円のx半径"},
|
||||
{"id": "ellipse_ry", "title": "変更する楕円のy半径"},
|
||||
{"id": "fill_color", "title": "変更の塗りつぶしの色"},
|
||||
{"id": "fill_tool_bottom", "textContent": "満ちる:"},
|
||||
{"id": "fitToContent", "textContent": "フィットコンテンツへ"},
|
||||
{"id": "fit_to_all", "textContent": "フィットすべてのコンテンツに"},
|
||||
{"id": "fit_to_canvas", "textContent": "フィットキャンバスに"},
|
||||
{"id": "fit_to_layer_content", "textContent": "に合うようにレイヤーのコンテンツ"},
|
||||
{"id": "fit_to_sel", "textContent": "フィットを選択する"},
|
||||
{"id": "font_family", "title": "フォントの変更ご家族"},
|
||||
{"id": "cornerRadiusLabel", "textContent": "角の半径："},
|
||||
{"id": "curve_segments", "textContent": "カーブ"},
|
||||
{"id": "ellipse_cx", "title": "楕円の中心を変更（X座標）"},
|
||||
{"id": "ellipse_cy", "title": "楕円の中心を変更（Y座標）"},
|
||||
{"id": "ellipse_rx", "title": "楕円の半径を変更（X座標）"},
|
||||
{"id": "ellipse_ry", "title": "楕円の半径を変更（Y座標）"},
|
||||
{"id": "fill_color", "title": "塗りの色を変更"},
|
||||
{"id": "fill_tool_bottom", "textContent": "塗り:"},
|
||||
{"id": "fitToContent", "textContent": "コンテンツに合わせる"},
|
||||
{"id": "fit_to_all", "textContent": "すべてのコンテンツに合わせる"},
|
||||
{"id": "fit_to_canvas", "textContent": "キャンバスに合わせる"},
|
||||
{"id": "fit_to_layer_content", "textContent": "レイヤー上のコンテンツに合わせる"},
|
||||
{"id": "fit_to_sel", "textContent": "選択対象に合わせる"},
|
||||
{"id": "font_family", "title": "フォントファミリーの変更"},
|
||||
{"id": "font_size", "title": "文字サイズの変更"},
|
||||
{"id": "group_opacity", "title": "変更項目の不透明度を選択"},
|
||||
{"id": "group_opacity", "title": "不透明度"},
|
||||
{"id": "icon_large", "textContent": "Large"},
|
||||
{"id": "icon_medium", "textContent": "Medium"},
|
||||
{"id": "icon_small", "textContent": "Small"},
|
||||
{"id": "icon_xlarge", "textContent": "Extra Large"},
|
||||
{"id": "iheightLabel", "textContent": "高さ:"},
|
||||
{"id": "image_height", "title": "変更するイメージの高さ"},
|
||||
{"id": "image_opt_embed", "textContent": "Embed data (local files)"},
|
||||
{"id": "image_opt_ref", "textContent": "Use file reference"},
|
||||
{"id": "image_height", "title": "画像の高さを変更"},
|
||||
{"id": "image_opt_embed", "textContent": "SVGファイルに埋め込む"},
|
||||
{"id": "image_opt_ref", "textContent": "画像を参照する"},
|
||||
{"id": "image_url", "title": "URLを変更"},
|
||||
{"id": "image_width", "title": "変更するイメージの幅"},
|
||||
{"id": "includedImages", "textContent": "Included Images"},
|
||||
{"id": "image_width", "title": "画像の幅を変更"},
|
||||
{"id": "includedImages", "textContent": "挿入された画像の扱い"},
|
||||
{"id": "iwidthLabel", "textContent": "幅:"},
|
||||
{"id": "largest_object", "textContent": "最大のオブジェクト"},
|
||||
{"id": "layer_delete", "title": "レイヤーの削除"},
|
||||
{"id": "layer_down", "title": "レイヤ下へ移動"},
|
||||
{"id": "layer_new", "title": "New Layer"},
|
||||
{"id": "layer_rename", "title": "名前を変更するレイヤ"},
|
||||
{"id": "layer_up", "title": "最大のレイヤに移動"},
|
||||
{"id": "layersLabel", "textContent": "層:"},
|
||||
{"id": "line_x1", "title": "変更行のx座標を開始"},
|
||||
{"id": "line_x2", "title": "変更行のx座標を終了"},
|
||||
{"id": "line_y1", "title": "変更直線y開始の座標"},
|
||||
{"id": "line_y2", "title": "変更直線y期の座標"},
|
||||
{"id": "layer_delete", "title": "レイヤの削除"},
|
||||
{"id": "layer_down", "title": "レイヤを下へ移動"},
|
||||
{"id": "layer_new", "title": "新規レイヤ"},
|
||||
{"id": "layer_rename", "title": "レイヤの名前を変更"},
|
||||
{"id": "layer_up", "title": "レイヤを上へ移動"},
|
||||
{"id": "layersLabel", "textContent": "レイヤ:"},
|
||||
{"id": "line_x1", "title": "開始X座標"},
|
||||
{"id": "line_x2", "title": "終了X座標"},
|
||||
{"id": "line_y1", "title": "開始Y座標"},
|
||||
{"id": "line_y2", "title": "終了Y座標"},
|
||||
{"id": "page", "textContent": "ページ"},
|
||||
{"id": "palette", "title": "をクリックして、色、シフトを埋めるストロークの色を変更するをクリックして変更する"},
|
||||
{"id": "path_node_x", "title": "Change node's x coordinate"},
|
||||
{"id": "path_node_y", "title": "Change node's y coordinate"},
|
||||
{"id": "rect_height", "title": "変更する四角形の高さ"},
|
||||
{"id": "rect_rx", "title": "変更長方形コーナー半径"},
|
||||
{"id": "rect_width", "title": "変更する長方形の幅"},
|
||||
{"id": "palette", "title": "クリックで塗りの色を選択、Shift+クリックで線の色を選択"},
|
||||
{"id": "path_node_x", "title": "ノードのX座標を変更"},
|
||||
{"id": "path_node_y", "title": "ノードのY座標を変更"},
|
||||
{"id": "rect_height", "title": "長方形の高さを変更"},
|
||||
{"id": "rect_rx", "title": "長方形の角の半径を変更"},
|
||||
{"id": "rect_width", "title": "長方形の幅を変更"},
|
||||
{"id": "relativeToLabel", "textContent": "相対:"},
|
||||
{"id": "rheightLabel", "textContent": "高さ："},
|
||||
{"id": "rwidthLabel", "textContent": "幅："},
|
||||
{"id": "seg_type", "title": "Change Segment type"},
|
||||
{"id": "selLayerLabel", "textContent": "Move elements to:"},
|
||||
{"id": "selLayerNames", "title": "Move selected elements to a different layer"},
|
||||
{"id": "selectedPredefined", "textContent": "を選択する事前定義された:"},
|
||||
{"id": "selected_objects", "textContent": "選ばれたオブジェクト"},
|
||||
{"id": "selected_x", "title": "Change X coordinate"},
|
||||
{"id": "selected_y", "title": "Change Y coordinate"},
|
||||
{"id": "seg_type", "title": "線分の種類を変更"},
|
||||
{"id": "selLayerLabel", "textContent": "移動先レイヤ:"},
|
||||
{"id": "selLayerNames", "title": "選択対象を別のレイヤに移動"},
|
||||
{"id": "selectedPredefined", "textContent": "デフォルト"},
|
||||
{"id": "selected_objects", "textContent": "選択オブジェクト"},
|
||||
{"id": "selected_x", "title": "X座標を変更"},
|
||||
{"id": "selected_y", "title": "Y座標を変更"},
|
||||
{"id": "smallest_object", "textContent": "最小のオブジェクト"},
|
||||
{"id": "straight_segments", "textContent": "Straight"},
|
||||
{"id": "stroke_color", "title": "変更ストロークの色"},
|
||||
{"id": "stroke_style", "title": "変更ストロークダッシュスタイル"},
|
||||
{"id": "stroke_tool_bottom", "textContent": "打撃:"},
|
||||
{"id": "stroke_width", "title": "変更ストローク幅"},
|
||||
{"id": "svginfo_bg_note", "textContent": "Note: Background will not be saved with image."},
|
||||
{"id": "svginfo_change_background", "textContent": "Editor Background"},
|
||||
{"id": "svginfo_dim", "textContent": "Canvas Dimensions"},
|
||||
{"id": "svginfo_editor_prefs", "textContent": "Editor Preferences"},
|
||||
{"id": "straight_segments", "textContent": "直線"},
|
||||
{"id": "stroke_color", "title": "線の色を変更"},
|
||||
{"id": "stroke_style", "title": "線種の変更"},
|
||||
{"id": "stroke_tool_bottom", "textContent": "線:"},
|
||||
{"id": "stroke_width", "title": "線幅の変更"},
|
||||
{"id": "svginfo_bg_note", "textContent": "※背景色はファイルに保存されません。"},
|
||||
{"id": "svginfo_change_background", "textContent": "エディタの背景色"},
|
||||
{"id": "svginfo_dim", "textContent": "キャンバスの大きさ"},
|
||||
{"id": "svginfo_editor_prefs", "textContent": "エディタの設定"},
|
||||
{"id": "svginfo_height", "textContent": "高さ:"},
|
||||
{"id": "svginfo_icons", "textContent": "Icon size"},
|
||||
{"id": "svginfo_image_props", "textContent": "Image Properties"},
|
||||
{"id": "svginfo_lang", "textContent": "Language"},
|
||||
{"id": "svginfo_title", "textContent": "Title"},
|
||||
{"id": "svginfo_icons", "textContent": "アイコンの大きさ"},
|
||||
{"id": "svginfo_image_props", "textContent": "イメージの設定"},
|
||||
{"id": "svginfo_lang", "textContent": "言語"},
|
||||
{"id": "svginfo_title", "textContent": "タイトル"},
|
||||
{"id": "svginfo_width", "textContent": "幅:"},
|
||||
{"id": "text", "title": "変更するテキストの内容"},
|
||||
{"id": "text", "title": "テキストの内容の変更"},
|
||||
{"id": "tool_alignbottom", "title": "下揃え"},
|
||||
{"id": "tool_aligncenter", "title": "中央揃え"},
|
||||
{"id": "tool_alignleft", "title": "左揃え"},
|
||||
{"id": "tool_alignmiddle", "title": "整列中東"},
|
||||
{"id": "tool_alignmiddle", "title": "中央揃え"},
|
||||
{"id": "tool_alignright", "title": "右揃え"},
|
||||
{"id": "tool_aligntop", "title": "整列トップ"},
|
||||
{"id": "tool_bold", "title": "太字テキスト"},
|
||||
{"id": "tool_circle", "title": "サークル"},
|
||||
{"id": "tool_clear", "textContent": "新しいイメージ"},
|
||||
{"id": "tool_clone", "title": "クローン要素"},
|
||||
{"id": "tool_clone_multi", "title": "クローンの要素"},
|
||||
{"id": "tool_delete", "title": "削除する要素"},
|
||||
{"id": "tool_delete_multi", "title": "Delete Selected Elements"},
|
||||
{"id": "tool_aligntop", "title": "上揃え"},
|
||||
{"id": "tool_bold", "title": "太字"},
|
||||
{"id": "tool_circle", "title": "円"},
|
||||
{"id": "tool_clear", "textContent": "新規イメージ"},
|
||||
{"id": "tool_clone", "title": "複製"},
|
||||
{"id": "tool_clone_multi", "title": "選択対象を複製"},
|
||||
{"id": "tool_delete", "title": "削除"},
|
||||
{"id": "tool_delete_multi", "title": "選択対象を削除"},
|
||||
{"id": "tool_docprops", "textContent": "文書のプロパティ"},
|
||||
{"id": "tool_docprops_cancel", "textContent": "キャンセル"},
|
||||
{"id": "tool_docprops_save", "textContent": "OK"},
|
||||
{"id": "tool_ellipse", "title": "楕円"},
|
||||
{"id": "tool_fhellipse", "title": "フリーハンド楕円"},
|
||||
{"id": "tool_fhpath", "title": "鉛筆ツール"},
|
||||
{"id": "tool_fhrect", "title": "フリーハンドのRectangle"},
|
||||
{"id": "tool_group", "title": "グループ要素"},
|
||||
{"id": "tool_fhrect", "title": "フリーハンド長方形"},
|
||||
{"id": "tool_group", "title": "グループ化"},
|
||||
{"id": "tool_image", "title": "イメージツール"},
|
||||
{"id": "tool_italic", "title": "イタリック体のテキスト"},
|
||||
{"id": "tool_line", "title": "ラインツール"},
|
||||
{"id": "tool_move_bottom", "title": "下に移動"},
|
||||
{"id": "tool_move_top", "title": "トップに移動します。"},
|
||||
{"id": "tool_node_clone", "title": "Clone Node"},
|
||||
{"id": "tool_node_delete", "title": "Delete Node"},
|
||||
{"id": "tool_node_link", "title": "Link Control Points"},
|
||||
{"id": "tool_open", "textContent": "[イメージを開く"},
|
||||
{"id": "tool_path", "title": "Path tool"},
|
||||
{"id": "tool_rect", "title": "四角形"},
|
||||
{"id": "tool_redo", "title": "REDOログ"},
|
||||
{"id": "tool_reorient", "title": "Reorient path"},
|
||||
{"id": "tool_italic", "title": "イタリック体"},
|
||||
{"id": "tool_line", "title": "直線ツール"},
|
||||
{"id": "tool_move_bottom", "title": "奥に移動"},
|
||||
{"id": "tool_move_top", "title": "手前に移動"},
|
||||
{"id": "tool_node_clone", "title": "ノードを複製"},
|
||||
{"id": "tool_node_delete", "title": "ノードを削除"},
|
||||
{"id": "tool_node_link", "title": "制御点の接続"},
|
||||
{"id": "tool_open", "textContent": "イメージを開く"},
|
||||
{"id": "tool_path", "title": "パスツール"},
|
||||
{"id": "tool_rect", "title": "長方形"},
|
||||
{"id": "tool_redo", "title": "やり直し"},
|
||||
{"id": "tool_reorient", "title": "現在の角度を０度とする"},
|
||||
{"id": "tool_save", "textContent": "画像を保存"},
|
||||
{"id": "tool_select", "title": "選択ツール"},
|
||||
{"id": "tool_source", "title": "[編集]ソース"},
|
||||
{"id": "tool_source", "title": "ソースの編集"},
|
||||
{"id": "tool_source_cancel", "textContent": "キャンセル"},
|
||||
{"id": "tool_source_save", "textContent": "Apply Changes"},
|
||||
{"id": "tool_square", "title": "広場"},
|
||||
{"id": "tool_source_save", "textContent": "適用"},
|
||||
{"id": "tool_square", "title": "正方形"},
|
||||
{"id": "tool_text", "title": "テキストツール"},
|
||||
{"id": "tool_topath", "title": "Convert to Path"},
|
||||
{"id": "tool_topath", "title": "パスに変換"},
|
||||
{"id": "tool_undo", "title": "元に戻す"},
|
||||
{"id": "tool_ungroup", "title": "グループ化を解除要素"},
|
||||
{"id": "tool_wireframe", "title": "Wireframe Mode [F]"},
|
||||
{"id": "tool_ungroup", "title": "グループ化を解除"},
|
||||
{"id": "tool_wireframe", "title": "ワイヤーフレームで表示 [F]"},
|
||||
{"id": "tool_zoom", "title": "ズームツール"},
|
||||
{"id": "zoom", "title": "変更のズームレベル"},
|
||||
{"id": "zoom", "title": "ズーム倍率の変更"},
|
||||
{"id": "zoomLabel", "textContent": "ズーム:"},
|
||||
{"id": "sidepanel_handle", "textContent": "L a y e r s", "title": "Drag left/right to resize side panel"},
|
||||
{"id": "sidepanel_handle", "textContent": "L a y e r s", "title": "ドラッグで幅の調整"},
|
||||
{
|
||||
"js_strings": {
|
||||
"QerrorsRevertToSource": "There were parsing errors in your SVG source.\nRevert back to original SVG source?",
|
||||
"QignoreSourceChanges": "Ignore changes made to SVG source?",
|
||||
"QmoveElemsToLayer": "Move selected elements to layer '%s'?",
|
||||
"QwantToClear": "Do you want to clear the drawing?\nThis will also erase your undo history!",
|
||||
"cancel": "Cancel",
|
||||
"dupeLayerName": "There is already a layer named that!",
|
||||
"enterNewImgURL": "Enter the new image URL",
|
||||
"enterNewLayerName": "Please enter the new layer name",
|
||||
"enterUniqueLayerName": "Please enter a unique layer name",
|
||||
"featNotSupported": "Feature not supported",
|
||||
"invalidAttrValGiven": "Invalid value given",
|
||||
"QerrorsRevertToSource": "ソースにエラーがあります。\n元のソースに戻しますか？",
|
||||
"QignoreSourceChanges": "ソースの変更を無視しますか？",
|
||||
"QmoveElemsToLayer": "選択した要素をレイヤー '%s' に移動しますか？",
|
||||
"QwantToClear": "キャンバスをクリアしますか？\nアンドゥ履歴も消去されます。",
|
||||
"cancel": "キャンセル",
|
||||
"dupeLayerName": "同名のレイヤーが既に存在します。",
|
||||
"enterNewImgURL": "画像のURLを入力してください。",
|
||||
"enterNewLayerName": "レイヤの新しい名前を入力してください。",
|
||||
"enterUniqueLayerName": "新規レイヤの一意な名前を入力してください。",
|
||||
"featNotSupported": "機能はサポートされていません。",
|
||||
"invalidAttrValGiven": "無効な値が指定されています。",
|
||||
"key_backspace": "backspace",
|
||||
"key_del": "delete",
|
||||
"key_down": "down",
|
||||
"key_up": "up",
|
||||
"layer": "Layer",
|
||||
"layerHasThatName": "Layer already has that name",
|
||||
"noContentToFitTo": "No content to fit to",
|
||||
"layer": "レイヤ",
|
||||
"layerHasThatName": "既に同名が付いています。",
|
||||
"noContentToFitTo": "合わせる対象のコンテンツがありません。",
|
||||
"ok": "OK",
|
||||
"pathCtrlPtTooltip": "Drag control point to adjust curve properties",
|
||||
"pathNodeTooltip": "Drag node to move it. Double-click node to change segment type"
|
||||
"pathCtrlPtTooltip": "カーブの形状を調整するには、制御点をドラッグしてください。",
|
||||
"pathNodeTooltip": "移動するには、ノードをドラッグしてください。ノードをダブルクリックすると線分の種類を変更できます。"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
var put_locale = function(svgCanvas, given_param){
|
||||
var lang_param;
|
||||
// TODO: Make this array be based on entries in svg-editor.html
|
||||
var good_langs = ['ar','cs','de','en','es','fa','fr','fy','hi','nl','ro','ru','sk','zh-TW'];
|
||||
var good_langs = ['ar','cs','de','en','es','fa','fr','fy','hi','ja','nl','ro','ru','sk','zh-TW'];
|
||||
if(given_param) {
|
||||
lang_param = given_param;
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,12 @@
|
|||
height: 480px;
|
||||
-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
|
||||
position: relative;
|
||||
/*
|
||||
A subtle gradient effect in the canvas.
|
||||
Just experimenting - not sure if this is worth it.
|
||||
*/
|
||||
background: -moz-radial-gradient(45deg,#bbb,#222);
|
||||
background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222));
|
||||
}
|
||||
|
||||
#svg_editor div#palette_holder {
|
||||
|
|
|
|||
|
|
@ -525,6 +525,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
|
|||
<option id="lang_fr" value="fr">Français</option>
|
||||
<option id="lang_fy" value="fy">Frysk</option>
|
||||
<option id="lang_hi" value="hi">हिन्दी, हिंदी</option>
|
||||
<option id="lang_ja" value="ja">日本語</option>
|
||||
<option id="lang_nl" value="nl">Nederlands</option>
|
||||
<option id="lang_ro" value="ro">Româneşte</option>
|
||||
<option id="lang_ru" value="ru">Русский</option>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@ function svg_edit_setup() {
|
|||
default_img_url = "images/logo.png",
|
||||
workarea = $("#workarea");
|
||||
|
||||
|
||||
// Store and retrieve preferences
|
||||
$.pref = function(key, val) {
|
||||
if(val) curPrefs[key] = val;
|
||||
|
|
@ -2704,7 +2703,7 @@ function svg_edit_setup() {
|
|||
updateCanvas(true);
|
||||
});
|
||||
|
||||
// var revnums = "svg-editor.js ($Rev: 1347 $) ";
|
||||
// var revnums = "svg-editor.js ($Rev: 1355 $) ";
|
||||
// revnums += svgCanvas.getVersion();
|
||||
// $('#copyright')[0].setAttribute("title", revnums);
|
||||
return svgCanvas;
|
||||
|
|
|
|||
|
|
@ -20,6 +20,68 @@ if(window.opera) {
|
|||
window.console.dir = function(str) {};
|
||||
}
|
||||
|
||||
(function() {
|
||||
|
||||
// This fixes $(...).attr() to work as expected with SVG elements.
|
||||
// Does not currently use *AttributeNS() since we rarely need that.
|
||||
|
||||
// See http://api.jquery.com/attr/ for basic documentation of .attr()
|
||||
|
||||
// Additional functionality:
|
||||
// - When getting attributes, a string that's a number is return as type number.
|
||||
// - If an array is supplied as first parameter, multiple values are returned
|
||||
// as an object with values for each given attributes
|
||||
|
||||
var proxied = jQuery.fn.attr, svgns = "http://www.w3.org/2000/svg";
|
||||
jQuery.fn.attr = function(key, value) {
|
||||
var len = this.length;
|
||||
if(!len) return this;
|
||||
for(var i=0; i<len; i++) {
|
||||
var elem = this[i];
|
||||
// set/get SVG attribute
|
||||
if(elem.namespaceURI === svgns) {
|
||||
// Setting attribute
|
||||
if(value !== undefined) {
|
||||
elem.setAttribute(key, value);
|
||||
} else if($.isArray(key)) {
|
||||
// Getting attributes from array
|
||||
var j = key.length, obj = {};
|
||||
|
||||
while(j--) {
|
||||
var aname = key[j];
|
||||
var attr = elem.getAttribute(aname);
|
||||
// This returns a number when appropriate
|
||||
if(attr || attr === "0") {
|
||||
attr = isNaN(attr)?attr:attr-0;
|
||||
}
|
||||
obj[aname] = attr;
|
||||
}
|
||||
return obj;
|
||||
|
||||
} else if(typeof key === "object") {
|
||||
// Setting attributes form object
|
||||
for(v in key) {
|
||||
elem.setAttribute(v, key[v]);
|
||||
}
|
||||
// Getting attribute
|
||||
} else {
|
||||
var attr = elem.getAttribute(key);
|
||||
if(attr || attr === "0") {
|
||||
attr = isNaN(attr)?attr:attr-0;
|
||||
}
|
||||
|
||||
return attr;
|
||||
}
|
||||
} else {
|
||||
return proxied.apply(this, arguments);
|
||||
}
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
}());
|
||||
|
||||
|
||||
function SvgCanvas(container)
|
||||
{
|
||||
var isOpera = !!window.opera,
|
||||
|
|
@ -36,7 +98,7 @@ var isOpera = !!window.opera,
|
|||
"ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
|
||||
"feGaussianBlur": ["class", "id", "requiredFeatures", "stdDeviation"],
|
||||
"filter": ["class", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"],
|
||||
"foreignObject": ["class", "height", "id", "markdown", "requiredFeatures", "style", "width", "x", "y"],
|
||||
"foreignObject": ["class", "font-size", "height", "id", "markdown", "opacity", "requiredFeatures", "style", "width", "x", "y"],
|
||||
"g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
|
||||
"image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"],
|
||||
"line": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"],
|
||||
|
|
@ -911,26 +973,27 @@ function BatchCommand(text) {
|
|||
idprefix = "svg_",
|
||||
svgdoc = container.ownerDocument,
|
||||
svgroot = svgdoc.createElementNS(svgns, "svg");
|
||||
svgroot.setAttribute("width", 640);
|
||||
svgroot.setAttribute("height", 480);
|
||||
svgroot.setAttribute("id", "svgroot");
|
||||
svgroot.setAttribute("xmlns", svgns);
|
||||
svgroot.setAttribute("xmlns:xlink", xlinkns);
|
||||
container.appendChild(svgroot);
|
||||
|
||||
$(svgroot).attr({
|
||||
width: 640,
|
||||
height: 480,
|
||||
id: "svgroot",
|
||||
xmlns: svgns,
|
||||
"xmlns:xlink": xlinkns
|
||||
}).appendTo(container);
|
||||
|
||||
var svgcontent = svgdoc.createElementNS(svgns, "svg");
|
||||
svgcontent.setAttribute('id', 'svgcontent');
|
||||
// svgcontent.setAttribute('viewBox', '0 0 640 480');
|
||||
svgcontent.setAttribute('width', '640');
|
||||
svgcontent.setAttribute('height', '480');
|
||||
svgcontent.setAttribute('x', '640');
|
||||
svgcontent.setAttribute('y', '480');
|
||||
svgcontent.setAttribute('overflow', 'visible');
|
||||
|
||||
|
||||
svgcontent.setAttribute("xmlns", svgns);
|
||||
svgcontent.setAttribute("xmlns:xlink", xlinkns);
|
||||
svgroot.appendChild(svgcontent);
|
||||
|
||||
$(svgcontent).attr({
|
||||
id: 'svgcontent',
|
||||
width: 640,
|
||||
height: 480,
|
||||
x: 640,
|
||||
y: 480,
|
||||
overflow: 'visible',
|
||||
xmlns: svgns,
|
||||
"xmlns:xlink": xlinkns
|
||||
}).appendTo(svgroot);
|
||||
|
||||
(function() {
|
||||
// TODO: make this string optional and set by the client
|
||||
var comment = svgdoc.createComment(" Created with SVG-edit - http://svg-edit.googlecode.com/ ");
|
||||
|
|
@ -1518,6 +1581,7 @@ function BatchCommand(text) {
|
|||
changes["rx"] = scalew(changes["rx"]);
|
||||
changes["ry"] = scaleh(changes["ry"]);
|
||||
break;
|
||||
case "foreignObject":
|
||||
case "rect":
|
||||
case "image":
|
||||
var pt1 = remap(changes["x"],changes["y"]);
|
||||
|
|
@ -1631,6 +1695,7 @@ function BatchCommand(text) {
|
|||
// TODO: merge this switch with the above one and optimize
|
||||
switch (selected.tagName)
|
||||
{
|
||||
case "foreignObject":
|
||||
case "rect":
|
||||
case "image":
|
||||
changes.x = changes.x-0 + Math.min(0,changes.width);
|
||||
|
|
@ -1771,6 +1836,7 @@ function BatchCommand(text) {
|
|||
changes["rx"] = selected.getAttribute("rx");
|
||||
changes["ry"] = selected.getAttribute("ry");
|
||||
break;
|
||||
case "foreignObject":
|
||||
case "rect":
|
||||
case "image":
|
||||
changes["width"] = selected.getAttribute("width");
|
||||
|
|
@ -3066,6 +3132,8 @@ function BatchCommand(text) {
|
|||
shape.setAttributeNS(null, "y2", y);
|
||||
if (!window.opera) svgroot.unsuspendRedraw(handle);
|
||||
break;
|
||||
case "foreignObject":
|
||||
// fall through
|
||||
case "square":
|
||||
// fall through
|
||||
case "rect":
|
||||
|
|
@ -3274,6 +3342,7 @@ function BatchCommand(text) {
|
|||
// element.y1.baseVal.value != element.y2.baseVal.value);
|
||||
keep = (element.getAttribute('x1') != element.getAttribute('x2') || element.getAttribute('y1') != element.getAttribute('y2'));
|
||||
break;
|
||||
case "foreignObject":
|
||||
case "square":
|
||||
case "rect":
|
||||
// keep = (element.width.baseVal.value && element.height.baseVal.value);
|
||||
|
|
@ -5372,6 +5441,7 @@ function BatchCommand(text) {
|
|||
|
||||
// determine proper size
|
||||
var w, h;
|
||||
var min_x = min_y = 0;
|
||||
if (svgcontent.getAttribute("viewBox")) {
|
||||
var vb = svgcontent.getAttribute("viewBox").split(' ');
|
||||
w = vb[2];
|
||||
|
|
@ -6053,9 +6123,10 @@ function BatchCommand(text) {
|
|||
}
|
||||
|
||||
if (elems.length > 0) {
|
||||
if (!preventUndo)
|
||||
if (!preventUndo) {
|
||||
this.changeSelectedAttribute("stroke", val, elems);
|
||||
else
|
||||
call("changed", elems);
|
||||
} else
|
||||
this.changeSelectedAttributeNoUndo("stroke", val, elems);
|
||||
}
|
||||
};
|
||||
|
|
@ -6081,9 +6152,10 @@ function BatchCommand(text) {
|
|||
}
|
||||
}
|
||||
if (elems.length > 0) {
|
||||
if (!preventUndo)
|
||||
if (!preventUndo) {
|
||||
this.changeSelectedAttribute("fill", val, elems);
|
||||
else
|
||||
call("changed", elems);
|
||||
} else
|
||||
this.changeSelectedAttributeNoUndo("fill", val, elems);
|
||||
}
|
||||
};
|
||||
|
|
@ -7467,7 +7539,7 @@ function BatchCommand(text) {
|
|||
// Function: getVersion
|
||||
// Returns a string which describes the revision number of SvgCanvas.
|
||||
this.getVersion = function() {
|
||||
return "svgcanvas.js ($Rev: 1352 $)";
|
||||
return "svgcanvas.js ($Rev: 1355 $)";
|
||||
};
|
||||
|
||||
this.setUiStrings = function(strs) {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
* Copyright(c) 2010 Alexis Deveria
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
$(function() {
|
||||
svgCanvas.addExtension("Arrows", function(S) {
|
||||
|
|
@ -22,7 +23,20 @@ $(function() {
|
|||
]
|
||||
};
|
||||
|
||||
|
||||
var pathdata = {
|
||||
fw: {d:"m0,0l10,5l-10,5l5,-5l-5,-5z", refx:8, id:"se_arrow_fw"},
|
||||
bk: {d:"m10,0l-10,5l10,5l-5,-5l5,-5z", refx:2, id:"se_arrow_bk"}
|
||||
}
|
||||
function getLinked(elem, attr) {
|
||||
var str = elem.getAttribute(attr);
|
||||
if(!str) return null;
|
||||
var m = str.match(/\(\#(.*)\)/);
|
||||
if(!m || m.length !== 2) {
|
||||
return null;
|
||||
}
|
||||
return S.getElem(m[1]);
|
||||
}
|
||||
|
||||
function showPanel(on) {
|
||||
$('#arrow_panel').toggle(on);
|
||||
|
||||
|
|
@ -61,16 +75,13 @@ $(function() {
|
|||
el.removeAttribute("marker-end");
|
||||
}
|
||||
|
||||
function addMarker(id, type) {
|
||||
function addMarker(dir, type, id) {
|
||||
// TODO: Make marker (or use?) per arrow type, since refX can be different
|
||||
id = id || 'se_arrow_' + dir;
|
||||
|
||||
var marker = S.getElem(id);
|
||||
|
||||
var pathdata = {
|
||||
se_arrow_fw: {d:"m0,0l10,5l-10,5l5,-5l-5,-5z", refx:8},
|
||||
se_arrow_bk: {d:"m10,0l-10,5l10,5l-5,-5l5,-5z", refx:2}
|
||||
}
|
||||
|
||||
var data = pathdata[id];
|
||||
var data = pathdata[dir];
|
||||
|
||||
if(type == "mid") {
|
||||
data.refx = 5;
|
||||
|
|
@ -86,14 +97,15 @@ $(function() {
|
|||
"markerUnits": "strokeWidth",
|
||||
"markerWidth": 5,
|
||||
"markerHeight": 5,
|
||||
"orient": "auto"
|
||||
"orient": "auto",
|
||||
"style": "pointer-events:none" // Currently needed for Opera
|
||||
}
|
||||
});
|
||||
var arrow = addElem({
|
||||
"element": "path",
|
||||
"attr": {
|
||||
"d": data.d,
|
||||
"fill": "#000"
|
||||
"fill": "#000000"
|
||||
}
|
||||
});
|
||||
marker.appendChild(arrow);
|
||||
|
|
@ -101,6 +113,8 @@ $(function() {
|
|||
}
|
||||
|
||||
marker.setAttribute('refX', data.refx);
|
||||
|
||||
return marker;
|
||||
}
|
||||
|
||||
function setArrow() {
|
||||
|
|
@ -111,28 +125,83 @@ $(function() {
|
|||
return;
|
||||
}
|
||||
|
||||
var fw_id = "se_arrow_fw";
|
||||
var bk_id = "se_arrow_bk";
|
||||
|
||||
// Set marker on element
|
||||
var id = fw_id;
|
||||
var dir = "fw";
|
||||
if(type == "mid_bk") {
|
||||
type = "mid";
|
||||
id = bk_id;
|
||||
dir = "bk";
|
||||
} else if(type == "both") {
|
||||
addMarker(bk_id, type);
|
||||
svgCanvas.changeSelectedAttribute("marker-start", "url(#" + bk_id + ")");
|
||||
addMarker("bk", type);
|
||||
svgCanvas.changeSelectedAttribute("marker-start", "url(#" + pathdata.bk.id + ")");
|
||||
type = "end";
|
||||
id = fw_id;
|
||||
dir = "fw";
|
||||
} else if (type == "start") {
|
||||
id = bk_id;
|
||||
dir = "bk";
|
||||
}
|
||||
|
||||
addMarker(id, type);
|
||||
svgCanvas.changeSelectedAttribute("marker-"+type, "url(#" + id + ")");
|
||||
addMarker(dir, type);
|
||||
svgCanvas.changeSelectedAttribute("marker-"+type, "url(#" + pathdata[dir].id + ")");
|
||||
S.call("changed", selElems);
|
||||
}
|
||||
|
||||
function colorChanged(elem) {
|
||||
var color = elem.getAttribute('stroke');
|
||||
|
||||
var mtypes = ['start','mid','end'];
|
||||
var defs = S.findDefs();
|
||||
|
||||
$.each(mtypes, function(i, type) {
|
||||
var marker = getLinked(elem, 'marker-'+type);
|
||||
if(!marker) return;
|
||||
|
||||
var cur_color = $(marker).children().attr('fill');
|
||||
var cur_d = $(marker).children().attr('d');
|
||||
var new_marker = null;
|
||||
if(cur_color === color) return;
|
||||
|
||||
var all_markers = $(defs).find('marker');
|
||||
// Different color, check if already made
|
||||
all_markers.each(function() {
|
||||
var attrs = $(this).children().attr(['fill', 'd']);
|
||||
if(attrs.fill === color && attrs.d === cur_d) {
|
||||
// Found another marker with this color and this path
|
||||
new_marker = this;
|
||||
}
|
||||
});
|
||||
|
||||
if(!new_marker) {
|
||||
// Create a new marker with this color
|
||||
var last_id = marker.id;
|
||||
var dir = last_id.indexOf('_fw') !== -1?'fw':'bk';
|
||||
|
||||
new_marker = addMarker(dir, type, 'se_arrow_' + dir + all_markers.length);
|
||||
|
||||
$(new_marker).children().attr('fill', color);
|
||||
}
|
||||
|
||||
$(elem).attr('marker-'+type, "url(#" + new_marker.id + ")");
|
||||
|
||||
// Check if last marker can be removed
|
||||
var remove = true;
|
||||
$(S.svgcontent).find('line, polyline, path, polygon').each(function() {
|
||||
var elem = this;
|
||||
$.each(mtypes, function(j, mtype) {
|
||||
if($(elem).attr('marker-' + mtype) === "url(#" + marker.id + ")") {
|
||||
return remove = false;
|
||||
}
|
||||
});
|
||||
if(!remove) return false;
|
||||
});
|
||||
|
||||
// Not found, so can safely remove
|
||||
if(remove) {
|
||||
$(marker).remove();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
name: "Arrows",
|
||||
context_tools: [{
|
||||
|
|
@ -181,6 +250,21 @@ $(function() {
|
|||
showPanel(false);
|
||||
}
|
||||
}
|
||||
},
|
||||
elementChanged: function(opts) {
|
||||
var elem = opts.elems[0];
|
||||
if(elem && (
|
||||
elem.getAttribute("marker-start") ||
|
||||
elem.getAttribute("marker-mid") ||
|
||||
elem.getAttribute("marker-end")
|
||||
)) {
|
||||
// var start = elem.getAttribute("marker-start");
|
||||
// var mid = elem.getAttribute("marker-mid");
|
||||
// var end = elem.getAttribute("marker-end");
|
||||
// Has marker, so see if it should match color
|
||||
colorChanged(elem);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue