Node editor layout prototype

Developer
Fedor Troitsky
Size
7,410 Kb
Views
10,120
  1. Node editor layout prototype Previews
  2. Node editor layout prototype HTML Codes
  3. Node editor layout prototype CSS Codes
  4. Node editor layout prototype JS Codes

How do I make an node editor layout prototype?

What is a node editor layout prototype? How do you make a node editor layout prototype? This script and codes were developed by Fedor Troitsky on 11 November 2022, Friday.

Node editor layout prototype Previews
IQ Test

Node editor layout prototype - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Node editor layout prototype</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/evil-icons/1.9.0/evil-icons.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="layout"> <div class="layout__canvas"> <div class="layout__header"> <form class="search"> <input class="search__input" type="search" placeholder="Search"/> </form> <div class="info"><div data-icon="ei-question" data-size="s"></div>&nbsp;Hold 'space' to pan</div> </div> <div class="layout__footer"> <div class="shelf"> <a class="shelf__item" draggable="true">Text</a> <a class="shelf__item" draggable="true">Question</a> <a class="shelf__item" draggable="true">Query Email</a> <a class="shelf__item" draggable="true">Query URL</a> <a class="shelf__item" draggable="true">Query Number</a> <a class="shelf__item" draggable="true">Query Phone</a> </div> </div> </div> <div class="layout__drawer"> <div class="props"> <label for="">Title</label> <h2 class="props__heading">Node 4</h2> <label for="">Node type</label> <div class="props__select"> <div class="props__select-holder"> <div class="props__select-icon"> <div data-icon="ei-chevron-down" data-size="s"></div> </div> <select name="" id="props"> <option value="text">Text</option> <option value="question" selected="true">Question</option> <option value="queryEmail">Query Email</option> <option value="queryUrl">Query URL</option> <option value="queryNumber">Query Number</option> <option value="queryPhone">Query Phone</option> </select> </div> </div> <label for="">Answers</label> <div class="props__answers"> <div class="props__answer"> <div class="props__answer-text">Yes</div> <a class="props__answer-remove"><div data-icon="ei-trash" data-size="s"></div></a> </div> <div class="props__answer"> <div class="props__answer-text">No</div> <a class="props__answer-remove"><div data-icon="ei-trash" data-size="s"></div></a> </div> <div class="props__answer props__answer-add"> <a><div data-icon="ei-plus" data-size="s"></div> add...</a> </div> </div> </div> </div>
</div>
<div class="wrapper" id="wrapper"> <div class="wrapper__holder"> <div class="canvas"> <div class="node node1"> Node 1 <div class="node__out"> <div class="node__socket node__socket--on"></div> </div> </div> <div class="node node2"> Node 2 <div class="node__in"> <div class="node__socket node__socket--on"></div> </div> <div class="node__out"> <div class="node__socket node__socket--on"></div> <div class="node__socket node__socket--on"></div> </div> </div> <div class="node node3"> Node 3 <div class="node__in"> <div class="node__socket node__socket--on"></div> </div> <div class="node__out"> <div class="node__socket"></div> </div> </div> <div class="node node4 node--selected"> <div class="node__content"> <div class="node__holder"> <p>Node 4</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus harum velit praesentium iste voluptas beatae totam! Nostrum similique, perspiciatis non expedita laudantium molestiae, sunt aliquam modi quisquam nemo excepturi nulla.</p> </div> <div class="node__in"> <div class="node__socket node__socket--on"></div> </div> </div> <div class="node__answer"> Yes <div class="node__out"> <div class="node__socket node__socket--on"></div> </div> </div> <div class="node__answer"> No <div class="node__out"> <div class="node__socket node__socket--on"></div> </div> </div> </div> <div class="node node5"> Node 5 <div class="node__in"> <div class="node__socket node__socket--on"></div> </div> <div class="node__out"> <div class="node__socket"></div> </div> </div> <div class="node node6"> Node 6 <div class="node__in"> <div class="node__socket node__socket--on"></div> </div> <div class="node__out"> <div class="node__socket"></div> </div> </div> <svg class="connections" viewbox="0 0 2001 2001"> <defs> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#bef77e"/> <stop offset="100%" stop-color="#f77edd"/> </linearGradient> </defs> <path d="M260 130 C340 130, 320 230, 400 230" fill="transparent" stroke="url(#linear)"/> <path d="M560 220 C640 220, 620 130, 700 130" fill="transparent" stroke="url(#linear)"/> <path d="M560 240 C640 240, 620 333, 700 333" fill="transparent" stroke="url(#linear)"/> <path d="M1100 443 C1180 443, 1120 370, 1200 370" fill="transparent" stroke="url(#linear)"/> <path d="M1100 485 C1160 485, 1140 450, 1200 450" fill="transparent" stroke="url(#linear)"/> </svg> </div> </div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='http://davetayls.me/bower_components/jquery.kinetic/jquery.kinetic.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js'></script>
<script src='https://cdn.jsdelivr.net/evil-icons/1.9.0/evil-icons.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Node editor layout prototype - Script Codes CSS Codes

::-webkit-scrollbar { width: 2px; /* for vertical scrollbars */ height: 2px; /* for horizontal scrollbars */ backgroun: transparent;
}
::-webkit-scrollbar * { background: transparent;
}
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1);
}
* { box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
html, body { background: #303030;
}
.wrapper { width: 100vw; height: 100vh; overflow: scroll; position: relative;
}
.wrapper__holder { width: 2201px; position: relative; margin: 200px;
}
.layout { position: fixed; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100vh; width: 100vw; z-index: 1000; pointer-events: none;
}
.layout__header, .layout__footer { pointer-events: auto; width: 100%; min-height: 50px; position: absolute; top: 0; left: 0; opacity: 0.5; z-index: 10; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear;
}
.layout__header:before, .layout__footer:before { position: absolute; top: 0; left: 0; content: ''; display: block; height: 100%; width: 100%; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.4), transparent); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
}
.layout__header:hover, .layout__footer:hover { opacity: 1;
}
.layout__header:hover .search__input, .layout__footer:hover .search__input { background-color: white;
}
.layout__header { color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 0;
}
.layout__header:before { display: none;
}
.layout__footer { top: auto; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.layout__footer:before { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.layout__canvas { -webkit-box-flex: 1; -ms-flex: 1 0; flex: 1 0; position: relative; overflow: hidden;
}
.layout__drawer { -webkit-box-flex: 0; -ms-flex: 0 0 300px; flex: 0 0 300px; color: white; background: rgba(0, 0, 0, 0.85); pointer-events: auto;
}
.canvas { height: 2001px; width: 2001px; background-size: 20px 20px; background-image: -webkit-linear-gradient(left, #373737 1px, transparent 1px), -webkit-linear-gradient(top, #373737 1px, transparent 1px); background-image: linear-gradient(to right, #373737 1px, transparent 1px), linear-gradient(to bottom, #373737 1px, transparent 1px);
}
.node { position: absolute; width: 160px; height: 60px; border-radius: 5px; background: #1e1e1e; border: 1px solid #434343; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: default; z-index: 1;
}
.node__in, .node__out { position: absolute; width: 16px; height: 100%; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.node__in { left: -8px;
}
.node__out { right: -8px;
}
.node__socket { width: 16px; height: 16px; margin: 1px 0; border-radius: 100%; background: #1e1e1e; border: 1px solid #434343;
}
.node__in > .node__socket--on { background: #f77edd;
}
.node__out > .node__socket--on { background: #bef77e;
}
.node__content { padding: 5px 20px; position: relative; -webkit-box-flex: 1; -ms-flex: 1 0 0; flex: 1 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; min-height: 60px;
}
.node__content:before { position: absolute; top: auto; left: 0; bottom: 0; content: ''; display: block; height: 30px; width: 100%; background-image: -webkit-linear-gradient(bottom, #1e1e1e, rgba(30, 30, 30, 0)); background-image: linear-gradient(to top, #1e1e1e, rgba(30, 30, 30, 0)); z-index: 2;
}
.node__holder { display: block; display: block; overflow: hidden; position: relative; width: 100%;
}
.node__answer { position: relative; padding: 10px 20px; width: 100%; border-top: 1px solid #434343;
}
.node.ui-selected { border-color: yellow;
}
.node.ui-selecting { border-color: red;
}
.node1 { top: 100px; left: 100px;
}
.node2 { top: 200px; left: 400px;
}
.node3 { top: 100px; left: 700px;
}
.node4 { top: 240px; left: 700px; min-height: 200px; min-width: 260px; height: 260px; width: 400px;
}
.node5 { top: 340px; left: 1200px;
}
.node6 { top: 420px; left: 1200px;
}
.connections { width: 2001px; height: 2001px; position: absolute; top: 0; left: 0; stroke: #bef77e; stroke-width: 2px;
}
.search { position: relative; z-index: 1;
}
.search__input { outline: none; background: rgba(255, 255, 255, 0); border: 1px solid transparent; height: 30px; padding: 3px; display: inline-block; -webkit-transition: background 0.15s linear; transition: background 0.15s linear;
}
.shelf { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 2; color: white; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.shelf__item { background: black; color: white; display: inline-block; border-radius: 3px; margin: 0 2px; padding: 10px 20px; cursor: pointer; text-decoration: none; font-size: small; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.props { width: 100%; height: 100%; padding: 20px;
}
.props__heading { margin: 0;
}
.props label { display: block; font-size: small; color: grey; text-transform: uppercase; margin: 20px 0 4px;
}
.props__select { position: relative; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.props__select select { width: 100%; outline: 0; display: inline-block; background: transparent; border: 0; margin: 0; color: white; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 10px; cursor: pointer;
}
.props__select-holder { width: 100%; height: 100%; border-radius: 4px; border: 1px solid grey;
}
.props__select-holder:hover { background: rgba(255, 255, 255, 0.1);
}
.props__select-icon { position: absolute; height: 100%; top: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: grey; padding: 0 5px; cursor: pointer; pointer-events: none;
}
.props__answers { border-radius: 4px; border: 1px solid grey;
}
.props__answer { border-top: 1px solid grey; display: -webkit-box; display: -ms-flexbox; display: flex;
}
.props__answer:first-child { border: none;
}
.props__answer-text { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 10px;
}
.props__answer-remove { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: grey; cursor: pointer; padding: 0 5px;
}
.props__answer-remove:hover { background: #ff0033; color: white;
}
.props__answer-add { font-size: small; color: grey; cursor: pointer; height: 100%;
}
.props__answer-add a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px;
}
.props__answer-add:hover { background: rgba(255, 255, 255, 0.1);
}
.info { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 5px; font-size: small; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: grey;
}

Node editor layout prototype - Script Codes JS Codes

$('#wrapper').scrollTo(200, 200);
$('#wrapper').kinetic('detach');
var allowed = true;
$(document).ready(
function () { // var selected = $([]), offset = {top:0, left:0};
$( ".node" ).resizable({grid:20}).draggable({ grid:[20, 20], // start: function(ev, ui) { // if ($(this).hasClass("ui-selected")){ // selected = $(".ui-selected").each(function() { // var el = $(this); // el.data("offset", el.offset()); // }); // } // else { // selected = $([]); // $(".node").removeClass("ui-selected"); // } // offset = $(this).offset(); // }, // drag: function(ev, ui) { // var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left; // // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each. // selected.not(this).each(function() { // // create the variable for we don't need to keep calling $("this") // // el = current element we are on // // off = what position was this element at when it was selected, before drag // var el = $(this), off = el.data("offset"); // el.css({top: off.top + dt, left: off.left + dl}); // }); // }
});
$('.canvas').selectable({filter: '.node'});
// manually trigger the "select" of clicked elements
$('.canvas > .node').click( function(e) { if(allowed) { if ($(this).hasClass("ui-selected")) { $(this).removeClass("ui-selected"); } else { $('.node').removeClass("ui-selected"); $(this).addClass("ui-selected"); } $('.canvas').data("selectable")._mouseStop(null);
}
}); $(document).bind('keydown', 'space', function (e) { e.preventDefault(); window.requestAnimationFrame( function() { if (!allowed) return; allowed = false; $('#wrapper').kinetic('attach'); $('.canvas').selectable("disable"); $('.node').draggable("disable"); $('.layout').fadeOut(); } ); }); $(document).bind('keyup', 'space', function () { function showBack () { allowed = true; $('#wrapper').kinetic('detach'); $('.layout').fadeIn(); $('.canvas').selectable("enable"); $('.node').draggable("enable"); } // showBack(); setTimeout(function(){showBack()}, 300); return false; });
});
// this creates the selected variable
// we are going to store the selected objects in here
// // starting position of the divs
// var i = 0;
// $('.node').each( function() {
// $(this).css({
// top: i * 42
// });
// i++;
// });
Node editor layout prototype - Script Codes
Node editor layout prototype - Script Codes
Home Page Home
Developer Fedor Troitsky
Username ftroitsky
Uploaded November 11, 2022
Rating 3
Size 7,410 Kb
Views 10,120
Do you need developer help for Node editor layout prototype?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fedor Troitsky (ftroitsky) Script Codes
Name
A Pen by Fedor Troitsky
A Pen by Fedor Troitsky
Responsive css icon
Cylon css loader
Simple label
Pacman css loader
Svg animated logo for Fetchee
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!