ext-eyedropper.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. /*globals svgEditor, svgedit, $*/
  2. /*jslint vars: true, eqeq: true*/
  3. /*
  4. * ext-eyedropper.js
  5. *
  6. * Licensed under the MIT License
  7. *
  8. * Copyright(c) 2010 Jeff Schiller
  9. *
  10. */
  11. // Dependencies:
  12. // 1) jQuery
  13. // 2) history.js
  14. // 3) svg_editor.js
  15. // 4) svgcanvas.js
  16. svgEditor.addExtension("eyedropper", function(S) {'use strict';
  17. var // NS = svgedit.NS,
  18. // svgcontent = S.svgcontent,
  19. // svgdoc = S.svgroot.parentNode.ownerDocument,
  20. svgCanvas = svgEditor.canvas,
  21. ChangeElementCommand = svgedit.history.ChangeElementCommand,
  22. addToHistory = function(cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd); },
  23. currentStyle = {
  24. fillPaint: "red", fillOpacity: 1.0,
  25. strokePaint: "black", strokeOpacity: 1.0,
  26. strokeWidth: 5, strokeDashArray: null,
  27. opacity: 1.0,
  28. strokeLinecap: 'butt',
  29. strokeLinejoin: 'miter'
  30. };
  31. function getStyle(opts) {
  32. // if we are in eyedropper mode, we don't want to disable the eye-dropper tool
  33. var mode = svgCanvas.getMode();
  34. if (mode == "eyedropper") {return;}
  35. var elem = null;
  36. var tool = $('#tool_eyedropper');
  37. // enable-eye-dropper if one element is selected
  38. if (!opts.multiselected && opts.elems[0] &&
  39. $.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) === -1
  40. ) {
  41. elem = opts.elems[0];
  42. tool.removeClass('disabled');
  43. // grab the current style
  44. currentStyle.fillPaint = elem.getAttribute("fill") || "black";
  45. currentStyle.fillOpacity = elem.getAttribute("fill-opacity") || 1.0;
  46. currentStyle.strokePaint = elem.getAttribute("stroke");
  47. currentStyle.strokeOpacity = elem.getAttribute("stroke-opacity") || 1.0;
  48. currentStyle.strokeWidth = elem.getAttribute("stroke-width");
  49. currentStyle.strokeDashArray = elem.getAttribute("stroke-dasharray");
  50. currentStyle.strokeLinecap = elem.getAttribute("stroke-linecap");
  51. currentStyle.strokeLinejoin = elem.getAttribute("stroke-linejoin");
  52. currentStyle.opacity = elem.getAttribute("opacity") || 1.0;
  53. }
  54. // disable eye-dropper tool
  55. else {
  56. tool.addClass('disabled');
  57. }
  58. }
  59. return {
  60. name: "eyedropper",
  61. svgicons: svgEditor.curConfig.extPath + "eyedropper-icon.xml",
  62. buttons: [{
  63. id: "tool_eyedropper",
  64. type: "mode",
  65. title: "Eye Dropper Tool",
  66. key: "I",
  67. events: {
  68. "click": function() {
  69. svgCanvas.setMode("eyedropper");
  70. }
  71. }
  72. }],
  73. // if we have selected an element, grab its paint and enable the eye dropper button
  74. selectedChanged: getStyle,
  75. elementChanged: getStyle,
  76. mouseDown: function(opts) {
  77. var mode = svgCanvas.getMode();
  78. if (mode == "eyedropper") {
  79. var e = opts.event;
  80. var target = e.target;
  81. if ($.inArray(target.nodeName, ['svg', 'g', 'use']) === -1) {
  82. var changes = {};
  83. var change = function(elem, attrname, newvalue) {
  84. changes[attrname] = elem.getAttribute(attrname);
  85. elem.setAttribute(attrname, newvalue);
  86. };
  87. if (currentStyle.fillPaint) {change(target, "fill", currentStyle.fillPaint);}
  88. if (currentStyle.fillOpacity) {change(target, "fill-opacity", currentStyle.fillOpacity);}
  89. if (currentStyle.strokePaint) {change(target, "stroke", currentStyle.strokePaint);}
  90. if (currentStyle.strokeOpacity) {change(target, "stroke-opacity", currentStyle.strokeOpacity);}
  91. if (currentStyle.strokeWidth) {change(target, "stroke-width", currentStyle.strokeWidth);}
  92. if (currentStyle.strokeDashArray) {change(target, "stroke-dasharray", currentStyle.strokeDashArray);}
  93. if (currentStyle.opacity) {change(target, "opacity", currentStyle.opacity);}
  94. if (currentStyle.strokeLinecap) {change(target, "stroke-linecap", currentStyle.strokeLinecap);}
  95. if (currentStyle.strokeLinejoin) {change(target, "stroke-linejoin", currentStyle.strokeLinejoin);}
  96. addToHistory(new ChangeElementCommand(target, changes));
  97. }
  98. }
  99. }
  100. };
  101. });