improvements to the eyedropper
Mark MacKay
parent
b11581fec4
commit
c9baffc9c1
Binary file not shown.
|
|
@ -34,9 +34,8 @@ svgEditor.addExtension("eyedropper", function(S) {
|
|||
|
||||
var elem = null;
|
||||
var tool = $('#tool_eyedropper');
|
||||
// enable-eye-dropper if one element is selected
|
||||
|
||||
if (!opts.multiselected && opts.elems[0] &&
|
||||
if (opts.elems[0] &&
|
||||
$.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) == -1)
|
||||
{
|
||||
elem = opts.elems[0];
|
||||
|
|
@ -52,6 +51,7 @@ svgEditor.addExtension("eyedropper", function(S) {
|
|||
var getPaint = function(color, opac, type) {
|
||||
// update the editor's fill paint
|
||||
var opts = null;
|
||||
console.log(color);
|
||||
if (color.indexOf("url(#") === 0) {
|
||||
var refElem = svgCanvas.getRefElem(color);
|
||||
if(refElem) {
|
||||
|
|
@ -100,43 +100,44 @@ svgEditor.addExtension("eyedropper", function(S) {
|
|||
elementChanged: getStyle,
|
||||
mouseDown: function(opts) {
|
||||
var mode = svgCanvas.getMode();
|
||||
if (mode == "eyedropper") {
|
||||
var e = opts.event;
|
||||
var target = e.target;
|
||||
var e = opts.event;
|
||||
var target = (e.target.id === "svgroot") ? document.getElementById('canvas_background') : e.target;
|
||||
if (mode == "eyedropper" && target) {
|
||||
currentStyle.fillPaint = target.getAttribute("fill") || "white";
|
||||
currentStyle.fillOpacity = target.getAttribute("fill-opacity") || 1.0;
|
||||
currentStyle.strokePaint = target.getAttribute("stroke");
|
||||
currentStyle.strokePaint = target.getAttribute("stroke") || 'none';
|
||||
currentStyle.strokeOpacity = target.getAttribute("stroke-opacity") || 1.0;
|
||||
currentStyle.strokeWidth = target.getAttribute("stroke-width");
|
||||
currentStyle.strokeDashArray = target.getAttribute("stroke-dasharray");
|
||||
currentStyle.strokeLinecap = target.getAttribute("stroke-linecap");
|
||||
currentStyle.strokeLinejoin = target.getAttribute("stroke-linejoin");
|
||||
currentStyle.opacity = target.getAttribute("opacity") || 1.0;
|
||||
if ($.inArray(target.nodeName, ['g', 'use']) == -1) {
|
||||
if ($.inArray(opts.selectedElements.nodeName, ['g', 'use']) == -1) {
|
||||
var changes = {};
|
||||
|
||||
var change = function(elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
|
||||
if (currentStyle.fillPaint) change(opts.selectedElements[0], "fill", currentStyle.fillPaint);
|
||||
if (currentStyle.fillOpacity) change(opts.selectedElements[0], "fill-opacity", currentStyle.fillOpacity);
|
||||
if (currentStyle.strokePaint) change(opts.selectedElements[0], "stroke", currentStyle.strokePaint);
|
||||
if (currentStyle.strokeOpacity) change(opts.selectedElements[0], "stroke-opacity", currentStyle.strokeOpacity);
|
||||
if (currentStyle.strokeWidth) change(opts.selectedElements[0], "stroke-width", currentStyle.strokeWidth);
|
||||
if (currentStyle.strokeDashArray) change(opts.selectedElements[0], "stroke-dasharray", currentStyle.strokeDashArray);
|
||||
if (currentStyle.opacity) change(opts.selectedElements[0], "opacity", currentStyle.opacity);
|
||||
if (currentStyle.strokeLinecap) change(opts.selectedElements[0], "stroke-linecap", currentStyle.strokeLinecap);
|
||||
if (currentStyle.strokeLinejoin) change(opts.selectedElements[0], "stroke-linejoin", currentStyle.strokeLinejoin);
|
||||
|
||||
var batchCmd = new S.BatchCommand();
|
||||
opts.selectedElements.forEach(function(element){
|
||||
if (currentStyle.fillPaint) change(element, "fill", currentStyle.fillPaint);
|
||||
if (currentStyle.fillOpacity) change(element, "fill-opacity", currentStyle.fillOpacity);
|
||||
if (currentStyle.strokePaint) change(element, "stroke", currentStyle.strokePaint);
|
||||
if (currentStyle.strokeOpacity) change(element, "stroke-opacity", currentStyle.strokeOpacity);
|
||||
if (currentStyle.strokeWidth) change(element, "stroke-width", currentStyle.strokeWidth);
|
||||
if (currentStyle.strokeDashArray) change(element, "stroke-dasharray", currentStyle.strokeDashArray);
|
||||
if (currentStyle.opacity) change(element, "opacity", currentStyle.opacity);
|
||||
if (currentStyle.strokeLinecap) change(element, "stroke-linecap", currentStyle.strokeLinecap);
|
||||
if (currentStyle.strokeLinejoin) change(element, "stroke-linejoin", currentStyle.strokeLinejoin);
|
||||
batchCmd.addSubCommand(new ChangeElementCommand(element, changes));
|
||||
console.log(changes);
|
||||
changes = {};
|
||||
});
|
||||
var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill")
|
||||
var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke")
|
||||
|
||||
svgCanvas.setPaint("fill", fill)
|
||||
svgCanvas.setPaint("stroke", stroke)
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
svgEditor.paintBox.fill.update(true)
|
||||
svgEditor.paintBox.stroke.update(true)
|
||||
addToHistory(batchCmd);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ svgEditor.addExtension("view_grid", function(s) {
|
|||
svgroot = s.svgroot;
|
||||
|
||||
var showGrid = false;
|
||||
var assignAttributes = svgCanvas.assignAttributes;
|
||||
var assignAttributes = s.assignAttributes;
|
||||
|
||||
var hcanvas = document.createElement('canvas');
|
||||
$(hcanvas).hide().appendTo('body');
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ svgEditor.addExtension("shapes", function() {
|
|||
}
|
||||
|
||||
function makeButtons(cat, shapes) {
|
||||
$('.tool_button, .tool_button_current').addClass("loaded")
|
||||
var size = cur_lib.size || 300;
|
||||
var fill = cur_lib.fill || false;
|
||||
var off = size * .05;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
/**
|
||||
* Package: svedit.select
|
||||
*
|
||||
* Licensed under the Apache License, Version 2
|
||||
*
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
* Copyright(c) 2010 Jeff Schiller
|
||||
*/
|
||||
|
||||
// Dependencies:
|
||||
// 1) jQuery
|
||||
// 2) browser.js
|
||||
// 3) math.js
|
||||
// 4) svgutils.js
|
||||
|
||||
var svgedit = svgedit || {};
|
||||
|
||||
(function() {
|
||||
|
||||
if (!svgedit.hover) {
|
||||
svgedit.hover = {};
|
||||
}
|
||||
|
||||
var svgFactory_;
|
||||
var config_;
|
||||
var hoverManager_; // A Singleton
|
||||
|
||||
// Class: svgedit.select.Selector
|
||||
// Private class for DOM element selection boxes
|
||||
//
|
||||
// Parameters:
|
||||
// id - integer to internally indentify the selector
|
||||
// elem - DOM element associated with this selector
|
||||
svgedit.hover.Hoverer = function(id, elem) {
|
||||
// this is the selector's unique number
|
||||
this.id = id;
|
||||
|
||||
// this holds a reference to the element for which this selector is being used
|
||||
this.hoveredElement = elem;
|
||||
|
||||
// this is a flag used internally to track whether the selector is being used or not
|
||||
this.locked = true;
|
||||
|
||||
// this holds a reference to the <g> element that holds all visual elements of the selector
|
||||
this.hoverGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'id': ('hoverGroup' + this.id)}
|
||||
});
|
||||
|
||||
// this holds a reference to the path rect
|
||||
this.hoverElem = this.selectorGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'path',
|
||||
'attr': {
|
||||
'id': ('hoverBox' + this.id),
|
||||
'fill': 'none',
|
||||
'stroke': '#4F80FF',
|
||||
'stroke-width': '1',
|
||||
'shape-rendering': 'crispEdges',
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
this.reset(this.hoveredElement);
|
||||
};
|
||||
|
||||
|
||||
// Function: svgedit.select.Selector.reset
|
||||
// Used to reset the id and element that the selector is attached to
|
||||
//
|
||||
// Parameters:
|
||||
// e - DOM element associated with this selector
|
||||
svgedit.hover.Hoverer.prototype.reset = function(e) {
|
||||
this.locked = true;
|
||||
this.hoveredElement = e;
|
||||
this.resize();
|
||||
this.hoverGroup.setAttribute('display', 'inline');
|
||||
};
|
||||
|
||||
|
||||
// Class: svgedit.select.SelectorManager
|
||||
svgedit.hover.HoverManager = function() {
|
||||
// this will hold the <g> element that contains all hover elements
|
||||
this.hoverParentGroup = null;
|
||||
this.initGroup();
|
||||
};
|
||||
|
||||
// Function: svgedit.select.SelectorManager.initGroup
|
||||
// Resets the parent selector group element
|
||||
svgedit.hover.HoverManager.prototype.initGroup = function() {
|
||||
// remove old selector parent group if it existed
|
||||
if (this.hoverParentGroup && this.hoverParentGroup.parentNode) {
|
||||
this.hoverParentGroup.parentNode.removeChild(this.hoverParentGroup);
|
||||
}
|
||||
|
||||
// create parent selector group and add it to svgroot
|
||||
this.selectorParentGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'id': 'hoverParentGroup'}
|
||||
});
|
||||
|
||||
|
||||
if($('#canvasBackground').length) return;
|
||||
|
||||
var rect = svgFactory_.createSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': {
|
||||
'width': '100%',
|
||||
'height': '100%',
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'stroke-width': 1,
|
||||
'stroke': '#000',
|
||||
'fill': '#FFF',
|
||||
'shape-rendering': 'crispEdges',
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
});
|
||||
|
||||
// Both Firefox and WebKit are too slow with this filter region (especially at higher
|
||||
// zoom levels) and Opera has at least one bug
|
||||
// if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
|
||||
canvasbg.appendChild(rect);
|
||||
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
|
||||
};
|
||||
|
||||
|
||||
|
||||
svgedit.hover.init = function(config, svgFactory) {
|
||||
config_ = config;
|
||||
svgFactory_ = svgFactory;
|
||||
selectorManager_ = new svgedit.hover.HoverManager();
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: svgedit.select.getSelectorManager
|
||||
*
|
||||
* Returns:
|
||||
* The SelectorManager instance.
|
||||
*/
|
||||
svgedit.hover.getHoverManager = function() {
|
||||
return selectorManager_;
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -1977,3 +1977,8 @@ span.zoom_tool img {
|
|||
|
||||
#svg_editor #group_title {display: none;}
|
||||
|
||||
#base_unit_container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
@ -39,6 +39,7 @@
|
|||
<script type="text/javascript" src="sanitize.js"></script>
|
||||
<script type="text/javascript" src="history.js"></script>
|
||||
<script type="text/javascript" src="select.js"></script>
|
||||
<script type="text/javascript" src="hover.js"></script>
|
||||
<script type="text/javascript" src="draw.js"></script>
|
||||
<script type="text/javascript" src="path.js"></script>
|
||||
<script type="text/javascript" src="svgcanvas.js"></script>
|
||||
|
|
@ -48,6 +49,8 @@
|
|||
<script type="text/javascript" src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
|
||||
<script type="text/javascript" src="jgraduate/jpicker.min.js"></script>
|
||||
<script type="text/javascript" src="mousewheel.js"></script>
|
||||
<script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
|
||||
<script type="text/javascript" src="extensions/ext-grid.js"></script>
|
||||
<!--{endif}-->
|
||||
|
||||
<!-- you can load extensions here -->
|
||||
|
|
@ -87,7 +90,6 @@ $(function(){
|
|||
</div>
|
||||
|
||||
<div id="workarea">
|
||||
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
|
||||
<div id="svgcanvas" style="position:relative">
|
||||
|
||||
</div>
|
||||
|
|
@ -182,6 +184,7 @@ $(function(){
|
|||
<div class="menu_list" id="view_menu">
|
||||
<div class="menu_item push_button_pressed" id="tool_rulers">View Rulers</div>
|
||||
<div class="menu_item" id="tool_wireframe">View Wireframe</div>
|
||||
<div class="menu_item" id="tool_snap">Snap to Grid</div>
|
||||
<div class="separator"></div>
|
||||
<div class="menu_item" id="tool_source">Source... <span class="shortcut">⌘U</span></div>
|
||||
</div>
|
||||
|
|
@ -787,18 +790,6 @@ $(function(){
|
|||
<label>
|
||||
<div class="subtitle"><strong>Units & Rulers</strong></div>
|
||||
<span id="svginfo_rulers_onoff"><input type="checkbox" value="show_rulers" id="show_rulers" checked> Show rulers</span>
|
||||
|
||||
<span id="svginfo_unit">Base Unit:</span>
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
<option value="mm">Millimeters</option>
|
||||
<option value="in">Inches</option>
|
||||
<option value="pt">Points</option>
|
||||
<option value="pc">Picas</option>
|
||||
<option value="em">Ems</option>
|
||||
<option value="ex">Exs</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
|
|
@ -809,6 +800,19 @@ $(function(){
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="base_unit_container">
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
<option value="mm">Millimeters</option>
|
||||
<option value="in">Inches</option>
|
||||
<option value="pt">Points</option>
|
||||
<option value="pc">Picas</option>
|
||||
<option value="em">Ems</option>
|
||||
<option value="ex">Exs</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="dialog_box">
|
||||
<div id="dialog_box_overlay"></div>
|
||||
<div id="dialog_container">
|
||||
|
|
|
|||
|
|
@ -52,10 +52,10 @@
|
|||
},
|
||||
initOpacity: 1,
|
||||
imgPath: 'images/',
|
||||
langPath: 'locale/',
|
||||
extPath: 'extensions/',
|
||||
jGraduatePath: 'jgraduate/images/',
|
||||
extensions: ['ext-markers.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
|
||||
//extensions: ['ext-markers.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
|
||||
extensions: [],
|
||||
initTool: 'select',
|
||||
wireframe: false,
|
||||
colorPickerCSS: false,
|
||||
|
|
@ -281,15 +281,6 @@
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
var good_langs = [];
|
||||
|
||||
$('#lang_select option').each(function() {
|
||||
good_langs.push(this.value);
|
||||
});
|
||||
|
||||
// var lang = ('lang' in curPrefs) ? curPrefs.lang : null;
|
||||
Editor.putLocale(null, good_langs);
|
||||
}
|
||||
|
||||
// Load extensions
|
||||
|
|
@ -443,7 +434,7 @@
|
|||
$('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
|
||||
$(this).parent().prepend(this);
|
||||
});
|
||||
|
||||
$('.tool_button, .tool_button_current').addClass("loaded")
|
||||
var tleft = $('#tools_left');
|
||||
if (tleft.length != 0) {
|
||||
var min_height = tleft.offset().top + tleft.outerHeight();
|
||||
|
|
@ -472,9 +463,27 @@
|
|||
}, 1);
|
||||
}
|
||||
});
|
||||
|
||||
$('#rulers').on("dblclick", function(e){
|
||||
$("#base_unit_container").css({
|
||||
top: e.pageY-10,
|
||||
left: e.pageX-50,
|
||||
display: 'block'
|
||||
})
|
||||
})
|
||||
$("#base_unit_container")
|
||||
.on("mouseleave mouseenter", function(e){
|
||||
t = setTimeout(function(){$("#base_unit_container").fadeOut(500)}, 200)
|
||||
if(event.type == "mouseover") clearTimeout(t)
|
||||
})
|
||||
$("#base_unit")
|
||||
.on("change", function(e) {
|
||||
savePreferences();
|
||||
});
|
||||
|
||||
Editor.canvas = svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), curConfig);
|
||||
Editor.show_save_warning = false;
|
||||
Editor.paintBox = {fill: null, stroke:null, canvas:null};
|
||||
var palette = ["#000000", "#3f3f3f", "#7f7f7f", "#bfbfbf", "#ffffff",
|
||||
"#ff0000", "#ff7f00", "#ffff00", "#7fff00",
|
||||
"#00ff00", "#00ff7f", "#00ffff", "#007fff",
|
||||
|
|
@ -500,8 +509,7 @@
|
|||
zoomInIcon = 'crosshair',
|
||||
zoomOutIcon = 'crosshair',
|
||||
ui_context = 'toolbars',
|
||||
orig_source = '',
|
||||
paintBox = {fill: null, stroke:null};
|
||||
orig_source = '';
|
||||
|
||||
|
||||
// This puts the correct shortcuts in the menus
|
||||
|
|
@ -566,7 +574,6 @@
|
|||
if(curr.length && curr[0].id !== 'tool_select') {
|
||||
curr.removeClass('tool_button_current').addClass('tool_button');
|
||||
$('#tool_select').addClass('tool_button_current').removeClass('tool_button');
|
||||
$('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}');
|
||||
}
|
||||
svgCanvas.setMode('select');
|
||||
};
|
||||
|
|
@ -772,8 +779,8 @@
|
|||
|
||||
// In the event a gradient was flipped:
|
||||
if(selectedElement && mode === "select") {
|
||||
paintBox.fill.update();
|
||||
paintBox.stroke.update();
|
||||
Editor.paintBox.fill.update();
|
||||
Editor.paintBox.stroke.update();
|
||||
}
|
||||
|
||||
svgCanvas.runExtensions("elementChanged", {
|
||||
|
|
@ -853,8 +860,8 @@
|
|||
|
||||
// Makes sure the current selected paint is available to work with
|
||||
var prepPaints = function() {
|
||||
paintBox.fill.prep();
|
||||
paintBox.stroke.prep();
|
||||
Editor.paintBox.fill.prep();
|
||||
Editor.paintBox.stroke.prep();
|
||||
}
|
||||
|
||||
var flyout_funcs = {};
|
||||
|
|
@ -1450,14 +1457,14 @@
|
|||
|
||||
$('#stroke_width').val(gWidth === null ? "" : gWidth);
|
||||
|
||||
paintBox.fill.update(true);
|
||||
paintBox.stroke.update(true);
|
||||
Editor.paintBox.fill.update(true);
|
||||
Editor.paintBox.stroke.update(true);
|
||||
|
||||
|
||||
break;
|
||||
default:
|
||||
paintBox.fill.update(true);
|
||||
paintBox.stroke.update(true);
|
||||
Editor.paintBox.fill.update(true);
|
||||
Editor.paintBox.stroke.update(true);
|
||||
|
||||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 1);
|
||||
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
|
||||
|
|
@ -1977,7 +1984,7 @@
|
|||
paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
|
||||
}
|
||||
|
||||
paintBox[picker].setPaint(paint);
|
||||
Editor.paintBox[picker].setPaint(paint);
|
||||
|
||||
if (isStroke) {
|
||||
svgCanvas.setColor('stroke', color);
|
||||
|
|
@ -2728,8 +2735,8 @@
|
|||
if (isNaN(fill_opacity)) {fill_opacity = 100;}
|
||||
var stroke = getPaint(stroke_color, stroke_opacity, "stroke");
|
||||
var fill = getPaint(fill_color, fill_opacity, "fill");
|
||||
paintBox.fill.setPaint(stroke, true);
|
||||
paintBox.stroke.setPaint(fill, true);
|
||||
Editor.paintBox.fill.setPaint(stroke, true);
|
||||
Editor.paintBox.stroke.setPaint(fill, true);
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -2768,6 +2775,16 @@
|
|||
updateWireFrame();
|
||||
}
|
||||
|
||||
var clickSnapGrid = function() {
|
||||
var sg = !$('#tool_snap').hasClass('push_button_pressed');
|
||||
if (sg)
|
||||
$('#tool_snap').addClass('push_button_pressed');
|
||||
else
|
||||
$('#tool_snap').removeClass('push_button_pressed');
|
||||
curConfig.gridSnapping = sg;
|
||||
savePreferences();
|
||||
}
|
||||
|
||||
var clickCanvasColor = function(){
|
||||
svgCanvas.clearSelection();
|
||||
$('#tool_canvas').trigger("click")
|
||||
|
|
@ -2946,17 +2963,12 @@
|
|||
var color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF';
|
||||
setBackground(color, $('#canvas_bg_url').val());
|
||||
|
||||
// set language
|
||||
var lang = $('#lang_select').val();
|
||||
if(lang != curPrefs.lang) {
|
||||
Editor.putLocale(lang);
|
||||
}
|
||||
|
||||
// set icon size
|
||||
setIconSize($('#iconsize').val());
|
||||
|
||||
// set grid setting
|
||||
curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
|
||||
curConfig.gridSnapping = $('#tool_snap').hasClass('push_button_pressed');
|
||||
curConfig.snappingStep = $('#grid_snapping_step').val();
|
||||
curConfig.showRulers = $('#show_rulers')[0].checked;
|
||||
|
||||
|
|
@ -3426,7 +3438,7 @@
|
|||
var is_background = elem[0].id == "canvas_color"
|
||||
if (is_background) picker = 'canvas'
|
||||
// var opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
|
||||
var paint = paintBox[picker].paint;
|
||||
var paint = Editor.paintBox[picker].paint;
|
||||
|
||||
var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
|
||||
var was_none = false;
|
||||
|
|
@ -3445,7 +3457,7 @@
|
|||
function(p) {
|
||||
paint = new $.jGraduate.Paint(p);
|
||||
|
||||
paintBox[picker].setPaint(paint);
|
||||
Editor.paintBox[picker].setPaint(paint);
|
||||
svgCanvas.setPaint(picker, paint);
|
||||
|
||||
$('#color_picker').hide();
|
||||
|
|
@ -3649,19 +3661,19 @@
|
|||
}
|
||||
};
|
||||
|
||||
paintBox.fill = new PaintBox('#fill_color', 'fill');
|
||||
paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
|
||||
paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
|
||||
Editor.paintBox.fill = new PaintBox('#fill_color', 'fill');
|
||||
Editor.paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
|
||||
Editor.paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
|
||||
|
||||
$('#stroke_width').val(curConfig.initStroke.width);
|
||||
$('#group_opacity').val(curConfig.initOpacity * 100);
|
||||
|
||||
// Use this SVG elem to test vectorEffect support
|
||||
var test_el = paintBox.fill.rect.cloneNode(false);
|
||||
var test_el = Editor.paintBox.fill.rect.cloneNode(false);
|
||||
test_el.setAttribute('style','vector-effect:non-scaling-stroke');
|
||||
var supportsNonSS = (test_el.style.vectorEffect === 'non-scaling-stroke');
|
||||
test_el.removeAttribute('style');
|
||||
var svgdocbox = paintBox.fill.rect.ownerDocument;
|
||||
var svgdocbox = Editor.paintBox.fill.rect.ownerDocument;
|
||||
// Use this to test support for blur element. Seems to work to test support in Webkit
|
||||
var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
|
||||
if(typeof blur_test.stdDeviationX === "undefined") {
|
||||
|
|
@ -4100,6 +4112,7 @@
|
|||
{sel:'#tool_import', fn: clickImport, evt: 'mouseup'},
|
||||
{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: [modKey + 'U', true]},
|
||||
{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click'},
|
||||
{sel:'#tool_snap', fn: clickSnapGrid, evt: 'click'},
|
||||
{sel:'#tool_rulers', fn: clickRulers, evt: 'click'},
|
||||
{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
|
||||
{sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'},
|
||||
|
|
|
|||
|
|
@ -408,6 +408,8 @@ svgedit.select.init(curConfig, {
|
|||
});
|
||||
// this object manages selectors for us
|
||||
var selectorManager = this.selectorManager = svgedit.select.getSelectorManager();
|
||||
// this object manages selectors for us
|
||||
var hoverManager = this.hoverManager = svgedit.select.getSelectorManager();
|
||||
|
||||
// Import from path.js
|
||||
svgedit.path.init({
|
||||
|
|
@ -573,7 +575,8 @@ this.addExtension = function(name, ext_func) {
|
|||
svgroot: svgroot,
|
||||
svgcontent: svgcontent,
|
||||
nonce: getCurrentDrawing().getNonce(),
|
||||
selectorManager: selectorManager
|
||||
selectorManager: selectorManager,
|
||||
hoverManager: hoverManager
|
||||
}));
|
||||
} else {
|
||||
var ext = ext_func;
|
||||
|
|
@ -2370,7 +2373,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
|
|||
// but the action is not recorded until mousing up
|
||||
// - when we are in select mode, select the element, remember the position
|
||||
// and do nothing else
|
||||
var mouseDown = function(evt)
|
||||
var mouseDown = mosueOver = function(evt)
|
||||
{
|
||||
if(canvas.spaceKey || evt.button === 1) return;
|
||||
|
||||
|
|
@ -3159,6 +3162,18 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
|
|||
|
||||
}; // mouseMove()
|
||||
|
||||
|
||||
// mouseover mode
|
||||
var mouseOver = function(evt) {
|
||||
if (evt.button) return;
|
||||
elem = evt.target;
|
||||
var clone = elem.cloneNode(true);
|
||||
clone.setAttribute("fill", "none");
|
||||
clone.setAttribute("stroke", "#09f")
|
||||
clone.setAttribute("stroke-width", "1")
|
||||
elem.selectorParentGroup.appendChild(clone)
|
||||
}
|
||||
|
||||
// - in create mode, the element's opacity is set properly, we create an InsertElementCommand
|
||||
// and store it on the Undo stack
|
||||
// - in move/resize mode, the element's attributes which were affected by the move/resize are
|
||||
|
|
|
|||
|
|
@ -411,6 +411,7 @@ span.zoom_tool img{vertical-align:top}
|
|||
.clearfix:after{clear:both}
|
||||
.clearfix{*zoom:1}
|
||||
#svg_editor #group_title{display:none}
|
||||
#base_unit_container{display:none;position:absolute;z-index:20}
|
||||
INPUT.spin-button{padding:2px 20px 2px 2px;background-repeat:no-repeat;background-position:100% 0;background-image:url('spinbtn_updn.png');background-color:white}
|
||||
INPUT.spin-button.up{cursor:pointer;background-position:100% -18px}
|
||||
INPUT.spin-button.down{cursor:pointer;background-position:100% -36px}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -2623,7 +2623,11 @@ span.zoom_tool img {
|
|||
|
||||
#svg_editor #group_title {display: none;}
|
||||
|
||||
/*
|
||||
#base_unit_container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
}/*
|
||||
Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
|
||||
Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc.
|
||||
(Requires a reference to the JQuery library found at http://jquery.com/src/latest/)
|
||||
|
|
|
|||
|
|
@ -34,9 +34,8 @@ svgEditor.addExtension("eyedropper", function(S) {
|
|||
|
||||
var elem = null;
|
||||
var tool = $('#tool_eyedropper');
|
||||
// enable-eye-dropper if one element is selected
|
||||
|
||||
if (!opts.multiselected && opts.elems[0] &&
|
||||
if (opts.elems[0] &&
|
||||
$.inArray(opts.elems[0].nodeName, ['svg', 'g', 'use']) == -1)
|
||||
{
|
||||
elem = opts.elems[0];
|
||||
|
|
@ -52,6 +51,7 @@ svgEditor.addExtension("eyedropper", function(S) {
|
|||
var getPaint = function(color, opac, type) {
|
||||
// update the editor's fill paint
|
||||
var opts = null;
|
||||
console.log(color);
|
||||
if (color.indexOf("url(#") === 0) {
|
||||
var refElem = svgCanvas.getRefElem(color);
|
||||
if(refElem) {
|
||||
|
|
@ -100,43 +100,44 @@ svgEditor.addExtension("eyedropper", function(S) {
|
|||
elementChanged: getStyle,
|
||||
mouseDown: function(opts) {
|
||||
var mode = svgCanvas.getMode();
|
||||
if (mode == "eyedropper") {
|
||||
var e = opts.event;
|
||||
var target = e.target;
|
||||
var e = opts.event;
|
||||
var target = (e.target.id === "svgroot") ? document.getElementById('canvas_background') : e.target;
|
||||
if (mode == "eyedropper" && target) {
|
||||
currentStyle.fillPaint = target.getAttribute("fill") || "white";
|
||||
currentStyle.fillOpacity = target.getAttribute("fill-opacity") || 1.0;
|
||||
currentStyle.strokePaint = target.getAttribute("stroke");
|
||||
currentStyle.strokePaint = target.getAttribute("stroke") || 'none';
|
||||
currentStyle.strokeOpacity = target.getAttribute("stroke-opacity") || 1.0;
|
||||
currentStyle.strokeWidth = target.getAttribute("stroke-width");
|
||||
currentStyle.strokeDashArray = target.getAttribute("stroke-dasharray");
|
||||
currentStyle.strokeLinecap = target.getAttribute("stroke-linecap");
|
||||
currentStyle.strokeLinejoin = target.getAttribute("stroke-linejoin");
|
||||
currentStyle.opacity = target.getAttribute("opacity") || 1.0;
|
||||
if ($.inArray(target.nodeName, ['g', 'use']) == -1) {
|
||||
if ($.inArray(opts.selectedElements.nodeName, ['g', 'use']) == -1) {
|
||||
var changes = {};
|
||||
|
||||
var change = function(elem, attrname, newvalue) {
|
||||
changes[attrname] = elem.getAttribute(attrname);
|
||||
elem.setAttribute(attrname, newvalue);
|
||||
};
|
||||
|
||||
if (currentStyle.fillPaint) change(opts.selectedElements[0], "fill", currentStyle.fillPaint);
|
||||
if (currentStyle.fillOpacity) change(opts.selectedElements[0], "fill-opacity", currentStyle.fillOpacity);
|
||||
if (currentStyle.strokePaint) change(opts.selectedElements[0], "stroke", currentStyle.strokePaint);
|
||||
if (currentStyle.strokeOpacity) change(opts.selectedElements[0], "stroke-opacity", currentStyle.strokeOpacity);
|
||||
if (currentStyle.strokeWidth) change(opts.selectedElements[0], "stroke-width", currentStyle.strokeWidth);
|
||||
if (currentStyle.strokeDashArray) change(opts.selectedElements[0], "stroke-dasharray", currentStyle.strokeDashArray);
|
||||
if (currentStyle.opacity) change(opts.selectedElements[0], "opacity", currentStyle.opacity);
|
||||
if (currentStyle.strokeLinecap) change(opts.selectedElements[0], "stroke-linecap", currentStyle.strokeLinecap);
|
||||
if (currentStyle.strokeLinejoin) change(opts.selectedElements[0], "stroke-linejoin", currentStyle.strokeLinejoin);
|
||||
|
||||
var batchCmd = new S.BatchCommand();
|
||||
opts.selectedElements.forEach(function(element){
|
||||
if (currentStyle.fillPaint) change(element, "fill", currentStyle.fillPaint);
|
||||
if (currentStyle.fillOpacity) change(element, "fill-opacity", currentStyle.fillOpacity);
|
||||
if (currentStyle.strokePaint) change(element, "stroke", currentStyle.strokePaint);
|
||||
if (currentStyle.strokeOpacity) change(element, "stroke-opacity", currentStyle.strokeOpacity);
|
||||
if (currentStyle.strokeWidth) change(element, "stroke-width", currentStyle.strokeWidth);
|
||||
if (currentStyle.strokeDashArray) change(element, "stroke-dasharray", currentStyle.strokeDashArray);
|
||||
if (currentStyle.opacity) change(element, "opacity", currentStyle.opacity);
|
||||
if (currentStyle.strokeLinecap) change(element, "stroke-linecap", currentStyle.strokeLinecap);
|
||||
if (currentStyle.strokeLinejoin) change(element, "stroke-linejoin", currentStyle.strokeLinejoin);
|
||||
batchCmd.addSubCommand(new ChangeElementCommand(element, changes));
|
||||
console.log(changes);
|
||||
changes = {};
|
||||
});
|
||||
var fill = getPaint(currentStyle.fillPaint, currentStyle.fillOpacity*100, "fill")
|
||||
var stroke = getPaint(currentStyle.strokePaint, currentStyle.strokeOpacity*100, "stroke")
|
||||
|
||||
svgCanvas.setPaint("fill", fill)
|
||||
svgCanvas.setPaint("stroke", stroke)
|
||||
|
||||
addToHistory(new ChangeElementCommand(target, changes));
|
||||
svgEditor.paintBox.fill.update(true)
|
||||
svgEditor.paintBox.stroke.update(true)
|
||||
addToHistory(batchCmd);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ svgEditor.addExtension("view_grid", function(s) {
|
|||
svgroot = s.svgroot;
|
||||
|
||||
var showGrid = false;
|
||||
var assignAttributes = svgCanvas.assignAttributes;
|
||||
var assignAttributes = s.assignAttributes;
|
||||
|
||||
var hcanvas = document.createElement('canvas');
|
||||
$(hcanvas).hide().appendTo('body');
|
||||
|
|
|
|||
|
|
@ -103,7 +103,6 @@ svgEditor.addExtension("shapes", function() {
|
|||
}
|
||||
|
||||
function makeButtons(cat, shapes) {
|
||||
$('.tool_button, .tool_button_current').addClass("loaded")
|
||||
var size = cur_lib.size || 300;
|
||||
var fill = cur_lib.fill || false;
|
||||
var off = size * .05;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,147 @@
|
|||
/**
|
||||
* Package: svedit.select
|
||||
*
|
||||
* Licensed under the Apache License, Version 2
|
||||
*
|
||||
* Copyright(c) 2010 Alexis Deveria
|
||||
* Copyright(c) 2010 Jeff Schiller
|
||||
*/
|
||||
|
||||
// Dependencies:
|
||||
// 1) jQuery
|
||||
// 2) browser.js
|
||||
// 3) math.js
|
||||
// 4) svgutils.js
|
||||
|
||||
var svgedit = svgedit || {};
|
||||
|
||||
(function() {
|
||||
|
||||
if (!svgedit.hover) {
|
||||
svgedit.hover = {};
|
||||
}
|
||||
|
||||
var svgFactory_;
|
||||
var config_;
|
||||
var hoverManager_; // A Singleton
|
||||
|
||||
// Class: svgedit.select.Selector
|
||||
// Private class for DOM element selection boxes
|
||||
//
|
||||
// Parameters:
|
||||
// id - integer to internally indentify the selector
|
||||
// elem - DOM element associated with this selector
|
||||
svgedit.hover.Hoverer = function(id, elem) {
|
||||
// this is the selector's unique number
|
||||
this.id = id;
|
||||
|
||||
// this holds a reference to the element for which this selector is being used
|
||||
this.hoveredElement = elem;
|
||||
|
||||
// this is a flag used internally to track whether the selector is being used or not
|
||||
this.locked = true;
|
||||
|
||||
// this holds a reference to the <g> element that holds all visual elements of the selector
|
||||
this.hoverGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'id': ('hoverGroup' + this.id)}
|
||||
});
|
||||
|
||||
// this holds a reference to the path rect
|
||||
this.hoverElem = this.selectorGroup.appendChild(
|
||||
svgFactory_.createSVGElement({
|
||||
'element': 'path',
|
||||
'attr': {
|
||||
'id': ('hoverBox' + this.id),
|
||||
'fill': 'none',
|
||||
'stroke': '#4F80FF',
|
||||
'stroke-width': '1',
|
||||
'shape-rendering': 'crispEdges',
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
this.reset(this.hoveredElement);
|
||||
};
|
||||
|
||||
|
||||
// Function: svgedit.select.Selector.reset
|
||||
// Used to reset the id and element that the selector is attached to
|
||||
//
|
||||
// Parameters:
|
||||
// e - DOM element associated with this selector
|
||||
svgedit.hover.Hoverer.prototype.reset = function(e) {
|
||||
this.locked = true;
|
||||
this.hoveredElement = e;
|
||||
this.resize();
|
||||
this.hoverGroup.setAttribute('display', 'inline');
|
||||
};
|
||||
|
||||
|
||||
// Class: svgedit.select.SelectorManager
|
||||
svgedit.hover.HoverManager = function() {
|
||||
// this will hold the <g> element that contains all hover elements
|
||||
this.hoverParentGroup = null;
|
||||
this.initGroup();
|
||||
};
|
||||
|
||||
// Function: svgedit.select.SelectorManager.initGroup
|
||||
// Resets the parent selector group element
|
||||
svgedit.hover.HoverManager.prototype.initGroup = function() {
|
||||
// remove old selector parent group if it existed
|
||||
if (this.hoverParentGroup && this.hoverParentGroup.parentNode) {
|
||||
this.hoverParentGroup.parentNode.removeChild(this.hoverParentGroup);
|
||||
}
|
||||
|
||||
// create parent selector group and add it to svgroot
|
||||
this.selectorParentGroup = svgFactory_.createSVGElement({
|
||||
'element': 'g',
|
||||
'attr': {'id': 'hoverParentGroup'}
|
||||
});
|
||||
|
||||
|
||||
if($('#canvasBackground').length) return;
|
||||
|
||||
var rect = svgFactory_.createSVGElement({
|
||||
'element': 'rect',
|
||||
'attr': {
|
||||
'width': '100%',
|
||||
'height': '100%',
|
||||
'x': 0,
|
||||
'y': 0,
|
||||
'stroke-width': 1,
|
||||
'stroke': '#000',
|
||||
'fill': '#FFF',
|
||||
'shape-rendering': 'crispEdges',
|
||||
'style': 'pointer-events:none'
|
||||
}
|
||||
});
|
||||
|
||||
// Both Firefox and WebKit are too slow with this filter region (especially at higher
|
||||
// zoom levels) and Opera has at least one bug
|
||||
// if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
|
||||
canvasbg.appendChild(rect);
|
||||
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
|
||||
};
|
||||
|
||||
|
||||
|
||||
svgedit.hover.init = function(config, svgFactory) {
|
||||
config_ = config;
|
||||
svgFactory_ = svgFactory;
|
||||
selectorManager_ = new svgedit.hover.HoverManager();
|
||||
};
|
||||
|
||||
/**
|
||||
* Function: svgedit.select.getSelectorManager
|
||||
*
|
||||
* Returns:
|
||||
* The SelectorManager instance.
|
||||
*/
|
||||
svgedit.hover.getHoverManager = function() {
|
||||
return selectorManager_;
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
@ -1977,3 +1977,8 @@ span.zoom_tool img {
|
|||
|
||||
#svg_editor #group_title {display: none;}
|
||||
|
||||
#base_unit_container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
@ -39,6 +39,7 @@
|
|||
<script type="text/javascript" src="sanitize.js"></script>
|
||||
<script type="text/javascript" src="history.js"></script>
|
||||
<script type="text/javascript" src="select.js"></script>
|
||||
<script type="text/javascript" src="hover.js"></script>
|
||||
<script type="text/javascript" src="draw.js"></script>
|
||||
<script type="text/javascript" src="path.js"></script>
|
||||
<script type="text/javascript" src="svgcanvas.js"></script>
|
||||
|
|
@ -48,6 +49,8 @@
|
|||
<script type="text/javascript" src="jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
|
||||
<script type="text/javascript" src="jgraduate/jpicker.min.js"></script>
|
||||
<script type="text/javascript" src="mousewheel.js"></script>
|
||||
<script type="text/javascript" src="extensions/ext-eyedropper.js"></script>
|
||||
<script type="text/javascript" src="extensions/ext-grid.js"></script>
|
||||
<!{endif}-->
|
||||
|
||||
<!-- you can load extensions here -->
|
||||
|
|
@ -87,7 +90,6 @@ $(function(){
|
|||
</div>
|
||||
|
||||
<div id="workarea">
|
||||
<style id="styleoverrides" type="text/css" media="screen" scoped="scoped"></style>
|
||||
<div id="svgcanvas" style="position:relative">
|
||||
|
||||
</div>
|
||||
|
|
@ -182,6 +184,7 @@ $(function(){
|
|||
<div class="menu_list" id="view_menu">
|
||||
<div class="menu_item push_button_pressed" id="tool_rulers">View Rulers</div>
|
||||
<div class="menu_item" id="tool_wireframe">View Wireframe</div>
|
||||
<div class="menu_item" id="tool_snap">Snap to Grid</div>
|
||||
<div class="separator"></div>
|
||||
<div class="menu_item" id="tool_source">Source... <span class="shortcut">⌘U</span></div>
|
||||
</div>
|
||||
|
|
@ -787,18 +790,6 @@ $(function(){
|
|||
<label>
|
||||
<div class="subtitle"><strong>Units & Rulers</strong></div>
|
||||
<span id="svginfo_rulers_onoff"><input type="checkbox" value="show_rulers" id="show_rulers" checked> Show rulers</span>
|
||||
|
||||
<span id="svginfo_unit">Base Unit:</span>
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
<option value="mm">Millimeters</option>
|
||||
<option value="in">Inches</option>
|
||||
<option value="pt">Points</option>
|
||||
<option value="pc">Picas</option>
|
||||
<option value="em">Ems</option>
|
||||
<option value="ex">Exs</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
|
|
@ -809,6 +800,19 @@ $(function(){
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="base_unit_container">
|
||||
<select id="base_unit">
|
||||
<option value="px">Pixels</option>
|
||||
<option value="cm">Centimeters</option>
|
||||
<option value="mm">Millimeters</option>
|
||||
<option value="in">Inches</option>
|
||||
<option value="pt">Points</option>
|
||||
<option value="pc">Picas</option>
|
||||
<option value="em">Ems</option>
|
||||
<option value="ex">Exs</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="dialog_box">
|
||||
<div id="dialog_box_overlay"></div>
|
||||
<div id="dialog_container">
|
||||
|
|
|
|||
|
|
@ -52,10 +52,10 @@
|
|||
},
|
||||
initOpacity: 1,
|
||||
imgPath: 'images/',
|
||||
langPath: 'locale/',
|
||||
extPath: 'extensions/',
|
||||
jGraduatePath: 'jgraduate/images/',
|
||||
extensions: ['ext-markers.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
|
||||
//extensions: ['ext-markers.js', 'ext-eyedropper.js', 'ext-shapes.js', 'ext-grid.js'],
|
||||
extensions: [],
|
||||
initTool: 'select',
|
||||
wireframe: false,
|
||||
colorPickerCSS: false,
|
||||
|
|
@ -281,15 +281,6 @@
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
var good_langs = [];
|
||||
|
||||
$('#lang_select option').each(function() {
|
||||
good_langs.push(this.value);
|
||||
});
|
||||
|
||||
// var lang = ('lang' in curPrefs) ? curPrefs.lang : null;
|
||||
Editor.putLocale(null, good_langs);
|
||||
}
|
||||
|
||||
// Load extensions
|
||||
|
|
@ -443,7 +434,7 @@
|
|||
$('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
|
||||
$(this).parent().prepend(this);
|
||||
});
|
||||
|
||||
$('.tool_button, .tool_button_current').addClass("loaded")
|
||||
var tleft = $('#tools_left');
|
||||
if (tleft.length != 0) {
|
||||
var min_height = tleft.offset().top + tleft.outerHeight();
|
||||
|
|
@ -472,9 +463,27 @@
|
|||
}, 1);
|
||||
}
|
||||
});
|
||||
|
||||
$('#rulers').on("dblclick", function(e){
|
||||
$("#base_unit_container").css({
|
||||
top: e.pageY-10,
|
||||
left: e.pageX-50,
|
||||
display: 'block'
|
||||
})
|
||||
})
|
||||
$("#base_unit_container")
|
||||
.on("mouseleave mouseenter", function(e){
|
||||
t = setTimeout(function(){$("#base_unit_container").fadeOut(500)}, 200)
|
||||
if(event.type == "mouseover") clearTimeout(t)
|
||||
})
|
||||
$("#base_unit")
|
||||
.on("change", function(e) {
|
||||
savePreferences();
|
||||
});
|
||||
|
||||
Editor.canvas = svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"), curConfig);
|
||||
Editor.show_save_warning = false;
|
||||
Editor.paintBox = {fill: null, stroke:null, canvas:null};
|
||||
var palette = ["#000000", "#3f3f3f", "#7f7f7f", "#bfbfbf", "#ffffff",
|
||||
"#ff0000", "#ff7f00", "#ffff00", "#7fff00",
|
||||
"#00ff00", "#00ff7f", "#00ffff", "#007fff",
|
||||
|
|
@ -500,8 +509,7 @@
|
|||
zoomInIcon = 'crosshair',
|
||||
zoomOutIcon = 'crosshair',
|
||||
ui_context = 'toolbars',
|
||||
orig_source = '',
|
||||
paintBox = {fill: null, stroke:null};
|
||||
orig_source = '';
|
||||
|
||||
|
||||
// This puts the correct shortcuts in the menus
|
||||
|
|
@ -566,7 +574,6 @@
|
|||
if(curr.length && curr[0].id !== 'tool_select') {
|
||||
curr.removeClass('tool_button_current').addClass('tool_button');
|
||||
$('#tool_select').addClass('tool_button_current').removeClass('tool_button');
|
||||
$('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}');
|
||||
}
|
||||
svgCanvas.setMode('select');
|
||||
};
|
||||
|
|
@ -772,8 +779,8 @@
|
|||
|
||||
// In the event a gradient was flipped:
|
||||
if(selectedElement && mode === "select") {
|
||||
paintBox.fill.update();
|
||||
paintBox.stroke.update();
|
||||
Editor.paintBox.fill.update();
|
||||
Editor.paintBox.stroke.update();
|
||||
}
|
||||
|
||||
svgCanvas.runExtensions("elementChanged", {
|
||||
|
|
@ -853,8 +860,8 @@
|
|||
|
||||
// Makes sure the current selected paint is available to work with
|
||||
var prepPaints = function() {
|
||||
paintBox.fill.prep();
|
||||
paintBox.stroke.prep();
|
||||
Editor.paintBox.fill.prep();
|
||||
Editor.paintBox.stroke.prep();
|
||||
}
|
||||
|
||||
var flyout_funcs = {};
|
||||
|
|
@ -1450,14 +1457,14 @@
|
|||
|
||||
$('#stroke_width').val(gWidth === null ? "" : gWidth);
|
||||
|
||||
paintBox.fill.update(true);
|
||||
paintBox.stroke.update(true);
|
||||
Editor.paintBox.fill.update(true);
|
||||
Editor.paintBox.stroke.update(true);
|
||||
|
||||
|
||||
break;
|
||||
default:
|
||||
paintBox.fill.update(true);
|
||||
paintBox.stroke.update(true);
|
||||
Editor.paintBox.fill.update(true);
|
||||
Editor.paintBox.stroke.update(true);
|
||||
|
||||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 1);
|
||||
$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
|
||||
|
|
@ -1977,7 +1984,7 @@
|
|||
paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
|
||||
}
|
||||
|
||||
paintBox[picker].setPaint(paint);
|
||||
Editor.paintBox[picker].setPaint(paint);
|
||||
|
||||
if (isStroke) {
|
||||
svgCanvas.setColor('stroke', color);
|
||||
|
|
@ -2728,8 +2735,8 @@
|
|||
if (isNaN(fill_opacity)) {fill_opacity = 100;}
|
||||
var stroke = getPaint(stroke_color, stroke_opacity, "stroke");
|
||||
var fill = getPaint(fill_color, fill_opacity, "fill");
|
||||
paintBox.fill.setPaint(stroke, true);
|
||||
paintBox.stroke.setPaint(fill, true);
|
||||
Editor.paintBox.fill.setPaint(stroke, true);
|
||||
Editor.paintBox.stroke.setPaint(fill, true);
|
||||
|
||||
};
|
||||
|
||||
|
|
@ -2768,6 +2775,16 @@
|
|||
updateWireFrame();
|
||||
}
|
||||
|
||||
var clickSnapGrid = function() {
|
||||
var sg = !$('#tool_snap').hasClass('push_button_pressed');
|
||||
if (sg)
|
||||
$('#tool_snap').addClass('push_button_pressed');
|
||||
else
|
||||
$('#tool_snap').removeClass('push_button_pressed');
|
||||
curConfig.gridSnapping = sg;
|
||||
savePreferences();
|
||||
}
|
||||
|
||||
var clickCanvasColor = function(){
|
||||
svgCanvas.clearSelection();
|
||||
$('#tool_canvas').trigger("click")
|
||||
|
|
@ -2946,17 +2963,12 @@
|
|||
var color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF';
|
||||
setBackground(color, $('#canvas_bg_url').val());
|
||||
|
||||
// set language
|
||||
var lang = $('#lang_select').val();
|
||||
if(lang != curPrefs.lang) {
|
||||
Editor.putLocale(lang);
|
||||
}
|
||||
|
||||
// set icon size
|
||||
setIconSize($('#iconsize').val());
|
||||
|
||||
// set grid setting
|
||||
curConfig.gridSnapping = $('#grid_snapping_on')[0].checked;
|
||||
curConfig.gridSnapping = $('#tool_snap').hasClass('push_button_pressed');
|
||||
curConfig.snappingStep = $('#grid_snapping_step').val();
|
||||
curConfig.showRulers = $('#show_rulers')[0].checked;
|
||||
|
||||
|
|
@ -3426,7 +3438,7 @@
|
|||
var is_background = elem[0].id == "canvas_color"
|
||||
if (is_background) picker = 'canvas'
|
||||
// var opacity = (picker == 'stroke' ? $('#stroke_opacity') : $('#fill_opacity'));
|
||||
var paint = paintBox[picker].paint;
|
||||
var paint = Editor.paintBox[picker].paint;
|
||||
|
||||
var title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
|
||||
var was_none = false;
|
||||
|
|
@ -3445,7 +3457,7 @@
|
|||
function(p) {
|
||||
paint = new $.jGraduate.Paint(p);
|
||||
|
||||
paintBox[picker].setPaint(paint);
|
||||
Editor.paintBox[picker].setPaint(paint);
|
||||
svgCanvas.setPaint(picker, paint);
|
||||
|
||||
$('#color_picker').hide();
|
||||
|
|
@ -3649,19 +3661,19 @@
|
|||
}
|
||||
};
|
||||
|
||||
paintBox.fill = new PaintBox('#fill_color', 'fill');
|
||||
paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
|
||||
paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
|
||||
Editor.paintBox.fill = new PaintBox('#fill_color', 'fill');
|
||||
Editor.paintBox.stroke = new PaintBox('#stroke_color', 'stroke');
|
||||
Editor.paintBox.canvas = new PaintBox('#canvas_color', 'canvas');
|
||||
|
||||
$('#stroke_width').val(curConfig.initStroke.width);
|
||||
$('#group_opacity').val(curConfig.initOpacity * 100);
|
||||
|
||||
// Use this SVG elem to test vectorEffect support
|
||||
var test_el = paintBox.fill.rect.cloneNode(false);
|
||||
var test_el = Editor.paintBox.fill.rect.cloneNode(false);
|
||||
test_el.setAttribute('style','vector-effect:non-scaling-stroke');
|
||||
var supportsNonSS = (test_el.style.vectorEffect === 'non-scaling-stroke');
|
||||
test_el.removeAttribute('style');
|
||||
var svgdocbox = paintBox.fill.rect.ownerDocument;
|
||||
var svgdocbox = Editor.paintBox.fill.rect.ownerDocument;
|
||||
// Use this to test support for blur element. Seems to work to test support in Webkit
|
||||
var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
|
||||
if(typeof blur_test.stdDeviationX === "undefined") {
|
||||
|
|
@ -4100,6 +4112,7 @@
|
|||
{sel:'#tool_import', fn: clickImport, evt: 'mouseup'},
|
||||
{sel:'#tool_source', fn: showSourceEditor, evt: 'click', key: [modKey + 'U', true]},
|
||||
{sel:'#tool_wireframe', fn: clickWireframe, evt: 'click'},
|
||||
{sel:'#tool_snap', fn: clickSnapGrid, evt: 'click'},
|
||||
{sel:'#tool_rulers', fn: clickRulers, evt: 'click'},
|
||||
{sel:'#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel,#tool_prefs_cancel', fn: cancelOverlays, evt: 'click', key: ['esc', false, false], hidekey: true},
|
||||
{sel:'#tool_source_save', fn: saveSourceEditor, evt: 'click'},
|
||||
|
|
|
|||
|
|
@ -408,6 +408,8 @@ svgedit.select.init(curConfig, {
|
|||
});
|
||||
// this object manages selectors for us
|
||||
var selectorManager = this.selectorManager = svgedit.select.getSelectorManager();
|
||||
// this object manages selectors for us
|
||||
var hoverManager = this.hoverManager = svgedit.select.getSelectorManager();
|
||||
|
||||
// Import from path.js
|
||||
svgedit.path.init({
|
||||
|
|
@ -573,7 +575,8 @@ this.addExtension = function(name, ext_func) {
|
|||
svgroot: svgroot,
|
||||
svgcontent: svgcontent,
|
||||
nonce: getCurrentDrawing().getNonce(),
|
||||
selectorManager: selectorManager
|
||||
selectorManager: selectorManager,
|
||||
hoverManager: hoverManager
|
||||
}));
|
||||
} else {
|
||||
var ext = ext_func;
|
||||
|
|
@ -2370,7 +2373,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
|
|||
// but the action is not recorded until mousing up
|
||||
// - when we are in select mode, select the element, remember the position
|
||||
// and do nothing else
|
||||
var mouseDown = function(evt)
|
||||
var mouseDown = mosueOver = function(evt)
|
||||
{
|
||||
if(canvas.spaceKey || evt.button === 1) return;
|
||||
|
||||
|
|
@ -3159,6 +3162,18 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
|
|||
|
||||
}; // mouseMove()
|
||||
|
||||
|
||||
// mouseover mode
|
||||
var mouseOver = function(evt) {
|
||||
if (evt.button) return;
|
||||
elem = evt.target;
|
||||
var clone = elem.cloneNode(true);
|
||||
clone.setAttribute("fill", "none");
|
||||
clone.setAttribute("stroke", "#09f")
|
||||
clone.setAttribute("stroke-width", "1")
|
||||
elem.selectorParentGroup.appendChild(clone)
|
||||
}
|
||||
|
||||
// - in create mode, the element's opacity is set properly, we create an InsertElementCommand
|
||||
// and store it on the Undo stack
|
||||
// - in move/resize mode, the element's attributes which were affected by the move/resize are
|
||||
|
|
|
|||
|
|
@ -411,6 +411,7 @@ span.zoom_tool img{vertical-align:top}
|
|||
.clearfix:after{clear:both}
|
||||
.clearfix{*zoom:1}
|
||||
#svg_editor #group_title{display:none}
|
||||
#base_unit_container{display:none;position:absolute;z-index:20}
|
||||
INPUT.spin-button{padding:2px 20px 2px 2px;background-repeat:no-repeat;background-position:100% 0;background-image:url('spinbtn_updn.png');background-color:white}
|
||||
INPUT.spin-button.up{cursor:pointer;background-position:100% -18px}
|
||||
INPUT.spin-button.down{cursor:pointer;background-position:100% -36px}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -2623,7 +2623,11 @@ span.zoom_tool img {
|
|||
|
||||
#svg_editor #group_title {display: none;}
|
||||
|
||||
/*
|
||||
#base_unit_container {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
}/*
|
||||
Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control.
|
||||
Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc.
|
||||
(Requires a reference to the JQuery library found at http://jquery.com/src/latest/)
|
||||
|
|
|
|||
Loading…
Reference in New Issue