ext-eyedropper.js 3.8 KB

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