zcy
/
websch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

canvas color

master
Mark MacKay 2012-07-13 11:06:05 -05:00
parent 22e2d89fb3
commit a23417ad53
4 changed files with 103 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
editor/svg-editor.css
View File

@ -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 {

38
editor/svg-editor.html
View File

@ -135,7 +135,7 @@ $(function(){
<div id="tool_clear" class="menu_item">New Image</div>
<div id="tool_open" class="menu_item"><div id="fileinputs"></div>Open Image...</div>
<div id="tool_import" class="menu_item"><div id="fileinputs_import"></div>Import SVG...</div>
<div id="tool_save" class="menu_item">Save Image... <span>⌘S</span></div>
<div id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
<div id="tool_export" class="menu_item">Export as PNG</div>
</div>
</div>
@ -143,12 +143,12 @@ $(function(){
<div class="menu">
<div class="menu_title">Edit</div>
<div class="menu_list" id="edit_menu">
<div class="menu_item" id="tool_undo">Undo <span>⌘Z</span></div>
<div class="menu_item" id="tool_redo">Redo <span>⌘Y</span></div>
<div class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
<div class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
<div class="separator"></div>
<div class="menu_item action_selected disabled" id="tool_copy">Copy <span>⌘C</span></div>
<div class="menu_item action_selected disabled" id="tool_paste">Paste <span>⌘V</span></div>
<div class="menu_item action_selected disabled" id="tool_clone">Duplicate <span>⌘D</span></div>
<div class="menu_item action_selected disabled" id="tool_copy">Copy <span class="shortcut">⌘C</span></div>
<div class="menu_item action_selected disabled" id="tool_paste">Paste <span class="shortcut">⌘V</span></div>
<div class="menu_item action_selected disabled" id="tool_clone">Duplicate <span class="shortcut">⌘D</span></div>
<div class="menu_item action_selected disabled" id="tool_delete">Delete <span>⌫</span></div>
</div>
</div>
@ -156,13 +156,13 @@ $(function(){
<div class="menu">
<div class="menu_title">Object</div>
<div class="menu_list" id="object_menu">
<div class="menu_item action_selected disabled" id="tool_move_top">Bring to Front <span>⌘⇧&uarr;</span></div>
<div class="menu_item action_selected disabled" id="tool_move_up">Bring Forward <span>⌘&uarr;</span></div>
<div class="menu_item action_selected disabled" id="tool_move_down">Send Backward <span>⌘&darr;</span></div>
<div class="menu_item action_selected disabled" id="tool_move_bottom">Send to Back <span>⌘⇧&darr;</span></div>
<div class="menu_item action_selected disabled" id="tool_move_top">Bring to Front <span class="shortcut">⌘⇧&uarr;</span></div>
<div class="menu_item action_selected disabled" id="tool_move_up">Bring Forward <span class="shortcut">⌘&uarr;</span></div>
<div class="menu_item action_selected disabled" id="tool_move_down">Send Backward <span class="shortcut">⌘&darr;</span></div>
<div class="menu_item action_selected disabled" id="tool_move_bottom">Send to Back <span class="shortcut">⌘⇧&darr;</span></div>
<div class="separator"></div>
<div class="menu_item action_multi_selected disabled" id="tool_group">Group Elements <span>⌘G</span></div>
<div class="menu_item action_group_selected disabled" id="tool_ungroup">Ungroup Elements <span>⌘⇧G</span></div>
<div class="menu_item action_multi_selected disabled" id="tool_group">Group Elements <span class="shortcut">⌘G</span></div>
<div class="menu_item action_group_selected disabled" id="tool_ungroup">Ungroup Elements <span class="shortcut">⌘⇧G</span></div>
<div class="separator"></div>
<div class="menu_item action_path_convert_selected disabled" id="tool_topath">Convert to Path</div>
<div class="menu_item action_path_selected disabled" id="tool_reorient">Reorient path</div>
@ -182,7 +182,7 @@ $(function(){
<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="separator"></div>
<div class="menu_item" id="tool_source">Source... <span>⌘U</span></div>
<div class="menu_item" id="tool_source">Source... <span class="shortcut">⌘U</span></div>
</div>
</div>
@ -235,6 +235,18 @@ $(function(){
</label>
</div>
<label title="Modify Canvas Size" class="padded"><button id="docprops_button">Canvas Properties...</button></label>
<div id="color_canvas_tools">
<div class="color_tool active" id="tool_canvas">
<div class="color_block">
<div id="canvas_bg"></div>
<div id="canvas_color" class="color_block"></div>
</div>
</div>
</div>
</div>
<div id="rect_panel">

63
editor/svg-editor.js
View File

@ -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');
}
});

7
editor/svgcanvas.js
View File

@ -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;