From 65b00d855177bd4532eb4acfb9a427808a4e56d0 Mon Sep 17 00:00:00 2001 From: Jacques Distler Date: Mon, 8 Feb 2010 21:39:35 -0600 Subject: [PATCH] A fist stab at foreignObject support Ability to resize (etc) the still-invisible element. Also, some improvements from SVG-Edit trunk. --- public/svg-edit/AUTHORS | 5 +- public/svg-edit/editor/locale/lang.ja.js | 218 +++++++++++------------ public/svg-edit/editor/locale/locale.js | 2 +- public/svg-edit/editor/svg-editor.css | 6 + public/svg-edit/editor/svg-editor.html | 1 + public/svg-edit/editor/svg-editor.js | 3 +- public/svg-edit/editor/svgcanvas.js | 122 ++++++++++--- public/svg-edit/extensions/ext-arrows.js | 126 ++++++++++--- 8 files changed, 323 insertions(+), 160 deletions(-) diff --git a/public/svg-edit/AUTHORS b/public/svg-edit/AUTHORS index f15ee8e0..b07c00fa 100644 --- a/public/svg-edit/AUTHORS +++ b/public/svg-edit/AUTHORS @@ -14,8 +14,9 @@ fa: Payman Delshad (فارسی) fr: wormsxulla (Français) fy: Wander Nauta (Frysk) hi: Tavish Naruka (हिन्दी) +ja: Dong (日本語) nl: Jaap Blom (Nederlands) ro: Christian Tzurcanu (Româneşte) -ru: Laurent Dufloux (Русский язык) +ru: Laurent Dufloux (Русский) sk: Pavol Rusnak (Slovenčina) -zh-TW: 黃瀚生(han sheng Huang) (台灣正體) \ No newline at end of file +zh-TW: 黃瀚生(han sheng Huang) (台灣正體) diff --git a/public/svg-edit/editor/locale/lang.ja.js b/public/svg-edit/editor/locale/lang.ja.js index f4c7932b..d96e3b4d 100644 --- a/public/svg-edit/editor/locale/lang.ja.js +++ b/public/svg-edit/editor/locale/lang.ja.js @@ -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": "移動するには、ノードをドラッグしてください。ノードをダブルクリックすると線分の種類を変更できます。" } } ] \ No newline at end of file diff --git a/public/svg-edit/editor/locale/locale.js b/public/svg-edit/editor/locale/locale.js index 975f739e..a5297ec5 100644 --- a/public/svg-edit/editor/locale/locale.js +++ b/public/svg-edit/editor/locale/locale.js @@ -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 { diff --git a/public/svg-edit/editor/svg-editor.css b/public/svg-edit/editor/svg-editor.css index d961e53a..a9080ac1 100644 --- a/public/svg-edit/editor/svg-editor.css +++ b/public/svg-edit/editor/svg-editor.css @@ -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 { diff --git a/public/svg-edit/editor/svg-editor.html b/public/svg-edit/editor/svg-editor.html index d2878cb3..debb1077 100644 --- a/public/svg-edit/editor/svg-editor.html +++ b/public/svg-edit/editor/svg-editor.html @@ -525,6 +525,7 @@ script type="text/javascript" src="locale/locale.min.js"> + diff --git a/public/svg-edit/editor/svg-editor.js b/public/svg-edit/editor/svg-editor.js index 28aec112..8d32e40a 100644 --- a/public/svg-edit/editor/svg-editor.js +++ b/public/svg-edit/editor/svg-editor.js @@ -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; diff --git a/public/svg-edit/editor/svgcanvas.js b/public/svg-edit/editor/svgcanvas.js index da67a391..ae0ee1ae 100644 --- a/public/svg-edit/editor/svgcanvas.js +++ b/public/svg-edit/editor/svgcanvas.js @@ -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 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) { diff --git a/public/svg-edit/extensions/ext-arrows.js b/public/svg-edit/extensions/ext-arrows.js index 8d3c6f48..1245eb92 100644 --- a/public/svg-edit/extensions/ext-arrows.js +++ b/public/svg-edit/extensions/ext-arrows.js @@ -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); + } + } }; });