files
Mark MacKay
parent
0e35cdaa04
commit
bf98c2dfca
|
|
@ -67,8 +67,8 @@ html, body {
|
|||
background-color: #A0A0A0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 640px;
|
||||
height: 480px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
background: #3F3F3C;
|
||||
}
|
||||
|
|
@ -202,9 +202,7 @@ html, body {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#color_tools .icon_label {
|
||||
#color_tools .icon_label {
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
|
|
@ -217,8 +215,8 @@ html, body {
|
|||
padding-top: 4px;
|
||||
}
|
||||
|
||||
div#workarea {
|
||||
display: inline-table-cell;
|
||||
#workarea {
|
||||
display: flex;
|
||||
position:absolute;
|
||||
top: 30px;
|
||||
left: 50px;
|
||||
|
|
@ -226,18 +224,11 @@ html, body {
|
|||
right: 175px;
|
||||
background-color: #444;
|
||||
overflow: auto;
|
||||
text-align: center;
|
||||
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
|
||||
-moz-transition: -moz-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
|
||||
-o-transition: -o-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
|
||||
-ms-transition: -ms-transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
|
||||
}
|
||||
|
||||
.touch div#workarea {
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
#main_icon span {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</div>
|
||||
|
||||
<div id="workarea">
|
||||
<div id="svgcanvas" style="position:relative">
|
||||
<div id="svgcanvas">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -124,19 +124,15 @@
|
|||
|
||||
<h4 class="clearfix">Canvas</h4>
|
||||
|
||||
<div class="draginput">
|
||||
<label data-title="Change canvas width">
|
||||
<input size="3" id="canvas_width" type="text" pattern="[0-9]*" value="800" />
|
||||
<span class="icon_label">Width</span>
|
||||
</label>
|
||||
</div>
|
||||
<label data-title="Change canvas width">
|
||||
<input size="3" id="canvas_width" type="text" pattern="[0-9]*" value="800" />
|
||||
<span class="icon_label">Width</span>
|
||||
</label>
|
||||
|
||||
<div class="draginput">
|
||||
<label data-title="Change canvas height">
|
||||
<input id="canvas_height" size="3" type="text" pattern="[0-9]*" value="600" />
|
||||
<span class="icon_label">Height</span>
|
||||
</label>
|
||||
</div>
|
||||
<label data-title="Change canvas height">
|
||||
<input id="canvas_height" size="3" type="text" pattern="[0-9]*" value="600" />
|
||||
<span class="icon_label">Height</span>
|
||||
</label>
|
||||
|
||||
<label data-title="Change canvas color" class="draginput">
|
||||
<span>Color</span>
|
||||
|
|
@ -373,7 +369,7 @@
|
|||
</label>
|
||||
|
||||
<label class="toolset" id="tool_opacity" data-title="Change selected item opacity">
|
||||
<input id="group_opacity" class="attr_changer" data-attr="opacity" data-multiplier="0.01" size="3" value="100" step="5" min="0" max="100" />
|
||||
<input id="group_opacity" class="attr_changer" data-attr="opacity" size="3" value="100" step="5" min="0" max="100" />
|
||||
<span id="group_opacityLabel" class="icon_label">Opacity</span>
|
||||
</label>
|
||||
|
||||
|
|
@ -542,7 +538,7 @@
|
|||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="tool_button" id="tool_shapelib" data-mode="shapelib" title="Shape Tool [C]" >
|
||||
<div class="tool_button" id="tool_shapelib" data-mode="shapelib" title="Shape Tool [s]" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="27" width="27" viewBox="0 0 24 24" >
|
||||
<polygon points="14.43,10 12,2 9.57,10 2,10 8.18,14.41 5.83,22 12,17.31 18.18,22 15.83,14.41 22,10"/>
|
||||
</svg>
|
||||
|
|
@ -564,7 +560,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="27"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
||||
</div>
|
||||
|
||||
<div class="tool_button" id="tool_eyedropper" data-mode="eyedropper" title="Eyedropper Tool [Z]">
|
||||
<div class="tool_button" id="tool_eyedropper" data-mode="eyedropper" title="Eyedropper Tool [e]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="27" style="transform: scale(-1, 1)"><path d="M20.71 5.63l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
|
||||
</div>
|
||||
|
||||
|
|
@ -674,6 +670,7 @@
|
|||
<script type="text/javascript" src="js/lib/jquery.jgraduate.js"></script>
|
||||
<script type="text/javascript" src="js/lib/jquery.contextMenu.js"></script>
|
||||
<script type="text/javascript" src="js/lib/jquery-ui-1.8.17.custom.min.js"></script>
|
||||
<script type="text/javascript" src="js/lib/jquery-draginput.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.attr.js"></script>
|
||||
<script type="text/javascript" src="js/utils.js"></script>
|
||||
<script type="text/javascript" src="js/dao.js"></script>
|
||||
|
|
@ -692,9 +689,12 @@
|
|||
<script type="text/javascript" src="js/draw.js"></script>
|
||||
<script type="text/javascript" src="js/svgcanvas.js"></script>
|
||||
<script type="text/javascript" src="js/editor.js"></script>
|
||||
<script type="text/javascript" src="js/Canvas.js"></script>
|
||||
<script type="text/javascript" src="js/Panel.js"></script>
|
||||
<script type="text/javascript" src="js/Rulers.js"></script>
|
||||
<script type="text/javascript" src="js/Toolbar.js"></script>
|
||||
<script type="text/javascript" src="js/Menu.js"></script>
|
||||
<script type="text/javascript" src="js/Keyboard.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>
|
||||
|
|
@ -705,7 +705,6 @@
|
|||
<script type="text/javascript" src="js/elementTransition.js"></script>
|
||||
<script type="text/javascript" src="js/bindCanvas.js"></script>
|
||||
<script type="text/javascript" src="js/palette.js"></script>
|
||||
<script type="text/javascript" src="js/lib/jquery-draginput.js"></script>
|
||||
<script type="text/javascript" src="js/lib/contextmenu.js"></script>
|
||||
<script type="text/javascript" src="js/lib/jpicker.min.js"></script>
|
||||
<script type="text/javascript" src="js/lib/mousewheel.js"></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
MD.Canvas = function(){
|
||||
|
||||
const el = document.getElementById("svgcanvas");
|
||||
|
||||
function update(w, h){
|
||||
el.style.width = w + "px";
|
||||
el.style.height = h + "px";
|
||||
svgCanvas.contentW = w;
|
||||
svgCanvas.contentH = h;
|
||||
svgCanvas.updateCanvas(w, h);
|
||||
$("#canvas_width").val(w);
|
||||
$("#canvas_height").val(h);
|
||||
}
|
||||
|
||||
function changeSize(){
|
||||
const w = $("#canvas_width").val();
|
||||
const h = $("#canvas_height").val();
|
||||
state.set("canvasSize", [w,h]);
|
||||
}
|
||||
|
||||
this.update = update;
|
||||
this.changeSize = changeSize;
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
MD.Keyboard = function(){
|
||||
|
||||
document.addEventListener("keydown", function(e){
|
||||
const modKey = !svgedit.browser.isMac() ? "ctrlKey" : "metaKey";
|
||||
const cmd = e[modKey] ? "cmd_" : "";
|
||||
const shift = e.shiftKey ? "shift_" : "";;
|
||||
const key = cmd + shift + e.key.toLowerCase();
|
||||
|
||||
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"),
|
||||
"cmd_s": ()=> editor.save(),
|
||||
"cmd_z": ()=> editor.undo(),
|
||||
"backspace": () => editor.deleteSelected()
|
||||
};
|
||||
|
||||
// keyboard shortcut exists
|
||||
if (keys[key]) {
|
||||
e.preventDefault();
|
||||
keys[key]();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
MD.Panel = function(){
|
||||
|
||||
$('#canvas_height').dragInput({ min: 10, max: null, step: 10, callback: editor.canvas.changeSize, cursor: false, dragAdjust: .1 });
|
||||
$('#canvas_width') .dragInput({ min: 10, max: null, step: 10, callback: editor.canvas.changeSize, cursor: false, dragAdjust: .1 });
|
||||
$('#rect_width') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#rect_height') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#ellipse_cx') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#ellipse_cy') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#ellipse_rx') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#ellipse_ry') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$("#image_height") .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#circle_cx') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#circle_cy') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#circle_r') .dragInput({ min: 1, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$("#image_height") .dragInput({ min: 0, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#selected_x') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#selected_y') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$("#path_node_x") .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$("#path_node_y") .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$("#image_width") .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#line_x1') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#line_x2') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#line_y1') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#line_y2') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#path_x') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#path_y') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#rect_x') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#rect_y') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#g_x') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#g_y') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#image_x') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#text_y') .dragInput({ min: null, max: null, step: 1, callback: editor.changeAttribute, cursor: false });
|
||||
$('#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 });
|
||||
$('#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 });
|
||||
|
||||
|
||||
function show(elem) {
|
||||
$('.context_panel').hide();
|
||||
if (elem === "canvas") return $('#canvas_panel').show();
|
||||
if (elem === "multiselected") return $('#multiselected_panel').show();
|
||||
|
||||
const tagName = elem.tagName;
|
||||
$("#" + tagName + "_panel").show();
|
||||
$('#stroke_width').val(elem.getAttribute("stroke-width") || 0);
|
||||
const dash = elem.getAttribute("stroke-dasharray") || "none"
|
||||
$('#stroke_style option').removeAttr('selected');
|
||||
$('#stroke_style option[value="'+ dash +'"]').attr("selected", "selected");
|
||||
$('#stroke_style').trigger('change');
|
||||
|
||||
$.fn.dragInput.updateCursor($('#stroke_width')[0])
|
||||
$.fn.dragInput.updateCursor($('#blur')[0])
|
||||
|
||||
}
|
||||
|
||||
function updateContextPanel(elems) {
|
||||
var elem = elems[0];
|
||||
console.log(elem)
|
||||
const isNode = svgCanvas.pathActions.getNodePoint()
|
||||
// If element has just been deleted, consider it null
|
||||
if(!elem.parentNode) elem = null;
|
||||
|
||||
const multiselected = elems.length > 1;
|
||||
|
||||
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
|
||||
var currentMode = svgCanvas.getMode();
|
||||
|
||||
if (currentMode === 'pathedit') {
|
||||
$('.context_panel').hide();
|
||||
$('#path_node_panel').show();
|
||||
$('#stroke_panel').hide();
|
||||
var point = path.getNodePoint();
|
||||
$('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
|
||||
$('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
|
||||
|
||||
if(point) {
|
||||
var seg_type = $('#seg_type');
|
||||
point.x = svgedit.units.convertUnit(point.x);
|
||||
point.y = svgedit.units.convertUnit(point.y);
|
||||
$('#path_node_x').val(Math.round(point.x));
|
||||
$('#path_node_y').val(Math.round(point.y));
|
||||
if(point.type) {
|
||||
seg_type.val(point.type).removeAttr('disabled');
|
||||
$("#seg_type_label").html(point.type == 4 ? "Straight" : "Curve")
|
||||
} else {
|
||||
seg_type.val(4).attr('disabled','disabled');
|
||||
}
|
||||
}
|
||||
$("#panels").removeClass("multiselected")
|
||||
$("#stroke_panel").hide();
|
||||
$("#canvas_panel").hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var menu_items = $('#cmenu_canvas li');
|
||||
$('.context_panel').hide();
|
||||
$('.menu_item', '#edit_menu').addClass('disabled');
|
||||
$('.menu_item', '#object_menu').addClass('disabled');
|
||||
|
||||
|
||||
//hack to show the proper multialign box
|
||||
if (multiselected) {
|
||||
multiselected = multiselected.filter(Boolean);
|
||||
elem = (svgCanvas.elementsAreSame(multiselected)) ? multiselected[0] : null
|
||||
if (elem) $("#panels").addClass("multiselected")
|
||||
}
|
||||
|
||||
if (!elem && !multiselected) {
|
||||
$("#panels").removeClass("multiselected")
|
||||
$("#stroke_panel").hide();
|
||||
$("#canvas_panel").show();
|
||||
}
|
||||
|
||||
if (elem !== null) {
|
||||
$("#stroke_panel").show();
|
||||
var elname = elem.nodeName;
|
||||
var angle = svgCanvas.getRotationAngle(elem);
|
||||
$('#angle').val(Math.round(angle));
|
||||
|
||||
var blurval = svgCanvas.getBlur(elem);
|
||||
$('#blur').val(blurval);
|
||||
if(!isNode && currentMode != 'pathedit') {
|
||||
$('#selected_panel').show();
|
||||
$('.action_selected').removeClass('disabled');
|
||||
// Elements in this array already have coord fields
|
||||
var x, y
|
||||
if(['g', 'polyline', 'path'].indexOf(elname) >= 0) {
|
||||
var bb = svgCanvas.getStrokedBBox([elem]);
|
||||
if(bb) {
|
||||
x = bb.x;
|
||||
y = bb.y;
|
||||
}
|
||||
}
|
||||
|
||||
x = svgedit.units.convertUnit(x);
|
||||
y = svgedit.units.convertUnit(y);
|
||||
$("#" + elname +"_x").val(Math.round(x))
|
||||
$("#" + elname +"_y").val(Math.round(y))
|
||||
if (elname === "polyline") {
|
||||
//we're acting as if polylines were paths
|
||||
$("#path_x").val(Math.round(x))
|
||||
$("#path_y").val(Math.round(y))
|
||||
}
|
||||
|
||||
// Elements in this array cannot be converted to a path
|
||||
var no_path = ['image', 'text', 'path', 'g', 'use'].indexOf(elname) == -1;
|
||||
if (no_path) $('.action_path_convert_selected').removeClass('disabled');
|
||||
if (elname === "path") $('.action_path_selected').removeClass('disabled');
|
||||
|
||||
}
|
||||
|
||||
var link_href = null;
|
||||
if (el_name === 'a') {
|
||||
link_href = svgCanvas.getHref(elem);
|
||||
$('#g_panel').show();
|
||||
}
|
||||
|
||||
if(elem.parentNode.tagName === 'a') {
|
||||
if(!$(elem).siblings().length) {
|
||||
$('#a_panel').show();
|
||||
link_href = svgCanvas.getHref(elem.parentNode);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide/show the make_link buttons
|
||||
$('#tool_make_link, #tool_make_link').toggle(!link_href);
|
||||
|
||||
if(link_href) {
|
||||
$('#link_url').val(link_href);
|
||||
}
|
||||
|
||||
// update contextual tools here
|
||||
var panels = {
|
||||
g: [],
|
||||
a: [],
|
||||
rect: ['rx','width','height', 'x', 'y'],
|
||||
image: ['width','height', 'x', 'y'],
|
||||
circle: ['cx','cy','r'],
|
||||
ellipse: ['cx','cy','rx','ry'],
|
||||
line: ['x1','y1','x2','y2'],
|
||||
text: ['x', 'y'],
|
||||
'use': [],
|
||||
path : []
|
||||
};
|
||||
|
||||
var el_name = elem.tagName;
|
||||
|
||||
if($(elem).data('gsvg')) {
|
||||
$('#g_panel').show();
|
||||
}
|
||||
|
||||
if (el_name == "path" || el_name == "polyline") {
|
||||
$('#path_panel').show();
|
||||
}
|
||||
|
||||
if(panels[el_name]) {
|
||||
var cur_panel = panels[el_name];
|
||||
$('#' + el_name + '_panel').show();
|
||||
|
||||
// corner radius has to live in a different panel
|
||||
// because otherwise it changes the position of the
|
||||
// of the elements
|
||||
if(el_name == "rect") $("#cornerRadiusLabel").show()
|
||||
else $("#cornerRadiusLabel").hide()
|
||||
|
||||
$.each(cur_panel, function(i, item) {
|
||||
var attrVal = elem.getAttribute(item);
|
||||
//update the draginput cursors
|
||||
var name_item = document.getElementById(el_name + '_' + item);
|
||||
name_item.value = Math.round(attrVal) || 0;
|
||||
if (name_item.getAttribute("data-cursor") === "true") {
|
||||
$.fn.dragInput.updateCursor(name_item );
|
||||
}
|
||||
});
|
||||
|
||||
if(el_name == 'text') {
|
||||
var font_family = elem.getAttribute("font-family");
|
||||
var cleanFontFamily = font_family.split(",")[0].replace(/'/g, "");
|
||||
var select = document.getElementById("font_family_dropdown");
|
||||
$('#text_panel').css("display", "inline");
|
||||
$('#tool_italic').toggleClass('active', svgCanvas.getItalic())
|
||||
$('#tool_bold').toggleClass('active', svgCanvas.getBold())
|
||||
$('#tool_italic').toggleClass('disabled', fonts[cleanFontFamily] ? !fonts[cleanFontFamily]["Italic"] : false)
|
||||
$('#tool_bold').toggleClass('disabled', fonts[cleanFontFamily] ? !fonts[cleanFontFamily]["Bold"] : false);
|
||||
$('#font_family').val(font_family);
|
||||
$(select).find(`option[value=${font_family}]`).prop("selected", true);
|
||||
$('#font_size').val(elem.getAttribute("font-size"));
|
||||
$('#text').val(elem.textContent);
|
||||
$('#preview_font').text(cleanFontFamily).css('font-family', font_family);
|
||||
} // text
|
||||
else if(el_name == 'image') {
|
||||
setImageURL(svgCanvas.getHref(elem));
|
||||
} // image
|
||||
else if(el_name === 'g' || el_name === 'use') {
|
||||
$('#container_panel').show();
|
||||
$('.action_group_selected').removeClass('disabled');
|
||||
var title = svgCanvas.getTitle();
|
||||
}
|
||||
}
|
||||
menu_items[(el_name === 'g' ? 'en':'dis') + 'ableContextMenuItems']('#ungroup');
|
||||
menu_items[((el_name === 'g' || !multiselected) ? 'dis':'en') + 'ableContextMenuItems']('#group');
|
||||
}
|
||||
|
||||
if (multiselected) {
|
||||
$('#multiselected_panel').show();
|
||||
$('.action_multi_selected').removeClass('disabled');
|
||||
menu_items
|
||||
.enableContextMenuItems('#group')
|
||||
.disableContextMenuItems('#ungroup');
|
||||
}
|
||||
|
||||
if (!elem) {
|
||||
menu_items.disableContextMenuItems('#delete,#cut,#copy,#ungroup,#move_front,#move_up,#move_down,#move_back');
|
||||
}
|
||||
|
||||
// update history buttons
|
||||
if (svgCanvas.undoMgr.getUndoStackSize() > 0) {
|
||||
$('#tool_undo').removeClass( 'disabled');
|
||||
}
|
||||
else {
|
||||
$('#tool_undo').addClass( 'disabled');
|
||||
}
|
||||
if (svgCanvas.undoMgr.getRedoStackSize() > 0) {
|
||||
$('#tool_redo').removeClass( 'disabled');
|
||||
}
|
||||
else {
|
||||
$('#tool_redo').addClass( 'disabled');
|
||||
}
|
||||
|
||||
svgCanvas.addedNew = false;
|
||||
|
||||
if ( (elem && !isNode) || multiselected) {
|
||||
// update the selected elements' layer
|
||||
$('#selLayerNames').removeAttr('disabled').val(currentLayerName);
|
||||
|
||||
// Enable regular menu options
|
||||
$("#cmenu_canvas").enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
|
||||
}
|
||||
}
|
||||
|
||||
this.show = show;
|
||||
this.updateContextPanel = updateContextPanel;
|
||||
}
|
||||
278
src/js/editor.js
278
src/js/editor.js
|
|
@ -2,263 +2,41 @@ const MD = {};
|
|||
|
||||
MD.Editor = function(){
|
||||
|
||||
const _self = this;
|
||||
|
||||
function save(){
|
||||
_self.menu.flash($('#file_menu'));
|
||||
svgCanvas.save();
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
// called when we've selected a different element
|
||||
function selectedChanged(window,elems) {
|
||||
const mode = svgCanvas.getMode();
|
||||
if(mode === "select") editor.toolbar.setMode("select");
|
||||
if (mode === "pathedit") return updateContextPanel();
|
||||
elems = elems.filter(Boolean);
|
||||
$('.context_panel').hide();
|
||||
$('#panels').toggleClass("multiselected", elems.length > 1);
|
||||
$('#multiselected_panel').toggle(elems.length > 1);
|
||||
$('#canvas_panel').toggle(!elems.length);
|
||||
// multiselected, nothing else needs to be done
|
||||
if (elems.length > 1) return;
|
||||
|
||||
const selectedElement = elems[0];
|
||||
const tagName = selectedElement.tagName;
|
||||
$("#" + tagName + "_panel").show();
|
||||
$('#stroke_width').val(selectedElement.getAttribute("stroke-width") || 0);
|
||||
var dash = selectedElement.getAttribute("stroke-dasharray") || "none"
|
||||
$('option', '#stroke_style').removeAttr('selected');
|
||||
$('#stroke_style option[value="'+ dash +'"]').attr("selected", "selected");
|
||||
$('#stroke_style').trigger('change');
|
||||
|
||||
$.fn.dragInput.updateCursor($('#stroke_width')[0])
|
||||
$.fn.dragInput.updateCursor($('#blur')[0])
|
||||
|
||||
updateContextPanel(elems);
|
||||
editor.panel.updateContextPanel(elems);
|
||||
};
|
||||
|
||||
function updateContextPanel(elems) {
|
||||
var elem = elems[0];
|
||||
// If element has just been deleted, consider it null
|
||||
if(elem != null && !elem.parentNode) elem = null;
|
||||
const multiselected = elems.length > 1;
|
||||
|
||||
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
|
||||
var currentMode = svgCanvas.getMode();
|
||||
var unit = 'px';
|
||||
var is_node = currentMode == 'pathedit'; //elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
|
||||
|
||||
if (is_node) {
|
||||
$('.context_panel').hide();
|
||||
$('#path_node_panel').show();
|
||||
$('#stroke_panel').hide();
|
||||
var point = path.getNodePoint();
|
||||
$('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
|
||||
$('#tool_node_delete').toggleClass('disabled', !path.canDeleteNodes);
|
||||
|
||||
if(point) {
|
||||
var seg_type = $('#seg_type');
|
||||
if(unit) {
|
||||
point.x = svgedit.units.convertUnit(point.x);
|
||||
point.y = svgedit.units.convertUnit(point.y);
|
||||
}
|
||||
$('#path_node_x').val(Math.round(point.x));
|
||||
$('#path_node_y').val(Math.round(point.y));
|
||||
if(point.type) {
|
||||
seg_type.val(point.type).removeAttr('disabled');
|
||||
$("#seg_type_label").html(point.type == 4 ? "Straight" : "Curve")
|
||||
} else {
|
||||
seg_type.val(4).attr('disabled','disabled');
|
||||
}
|
||||
}
|
||||
$("#panels").removeClass("multiselected")
|
||||
$("#stroke_panel").hide();
|
||||
$("#canvas_panel").hide();
|
||||
return;
|
||||
}
|
||||
|
||||
var menu_items = $('#cmenu_canvas li');
|
||||
$('.context_panel').hide();
|
||||
$('.menu_item', '#edit_menu').addClass('disabled');
|
||||
$('.menu_item', '#object_menu').addClass('disabled');
|
||||
|
||||
|
||||
//hack to show the proper multialign box
|
||||
if (multiselected) {
|
||||
multiselected = multiselected.filter(Boolean);
|
||||
elem = (svgCanvas.elementsAreSame(multiselected)) ? multiselected[0] : null
|
||||
if (elem) $("#panels").addClass("multiselected")
|
||||
}
|
||||
|
||||
if (!elem && !multiselected) {
|
||||
$("#panels").removeClass("multiselected")
|
||||
$("#stroke_panel").hide();
|
||||
$("#canvas_panel").show();
|
||||
}
|
||||
|
||||
if (elem != null) {
|
||||
$("#stroke_panel").show();
|
||||
var elname = elem.nodeName;
|
||||
var angle = svgCanvas.getRotationAngle(elem);
|
||||
$('#angle').val(Math.round(angle));
|
||||
|
||||
var blurval = svgCanvas.getBlur(elem);
|
||||
$('#blur').val(blurval);
|
||||
if(!is_node && currentMode != 'pathedit') {
|
||||
$('#selected_panel').show();
|
||||
$('.action_selected').removeClass('disabled');
|
||||
// Elements in this array already have coord fields
|
||||
var x, y
|
||||
if(['g', 'polyline', 'path'].indexOf(elname) >= 0) {
|
||||
var bb = svgCanvas.getStrokedBBox([elem]);
|
||||
if(bb) {
|
||||
x = bb.x;
|
||||
y = bb.y;
|
||||
}
|
||||
}
|
||||
|
||||
if(unit) {
|
||||
x = svgedit.units.convertUnit(x);
|
||||
y = svgedit.units.convertUnit(y);
|
||||
}
|
||||
|
||||
$("#" + elname +"_x").val(Math.round(x))
|
||||
$("#" + elname +"_y").val(Math.round(y))
|
||||
if (elname === "polyline") {
|
||||
//we're acting as if polylines were paths
|
||||
$("#path_x").val(Math.round(x))
|
||||
$("#path_y").val(Math.round(y))
|
||||
}
|
||||
|
||||
// Elements in this array cannot be converted to a path
|
||||
var no_path = ['image', 'text', 'path', 'g', 'use'].indexOf(elname) == -1;
|
||||
if (no_path) $('.action_path_convert_selected').removeClass('disabled');
|
||||
if (elname === "path") $('.action_path_selected').removeClass('disabled');
|
||||
|
||||
}
|
||||
|
||||
var link_href = null;
|
||||
if (el_name === 'a') {
|
||||
link_href = svgCanvas.getHref(elem);
|
||||
$('#g_panel').show();
|
||||
}
|
||||
|
||||
if(elem.parentNode.tagName === 'a') {
|
||||
if(!$(elem).siblings().length) {
|
||||
$('#a_panel').show();
|
||||
link_href = svgCanvas.getHref(elem.parentNode);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide/show the make_link buttons
|
||||
$('#tool_make_link, #tool_make_link').toggle(!link_href);
|
||||
|
||||
if(link_href) {
|
||||
$('#link_url').val(link_href);
|
||||
}
|
||||
|
||||
// update contextual tools here
|
||||
var panels = {
|
||||
g: [],
|
||||
a: [],
|
||||
rect: ['rx','width','height', 'x', 'y'],
|
||||
image: ['width','height', 'x', 'y'],
|
||||
circle: ['cx','cy','r'],
|
||||
ellipse: ['cx','cy','rx','ry'],
|
||||
line: ['x1','y1','x2','y2'],
|
||||
text: ['x', 'y'],
|
||||
'use': [],
|
||||
path : []
|
||||
};
|
||||
|
||||
var el_name = elem.tagName;
|
||||
|
||||
if($(elem).data('gsvg')) {
|
||||
$('#g_panel').show();
|
||||
}
|
||||
|
||||
if (el_name == "path" || el_name == "polyline") {
|
||||
$('#path_panel').show();
|
||||
}
|
||||
|
||||
if(panels[el_name]) {
|
||||
var cur_panel = panels[el_name];
|
||||
$('#' + el_name + '_panel').show();
|
||||
|
||||
// corner radius has to live in a different panel
|
||||
// because otherwise it changes the position of the
|
||||
// of the elements
|
||||
if(el_name == "rect") $("#cornerRadiusLabel").show()
|
||||
else $("#cornerRadiusLabel").hide()
|
||||
|
||||
$.each(cur_panel, function(i, item) {
|
||||
var attrVal = elem.getAttribute(item);
|
||||
//update the draginput cursors
|
||||
var name_item = document.getElementById(el_name + '_' + item);
|
||||
name_item.value = Math.round(attrVal) || 0;
|
||||
if (name_item.getAttribute("data-cursor") === "true") {
|
||||
$.fn.dragInput.updateCursor(name_item );
|
||||
}
|
||||
});
|
||||
|
||||
if(el_name == 'text') {
|
||||
var font_family = elem.getAttribute("font-family");
|
||||
var cleanFontFamily = font_family.split(",")[0].replace(/'/g, "");
|
||||
var select = document.getElementById("font_family_dropdown");
|
||||
$('#text_panel').css("display", "inline");
|
||||
$('#tool_italic').toggleClass('active', svgCanvas.getItalic())
|
||||
$('#tool_bold').toggleClass('active', svgCanvas.getBold())
|
||||
$('#tool_italic').toggleClass('disabled', fonts[cleanFontFamily] ? !fonts[cleanFontFamily]["Italic"] : false)
|
||||
$('#tool_bold').toggleClass('disabled', fonts[cleanFontFamily] ? !fonts[cleanFontFamily]["Bold"] : false);
|
||||
$('#font_family').val(font_family);
|
||||
$(select).find(`option[value=${font_family}]`).prop("selected", true);
|
||||
$('#font_size').val(elem.getAttribute("font-size"));
|
||||
$('#text').val(elem.textContent);
|
||||
$('#preview_font').text(cleanFontFamily).css('font-family', font_family);
|
||||
} // text
|
||||
else if(el_name == 'image') {
|
||||
setImageURL(svgCanvas.getHref(elem));
|
||||
} // image
|
||||
else if(el_name === 'g' || el_name === 'use') {
|
||||
$('#container_panel').show();
|
||||
$('.action_group_selected').removeClass('disabled');
|
||||
var title = svgCanvas.getTitle();
|
||||
}
|
||||
}
|
||||
menu_items[(el_name === 'g' ? 'en':'dis') + 'ableContextMenuItems']('#ungroup');
|
||||
menu_items[((el_name === 'g' || !multiselected) ? 'dis':'en') + 'ableContextMenuItems']('#group');
|
||||
}
|
||||
|
||||
if (multiselected) {
|
||||
$('#multiselected_panel').show();
|
||||
$('.action_multi_selected').removeClass('disabled');
|
||||
menu_items
|
||||
.enableContextMenuItems('#group')
|
||||
.disableContextMenuItems('#ungroup');
|
||||
}
|
||||
|
||||
if (!elem) {
|
||||
menu_items.disableContextMenuItems('#delete,#cut,#copy,#ungroup,#move_front,#move_up,#move_down,#move_back');
|
||||
}
|
||||
|
||||
// update history buttons
|
||||
if (svgCanvas.undoMgr.getUndoStackSize() > 0) {
|
||||
$('#tool_undo').removeClass( 'disabled');
|
||||
}
|
||||
else {
|
||||
$('#tool_undo').addClass( 'disabled');
|
||||
}
|
||||
if (svgCanvas.undoMgr.getRedoStackSize() > 0) {
|
||||
$('#tool_redo').removeClass( 'disabled');
|
||||
}
|
||||
else {
|
||||
$('#tool_redo').addClass( 'disabled');
|
||||
}
|
||||
|
||||
svgCanvas.addedNew = false;
|
||||
|
||||
if ( (elem && !is_node) || multiselected) {
|
||||
// update the selected elements' layer
|
||||
$('#selLayerNames').removeAttr('disabled').val(currentLayerName);
|
||||
|
||||
// Enable regular menu options
|
||||
$("#cmenu_canvas").enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
|
||||
}
|
||||
};
|
||||
function changeAttribute(attr, value, completed){
|
||||
if (completed) svgCanvas.changeSelectedAttribute(attr, value);
|
||||
else svgCanvas.changeSelectedAttributeNoUndo(attr, value);
|
||||
}
|
||||
|
||||
this.selectedChanged = selectedChanged;
|
||||
this.updateContextPanel = updateContextPanel;
|
||||
this.deleteSelected = deleteSelected;
|
||||
this.changeAttribute = changeAttribute;
|
||||
this.save = save;
|
||||
this.undo = undo;
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ $.fn.dragInput = function(cfg){
|
|||
_direction: null,
|
||||
_delay: null,
|
||||
_repeat: null,
|
||||
callback: cfg && cfg.callback ? cfg.callback : null
|
||||
callback: cfg && cfg.callback ? cfg.callback : () => console.log("cb does not exist")
|
||||
};
|
||||
// if a smallStep isn't supplied, use half the regular step
|
||||
this.dragCfg.smallStep = cfg && cfg.smallStep ? cfg.smallStep : this.dragCfg.step/2;
|
||||
|
|
@ -35,8 +35,7 @@ $.fn.dragInput = function(cfg){
|
|||
var scale = area/cursorHeight * step;
|
||||
var lastY = 0;
|
||||
var attr = this.getAttribute("data-attr");
|
||||
var canvas = methodDraw.canvas
|
||||
var isTouch = svgedit.browser.isTouch();
|
||||
var canvas = svgCanvas;
|
||||
var completed = true //for mousewheel
|
||||
var $cursor = (area && this.dragCfg.cursor)
|
||||
? $("<div class='draginput_cursor' />").appendTo($label)
|
||||
|
|
@ -45,7 +44,7 @@ $.fn.dragInput = function(cfg){
|
|||
if ($cursor && !isNaN(this.dragCfg.start)) $cursor.css("top", (this.dragCfg.start*-1)/scale+cursorHeight)
|
||||
|
||||
//this is where all the magic happens
|
||||
this.adjustValue = function(i, completed){
|
||||
this.adjustValue = function(i, completed = false){
|
||||
var v;
|
||||
i = parseFloat(i);
|
||||
if(isNaN(this.value)) {
|
||||
|
|
@ -59,17 +58,13 @@ $.fn.dragInput = function(cfg){
|
|||
if (min !== null) v = Math.max(v, min);
|
||||
if ($cursor) this.updateCursor(v);
|
||||
this.value = v;
|
||||
$label.attr("data-value", v)
|
||||
if ($.isFunction(this.dragCfg.callback)) this.dragCfg.callback(this, completed)
|
||||
this.dragCfg.callback(attr, v, completed);
|
||||
};
|
||||
|
||||
$label.toggleClass("draginput", $label.is("label"))
|
||||
|
||||
// when the mouse is down and moving
|
||||
this.move = function(e, oy, val) {
|
||||
if (isTouch) {
|
||||
e = e.originalEvent.touches[0]
|
||||
}
|
||||
// just got started let's save for undo purposes
|
||||
if (lastY === 0) {
|
||||
lastY = oy;
|
||||
|
|
@ -104,7 +99,6 @@ $.fn.dragInput = function(cfg){
|
|||
|
||||
this.launch = function(e) {
|
||||
var selectedElems = canvas.getSelectedElems();
|
||||
if (isTouch) e = e.originalEvent.touches[0];
|
||||
var oy = e.pageY;
|
||||
var val = this.value;
|
||||
var el = this;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,11 @@ const editor = new MD.Editor();
|
|||
editor.menu = new MD.Menu();
|
||||
editor.toolbar = new MD.Toolbar();
|
||||
editor.rulers = new MD.Rulers();
|
||||
editor.canvas = new MD.Canvas();
|
||||
editor.panel = new MD.Panel();
|
||||
editor.keyboard = new MD.Keyboard();
|
||||
|
||||
const state = new State();
|
||||
state.set("canvasId", t("Untitled"));
|
||||
state.set("canvasMode", state.get("canvasMode"));
|
||||
state.set("canvasMode", state.get("canvasMode"));
|
||||
state.set("canvasSize", state.get("canvasSize"));
|
||||
|
|
@ -24,6 +24,7 @@ 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.clean = (warn = true) => {
|
||||
|
|
|
|||
|
|
@ -7982,8 +7982,9 @@ var changeSelectedAttribute = this.changeSelectedAttribute = function(attr, val,
|
|||
// Removes all selected elements from the DOM and adds the change to the
|
||||
// history stack
|
||||
this.deleteSelectedElements = function() {
|
||||
var batchCmd = new BatchCommand("Delete Elements");
|
||||
var len = selectedElements.length;
|
||||
if (!len) return false;
|
||||
var batchCmd = new BatchCommand("Delete Elements");
|
||||
var selectedCopy = []; //selectedElements is being deleted
|
||||
for (var i = 0; i < len; ++i) {
|
||||
var selected = selectedElements[i];
|
||||
|
|
|
|||
Loading…
Reference in New Issue