sponsors and loading
Mark MacKay
commit
3b70172f25
12
readme.md
12
readme.md
|
|
@ -1,13 +1,17 @@
|
|||
# Method Draw
|
||||
|
||||
Method Draw is a web based vector drawing application.
|
||||
Method Draw is a web based vector drawing application. The purpose of Method Draw is to provide a simple and easy-to-use SVG editor experience. It purposely removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience. If you are looking for a more complete vector editing open-source solution, please check out [SVG Edit](https://github.com/SVG-Edit/svgedit).
|
||||
|
||||
### [Try Method Draw](https://editor.method.ac) online.
|
||||
## Online sync and sharing
|
||||
|
||||
Cloud sync and sharing are available on Method Draw for Deta.
|
||||
|
||||
[<img src="https://method.ac/img/install-on-deta.png" width="200">](https://deta.space/discovery/method-draw?ref=method.ac)
|
||||
|
||||
#### [Try Method Draw](https://editor.method.ac) online.
|
||||
|
||||
|
||||
|
||||
The purpose of Method Draw is to provide a simple and easy-to-use SVG editor experience. It purposely removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience. If you are looking for a more complete vector editing open-source solution, please check out [SVG Edit](https://github.com/SVG-Edit/svgedit).
|
||||
|
||||
## Development
|
||||
|
||||
Develop and run a local web server under `src`;
|
||||
|
|
|
|||
|
|
@ -9,14 +9,8 @@
|
|||
}
|
||||
|
||||
#svgcanvas {
|
||||
background-color: var(--z1);
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
background: var(--z2);
|
||||
background-color: var(--z2);
|
||||
display: block;
|
||||
}
|
||||
|
||||
#workarea {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
#workarea > svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading #svgcanvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#svgcanvas:after {
|
||||
transition: opacity var(--transition-duration) 300ms;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loading #svgcanvas:after {
|
||||
position: absolute;
|
||||
content: 'Loading';
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: var(--x6);
|
||||
padding: 0 var(--x2);
|
||||
background: var(--z2);
|
||||
color: var(--z10);
|
||||
z-index: 100;
|
||||
opacity: 1;
|
||||
border-radius: var(--x1);
|
||||
}
|
||||
|
||||
.loading #workarea > svg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: white;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
position: relative;
|
||||
z-index: 2;
|
||||
height: var(--x8);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#menu_bar.active .menu.open .menu_list {
|
||||
|
|
@ -122,3 +123,7 @@
|
|||
.menu_list .menu_item:not(.disabled):hover span {
|
||||
background: var(--d13);
|
||||
}
|
||||
|
||||
#modal_donate {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
[build]
|
||||
command = "gulp"
|
||||
publish = "dist/"
|
||||
[dev]
|
||||
publish="src/"
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
#sponsors {
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
margin-right: calc(var(--panel-width) + var(--x4));
|
||||
}
|
||||
|
||||
.sponsor a {
|
||||
transition: all 200ms ease;
|
||||
background-color: var(--z3);
|
||||
line-height: var(--x6);
|
||||
margin: var(--x1) 0;
|
||||
border-radius: var(--x1);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: var(--z14);
|
||||
padding: 0 var(--x2);
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sponsor a:hover {
|
||||
color: var(--z15);
|
||||
background: var(--d7);
|
||||
}
|
||||
|
||||
.sponsor .deta {
|
||||
padding-left: var(--x7);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sponsor .deta span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
top: 2px;
|
||||
left: var(--x1);
|
||||
transform: scale(0.6);
|
||||
transition: transform var(--transition-duration) ease;
|
||||
}
|
||||
|
||||
.sponsors .deta span:nth-child(1) {
|
||||
width: var(--x5);
|
||||
height: var(--x5);
|
||||
background-color: #EF39A8;
|
||||
margin: 0;
|
||||
transition-delay: 0;
|
||||
}
|
||||
|
||||
.sponsors .deta span:nth-child(2) {
|
||||
width: var(--x4);
|
||||
height: var(--x4);
|
||||
background-color: #BD399C;
|
||||
margin: 2px;
|
||||
transition-delay: 100ms;
|
||||
}
|
||||
|
||||
.sponsors .deta span:nth-child(3) {
|
||||
width: var(--x3);
|
||||
height: var(--x3);
|
||||
background-color: #93388E;
|
||||
margin: 4px;
|
||||
transition-delay: 200ms;
|
||||
}
|
||||
|
||||
.sponsors .deta span:nth-child(4) {
|
||||
width: var(--x2);
|
||||
height: var(--x2);
|
||||
background-color: rgb(96, 48, 162);
|
||||
margin: 6px;
|
||||
transition-delay: 300ms;
|
||||
}
|
||||
|
||||
.sponsors .deta:hover span {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.sponsor a:hover {
|
||||
color: var(--z15);
|
||||
background: var(--d7);
|
||||
}
|
||||
|
||||
.sponsor a:hover + .sponsor-description {
|
||||
opacity: 1;
|
||||
transform: translate(0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.sponsor-description {
|
||||
transition: all var(--transition-duration) ease;
|
||||
position: absolute;
|
||||
right: calc(var(--panel-width) + var(--x4));
|
||||
top: var(--x10);
|
||||
width: calc(var(--x16)*4);
|
||||
z-index: 100;
|
||||
background: var(--z15);
|
||||
padding: var(--x6);
|
||||
border-radius: var(--x1);
|
||||
line-height: 150%;
|
||||
box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2);
|
||||
margin-left: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(0,8px);
|
||||
transform: translate3d(0,8px,0);
|
||||
}
|
||||
|
||||
.sponsor-description:after {
|
||||
content: '';
|
||||
border: solid transparent var(--x2);
|
||||
border-bottom-color: var(--z15);
|
||||
position: absolute;
|
||||
top: calc(var(--x4)*-1);
|
||||
right: var(--x10);
|
||||
}
|
||||
|
||||
.sponsor-description p {
|
||||
color: var(--z6);
|
||||
}
|
||||
|
||||
.sponsor-description strong {
|
||||
display: block;
|
||||
margin-bottom: var(--x2);
|
||||
}
|
||||
|
||||
.sponsor-logo {
|
||||
display: block;
|
||||
width: 180px;
|
||||
margin: var(--x4) auto var(--x1);
|
||||
}
|
||||
|
||||
.sponsor-disclaimer {
|
||||
color: var(--z11);
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
|
@ -35,9 +35,11 @@
|
|||
<link rel="stylesheet" href="css/panel.css" type="text/css"/>
|
||||
<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/loading.css" type="text/css"/>
|
||||
<!-- endbuild -->
|
||||
</head>
|
||||
<body>
|
||||
<body class="loading">
|
||||
|
||||
<div id="method-draw" class="app">
|
||||
<div id="rulers">
|
||||
|
|
@ -48,7 +50,6 @@
|
|||
|
||||
<div id="workarea">
|
||||
<div id="svgcanvas">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -125,6 +126,24 @@
|
|||
<div class="menu_item" id="tool_source" data-action="source">Source... <span class="shortcut">⌘U</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sponsors" id="sponsors">
|
||||
<div class="sponsor">
|
||||
<a href="https://deta.space/discovery/method-draw?ref=method.ac" class="deta">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
Install
|
||||
</a>
|
||||
<div class="sponsor-description">
|
||||
<strong>Install Method Draw on Deta Space</strong>
|
||||
<span>With Method Draw on Deta Space, you can securely save, open, and share your designs in the cloud.</span>
|
||||
<p>These designs are available to you across your devices, over the internet, for free.</p><p> Click the button to try Method Draw on Deta Space!</p>
|
||||
<svg class="sponsor-logo" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 225" preserveAspectRatio="xMidYMid meet"><g clip-path="url(#deta_new_svg__clip0)"><path d="M111.14 0c61.38 0 111.139 49.705 111.139 111.02S172.52 222.04 111.14 222.04C49.759 222.04 0 172.335 0 111.02S49.759 0 111.14 0z" fill="#EF39A8"></path><path d="M111.404 21.676c49.689 0 89.97 40.237 89.97 89.873s-40.281 89.873-89.97 89.873-89.97-40.237-89.97-89.873 40.281-89.873 89.97-89.873z" fill="#BD399C"></path><path d="M111.404 45.465c36.536 0 66.154 29.586 66.154 66.084 0 36.497-29.618 66.083-66.154 66.083S45.25 148.046 45.25 111.549c0-36.498 29.618-66.084 66.154-66.084z" fill="#93388E"></path><path d="M110.874 65.555c24.844 0 44.985 20.119 44.985 44.937 0 24.817-20.141 44.936-44.985 44.936s-44.985-20.119-44.985-44.936c0-24.818 20.141-44.937 44.985-44.937z" fill="#6030A2"></path><path d="M339 170.836h49.915c23.004 0 40.365-5.842 51.867-17.745 11.719-11.902 17.579-25.752 17.579-41.983 0-16.23-5.86-30.296-17.579-42.199-11.502-11.902-28.863-17.745-51.867-17.745H339v119.672zm96.574-59.728c0 11.686-3.907 21.641-11.719 29.864-7.596 8.007-19.315 12.119-34.94 12.119h-27.779V68.909h27.779c15.625 0 27.344 4.112 34.94 12.119 7.812 8.223 11.719 18.178 11.719 30.08zm40.582 10.388c0 30.08 19.098 51.504 52.302 51.504 22.136 0 39.931-10.604 47.744-30.513h-24.523c-5.426 8.44-13.022 12.768-23.221 12.768-16.928 0-27.778-10.82-29.732-27.7h79.212v-6.059c0-29.648-19.966-51.505-50.782-51.505-31.034 0-51 21.208-51 51.505zm78.995-8.224h-56.208c2.388-14.932 11.936-25.535 28.213-25.535 15.843 0 25.608 10.387 27.995 25.535zm73.353 20.992V88.386h24.957v-16.23h-24.957V49h-21.702v23.155h-16.06v16.23h16.06v45.879c0 14.499 3.038 24.237 9.332 29.431 6.293 5.193 15.191 7.79 26.693 7.79 3.69 0 6.944-.216 9.766-.865l4.123-.866v-17.096l-4.123.433c-2.822.433-6.076.649-9.766.649-11.719 0-14.323-6.059-14.323-19.476zm93.101-63.624c-14.54 0-25.825 3.03-33.638 9.306-8.029 6.276-11.936 13.85-11.936 22.723h22.136c0-10.388 11.719-14.283 23.438-14.283 14.757 0 23.872 5.193 23.872 18.827v6.059h-26.693c-26.259 0-46.659 6.709-46.659 28.782 0 20.342 15.625 30.946 38.847 30.946 14.973 0 25.607-3.679 31.901-11.037l3.039-3.678c0 4.111 1.735 10.387 2.386 12.551H770v-1.731l-1.519-4.761c-.868-3.246-1.302-8.223-1.302-15.148v-38.088c0-28.998-16.493-40.468-45.574-40.468zm23.872 57.131c0 19.693-9.982 29.864-28.863 29.864-12.37 0-22.354-4.111-22.354-14.499 0-11.902 10.852-15.365 24.524-15.581l26.693.216z" fill="#000"></path></g><defs><clipPath id="deta_new_svg__clip0"><path fill="#fff" d="M0 0h770v222.04H0z"></path></clipPath></defs></svg>
|
||||
<div class="sponsor-disclaimer">Deta is a sponsor of Method Draw</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panels" class="tools_panel">
|
||||
|
|
@ -728,6 +747,7 @@
|
|||
<div id="shape_buttons"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/loading.js"></script>
|
||||
<!-- build:js all.js -->
|
||||
<script type="text/javascript" src="js/lib/jquery-3.5.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/lib/pathseg.js"></script>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,10 @@ MD.Menu = function(){
|
|||
$('#tool_group').on("click", editor.groupSelected);
|
||||
$('#tool_ungroup').on("click", editor.ungroupSelected);
|
||||
$('#tool_ungroup').on("click", editor.ungroupSelected);
|
||||
if (window.location.host !== "editor.method.ac")
|
||||
$('#modal_donate').hide();
|
||||
if (window.location.host !== "editor.method.ac") {
|
||||
$('#modal_donate').show();
|
||||
$('#sponsors').show();
|
||||
}
|
||||
// top dropdown menus
|
||||
$('.menu_title')
|
||||
.on('mousedown', function() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
(function(){
|
||||
const canvasContent = localStorage.getItem("md-canvasContent");
|
||||
if (!canvasContent) return;
|
||||
const parser = new DOMParser();
|
||||
const doc = parser.parseFromString(canvasContent, "image/svg+xml");
|
||||
const workarea = document.getElementById("workarea")
|
||||
workarea.appendChild(doc.documentElement);
|
||||
const svg = workarea.querySelector("svg");
|
||||
})();
|
||||
|
|
@ -898,7 +898,6 @@ window.methodDraw = function() {
|
|||
};
|
||||
|
||||
var clickSave = function(){
|
||||
console.log("hi")
|
||||
flash($('#file_menu'));
|
||||
svgCanvas.save();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ var svgWhiteList_ = {
|
|||
"circle": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "r", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
|
||||
"clipPath": ["class", "clipPathUnits", "id"],
|
||||
"defs": [],
|
||||
"style" : ["type"],
|
||||
"style" : ["type"],
|
||||
"desc": [],
|
||||
"ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
|
||||
"feGaussianBlur": ["class", "color-interpolation-filters", "id", "requiredFeatures", "stdDeviation"],
|
||||
|
|
|
|||
|
|
@ -119,4 +119,5 @@ state.set("canvasMode", state.get("canvasMode"));
|
|||
svgCanvas.setSvgString(state.get("canvasContent"));
|
||||
editor.paintBox.fill.setPaint(state.get("canvasFill"));
|
||||
editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
|
||||
editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
|
||||
editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
|
||||
document.body.classList.remove("loading");
|
||||
|
|
@ -48,7 +48,7 @@ function State(){
|
|||
// basic checks
|
||||
if (val === undefined || val === null) throw "wont save nuthin, " + key + " " + val;
|
||||
const isObject = dao.find(thing => thing.name === key).type === "object";
|
||||
localStorage.setItem("write" + "-" + key, isObject ? JSON.stringify(val) : val.toString());
|
||||
localStorage.setItem("md" + "-" + key, isObject ? JSON.stringify(val) : val.toString());
|
||||
}
|
||||
|
||||
function _getKey(name) {
|
||||
|
|
@ -69,7 +69,7 @@ function State(){
|
|||
};
|
||||
|
||||
function _getValue(key, def) {
|
||||
const item = localStorage.getItem("write-" + key) || def;
|
||||
const item = localStorage.getItem("md-" + key) || def;
|
||||
const archetype = dao.find(thing => thing.name === key.split("-")[0]);
|
||||
if (archetype) return archetype.clean(item);
|
||||
else throw "Unkown archetype";
|
||||
|
|
|
|||
|
|
@ -5758,11 +5758,13 @@ this.setSvgString = function(xmlString) {
|
|||
try {
|
||||
// convert string into XML document
|
||||
var newDoc = svgedit.utilities.text2xml(xmlString);
|
||||
this.styleToAttr(newDoc);
|
||||
this.prepareSvg(newDoc);
|
||||
|
||||
var batchCmd = new BatchCommand("Change Source");
|
||||
|
||||
newDoc = this.styleToAttr(newDoc);
|
||||
|
||||
|
||||
// remove old svg document
|
||||
var nextSibling = svgcontent.nextSibling;
|
||||
var oldzoom = svgroot.removeChild(svgcontent);
|
||||
|
|
|
|||
Loading…
Reference in New Issue