various improvements
Mark MacKay
parent
2b7e3a77e0
commit
4373c6705e
|
|
@ -2,6 +2,16 @@
|
|||
margin-bottom: var(--x2);
|
||||
}
|
||||
|
||||
.align_button,
|
||||
.align_button * {
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.align_button:hover,
|
||||
.align_button:hover * {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.align_button {
|
||||
float: left;
|
||||
height: var(--x13);
|
||||
|
|
@ -20,11 +30,12 @@
|
|||
}
|
||||
|
||||
.align_button svg {
|
||||
fill: #999;
|
||||
fill: var(--z10);
|
||||
}
|
||||
|
||||
.align_button:hover svg {
|
||||
fill: #fff;
|
||||
fill: var(--z15);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.align_button:nth-child(1) {border-radius: var(--x1) 0 0 0;}
|
||||
|
|
|
|||
|
|
@ -27,4 +27,69 @@
|
|||
transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
|
||||
border-radius: var(--x2);
|
||||
box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
#workarea.rect, #workarea.line, #workarea.ellipse, #workarea.path, #workarea.shapelib {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
#workarea.text {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#workarea.eyedropper {
|
||||
cursor: url(../images/eyedropper.png) 0 16, crosshair;
|
||||
}
|
||||
|
||||
#workarea.fhpath {
|
||||
cursor: url(../images/pencil_cursor.png) 0 16, crosshair;
|
||||
}
|
||||
|
||||
#workarea.rotate * {
|
||||
cursor: url(../images/rotate.png) 12 12, auto;
|
||||
}
|
||||
|
||||
#workarea.select text, #workarea.multiselect text {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#workarea.n-resize * {cursor: n-resize !important;}
|
||||
#workarea.e-resize * {cursor: e-resize !important;}
|
||||
#workarea.w-resize * {cursor: w-resize !important;}
|
||||
#workarea.s-resize * {cursor: s-resize !important;}
|
||||
|
||||
#workarea.ne-resize * {cursor: ne-resize !important;}
|
||||
#workarea.se-resize * {cursor: se-resize !important;}
|
||||
#workarea.nw-resize * {cursor: nw-resize !important;}
|
||||
#workarea.sw-resize * {cursor: sw-resize !important;}
|
||||
|
||||
#workspace.dragging * {
|
||||
cursor: url(../images/dragging.png), move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
#workspace.drag * {
|
||||
cursor: url(../images/dragging.png), move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
#workarea.copy {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
#workarea.zoom {
|
||||
cursor: crosshair;
|
||||
cursor:-moz-zoom-in;
|
||||
cursor:-webkit-zoom-in;
|
||||
}
|
||||
#workarea.zoom.out {
|
||||
cursor: crosshair;
|
||||
cursor:-moz-zoom-out;
|
||||
cursor:-webkit-zoom-out;
|
||||
}
|
||||
|
||||
#selectorRubberBand {
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,6 +97,8 @@
|
|||
--transition-duration: 333ms;
|
||||
--transition-fast: 200ms;
|
||||
--panel-width: calc(var(--x10)*2*2 + var(--x1));
|
||||
--transition: all var(--transition-fast) ease;
|
||||
--transition-none: none;
|
||||
}
|
||||
|
||||
a, a:link, a:active, a:visited {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
border: solid var(--z5) 2px;
|
||||
border-radius: var(--x1);
|
||||
white-space: nowrap;
|
||||
margin: var(--x2) var(--x4) var(--x2) 0;
|
||||
margin: var(--x2) var(--x2) var(--x2) 0;
|
||||
padding: 0 var(--x4);
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.draginput {
|
||||
background: var(--z2);
|
||||
background-color: var(--z2);
|
||||
border-radius: var(--x1);
|
||||
width: calc(50% - var(--x2));
|
||||
height: calc(var(--x9) * 2);
|
||||
|
|
@ -14,16 +14,57 @@
|
|||
position: relative;
|
||||
margin: 0 var(--x2) var(--x2) 0;
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.draginput.button {
|
||||
.dragging .draginput {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dragging .draginput.active {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.draginput:hover {
|
||||
background-color: var(--z3);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.draginput:hover span,
|
||||
.draginput.active span {
|
||||
color: var(--z15);
|
||||
}
|
||||
|
||||
.draginput:hover input,
|
||||
.draginput.active input {
|
||||
color: var(--d8);
|
||||
}
|
||||
|
||||
.draginput.active,
|
||||
.draginput.active:hover {
|
||||
background-color: var(--z0);
|
||||
}
|
||||
|
||||
.draginput.active:hover {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* TODO this will only work for two line buttons */
|
||||
|
||||
.draginput-button {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding-top: 10px;
|
||||
color: var(--z9);
|
||||
padding-top: var(--x5);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.draginput-button-delete:hover {
|
||||
background-color: var(--a7);
|
||||
color: var(--a15);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.draginput .caret {
|
||||
border: solid transparent 5px;
|
||||
border-top-color: var(--z9);
|
||||
|
|
@ -86,6 +127,37 @@
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.draginput input::selection { background: var(--d4); }
|
||||
|
||||
.draginput.text-input input,
|
||||
.draginput.text-input input:hover,
|
||||
.draginput.text-input input:active {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.draginput.text-input input {
|
||||
text-align: left;
|
||||
text-indent: 8px;
|
||||
}
|
||||
|
||||
.draginput.textcontent {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.draginput.textcontent input,
|
||||
.draginput.textcontent input:hover,
|
||||
.draginput.textcontent input:active {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.text-path .draginput.textcontent {
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.draginput.twocol {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -152,7 +224,7 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
border-top: solid var(--d2) 3px;
|
||||
border-top: solid var(--d4) 1px;
|
||||
margin-top: -2px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
|
@ -182,4 +254,31 @@
|
|||
.draginput .push_bottom {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.draginput .angle {
|
||||
width: var(--x12);
|
||||
height: var(--x12);
|
||||
border-radius: var(--x12);
|
||||
background: var(--z3);
|
||||
position: absolute;
|
||||
bottom: var(--x1);
|
||||
left: 14px;
|
||||
}
|
||||
|
||||
.draginput:hover .angle {
|
||||
background: var(--z4);
|
||||
}
|
||||
|
||||
.draginput .angle-cursor {
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
border-top: solid var(--d7) 3px;
|
||||
position: absolute;
|
||||
margin: 0 0 0 23px;
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
.draginput.font_style:hover {
|
||||
background-color: var(--z2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ html, body {
|
|||
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background: var(--z2);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
|
|
@ -218,7 +218,7 @@ input[type=file] {
|
|||
transform: translate(-100%, 0);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
.disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -227,10 +227,6 @@ input[type=file] {
|
|||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#text {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#tool_bold span, #tool_italic span {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -260,23 +256,6 @@ input[type=file] {
|
|||
overflow: visible;
|
||||
}
|
||||
|
||||
.draginput.text-input input,
|
||||
.draginput.text-input input:hover,
|
||||
.draginput.text-input input:active {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.draginput.text-input input {
|
||||
text-align: left;
|
||||
text-indent: 8px;
|
||||
}
|
||||
|
||||
.draginput.textcontent {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
ul li.current {
|
||||
background-color: #F4E284;
|
||||
}
|
||||
|
|
@ -293,59 +272,6 @@ input[type=file] {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#workarea.rect, #workarea.line, #workarea.ellipse, #workarea.path, #workarea.shapelib {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
#workarea.text {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#workarea.eyedropper {
|
||||
cursor: url(../images/eyedropper.png) 0 16, crosshair;
|
||||
}
|
||||
|
||||
#workarea.fhpath {
|
||||
cursor: url(../images/pencil_cursor.png) 0 16, crosshair;
|
||||
}
|
||||
|
||||
#workarea.rotate * {
|
||||
cursor: url(../images/rotate.png) 12 12, auto;
|
||||
}
|
||||
|
||||
#workarea.select text, #workarea.multiselect text {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#workarea.n-resize * {cursor: n-resize !important;}
|
||||
#workarea.e-resize * {cursor: e-resize !important;}
|
||||
#workarea.w-resize * {cursor: w-resize !important;}
|
||||
#workarea.s-resize * {cursor: s-resize !important;}
|
||||
|
||||
#workarea.ne-resize * {cursor: ne-resize !important;}
|
||||
#workarea.se-resize * {cursor: se-resize !important;}
|
||||
#workarea.nw-resize * {cursor: nw-resize !important;}
|
||||
#workarea.sw-resize * {cursor: sw-resize !important;}
|
||||
|
||||
#workarea.copy {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
#workarea.zoom {
|
||||
cursor: crosshair;
|
||||
cursor:-moz-zoom-in;
|
||||
cursor:-webkit-zoom-in;
|
||||
}
|
||||
#workarea.zoom.out {
|
||||
cursor: crosshair;
|
||||
cursor:-moz-zoom-out;
|
||||
cursor:-webkit-zoom-out;
|
||||
}
|
||||
|
||||
#selectorRubberBand {
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
/* For modern browsers */
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
|
|
@ -357,73 +283,11 @@ input[type=file] {
|
|||
clear:both;
|
||||
}
|
||||
|
||||
|
||||
#zoom_label {
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
cursor: default !important;
|
||||
width: auto;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#zoom_panel {
|
||||
padding: 9px 0;
|
||||
right: 175px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#zoom_panel .caret {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#zoom_label img, #zoom_label svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
#logo svg {
|
||||
pointer-events: none;
|
||||
margin-top: var(--x2);
|
||||
}
|
||||
|
||||
#zoomLabel {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zoomLabel svg {
|
||||
fill: var(--z10);
|
||||
}
|
||||
|
||||
#zoom_label input {
|
||||
color: var(--z10);
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
width: 50px;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
position: static;
|
||||
}
|
||||
|
||||
#zoom_label span {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body.dragging * {
|
||||
cursor: url(../images/dragging.png), move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
body.drag * {
|
||||
cursor: url(../images/dragging.png), move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
}
|
||||
|
||||
input[readonly=readonly]:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -444,25 +308,6 @@ input[readonly=readonly]:focus {
|
|||
display: block;
|
||||
}
|
||||
|
||||
#tool_angle_indicator {
|
||||
width: var(--x12);
|
||||
height: var(--x12);
|
||||
border-radius: var(--x12);
|
||||
background: var(--z3);
|
||||
position: absolute;
|
||||
bottom: var(--x1);
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
#tool_angle_indicator_cursor {
|
||||
width: 4px;
|
||||
height: 25px;
|
||||
border-top: solid var(--d7) 3px;
|
||||
position: absolute;
|
||||
margin: 0 0 0 23px;
|
||||
transform-origin: 50% 0;
|
||||
}
|
||||
|
||||
#stroke_style_label {
|
||||
font-size: 30px;
|
||||
margin-top: 33px;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
line-height: var(--x10);
|
||||
bottom: 0;
|
||||
border-top: solid var(--z1) 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#tool_bold {
|
||||
|
|
@ -29,15 +30,16 @@
|
|||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
#tool_bold:hover, #tool_italic:hover {
|
||||
color: var(--z15);
|
||||
background-color: var(--z3);
|
||||
}
|
||||
|
||||
#tool_bold.disabled,
|
||||
#tool_italic.disabled {
|
||||
opacity: 1;
|
||||
color: var(--z4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#tool_bold.active, #tool_italic.active {
|
||||
|
|
@ -65,3 +67,11 @@
|
|||
border-right: solid var(--z2) 10px;
|
||||
background: linear-gradient(to right, rgba(0,0,0,0), var(--z2));
|
||||
}
|
||||
|
||||
#textpath-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text-path #textpath-panel {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
#zoom_panel,
|
||||
#zoom_select {
|
||||
padding: var(--x2) 0;
|
||||
right: calc(var(--panel-width) + var(--x2));
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#zoom_panel {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#zoom_select {
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#zoom_select:hover + div {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#zoom_label {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#zoom_panel .caret {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#zoom_label img, #zoom_label svg {
|
||||
width: var(--x4);
|
||||
height: var(--x4);
|
||||
}
|
||||
|
||||
#zoomLabel {
|
||||
width: var(--x4);
|
||||
height: var(--x4);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zoomLabel svg {
|
||||
fill: var(--z10);
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
#zoom_label input {
|
||||
-webkit-appearance: none;
|
||||
color: var(--z10);
|
||||
font-size: 13px;
|
||||
height: auto;
|
||||
width: var(--x12);
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
border: none;
|
||||
top: 2px;
|
||||
left: var(--x6);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#zoom_label select {
|
||||
-webkit-appearance: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#zoom_label span {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
|
@ -36,6 +36,7 @@
|
|||
<link rel="stylesheet" href="css/align_buttons.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="css/text.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="css/sponsors.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="css/zoom-dropdown.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="css/loading.css" type="text/css"/>
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
|
|
@ -364,11 +365,24 @@
|
|||
</div>
|
||||
|
||||
<div id="text_panel" class="context_panel">
|
||||
<div id="textpath-panel">
|
||||
<h4>Text Path</h4>
|
||||
<div class="draginputs">
|
||||
<label>
|
||||
<input id="textPath_offset" class="attr_changer" data-title="Change offset" data-attr="offset" pattern="[0-9]*" />
|
||||
<span>Offset</span>
|
||||
</label>
|
||||
<div class="draginput draginput-button draginput-button-delete" id="tool_textPath_remove" data-title="Remove path">Remove path</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<h4>Text</h4>
|
||||
<div class="draginputs">
|
||||
<label class="draginput twocol textcontent" data-title="Change Content">
|
||||
<span>Content</span>
|
||||
<input id="text" type="text"/>
|
||||
<span>Content</span>
|
||||
</label>
|
||||
<label>
|
||||
<input id="text_x" class="attr_changer" data-title="Change text x coordinate" data-attr="x" pattern="[0-9]*" />
|
||||
|
|
@ -387,7 +401,7 @@
|
|||
<select id="font_family_dropdown">
|
||||
</select>
|
||||
</div>
|
||||
<div class="draginput">
|
||||
<div class="draginput font_style">
|
||||
<span>Font Style</span>
|
||||
<div id="tool_bold" data-title="Bold Text [B]">B</div>
|
||||
<div id="tool_italic" data-title="Italic Text [I]">i</div>
|
||||
|
|
@ -459,8 +473,8 @@
|
|||
<label id="tool_angle" data-title="Change rotation angle" class="draginput">
|
||||
<input id="angle" class="attr_changer" size="2" value="0" data-attr="transform" data-min="-180" data-max="180" type="text"/>
|
||||
<span class="icon_label">Rotation</span>
|
||||
<div id="tool_angle_indicator">
|
||||
<div id="tool_angle_indicator_cursor"></div>
|
||||
<div id="tool_angle_indicator" class="angle">
|
||||
<div id="tool_angle_indicator_cursor" class="angle-cursor"></div>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
|
|
@ -609,7 +623,6 @@
|
|||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="tools_left" class="tools_panel">
|
||||
<div class="tool_button" id="tool_select" data-mode="select" title="Select Tool [V]">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24">
|
||||
|
|
@ -686,28 +699,27 @@
|
|||
<div id="tools_bottom" class="tools_panel">
|
||||
|
||||
<!-- Zoom buttons -->
|
||||
<select id="zoom_select">
|
||||
<option value="6">6%</option>
|
||||
<option value="12">12%</option>
|
||||
<option value="16">16%</option>
|
||||
<option value="25">25%</option>
|
||||
<option value="50">50%</option>
|
||||
<option value="75">75%</option>
|
||||
<option value="100" selected="selected">100%</option>
|
||||
<option value="150">150%</option>
|
||||
<option value="200">200%</option>
|
||||
<option value="300">300%</option>
|
||||
<option value="400">400%</option>
|
||||
<option value="600">600%</option>
|
||||
<option value="800">800%</option>
|
||||
<option value="1600">1600%</option>
|
||||
</select>
|
||||
<div id="zoom_panel" class="toolset" title="Change zoom level">
|
||||
<div class="draginput select" id="zoom_label">
|
||||
<div class="select-input" id="zoom_label">
|
||||
<span id="zoomLabel" class="zoom_tool icon_label">
|
||||
<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>
|
||||
</span>
|
||||
<select id="zoom_select">
|
||||
<option value="6">6%</option>
|
||||
<option value="12">12%</option>
|
||||
<option value="16">16%</option>
|
||||
<option value="25">25%</option>
|
||||
<option value="50">50%</option>
|
||||
<option value="75">75%</option>
|
||||
<option value="100" selected="selected">100%</option>
|
||||
<option value="150">150%</option>
|
||||
<option value="200">200%</option>
|
||||
<option value="300">300%</option>
|
||||
<option value="400">400%</option>
|
||||
<option value="600">600%</option>
|
||||
<option value="800">800%</option>
|
||||
<option value="1600">1600%</option>
|
||||
</select>
|
||||
<div class="caret"></div>
|
||||
<input id="zoom" value="100%" type="text" readonly="readonly" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -718,9 +730,7 @@
|
|||
<!-- hidden divs -->
|
||||
<div id="color_picker"></div>
|
||||
|
||||
</div> <!-- svg_editor -->
|
||||
|
||||
|
||||
</div> <!-- /app -->
|
||||
|
||||
<div id="dialog_box">
|
||||
<div id="dialog_box_overlay"></div>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ MD.Pan = function(){
|
|||
function startPan(e){
|
||||
panning = true;
|
||||
svgCanvas.spaceKey = true;
|
||||
document.body.classList.add("dragging");
|
||||
workarea.classList.add("dragging");
|
||||
}
|
||||
|
||||
function stopPan(){
|
||||
panning = false;
|
||||
svgCanvas.spaceKey = false;
|
||||
document.body.classList.remove("dragging");
|
||||
workarea.classList.remove("dragging");
|
||||
}
|
||||
|
||||
var move_pan = function(evt) {
|
||||
|
|
|
|||
127
src/js/Panel.js
127
src/js/Panel.js
|
|
@ -132,78 +132,82 @@ MD.Panel = function(){
|
|||
return (!!text && !!path);
|
||||
}
|
||||
|
||||
|
||||
function updateContextPanel(elems) {
|
||||
if (!elems) elems = editor.selected;
|
||||
var elem = elems[0] || editor.selected[0];
|
||||
const isNode = svgCanvas.pathActions.getNodePoint()
|
||||
// If element has just been deleted, consider it null
|
||||
if(!elem || !elem.parentNode) elem = null;
|
||||
var elem = elems[0] || editor.selected[0];
|
||||
const isNode = svgCanvas.pathActions.getNodePoint()
|
||||
// If element has just been deleted, consider it null
|
||||
if(!elem || !elem.parentNode) elem = null;
|
||||
|
||||
const multiselected = elems.length > 1;
|
||||
const multiselected = elems.length > 1;
|
||||
|
||||
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
|
||||
var currentMode = svgCanvas.getMode();
|
||||
var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
|
||||
var currentMode = svgCanvas.getMode();
|
||||
|
||||
$('.context_panel').hide();
|
||||
$("#align_tools").toggle(elem && !multiselected);
|
||||
$('.context_panel').hide();
|
||||
$("#align_tools").toggle(elem && !multiselected);
|
||||
|
||||
if (currentMode === 'pathedit') return showPathEdit();
|
||||
if (currentMode === 'pathedit') return showPathEdit();
|
||||
|
||||
var menu_items = $('#cmenu_canvas li');
|
||||
var menu_items = $('#cmenu_canvas li');
|
||||
|
||||
//hack to show the proper multialign box
|
||||
if (multiselected) {
|
||||
const multi = elems.filter(Boolean);
|
||||
elem = (svgCanvas.elementsAreSame(multi)) ? multi[0] : null
|
||||
if (elem) $("#panels").addClass("multiselected");
|
||||
const canTextPath = canPutTextOnPath(multi);
|
||||
$("#tool_text_on_path").toggle(canTextPath);
|
||||
}
|
||||
//hack to show the proper multialign box
|
||||
if (multiselected) {
|
||||
const multi = elems.filter(Boolean);
|
||||
elem = (svgCanvas.elementsAreSame(multi)) ? multi[0] : null
|
||||
if (elem) $("#panels").addClass("multiselected");
|
||||
const canTextPath = canPutTextOnPath(multi);
|
||||
$("#tool_text_on_path").toggle(canTextPath);
|
||||
}
|
||||
else {
|
||||
console.log("remove multiselectd")
|
||||
$("#panels").removeClass("multiselected");
|
||||
}
|
||||
|
||||
if (!elem && !multiselected) {
|
||||
$("#panels").removeClass("multiselected")
|
||||
$("#stroke_panel").hide();
|
||||
$("#canvas_panel").show();
|
||||
}
|
||||
if (!elem && !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));
|
||||
$('#tool_angle_indicator').css("transform", "rotate("+angle+"deg)");
|
||||
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);
|
||||
if (elem !== null) {
|
||||
$("#stroke_panel").show();
|
||||
var elname = elem.nodeName;
|
||||
var angle = svgCanvas.getRotationAngle(elem);
|
||||
$('#angle').val(Math.round(angle));
|
||||
$('#group_opacity').val(svgCanvas.getOpacity(elem)*100 || 100);
|
||||
$.fn.dragInput.updateCursor(document.getElementById("group_opacity"));
|
||||
$('#tool_angle_indicator').css("transform", "rotate("+angle+"deg)");
|
||||
var blurval = svgCanvas.getBlur(elem);
|
||||
$('#blur').val(blurval);
|
||||
$.fn.dragInput.updateCursor(document.getElementById("blur"));
|
||||
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))
|
||||
}
|
||||
$("#" + 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');
|
||||
// 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');
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -262,6 +266,7 @@ MD.Panel = function(){
|
|||
else $("#cornerRadiusLabel").hide()
|
||||
|
||||
cur_panel.forEach((item, i) => {
|
||||
|
||||
var attrVal = elem.getAttribute(item);
|
||||
//update the draginput cursors
|
||||
var name_item = document.getElementById(el_name + '_' + item);
|
||||
|
|
@ -275,7 +280,7 @@ MD.Panel = function(){
|
|||
}
|
||||
name_item.value = Math.round(attrVal) || 0;
|
||||
if (name_item.getAttribute("data-cursor") === "true") {
|
||||
$.fn.dragInput.updateCursor(name_item );
|
||||
$.fn.dragInput.updateCursor(name_item);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -81,15 +81,22 @@ MD.Text = function(){
|
|||
})
|
||||
.keyup(function(e){
|
||||
e.stopPropagation();
|
||||
if (e.key === "Escape") {
|
||||
svgCanvas.textActions.toSelectMode()
|
||||
if (e.key === "Escape" || e.key === "Enter") {
|
||||
if (!$("#text_panel").hasClass("text-path")) svgCanvas.textActions.toSelectMode();
|
||||
this.blur();
|
||||
return editor.escapeMode();
|
||||
}
|
||||
svgCanvas.setTextContent(this.value);
|
||||
var elems = svgCanvas.getSelectedElems();
|
||||
svgCanvas.selectorManager.requestSelector(elems[0]).reset(elems[0]);
|
||||
})
|
||||
.click(function(e) {
|
||||
this.focus();
|
||||
this.select();
|
||||
});
|
||||
|
||||
function changeFontSize(){
|
||||
svgCanvas.setFontSize($("#font_size").val());
|
||||
function changeFontSize(attr, value, completed){
|
||||
svgCanvas.setFontSize(value);
|
||||
}
|
||||
|
||||
function setTextPathAttr(a, val){
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ const MD = {};
|
|||
|
||||
MD.Editor = function(){
|
||||
|
||||
const el = document.getElementById("method-draw");
|
||||
const serializer = new XMLSerializer();
|
||||
const _self = this;
|
||||
const workarea = document.getElementById("workarea");
|
||||
|
|
@ -300,7 +301,7 @@ MD.Editor = function(){
|
|||
function toggleWireframe() {
|
||||
editor.menu.flash($('#view_menu'));
|
||||
$('#tool_wireframe').toggleClass('push_button_pressed');
|
||||
$("#svg_editor").toggleClass('wireframe');
|
||||
$("#method-draw").toggleClass('wireframe');
|
||||
}
|
||||
|
||||
function groupSelected(){
|
||||
|
|
@ -341,6 +342,7 @@ MD.Editor = function(){
|
|||
editor.modal.source.open();
|
||||
}
|
||||
|
||||
this.el = el;
|
||||
this.selectedChanged = selectedChanged;
|
||||
this.elementChanged = elementChanged;
|
||||
this.changeAttribute = changeAttribute;
|
||||
|
|
|
|||
|
|
@ -581,6 +581,7 @@ svgedit.history.UndoManager.prototype.beginUndoableChange = function(attrName, e
|
|||
svgedit.history.UndoManager.prototype.finishUndoableChange = function() {
|
||||
var p = this.undoChangeStackPointer--;
|
||||
var changeset = this.undoableChangeStack[p];
|
||||
if (!changeset) return new svgedit.history.BatchCommand();
|
||||
var i = changeset['elements'].filter(Boolean).length;
|
||||
var attrName = changeset['attrName'];
|
||||
var batchCmd = new svgedit.history.BatchCommand("Change " + attrName);
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ $.fn.dragInput = function(cfg){
|
|||
var scale = area/cursorHeight * step;
|
||||
var lastY = 0;
|
||||
var attr = this.getAttribute("data-attr");
|
||||
var canvas = svgCanvas;
|
||||
var completed = true //for mousewheel
|
||||
var $cursor = (area && this.dragCfg.cursor)
|
||||
? $("<div class='draginput_cursor' />").appendTo($label)
|
||||
|
|
@ -78,17 +77,17 @@ $.fn.dragInput = function(cfg){
|
|||
|
||||
//when the mouse is released
|
||||
this.stop = function() {
|
||||
var selectedElems = canvas.getSelectedElems();
|
||||
var selectedElems = svgCanvas.getSelectedElems();
|
||||
$('body').removeClass('dragging');
|
||||
$label.removeClass("active");
|
||||
completed = true;
|
||||
$(window).unbind("mousemove.draginput touchmove.draginput mouseup.draginput touchend.draginput");
|
||||
lastY = 0;
|
||||
if (selectedElems[0]) {
|
||||
var batchCmd = canvas.undoMgr.finishUndoableChange();
|
||||
if (!batchCmd.isEmpty()) canvas.undoMgr.addCommandToHistory(batchCmd);
|
||||
var batchCmd = svgCanvas.undoMgr.finishUndoableChange();
|
||||
if (!batchCmd.isEmpty()) svgCanvas.undoMgr.addCommandToHistory(batchCmd);
|
||||
}
|
||||
this.adjustValue(0, completed)
|
||||
this.adjustValue(0, completed);
|
||||
}
|
||||
|
||||
this.updateCursor = function(){
|
||||
|
|
@ -98,17 +97,22 @@ $.fn.dragInput = function(cfg){
|
|||
}
|
||||
|
||||
this.launch = function(e) {
|
||||
var selectedElems = canvas.getSelectedElems();
|
||||
var selectedElems = svgCanvas.getSelectedElems();
|
||||
var oy = e.pageY;
|
||||
var val = this.value;
|
||||
var el = this;
|
||||
if (attr && selectedElems.length) canvas.undoMgr.beginUndoableChange(attr, selectedElems)
|
||||
if (attr && selectedElems.length) svgCanvas.undoMgr.beginUndoableChange(attr, selectedElems)
|
||||
$('body').addClass('dragging');
|
||||
$label.addClass('active');
|
||||
$(window).bind("mousemove.draginput touchmove.draginput", function(e){el.move(e, oy, parseFloat(val))})
|
||||
$(window).bind("mouseup.draginput touchend.draginput", function(e){el.stop()})
|
||||
$("input").blur();
|
||||
}
|
||||
|
||||
const delta = 2;
|
||||
let startX;
|
||||
let startY;
|
||||
|
||||
$(this)
|
||||
.attr("readonly", "readonly")
|
||||
.attr("data-scale", scale)
|
||||
|
|
@ -116,9 +120,23 @@ $.fn.dragInput = function(cfg){
|
|||
.attr("data-cursor", ($cursor !== false))
|
||||
|
||||
.bind("mousedown touchstart", function(e){
|
||||
startX = event.pageX;
|
||||
startY = event.pageY;
|
||||
this.blur();
|
||||
this.launch(e);
|
||||
})
|
||||
|
||||
.bind("mouseup touchend", function(e) {
|
||||
const diffX = Math.abs(event.pageX - startX);
|
||||
const diffY = Math.abs(event.pageY - startY);
|
||||
|
||||
if (diffX < delta && diffY < delta) {
|
||||
this.removeAttribute("readonly", "readonly");
|
||||
this.focus();
|
||||
this.select();
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
.bind("dblclick taphold", function(e) {
|
||||
this.removeAttribute("readonly", "readonly");
|
||||
|
|
@ -147,12 +165,15 @@ $.fn.dragInput = function(cfg){
|
|||
})
|
||||
|
||||
.blur(function(e){
|
||||
window.getSelection().removeAllRanges();
|
||||
this.setAttribute("readonly", "readonly")
|
||||
})
|
||||
|
||||
.bind("mousewheel", function(e, delta, deltaX, deltaY){
|
||||
var selectedElems = canvas.getSelectedElems();
|
||||
if (completed) canvas.undoMgr.beginUndoableChange(attr, selectedElems)
|
||||
const panels = document.getElementById("panels");
|
||||
if (panels.scrollHeight > panels.clientHeight) return;
|
||||
var selectedElems = svgCanvas.getSelectedElems();
|
||||
if (completed) svgCanvas.undoMgr.beginUndoableChange(attr, selectedElems)
|
||||
completed = false
|
||||
clearTimeout(window.undoTimeout)
|
||||
window.undoTimeout = setTimeout(function(){
|
||||
|
|
@ -178,7 +199,8 @@ $.fn.dragInput.updateCursor = function(el){
|
|||
var scale = parseFloat(el.getAttribute("data-scale"));
|
||||
var domain = parseFloat(el.getAttribute("data-domain"));
|
||||
var pos = ((value*-1)/scale+domain) + "px";
|
||||
console.log(value, pos)
|
||||
var cursor = el.parentNode.lastChild
|
||||
if (cursor.className == "draginput_cursor") cursor.style.top = pos;
|
||||
if (cursor.className === "draginput_cursor") cursor.style.top = pos;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1716,7 +1716,7 @@ window.methodDraw = function() {
|
|||
$('#rect_rx') .dragInput({ min: 0, max: 100, step: 1, callback: changeAttribute, cursor: true });
|
||||
$('#stroke_width') .dragInput({ min: 0, max: 99, step: 1, callback: changeStrokeWidth, cursor: true, smallStep: 0.1, start: 1.5 });
|
||||
$('#angle') .dragInput({ min: -180, max: 180, step: 1, callback: changeRotationAngle, cursor: false, dragAdjust: 0.5 });
|
||||
$('#font_size') .dragInput({ min: 1, max: 250, step: 1, callback: changeFontSize, cursor: true, stepfunc: stepFontSize, dragAdjust: .15 });
|
||||
$('#font_size') .dragInput({ min: 1, max: 250, step: 1, callback: changeFontSize, cursor: false, stepfunc: stepFontSize, dragAdjust: .15 });
|
||||
$('#group_opacity').dragInput({ min: 0, max: 100, step: 5, callback: changeAttribute, cursor: true, start: 100 });
|
||||
$('#blur') .dragInput({ min: 0, max: 10, step: .1, callback: changeBlur, cursor: true, start: 0 });
|
||||
// Set default zoom
|
||||
|
|
|
|||
|
|
@ -3465,6 +3465,7 @@ var textActions = canvas.textActions = function() {
|
|||
|
||||
var charbb;
|
||||
charbb = chardata[index];
|
||||
if (!charbb) return;
|
||||
if(!empty) {
|
||||
textinput.setSelectionRange(index, index);
|
||||
}
|
||||
|
|
@ -7171,7 +7172,11 @@ this.getStyle = function() {
|
|||
|
||||
// Function: getOpacity
|
||||
// Returns the current opacity
|
||||
this.getOpacity = function() {
|
||||
this.getOpacity = function(elem) {
|
||||
if (elem) {
|
||||
const opacity = elem.getAttribute("opacity");
|
||||
return opacity === null ? 1 : parseFloat(opacity);
|
||||
}
|
||||
return cur_shape.opacity;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue