Skip to content

Instantly share code, notes, and snippets.

@simkimsia

simkimsia/index-spell-home-still-fails.html

Created August 7, 2021 09:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save simkimsia/2640f3a5b2753fc40450dba25d1c2ab6 to your computer and use it in GitHub Desktop.
Save simkimsia/2640f3a5b2753fc40450dba25d1c2ab6 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstrate that the import without Home will cause failure
Raw
index-spell-home-still-fails.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
<link rel="stylesheet" type="text/css" href="beautiful.css" />
<header>
<h2>Test workflows</h2>
<!-- <div class="github-link"><a href="https://github.com/jerosoler/Drawflow" target="_blank"><i class="fab fa-github fa-3x"></i></a></div>
<div class="them-edit-link"><a href="https://jerosoler.github.io/drawflow-theme-generator/" target="_blank">🎨</a></div> -->
</header>
<div class="wrapper">
<div class="col">
<!-- end of class=col -->
</div>
<div class="col-right">
<div class="menu">
<ul>
<li onclick="editor.changeModule('mod1'); changeModule(event);" class="selected">Mod 1</li>
<li onclick="editor.changeModule('mod2'); changeModule(event);">Mod 2</li>
<li onclick="editor.changeModule('mod3'); changeModule(event);">Mod 3</li>
</ul>
</div>
<div id="drawflow" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- end of id=drawflow -->
</div>
<!-- end of class=col-right -->
</div>
<!-- end of class=wrapper -->
</div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
// reroute always before start and import
editor.reroute = true;
editor.start();
// editor.addModule("DevTask");
const dataToImport = {
"drawflow":{
"mod1":{
"data":{
}
},
"home":{
"data":{
}
},
}
};
try {
editor.import(dataToImport);
alert("success!");
} catch (err) {
alert("import fails");
}
/*
var welcome = `
<div>
<div class="title-box">👏 Welcome!!</div>
<div class="box">
<p>Simple flow library <b>demo</b>
<a href="https://github.com/jerosoler/Drawflow" target="_blank">Drawflow</a> by <b>Jero Soler</b></p><br>
<p>Multiple input / outputs<br>
Data sync nodes<br>
Import / export<br>
Modules support<br>
Simple use<br>
Type: Fixed or Edit<br>
Events: view console<br>
Pure Javascript<br>
</p>
<br>
<p><b><u>Shortkeys:</u></b></p>
<p>🎹 <b>Delete</b> for remove selected<br>
💠 Mouse Left Click == Move<br>
❌ Mouse Right == Delete Option<br>
🔍 Ctrl + Wheel == Zoom<br>
📱 Mobile support<br>
...</p>
</div>
</div>
`;
editor.addNode('welcome', 0, 0, 50, 50, 'welcome', {}, welcome );
*/
// Events!
editor.on('nodeCreated', function(id) {
console.log("Node created " + id);
})
editor.on('nodeRemoved', function(id) {
console.log("Node removed " + id);
})
editor.on('nodeSelected', function(id) {
console.log("Node selected " + id);
})
editor.on('moduleCreated', function(name) {
console.log("Module Created " + name);
})
editor.on('moduleChanged', function(name) {
console.log("Module Changed " + name);
})
</script>
</body>
</html>
Raw
index-with-Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
<link rel="stylesheet" type="text/css" href="beautiful.css" />
<header>
<h2>Test workflows</h2>
<!-- <div class="github-link"><a href="https://github.com/jerosoler/Drawflow" target="_blank"><i class="fab fa-github fa-3x"></i></a></div>
<div class="them-edit-link"><a href="https://jerosoler.github.io/drawflow-theme-generator/" target="_blank">🎨</a></div> -->
</header>
<div class="wrapper">
<div class="col">
<!-- end of class=col -->
</div>
<div class="col-right">
<div class="menu">
<ul>
<li onclick="editor.changeModule('mod1'); changeModule(event);" class="selected">Mod 1</li>
<li onclick="editor.changeModule('mod2'); changeModule(event);">Mod 2</li>
<li onclick="editor.changeModule('mod3'); changeModule(event);">Mod 3</li>
</ul>
</div>
<div id="drawflow" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- end of id=drawflow -->
</div>
<!-- end of class=col-right -->
</div>
<!-- end of class=wrapper -->
</div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
// reroute always before start and import
editor.reroute = true;
editor.start();
// editor.addModule("DevTask");
const dataToImport = {
"drawflow":{
"mod1":{
"data":{
}
},
"Home":{
"data":{
}
},
}
};
try {
editor.import(dataToImport);
alert("success!");
} catch (err) {
alert("import fails");
}
/*
var welcome = `
<div>
<div class="title-box">👏 Welcome!!</div>
<div class="box">
<p>Simple flow library <b>demo</b>
<a href="https://github.com/jerosoler/Drawflow" target="_blank">Drawflow</a> by <b>Jero Soler</b></p><br>
<p>Multiple input / outputs<br>
Data sync nodes<br>
Import / export<br>
Modules support<br>
Simple use<br>
Type: Fixed or Edit<br>
Events: view console<br>
Pure Javascript<br>
</p>
<br>
<p><b><u>Shortkeys:</u></b></p>
<p>🎹 <b>Delete</b> for remove selected<br>
💠 Mouse Left Click == Move<br>
❌ Mouse Right == Delete Option<br>
🔍 Ctrl + Wheel == Zoom<br>
📱 Mobile support<br>
...</p>
</div>
</div>
`;
editor.addNode('welcome', 0, 0, 50, 50, 'welcome', {}, welcome );
*/
// Events!
editor.on('nodeCreated', function(id) {
console.log("Node created " + id);
})
editor.on('nodeRemoved', function(id) {
console.log("Node removed " + id);
})
editor.on('nodeSelected', function(id) {
console.log("Node selected " + id);
})
editor.on('moduleCreated', function(name) {
console.log("Module Created " + name);
})
editor.on('moduleChanged', function(name) {
console.log("Module Changed " + name);
})
</script>
</body>
</html>
Raw
index-without-Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
<link rel="stylesheet" type="text/css" href="beautiful.css" />
<header>
<h2>Test workflows</h2>
<!-- <div class="github-link"><a href="https://github.com/jerosoler/Drawflow" target="_blank"><i class="fab fa-github fa-3x"></i></a></div>
<div class="them-edit-link"><a href="https://jerosoler.github.io/drawflow-theme-generator/" target="_blank">🎨</a></div> -->
</header>
<div class="wrapper">
<div class="col">
<!-- end of class=col -->
</div>
<div class="col-right">
<div class="menu">
<ul>
<li onclick="editor.changeModule('mod1'); changeModule(event);" class="selected">Mod 1</li>
<li onclick="editor.changeModule('mod2'); changeModule(event);">Mod 2</li>
<li onclick="editor.changeModule('mod3'); changeModule(event);">Mod 3</li>
</ul>
</div>
<div id="drawflow" ondrop="drop(event)" ondragover="allowDrop(event)">
<!-- end of id=drawflow -->
</div>
<!-- end of class=col-right -->
</div>
<!-- end of class=wrapper -->
</div>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
// reroute always before start and import
editor.reroute = true;
editor.start();
// editor.addModule("DevTask");
const dataToImport = {
"drawflow":{
"mod1":{
"data":{
}
},
// "Home":{
// "data":{
// }
// },
}
};
try {
editor.import(dataToImport);
alert("success!");
} catch (err) {
alert("import fails");
}
/*
var welcome = `
<div>
<div class="title-box">👏 Welcome!!</div>
<div class="box">
<p>Simple flow library <b>demo</b>
<a href="https://github.com/jerosoler/Drawflow" target="_blank">Drawflow</a> by <b>Jero Soler</b></p><br>
<p>Multiple input / outputs<br>
Data sync nodes<br>
Import / export<br>
Modules support<br>
Simple use<br>
Type: Fixed or Edit<br>
Events: view console<br>
Pure Javascript<br>
</p>
<br>
<p><b><u>Shortkeys:</u></b></p>
<p>🎹 <b>Delete</b> for remove selected<br>
💠 Mouse Left Click == Move<br>
❌ Mouse Right == Delete Option<br>
🔍 Ctrl + Wheel == Zoom<br>
📱 Mobile support<br>
...</p>
</div>
</div>
`;
editor.addNode('welcome', 0, 0, 50, 50, 'welcome', {}, welcome );
*/
// Events!
editor.on('nodeCreated', function(id) {
console.log("Node created " + id);
})
editor.on('nodeRemoved', function(id) {
console.log("Node removed " + id);
})
editor.on('nodeSelected', function(id) {
console.log("Node selected " + id);
})
editor.on('moduleCreated', function(name) {
console.log("Module Created " + name);
})
editor.on('moduleChanged', function(name) {
console.log("Module Changed " + name);
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment