From a23417ad534b987299137c31d1d22d1296f06c18 Mon Sep 17 00:00:00 2001 From: Mark MacKay Date: Fri, 13 Jul 2012 11:06:05 -0500 Subject: [PATCH] canvas color --- editor/svg-editor.css | 48 +++++++++++--------------------- editor/svg-editor.html | 38 ++++++++++++++++--------- editor/svg-editor.js | 63 ++++++++++++++++++++++++++++++++++++------ editor/svgcanvas.js | 7 +++++ 4 files changed, 103 insertions(+), 53 deletions(-) diff --git a/editor/svg-editor.css b/editor/svg-editor.css index 6d9cb28..ef86752 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -1,14 +1,7 @@ body { background: #2F2F2C; font: 13px/120% 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; -} - -* { - -webkit-tap-highlight-color: rgba(0,0,0,0); -} - -html, body, div{ - -webkit-touch-callout: none; + -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; @@ -54,14 +47,6 @@ html, body { color: #000000; } - -#svg_editor * { - transform-origin: 0 0; - -moz-transform-origin: 0 0; - -o-transform-origin: 0 0; - -webkit-transform-origin: 0 0; -} - #svg_editor hr { border: none; border-bottom: 1px solid #808080; @@ -135,7 +120,7 @@ html, body { position: relative; overflow: hidden; line-height: 22px; - padding: 5px 55px 5px 25px; + padding: 5px 69px 5px 25px; cursor: default; color: #333; } @@ -303,37 +288,36 @@ html, body { margin-top: 0; } -#svg_editor #color_tools { +#svg_editor #color_tools, #color_canvas_tools { position: relative; width: 48px; height: 48px; margin: 6px 6px 0 6px; } -#svg_editor #color_tools #tool_fill { +#svg_editor #color_tools #tool_fill, #tool_canvas { position: absolute; top: 0; left: 0; z-index: 1; } -#svg_editor #color_tools #tool_fill.active, #svg_editor #color_tools #tool_stroke.active { +#tool_fill.active, #tool_stroke.active { z-index: 2; } -#svg_editor #color_tools #tool_fill, #svg_editor #color_tools #tool_stroke { +#tool_fill, #tool_stroke, #tool_canvas { box-shadow: 0 0 0 1px #2f2f2c; } -#svg_editor #color_tools #tool_fill .color_block { + +#tool_fill .color_block, #tool_canvas .color_block { width: 24px; height: 24px; overflow: hidden; border: solid #ccc 1px; } - - #svg_editor #path_node_panel .tool_button { color: #999; border: solid #3F3F3C 1px; @@ -359,6 +343,10 @@ html, body { padding: 3px 0; width: auto; margin: 0 0 10px 0; + background: transparent; + color: #ccc; + height: auto; + line-height: 130%; } #svg_editor #path_node_panel #segment_type { @@ -384,14 +372,14 @@ html, body { background: #fff; } -#svg_editor #color_tools #tool_stroke { +#tool_stroke { position: absolute; top: 12px; left: 12px; z-index: 0; } -#svg_editor #color_tools #tool_stroke #stroke_color:after { +#stroke_color:after { content: ''; position: absolute; display: block; @@ -454,11 +442,6 @@ html, body { padding-top: 4px; } -#color_tools .icon_label > * { - position: relative; - top: 1px; -} - #svg_editor div#palette { float: left; width: 672px; @@ -486,6 +469,7 @@ html, body { width: 2px; padding: 10px; border-left: none; + z-index: 10; } #svg_editor #layerpanel { @@ -1190,7 +1174,7 @@ span.zoom_tool img { border-radius: 3px; z-index: 5; box-shadow: 0 5px 10px #000; - left: 45px !important; + width: 530px; } #svg_editor .tools_flyout { diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 4f8a715..604431e 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -135,7 +135,7 @@ $(function(){ - + @@ -143,12 +143,12 @@ $(function(){
Edit
@@ -156,13 +156,13 @@ $(function(){
Object
@@ -235,6 +235,18 @@ $(function(){ + + + +
+
+
+
+
+
+
+
+
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 4c58889..b3d81b7 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -501,6 +501,15 @@ ui_context = 'toolbars', orig_source = '', paintBox = {fill: null, stroke:null}; + + + // This puts the correct shortcuts in the menus + if (!isMac) { + $('.shortcut').each(function(){ + var text = $(this).text(); + $(this).text(text.split("⌘").join("Ctrl+")) + }); + } // This sets up alternative dialog boxes. They mostly work the same way as // their UI counterparts, expect instead of returning the result, a callback @@ -1381,6 +1390,31 @@ $('.canvas_height').val(res.h); $('#docprops_button').on("click", function(){showDocProperties()}); + // create a new layer background + svgCanvas.createLayer("background") + cur_shape = svgCanvas.addSvgElementFromJson({ + "element": "rect", + "attr": { + "x": 0, + "y": 0, + "width": res.w, + "height": res.h, + "stroke": "none", + "id": "canvas_background", + "opacity": 1, + "fill": "#fff", + "style": "pointer-events:none" + } + }); + svgCanvas.setCurrentLayer("Layer 1") + svgCanvas.setCurrentLayerPosition("1") + if($.pref('bkgd_color')) { + setBackground($.pref('bkgd_color'), $.pref('bkgd_url')); + } else if($.pref('bkgd_url')) { + // No color set, only URL + setBackground(defaultPrefs.bkgd_color, $.pref('bkgd_url')); + } + // updates the toolbar (colors, opacity, etc) based on the selected element // This function also updates the opacity and id elements that are in the context panel var updateToolbar = function() { @@ -1929,7 +1963,6 @@ var paint = null; // Webkit-based browsers returned 'initial' here for no stroke - console.log(color); if (color === 'transparent' || color === 'initial' || color === '#none') { color = 'none'; paint = new $.jGraduate.Paint(); @@ -2990,7 +3023,6 @@ if(size == curPrefs.size && !force) return; // return; // var elems = $('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open'); - console.log('size', size); var sel_toscale = '#tools_top .toolset, #editor_panel > *, #history_panel > *,\ #main_button, #tools_left > *, #path_node_panel > *, #multiselected_panel > *,\ @@ -3362,15 +3394,19 @@ // TODO: go back to the color boxes having white background-color and then setting // background-image to none.png (otherwise partially transparent gradients look weird) var colorPicker = function(elem) { - var picker = elem.attr('id') == 'stroke_color' ? 'stroke' : 'fill'; + var picker = elem[0].id == 'stroke_color' ? 'stroke' : 'fill'; + 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 title = (picker == 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity'); var was_none = false; - var pos = elem.position(); + var pos = is_background ? {'right': 200, 'top': 50} : {'left': 45, 'bottom': 50} + $("#color_picker") .draggable({cancel:'.jGraduate_tabs, .jGraduate_colPick, .jGraduate_gradPick, .jPicker', containment: 'window'}) - .css(curConfig.colorPickerCSS || {'left': pos.left, 'bottom': 50 - pos.top}) + .css(pos) .jGraduate( { paint: paint, @@ -3453,7 +3489,7 @@ var PaintBox = function(container, type) { - var cur = curConfig[type === 'fill' ? 'initFill' : 'initStroke']; + var cur = curConfig[type === 'stroke' ? 'initStroke' : 'initFill']; // set up gradients to be used for the buttons var svgdocbox = new DOMParser().parseFromString( @@ -3497,12 +3533,18 @@ svgCanvas.setColor(this.type, fillAttr, true); svgCanvas.setPaintOpacity(this.type, opac, true); } + if (this.type == "canvas") { + var background = document.getElementById("canvas_background"); + if (background) { + background.setAttribute('fill', fillAttr) + } + } + } this.update = function(apply) { if(!selectedElement) return; var type = this.type; - switch ( selectedElement.tagName ) { case 'use': case 'image': @@ -3570,6 +3612,7 @@ paintBox.fill = new PaintBox('#fill_color', 'fill'); paintBox.stroke = new PaintBox('#stroke_color', 'stroke'); + paintBox.canvas = new PaintBox('#canvas_color', 'canvas'); $('#stroke_width').val(curConfig.initStroke.width); $('#group_opacity').val(curConfig.initOpacity * 100); @@ -3612,6 +3655,11 @@ $("#tool_stroke").removeClass('active'); } }); + + $('#tool_canvas').click(function(){ + colorPicker($('#canvas_color')); + updateToolButtonState(); + }); $('#tool_stroke').click(function(){ @@ -3621,7 +3669,6 @@ } else { $('#tool_stroke').addClass('active'); - console.log($('#tool_stroke')); $("#tool_fill").removeClass('active'); } }); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index ad5c083..5a70471 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -6708,6 +6708,13 @@ this.setResolution = function(x, y) { addCommandToHistory(batchCmd); svgroot.unsuspendRedraw(handle); + + var background = document.getElementById("canvas_background"); + if (background) { + background.setAttribute("width", x) + background.setAttribute("height", y) + } + call("changed", [svgcontent]); } return true;