Issue 115: First attempt at an eye-dropper extension/tool. Also add color-interpolation-filters attribute to whitelist
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1486 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Jeff Schiller
parent
6e92d40ee1
commit
effc4200e9
|
|
@ -0,0 +1,91 @@
|
|||
/*
|
||||
* ext-eyedropper.js
|
||||
*
|
||||
* Licensed under the Apache License, Version 2
|
||||
*
|
||||
* Copyright(c) 2010 Jeff Schiller
|
||||
*
|
||||
*/
|
||||
|
||||
svgEditor.addExtension("eyedropper", function(S) {
|
||||
var svgcontent = S.svgcontent,
|
||||
svgns = "http://www.w3.org/2000/svg",
|
||||
svgdoc = S.svgroot.parentNode.ownerDocument,
|
||||
ChangeElementCommand = svgCanvas.getPrivateMethods().ChangeElementCommand,
|
||||
addToHistory = svgCanvas.getPrivateMethods().addCommandToHistory,
|
||||
currentStyle = {fillPaint: "red", fillOpacity: 1.0,
|
||||
strokePaint: "black", strokeOpacity: 1.0,
|
||||
strokeWidth: 5, strokeDashArray: null,
|
||||
opacity: 1.0 };
|
||||
|
||||
return {
|
||||
name: "eyedropper",
|
||||
svgicons: "extensions/eyedropper-icon.xml",
|
||||
buttons: [{
|
||||
id: "tool_eyedropper",
|
||||
type: "mode",
|
||||
title: "Eye Dropper Tool",
|
||||
events: {
|
||||
"click": function() {
|
||||
svgCanvas.setMode("eyedropper")
|
||||
}
|
||||
}
|
||||
}],
|
||||
|
||||
// if we have selected an element, grab its paint and enable the eye dropper button
|
||||
selectedChanged: function(opts) {
|
||||
// if we are in eyedropper mode, we don't want to disable the eye-dropper tool
|
||||
var mode = svgCanvas.getMode();
|
||||
if (mode == "eyedropper") return;
|
||||
|
||||
var elem = null;
|
||||
var tool = $('#tool_eyedropper');
|
||||
// enable-eye-dropper if one element is selected
|
||||
if (opts.elems.length == 1 && opts.elems[0] &&
|
||||
$.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) == -1)
|
||||
{
|
||||
elem = opts.elems[0];
|
||||
tool.removeClass('disabled');
|
||||
// grab the current style
|
||||
currentStyle.fillPaint = elem.getAttribute("fill") || "black";
|
||||
currentStyle.fillOpacity = elem.getAttribute("fill-opacity") || 1.0;
|
||||
currentStyle.strokePaint = elem.getAttribute("stroke");
|
||||
currentStyle.strokeOpacity = elem.getAttribute("stroke-opacity") || 1.0;
|
||||
currentStyle.strokeWidth = elem.getAttribute("stroke-width");
|
||||
currentStyle.strokeDashArray = elem.getAttribute("stroke-dasharray");
|
||||
currentStyle.opacity = elem.getAttribute("opacity") || 1.0;
|
||||
}
|
||||
// disable eye-dropper tool
|
||||
else {
|
||||
tool.addClass('disabled');
|
||||
}
|
||||
},
|
||||
|
||||
mouseDown: function(opts) {
|
||||
var mode = svgCanvas.getMode();
|
||||
if (mode == "eyedropper") {
|
||||
var e = opts.event;
|
||||
var target = e.target;
|
||||
if ($.inArray(target.nodeName, ['svg', 'g', 'use']) == -1) {
|
||||
|
||||
var changes = {};
|
||||
|
||||
var change = function(elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
|
||||
if (currentStyle.fillPaint) change(target, "fill", currentStyle.fillPaint);
|
||||
if (currentStyle.fillOpacity) change(target, "fill-opacity", currentStyle.fillOpacity);
|
||||
if (currentStyle.strokePaint) change(target, "stroke", currentStyle.strokePaint);
|
||||
if (currentStyle.strokeOpacity) change(target, "stroke-opacity", currentStyle.strokeOpacity);
|
||||
if (currentStyle.strokeWidth) change(target, "stroke-width", currentStyle.strokeWidth);
|
||||
if (currentStyle.strokeDashArray) change(target, "stroke-dasharray", currentStyle.strokeDashArray);
|
||||
if (currentStyle.opacity) change(target, "opacity", currentStyle.opacity);
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<g id="tool_eyedropper">
|
||||
<svg viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
|
||||
<defs>
|
||||
<radialGradient id="eyedropper_svg_6" cx="0.5" cy="0.5" r="0.5">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#e5e5e5" stop-opacity="0.38"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="eyedropper_svg_15" x1="0" y1="0" x2="0.58594" y2="0.55078">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="0.57"/>
|
||||
<stop offset="1" stop-color="#000056" stop-opacity="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="eyedropper_svg_19" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#ffffff" stop-opacity="1"/>
|
||||
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g display="inline">
|
||||
<title>Layer 1</title>
|
||||
<path d="m193.899994,73l-119.899979,118l-15,39.5l10.25,4.5l43.750015,-20l108.999969,-112l-28.100006,-30z" id="svg_3" fill="none" stroke="#000000" stroke-width="5"/>
|
||||
<path d="m58.649994,232c-2.75,28.200012 -26.399994,28.950012 -21.899994,59c4.5,30.049988 55,28 55.5,-1.25c0.5,-29.25 -20.25,-28.75 -22.25,-54.75l-11.350006,-3z" id="svg_4" fill="#aa56ff" stroke="#000000" stroke-width="7"/>
|
||||
<path d="m45.474976,269.275024l13.775024,0.474976l-0.75,16.75l-14.25,-1.25l1.224976,-15.974976z" id="svg_5" fill="url(#eyedropper_svg_6)" stroke-width="5" fill-opacity="0.73"/>
|
||||
<path d="m217.899994,46c21.5,-101.549999 141.600006,20.449997 28.100006,33l-5,44l-63,-66l39.899994,-11z" id="svg_2" fill="#000000" stroke-width="5"/>
|
||||
<path d="m206.825012,61.075008c3.712494,-2.46249 7.637482,-3.53751 14.424988,-5.575008c10.125,-16.5 32.875,-41.5 40.5,-35c7.625,6.5 -21.25,35.625 -37.5,39.25c-5.5,10.125 -8,13.875 -17.25,16.5c-2.837494,-8.162514 -4.262482,-12.337486 -0.174988,-15.174992z" id="svg_7" fill="url(#eyedropper_svg_15)" stroke-width="5"/>
|
||||
<path d="m133.049988,134.75l46.950012,9.25l-66,70l-42.5,20.5l-11.5,-5l14,-37.5l59.049988,-57.25z" id="svg_11" fill="#aa56ff" stroke="#000000" stroke-width="7"/>
|
||||
<path d="m71.425034,212.350006l9.050888,-20.022537l51.516724,-49.327469l8.507355,0.97197l-69.074966,68.378036z" id="svg_16" fill="url(#eyedropper_svg_19)" stroke-width="5"/>
|
||||
</g>
|
||||
</svg>
|
||||
</g>
|
||||
|
||||
<g id="svg_eof"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 718 B |
|
|
@ -45,7 +45,7 @@
|
|||
imgPath: 'images/',
|
||||
langPath: 'locale/',
|
||||
extPath: 'extensions/',
|
||||
extensions: ['ext-arrows.js', 'ext-connector.js'],
|
||||
extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'],
|
||||
initTool: 'select',
|
||||
wireframe: false
|
||||
},
|
||||
|
|
|
|||
|
|
@ -97,8 +97,8 @@ var isOpera = !!window.opera,
|
|||
"defs": [],
|
||||
"desc": [],
|
||||
"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"],
|
||||
"feGaussianBlur": ["class", "color-interpolation-filters", "id", "requiredFeatures", "stdDeviation"],
|
||||
"filter": ["class", "color-interpolation-filters", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"],
|
||||
"foreignObject": ["class", "font-size", "height", "id", "opacity", "requiredFeatures", "style", "transform", "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"],
|
||||
|
|
|
|||
Loading…
Reference in New Issue