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

changes

master
Mark MacKay 2021-01-28 11:51:07 -06:00
parent 0e09ed2d9e
commit 2b5b5502fb
13 changed files with 344 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/index.html
View File

@ -392,32 +392,32 @@
<div class="toolset align_buttons" id="tool_position">
<label>
<div class="col last clear" id="position_opts">
<div class="draginput_cell" id="tool_posleft" title="Align Left">
<div class="draginput_cell" id="tool_posleft" title="Align Left" data-align="left">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 2 1 L 2 5 L 14 5 L 14 11 L 2 11 L 2 16 L 20 16 L 20 22 L 2 22 L 2 26 L 1 26 L 1 1 L 2 1 Z" />
</svg>
</div>
<div class="draginput_cell" id="tool_poscenter" title="Align Center">
<div class="draginput_cell" id="tool_poscenter" title="Align Center" data-align="center">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 13 1 L 14 1 L 14 6 L 22 6 L 22 12 L 14 12 L 14 15 L 19 15 L 19 21 L 14 21 L 14 26 L 13 26 L 13 21 L 8 21 L 8 15 L 13 15 L 13 12 L 5 12 L 5 6 L 13 6 L 13 1 Z" />
</svg>
</div>
<div class="draginput_cell" id="tool_posright" title="Align Right">
<div class="draginput_cell" id="tool_posright" title="Align Right" data-align="right">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 25 1 L 25 5 L 13 5 L 13 11 L 25 11 L 25 16 L 7 16 L 7 22 L 25 22 L 25 26 L 26 26 L 26 1 L 25 1 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_postop" title="Align Top">
<div class="draginput_cell" id="tool_postop" title="Align Top" data-align="top">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 1 2 L 5 2 L 5 14 L 11 14 L 11 2 L 16 2 L 16 20 L 22 20 L 22 2 L 26 2 L 26 1 L 1 1 L 1 2 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle">
<div class="draginput_cell" id="tool_posmiddle" title="Align Middle" data-align="middle">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 26 13 L 26 14 L 21 14 L 21 22 L 15 22 L 15 14 L 12 14 L 12 19 L 6 19 L 6 14 L 1 14 L 1 13 L 6 13 L 6 8 L 12 8 L 12 13 L 15 13 L 15 5 L 21 5 L 21 13 L 26 13 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom">
<div class="draginput_cell" id="tool_posbottom" title="Align Bottom" data-align="bottom">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 1 25 L 5 25 L 5 13 L 11 13 L 11 25 L 16 25 L 16 7 L 22 7 L 22 25 L 26 25 L 26 26 L 1 26 L 1 25"/>
</svg>
@ -441,32 +441,32 @@
</label>
<h4>.</h4>
<div class="col last clear">
<div class="draginput_cell" id="tool_alignleft" title="Align Left">
<div class="draginput_cell" id="tool_alignleft" title="Align Left" data-align="left">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 2 1 L 2 5 L 14 5 L 14 11 L 2 11 L 2 16 L 20 16 L 20 22 L 2 22 L 2 26 L 1 26 L 1 1 L 2 1 Z" />
</svg>
</div>
<div class="draginput_cell" id="tool_aligncenter" title="Align Center">
<div class="draginput_cell" id="tool_aligncenter" title="Align Center" data-align="center">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 13 1 L 14 1 L 14 6 L 22 6 L 22 12 L 14 12 L 14 15 L 19 15 L 19 21 L 14 21 L 14 26 L 13 26 L 13 21 L 8 21 L 8 15 L 13 15 L 13 12 L 5 12 L 5 6 L 13 6 L 13 1 Z" />
</svg>
</div>
<div class="draginput_cell" id="tool_alignright" title="Align Right">
<div class="draginput_cell" id="tool_alignright" title="Align Right" data-align="right">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 25 1 L 25 5 L 13 5 L 13 11 L 25 11 L 25 16 L 7 16 L 7 22 L 25 22 L 25 26 L 26 26 L 26 1 L 25 1 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_aligntop" title="Align Top">
<div class="draginput_cell" id="tool_aligntop" title="Align Top" data-align="top">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 1 2 L 5 2 L 5 14 L 11 14 L 11 2 L 16 2 L 16 20 L 22 20 L 22 2 L 26 2 L 26 1 L 1 1 L 1 2 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_alignmiddle" title="Align Middle">
<div class="draginput_cell" id="tool_alignmiddle" title="Align Middle" data-align="middle">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 26 13 L 26 14 L 21 14 L 21 22 L 15 22 L 15 14 L 12 14 L 12 19 L 6 19 L 6 14 L 1 14 L 1 13 L 6 13 L 6 8 L 12 8 L 12 13 L 15 13 L 15 5 L 21 5 L 21 13 L 26 13 Z"/>
</svg>
</div>
<div class="draginput_cell" id="tool_alignbottom" title="Align Bottom">
<div class="draginput_cell" id="tool_alignbottom" title="Align Bottom" data-align="bottom">
<svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="27" height="27">
<path d="M 1 25 L 5 25 L 5 13 L 11 13 L 11 25 L 16 25 L 16 7 L 22 7 L 22 25 L 26 25 L 26 26 L 1 26 L 1 25"/>
</svg>
@ -482,7 +482,7 @@
<h4>Stroke</h4>
<div class="toolset" data-title="Change stroke">
<label>
<input id="stroke_width" size="2" value="5" data-attr="stroke-width" min="0" max="99" step="1" />
<input id="stroke_width" size="2" value="1" data-attr="stroke-width" min="0" max="99" step="1" />
<span class="icon_label">Stroke Width</span>
</label>
</div>
@ -698,11 +698,11 @@
<script type="text/javascript" src="js/Keyboard.js"></script>
<script type="text/javascript" src="js/PaintBox.js"></script>
<script type="text/javascript" src="js/Palette.js"></script>
<script type="text/javascript" src="js/Zoom.js"></script>
<script type="text/javascript" src="js/start.js"></script>
<script type="text/javascript" src="js/fonts.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<script type="text/javascript" src="js/contextChanged.js"></script>
<script type="text/javascript" src="js/zoomChanged.js"></script>
<script type="text/javascript" src="js/exportHandler.js"></script>
<script type="text/javascript" src="js/elementChanged.js"></script>
<script type="text/javascript" src="js/elementTransition.js"></script>

70
src/js/Canvas.js
View File

@ -1,8 +1,9 @@
MD.Canvas = function(){
const el = document.getElementById("svgcanvas");
var workarea = document.getElementById("workarea");
function update(w, h){
function resize(w, h){
el.style.width = w + "px";
el.style.height = h + "px";
svgCanvas.contentW = w;
@ -18,6 +19,73 @@ MD.Canvas = function(){
state.set("canvasSize", [w,h]);
}
function update(center, new_ctr) {
var w = workarea.offsetWidth, h = workarea.offsetHeight;
var w_orig = w, h_orig = h;
var zoom = svgCanvas.getZoom();
var cnvs = $(el);
var old_ctr = {
x: workarea.scrollLeft + w_orig/2,
y: workarea.scrollTop + h_orig/2
};
// curConfig.canvas_expansion
var multi = 1;
w = Math.max(w_orig, svgCanvas.contentW * zoom * multi);
h = Math.max(h_orig, svgCanvas.contentH * zoom * multi);
workarea.style.overflow = (w === w_orig && h === h_orig) ? 'hidden' : 'scroll';
var old_can_y = cnvs.height()/2;
var old_can_x = cnvs.width()/2;
cnvs.width(w).height(h);
var new_can_y = h/2;
var new_can_x = w/2;
var offset = svgCanvas.updateCanvas(w, h);
var ratio = new_can_x / old_can_x;
var scroll_x = w/2 - w_orig/2;
var scroll_y = h/2 - h_orig/2;
if(!new_ctr) {
var old_dist_x = old_ctr.x - old_can_x;
var new_x = new_can_x + old_dist_x * ratio;
var old_dist_y = old_ctr.y - old_can_y;
var new_y = new_can_y + old_dist_y * ratio;
new_ctr = {
x: new_x,
y: new_y
};
} else {
new_ctr.x += offset.x,
new_ctr.y += offset.y;
}
if(center) {
// Go to top-left for larger documents
if(svgCanvas.contentW > $workarea.width()) {
// Top-left
workarea.scrollLeft = offset.x - 10;
workarea.scrollTop = offset.y - 10;
} else {
// Center
workarea.scrollLeft = scroll_x;
workarea.scrollTop = scroll_y;
}
} else {
workarea.scrollLeft = new_ctr.x - w_orig/2;
workarea.scrollTop = new_ctr.y - h_orig/2;
}
editor.rulers.update(svgCanvas, cnvs, zoom);
workarea.scroll();
}
this.resize = resize;
this.update = update;
this.changeSize = changeSize;
}

67
src/js/Keyboard.js
View File

@ -5,22 +5,46 @@ MD.Keyboard = function(){
const cmd = e[modKey] ? "cmd_" : "";
const shift = e.shiftKey ? "shift_" : "";;
const key = cmd + shift + e.key.toLowerCase();
const canvasMode = state.get("canvasMode");
console.log(key)
const keys = {
v: ()=> state.set("canvasMode", "select"),
q: ()=> state.set("canvasMode", "fhpath"),
l: ()=> state.set("canvasMode", "line"),
r: ()=> state.set("canvasMode", "rect"),
o: ()=> state.set("canvasMode", "ellipse"),
s: ()=> state.set("canvasMode", "shapelib"),
p: ()=> state.set("canvasMode", "path"),
t: ()=> state.set("canvasMode", "text"),
z: ()=> state.set("canvasMode", "zoom"),
e: ()=> state.set("canvasMode", "eyedropper"),
x: ()=> editor.switchPaint(),
"cmd_s": ()=> editor.save(),
"cmd_z": ()=> editor.undo(),
"backspace": () => editor.deleteSelected()
v: ()=> state.set("canvasMode", "select"),
q: ()=> state.set("canvasMode", "fhpath"),
l: ()=> state.set("canvasMode", "line"),
r: ()=> state.set("canvasMode", "rect"),
o: ()=> state.set("canvasMode", "ellipse"),
s: ()=> state.set("canvasMode", "shapelib"),
p: ()=> state.set("canvasMode", "path"),
t: ()=> state.set("canvasMode", "text"),
z: ()=> state.set("canvasMode", "zoom"),
e: ()=> state.set("canvasMode", "eyedropper"),
x: ()=> editor.switchPaint(),
"alt": ()=> { if (canvasMode === "zoom") $("#workarea").addClass("out") },
"cmd_s": ()=> editor.save(),
"cmd_z": ()=> editor.undo(),
"cmd_shift_z": ()=> editor.redo(),
"cmd_c": ()=> editor.copy(),
"cmd_x": ()=> editor.cut(),
"cmd_v": ()=> editor.paste(),
"cmd_a": ()=> svgCanvas.selectAllInCurrentLayer(),
"backspace": () => editor.deleteSelected(),
"ctrl_arrowleft": () => rotateSelected(0,1),
"ctrl_arrowright": () => rotateSelected(1,1),
"ctrl_shift_arrowleft": () => rotateSelected(0,5),
"ctrl_shift_arrowright": () => rotateSelected(1,5),
"shift_o": () => svgCanvas.cycleElement(0),
"shift_p": () => svgCanvas.cycleElement(1),
"shift_+": () => zoom.multiply(2),
"shift_-": () => zoom.multiply(0.5),
"arrowleft": () => moveSelected(0,-1),
"arrowright": () => moveSelected(0,1),
"arrowup": () => moveSelected(-1,0),
"arrowdown": () => moveSelected(1,0),
"shift_arrowleft": () => moveSelected(0, state.get("canvasSnapStep") * -1),
"shift_arrowright": () => moveSelected(0, state.get("canvasSnapStep") * 1),
"shift_arrowup": () => moveSelected(state.get("canvasSnapStep") * -1, 0),
"shift_arrowdown": () => moveSelected(state.get("canvasSnapStep") * 1, 0),
"escape": () => editor.escapeMode();
};
// keyboard shortcut exists
@ -31,4 +55,17 @@ MD.Keyboard = function(){
});
document.addEventListener("keyup", function(e){
const canvasMode = state.get("canvasMode");
const key = e.key.toLowerCase();
const keys = {
"alt": ()=> $("#workarea").removeClass("out"),
}
if (keys[key]) {
e.preventDefault();
keys[key]();
}
})
}

14
src/js/Panel.js
View File

@ -33,12 +33,20 @@ MD.Panel = function(){
$('#text_x') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
$('#image_y') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
$('#rect_rx') .dragInput({ min: 0, max: 100, step: 1, callback: editor.changeAttribute, cursor: true });
$('#stroke_width') .dragInput({ min: 0, max: 99, step: 1, callback: editor.changeStrokeWidth, cursor: true, smallStep: 0.1, start: 1.5 });
$('#stroke_width') .dragInput({ min: 0, max: 99, step: 1, callback: editor.changeAttribute, cursor: true, smallStep: 0.1, start: 1.5 });
$('#angle') .dragInput({ min: -180, max: 180, step: 1, callback: editor.changeRotationAngle, cursor: false, dragAdjust: 0.5 });
$('#font_size') .dragInput({ min: 1, max: 250, step: 1, callback: editor.changeFontSize, cursor: true, stepfunc: editor.stepFontSize, dragAdjust: .15 });
$('#group_opacity').dragInput({ min: 0, max: 100, step: 5, callback: editor.changeAttribute, cursor: true, start: 100 });
$('#blur') .dragInput({ min: 0, max: 10, step: .1, callback: editor.changeBlur, cursor: true, start: 0 });
$('#position_opts .draginput_cell').on("click", function(){
svgCanvas.alignSelectedElements(this.getAttribute("data-align")[0], 'page');
});
$('#stroke_style').change(function(){
svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
$("#stroke_style_label").html(this.options[this.selectedIndex].text);
});
function show(elem) {
$('.context_panel').hide();
@ -73,9 +81,9 @@ MD.Panel = function(){
$('.context_panel').hide();
$('#path_node_panel').show();
$('#stroke_panel').hide();
var point = path.getNodePoint();
var point = svgCanvas.pathActions.getNodePoint();
$('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
$('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
$('#tool_node_delete').toggleClass('disabled', !svgCanvas.pathActions.canDeleteNodes);
if(point) {
var seg_type = $('#seg_type');

67
src/js/Zoom.js Normal file
View File

@ -0,0 +1,67 @@
MD.Zoom = function(){
const $zoom = $("#zoom");
const $workarea = $("#workarea")
const accumulatedDelta = 0
$('#workarea').on('mousewheel', function(e, delta, deltaX, deltaY){
if (e.altKey || e.ctrlKey) {
e.preventDefault();
zoom = parseInt($("#zoom").val())
$zoom.val(parseInt(zoom + deltaY*(e.altKey ? 10 : 5))).change()
}
});
function changed(window, bbox, autoCenter) {
var scrbar = 15,
res = svgCanvas.getResolution(),
canvas_pos = $('#svgcanvas').position();
var z_info = svgCanvas.setBBoxZoom(bbox, $workarea.width()-scrbar, $workarea.height()-scrbar);
if(!z_info) return;
var zoomlevel = z_info.zoom,
bb = z_info.bbox;
if(zoomlevel < .001) {
changeZoom({value: .1});
return;
}
if (typeof animatedZoom != 'undefined') window.cancelAnimationFrame(animatedZoom)
// zoom duration 500ms
var start = Date.now();
var duration = 500;
var diff = (zoomlevel) - (res.zoom)
var zoom = $('#zoom')[0]
var current_zoom = res.zoom
var animateZoom = function(timestamp) {
var progress = Date.now() - start
var tick = progress / duration
tick = (Math.pow((tick-1), 3) +1);
svgCanvas.setZoom(current_zoom + (diff*tick));
editor.canvas.update();
if (tick < 1 && tick > -.90) {
window.animatedZoom = requestAnimationFrame(animateZoom)
}
else {
$zoom.val(parseInt(zoomlevel*100))
$("option", "#zoom_select").removeAttr("selected")
$("option[value="+ parseInt(zoomlevel*100) +"]", "#zoom_select").attr("selected", "selected")
}
}
animateZoom()
if(svgCanvas.getMode() == 'zoom' && bb.width) {
// Go to select if a zoom box was drawn
setSelectMode();
}
}
var multiply = function(multiplier = 1) {
var res = svgCanvas.getResolution();
$('#zoom').val(multiplier * res.zoom * 100);
svgCanvas.setZoom(multiplier);
editor.canvas.updateCanvas(true);
};
this.multiply = multiply
this.changed = changed;
}

4
src/js/bindCanvas.js
View File

@ -1,8 +1,8 @@
// bind the selected event to our function that handles updates to the UI
svgCanvas.bind("selected", editor.selectedChanged);
svgCanvas.bind("transition", elementTransition);
svgCanvas.bind("transition", editor.elementTransition);
//svgCanvas.bind("changed", elementChanged);
svgCanvas.bind("exported", exportHandler);
svgCanvas.bind("zoomed", zoomChanged);
svgCanvas.bind("zoomed", editor.zoom.changed);
svgCanvas.bind("contextset", contextChanged);
svgCanvas.textActions.setInputElem($("#text")[0]);

18
src/js/dao.js
View File

@ -29,6 +29,24 @@ const dao = [
save: true
},
{
name: "canvasSnap",
label: "Snap to Grid",
type: "boolean",
default: false,
private: false,
save: true
},
{
name: "canvasSnapStep",
label: "Snap Step",
type: "number",
default: 10,
private: false,
save: true
},
{
name: "canvasRulers",
label: "Canvas Rulers",

114
src/js/editor.js
View File

@ -2,23 +2,86 @@ const MD = {};
MD.Editor = function(){
const serializer = new XMLSerializer();
const _self = this;
_self.selected = [];
function save(){
_self.menu.flash($('#file_menu'));
svgCanvas.save();
}
function undo(){
if (!svgCanvas.undoMgr.getUndoStackSize()) return false;
_self.menu.flash($('#edit_menu'));
svgCanvas.undoMgr.undo();
}
function deleteSelected(){
if (svgCanvas.pathActions.getNodePoint()) svgCanvas.pathActions.deletePathNode();
else svgCanvas.deleteSelectedElements();
}
function undo(){
if (svgCanvas.undoMgr.getUndoStackSize() > 0) {
_self.menu.flash($('#edit_menu'));
svgCanvas.undoMgr.undo();
}
function cutSelected(){
if (!_self.selected.length) return false;
flash($('#edit_menu'));
svgCanvas.cutSelectedElements();
}
function copySelected(){
if (!_self.selected.length) return false;
flash($('#edit_menu'));
svgCanvas.copySelectedElements();
}
function pasteSelected(){
flash($('#edit_menu'));
var zoom = svgCanvas.getZoom();
var x = (workarea[0].scrollLeft + workarea.width()/2)/zoom - svgCanvas.contentW;
var y = (workarea[0].scrollTop + workarea.height()/2)/zoom - svgCanvas.contentH;
svgCanvas.pasteElements('point', x, y);
}
function moveToTopSelected(){
if (!_self.selected.length) return false;
flash($('#object_menu'));
svgCanvas.moveToTopSelectedElement();
}
function moveToBottomSelected(){
if (!_self.selected.length) return false;
flash($('#object_menu'));
svgCanvas.moveToBottomSelectedElement();
}
function moveUpSelected(){
if (!_self.selected.length) return false;
flash($('#object_menu'));
svgCanvas.moveUpDownSelected("Up");
}
function moveDownSelected(){
if (!_self.selected.length) return false;
flash($('#object_menu'));
svgCanvas.moveUpDownSelected("Down");
}
function convertToPath(){
if (!_self.selected.length) return false;
svgCanvas.convertToPath();
var elems = svgCanvas.getSelectedElems()
svgCanvas.selectorManager.requestSelector(elems[0]).reset(elems[0])
svgCanvas.selectorManager.requestSelector(elems[0]).selectorRect.setAttribute("display", "none");
svgCanvas.setMode("pathedit")
path.toEditMode(elems[0]);
svgCanvas.clearSelection();
updateContextPanel();
}
function reorientPath(){
if (!_self.selected.length) return false;
path.reorient();
}
function switchPaint(strokeOrFill) {
@ -42,19 +105,50 @@ MD.Editor = function(){
function selectedChanged(window,elems) {
const mode = svgCanvas.getMode();
if(mode === "select") editor.toolbar.setMode("select");
elems = elems.filter(Boolean);
editor.panel.updateContextPanel(elems);
_self.selected = elems.filter(Boolean);
editor.panel.updateContextPanel(_self.selected);
};
function changeAttribute(attr, value, completed){
if (completed) svgCanvas.changeSelectedAttribute(attr, value);
function changeAttribute(attr, value, completed) {
if (completed) {
svgCanvas.changeSelectedAttribute(attr, value);
state.set("canvasContent", serializer,serializeToString(svgCanvas.getContentElem()));
}
else svgCanvas.changeSelectedAttributeNoUndo(attr, value);
}
function elementTransition(window, elems){
// TODO live attr updates on transition
}
function moveSelected(dx,dy) {
if (!_self.selected.length) return false;
if(state.get("canvasSnap")) {
// Use grid snap value regardless of zoom level
var multi = svgCanvas.getZoom() * state.get("canvasSnapStep");
dx *= multi;
dy *= multi;
}
$('input').blur()
svgCanvas.moveSelectedElements(dx,dy);
};
this.selectedChanged = selectedChanged;
this.deleteSelected = deleteSelected;
this.changeAttribute = changeAttribute;
this.elementTransition = elementTransition;
this.switchPaint = switchPaint;
this.save = save;
this.undo = undo;
this.deleteSelected = deleteSelected;
this.cutSelected = cutSelected;
this.copySelected = copySelected;
this.pasteSelected = pasteSelected;
this.pasteSelected = pasteSelected;
this.moveToTopSelected = moveToTopSelected;
this.moveUpSelected = moveUpSelected;
this.moveToBottomSelected = moveToBottomSelected;
this.moveDownSelected = moveDownSelected;
this.moveSelected = moveSelected;
this.convertToPath = convertToPath;
this.reorientPath = reorientPath;
}

2
src/js/rulers.js
View File

@ -169,6 +169,6 @@ MD.Rulers = function(){
}
}
this.update = update();
this.update = update;
}

56
src/js/select.js
View File

@ -391,7 +391,6 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
'height': dims[1],
'x': 0,
'y': 0,
'overflow': (svgedit.browser.isWebkit() ? 'none' : 'visible'), // Chrome 7 has a problem with this when zooming out
'style': 'pointer-events:none'
}
});
@ -403,51 +402,7 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
}
})
var pattern = svgFactory_.createSVGElement({
'element': 'pattern',
'attr': {
'id': 'checkerPattern',
'patternUnits': 'userSpaceOnUse',
'x': 0,
'y': 0,
'width': 20,
'height': 20,
'viewBox': '0 0 10 10'
}
})
var pattern_bg = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 0,
'y': 0,
'width': 10,
'height': 10,
'fill': "#fff"
}
})
var pattern_square1 = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 0,
'y': 0,
'width': 5,
'height': 5,
'fill': "#eee"
}
})
var pattern_square2 = svgFactory_.createSVGElement({
'element': 'rect',
'attr': {
'x': 5,
'y': 5,
'width': 5,
'height': 5,
'fill': "#eee"
}
})
var rect = svgFactory_.createSVGElement({
'element': 'rect',
@ -456,9 +411,9 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
'height': '100%',
'x': 0,
'y': 0,
'stroke-width': 1,
'stroke': '#000',
'fill': 'url(#checkerPattern)',
'stroke-width': 0,
'stroke': 'transparent',
'fill': '#fff',
'style': 'pointer-events:none'
}
});
@ -467,12 +422,7 @@ svgedit.select.SelectorManager.prototype.initGroup = function() {
// zoom levels) and Opera has at least one bug
// if (!svgedit.browser.isOpera()) rect.setAttribute('filter', 'url(#canvashadow)');
canvasbg.appendChild(defs);
defs.appendChild(pattern);
pattern.appendChild(pattern_bg);
pattern.appendChild(pattern_square1);
pattern.appendChild(pattern_square2);
canvasbg.appendChild(rect);
svgFactory_.svgRoot().insertBefore(canvasbg, svgFactory_.svgContent());
};

1
src/js/start.js
View File

@ -6,6 +6,7 @@ editor.toolbar = new MD.Toolbar();
editor.rulers = new MD.Rulers();
editor.canvas = new MD.Canvas();
editor.panel = new MD.Panel();
editor.zoom = new MD.Zoom();
editor.paintBox = {
fill: new MD.PaintBox('#fill_color', 'fill'),
stroke: new MD.PaintBox('#stroke_color', 'stroke'),

4
src/js/state.js
View File

@ -24,8 +24,8 @@ function State(){
// canvas data
this.canvasId = (id) => {/* noop */}
this.canvasMode = (mode) => { editor.toolbar.setMode(mode) }
this.canvasSize = (size) => { editor.canvas.update(...size.map(Number)) }
this.canvasSize = (size) => { editor.canvas.resize(...size.map(Number)) }
this.clean = (warn = true) => {
if (warn) {

46
src/js/zoomChanged.js
View File

@ -1,46 +0,0 @@
var zoomChanged = function(window, bbox, autoCenter) {
var scrbar = 15,
res = svgCanvas.getResolution(),
w_area = workarea,
canvas_pos = $('#svgcanvas').position();
var z_info = svgCanvas.setBBoxZoom(bbox, w_area.width()-scrbar, w_area.height()-scrbar);
if(!z_info) return;
var zoomlevel = z_info.zoom,
bb = z_info.bbox;
if(zoomlevel < .001) {
changeZoom({value: .1});
return;
}
if (typeof animatedZoom != 'undefined') window.cancelAnimationFrame(animatedZoom)
// zoom duration 500ms
var start = Date.now();
var duration = 500;
var diff = (zoomlevel) - (res.zoom)
var zoom = $('#zoom')[0]
var current_zoom = res.zoom
var animateZoom = function(timestamp) {
var progress = Date.now() - start
var tick = progress / duration
tick = (Math.pow((tick-1), 3) +1);
svgCanvas.setZoom(current_zoom + (diff*tick));
updateCanvas();
if (tick < 1 && tick > -.90) {
window.animatedZoom = requestAnimationFrame(animateZoom)
}
else {
$("#zoom").val(parseInt(zoomlevel*100))
$("option", "#zoom_select").removeAttr("selected")
$("option[value="+ parseInt(zoomlevel*100) +"]", "#zoom_select").attr("selected", "selected")
}
}
animateZoom()
if(svgCanvas.getMode() == 'zoom' && bb.width) {
// Go to select if a zoom box was drawn
setSelectMode();
}
zoomDone();
}