ext-eyedropper.js 3.6 KB

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