8000 added example · joshbrew/graphscript@8de4b97 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8de4b97

Browse files
joshbrewjoshbrew
committed
added example
1 parent 81827e6 commit 8de4b97

File tree

9 files changed

+310
-0
lines changed

9 files changed

+310
-0
lines changed

‎examples/basics/loaders/web_components/components/draggable.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
//https://www.w3schools.com/howto/howto_js_draggable.asp
2+
// Make the DIV element draggable:
3+
4+
export function makeDraggable(elmnt) {
5+
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
6+
if (document.getElementById(elmnt.id + "header")) {
7+
// if present, the header is where you move the DIV from:
8+
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
9+
} else {
10+
// otherwise, move the DIV from anywhere inside the DIV:
11+
elmnt.onmousedown = dragMouseDown;
12+
}
13+
14+
function dragMouseDown(e) {
15+
e = e || window.event;
16+
e.preventDefault();
17+
// get the mouse cursor position at startup:
18+
pos3 = e.clientX;
19+
pos4 = e.clientY;
20+
document.onmouseup = closeDragElement;
21+
// call a function whenever the cursor moves:
22+
document.onmousemove = elementDrag;
23+
}
24+
25+
function elementDrag(e) {
26+
e = e || window.event;
27+
e.preventDefault();
28+
// calculate the new cursor position:
29+
pos1 = pos3 - e.clientX;
30+
pos2 = pos4 - e.clientY;
31+
pos3 = e.clientX;
32+
pos4 = e.clientY;
33+
// set the element's new position:
34+
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
35+
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
36+
}
37+
38+
function closeDragElement() {
39+
// stop moving when mouse button is released:
40+
document.onmouseup = null;
41+
document.onmousemove = null;
42+
}
43+
}

‎examples/basics/loaders/web_components/components/node.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.node { /* component css tags should probably be sufficiently unique like other component libraries, or just use inline styles */
2+
text-align:center;
3+
position: absolute;
4+
left: 50%;
5+
width:100%;
6+
top: 50%;
7+
transform: translate(-50%, -50%);
8+
}

‎examples/basics/loaders/web_components/components/node.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class="node">
2+
Drag Me!
3+
</div>

‎examples/basics/loaders/web_components/components/node.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { makeDraggable } from "./draggable";
2+
3+
//@ts-ignore
4+
import style from './node.css'; //in esbuild, set loader:{'.css':'text' }
5+
//@ts-ignore
6+
import html from './node.html'; //add to loader: {...'.html':'text'}
7+
8+
export class NodeHTML {
9+
10+
tagName='graph-node';
11+
12+
__template = html;
13+
__css = style;
14+
15+
draggable=true;
16+
17+
style={
18+
position:'absolute',
19+
height:'60px',
20+
flex:'flex',
21+
width:'120px',
22+
borderRadius:'10%',
23+
backgroundColor:'lightblue',
24+
cursor:'pointer'
25+
};
26+
27+
__onconnected = function() {
28+
console.log(this);
29+
makeDraggable(this); //the htmlElement properties are bound to 'this' as well as 'this.__props' so you can manipulate the node directly
30+
};
31+
32+
}

‎examples/basics/loaders/web_components/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
</head>
6+
<body>
7+
<script src="dist/index.js">
8+
</script>
9+
</body>
10+
</html>
11+

‎examples/basics/loaders/web_components/index.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {Graph, wchtmlloader} from '../graphscript/index'
2+
import { NodeHTML } from './components/node';
3+
4+
new Graph({
5+
roots:{
6+
draggable:NodeHTML
7+
},
8+
loaders:{
9+
wchtmlloader
10+
}
11+
});

‎examples/basics/loaders/web_components/package-lock.json

Lines changed: 129 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/basics/loaders/web_components/package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "tinybuildapp5363",
3+
"version": "0.0.0",
4+
"description": "Barebones esbuild and test node server implementation. For building",
5+
"main": "index.js",
6+
"type": "module",
7+
"scripts": {
8+
"start": "tinybuild",
9+
"build": "tinybuild build",
10+
"serve": "tinybuild serve",
11+
"init": "node tinybuild/init.js",
12+
"concurrent": "concurrently \\'npm run python\\' \\'npm start\\'",
13+
"dev": "npm run pip && npm i --save-dev concurrently && npm i --save-dev nodemon && npm run concurrent",
14+
"startdev": "nodemon --exec \\'node tinybuild.js\\' -e ejs,js,ts,jsx,tsx,css,html,jpg,png,scss,txt,csv",
15+
"python": "python python/server.py",
16+
"pip": "pip install quart && pip install websockets",
17+
"pwa": "npm i workbox-cli && workbox generateSW node_server/pwa/workbox-config.js && npm run build && npm start"
18+
},
19+
"keywords": [
20+
"esbuild"
21+
],
22+
"author": "",
23+
"license": "AGPL-3.0-or-later",
24+
"dependencies": {
25+
"graphscript": "^0.2.80"
26+
},
27+
"nodemonConfig": {
28+
"env": {
29+
"NODEMON": true
30+
},
31+
"ignore": [
32+
"dist/",
33+
".temp/"
34+
]
35+
}
36+
}

‎examples/basics/loaders/web_components/tinybuild.config.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const config = {
2+
bundler: { //esbuild settings, set false to skip build step or add bundle:true to config object to only bundle (alt methods)
3+
entryPoints: [ //entry point file(s). These can include .js, .mjs, .ts, .jsx, .tsx, or other javascript files. Make sure your entry point is a ts file if you want to generate types
4+
"index.ts"
5+
],
6+
outfile: "dist/index", //exit point file, will append .js as well as indicators like .esm.js, .node.js for other build flags
7+
//outdir:[] //exit point files, define for multiple bundle files
8+
bundleBrowser: true, //create plain js build? Can include globals and init scripts
9+
bundleESM: false, //create esm module js files
10+
bundleTypes: false, //create .d.ts files, the entry point must be a typescript file! (ts, tsx, etc)
11+
bundleNode: false, //create node platform plain js build, specify platform:'node' to do the rest of the files
12+
bundleHTML: false, //wrap the first entry point file as a plain js script in a boilerplate html file, frontend scripts can be run standalone like a .exe! Server serves this as start page if set to true.
13+
minify: true,
14+
sourcemap: false,
15+
loader:{'.html':'text', '.css':'text' }
16+
//globalThis:null //'mymodule'
17+
//globals:{'index.js':['Graph']}
18+
//init:{'index.js':function(bundle) { console.log('prepackaged bundle script!', bundle); }.toString(); } //pass stringified functions in to init bundle scripts in a custom way (e.g. for quick rebundling)
19+
},
20+
server: { //node server settings, set false to skip server step or add serve:true to config object to only serve (alt methods)
21+
debug: false,
22+
protocol: "http", //'http' or 'https'. HTTPS required for Nodejs <---> Python sockets. If using http, set production to False in python/server.py as well
23+
host: "localhost", //'localhost' or '127.0.0.1' etc.
24+
port: 8080, //e.g. port 80, 443, 8000
25+
startpage: "index.html", //home page
26+
socket_protocol: "ws", //frontend socket protocol, wss for served, ws for localhost
27+
hotreload: 5000, //hotreload websocket server port
28+
//watch: ['../'], //watch additional directories other than the current working directory
29+
pwa: "dist/service-worker.js", //pwa mode? Injects service worker registry code in (see pwa README.md)
30+
python: false,//7000, //quart server port (configured via the python server script file still)
31+
python_node: 7001, //websocket relay port (relays messages to client from nodejs that were sent to it by python)
32+
errpage: "node_modules/tinybuild/tinybuild/node_server/other/404.html", //default error page, etc.
33+
certpath: "node_modules/tinybuild/tinybuild/node_server/ssl/cert.pem", //if using https, this is required. See cert.pfx.md for instructions
34+
keypath: "node_modules/tinybuild/tinybuild/node_server/ssl/key.pem" //if using https, this is required. See cert.pfx.md for instructions
35+
}
36+
}
37+
export default config; //module.exports = config; //es5

0 commit comments

Comments
 (0)
0