wip
This commit is contained in:
27
demo/.gowebbuild.json
Normal file
27
demo/.gowebbuild.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"Watch": {
|
||||
"Path": "./src"
|
||||
},
|
||||
"Serve": {
|
||||
"Path": "./dist"
|
||||
},
|
||||
"Copy": [
|
||||
{
|
||||
"Src": "./index.html",
|
||||
"Dest": "./dist"
|
||||
}
|
||||
],
|
||||
"ESBuild": {
|
||||
"EntryPoints": [
|
||||
"./src/demo.js"
|
||||
],
|
||||
"Outdir": "./dist",
|
||||
"Sourcemap": 1,
|
||||
"Format": 3,
|
||||
"Splitting": true,
|
||||
"Platform": 0,
|
||||
"Bundle": true,
|
||||
"Write": true,
|
||||
"LogLevel": 3
|
||||
}
|
||||
}
|
||||
992
demo/dist/demo.js
vendored
Normal file
992
demo/dist/demo.js
vendored
Normal file
File diff suppressed because one or more lines are too long
27
demo/dist/index.html
vendored
Normal file
27
demo/dist/index.html
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Demo</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
|
||||
<script type="module" src="./demo.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
color: #cccccc;
|
||||
background: #1d1d1d;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<demo-app></demo-app>
|
||||
</body>
|
||||
</html>
|
||||
27
demo/index.html
Normal file
27
demo/index.html
Normal file
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Demo</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap" rel="stylesheet">
|
||||
<script type="module" src="./demo.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Source Code Pro', monospace;
|
||||
color: #cccccc;
|
||||
background: #1d1d1d;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<demo-app></demo-app>
|
||||
</body>
|
||||
</html>
|
||||
86
demo/src/demo.js
Normal file
86
demo/src/demo.js
Normal file
@ -0,0 +1,86 @@
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2022 trading_peter
|
||||
This program is available under Apache License Version 2.0
|
||||
*/
|
||||
|
||||
import '../../tp-logic-canvas.js';
|
||||
import './simple-block.js';
|
||||
import { LitElement, html, css } from 'lit';
|
||||
|
||||
class DemoApp extends LitElement {
|
||||
static get styles() {
|
||||
return [
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
tp-logic-canvas {
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
background: #040a13;
|
||||
}
|
||||
`
|
||||
];
|
||||
}
|
||||
|
||||
render() {
|
||||
const { blocks, connections } = this;
|
||||
|
||||
return html`
|
||||
<tp-logic-canvas .connections=${connections}>
|
||||
${blocks.map(block => this.renderBlock(block))}
|
||||
</tp-logic-canvas>
|
||||
`;
|
||||
}
|
||||
|
||||
renderBlock(block) {
|
||||
switch (block.type) {
|
||||
case 'simple-block':
|
||||
return html`
|
||||
<simple-block .title=${block.id} .left=${block.left} .top=${block.top} .inputs=${block.inputs} .outputs=${block.outputs}></simple-block>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
blocks: { type: Array },
|
||||
connections: { type: Array },
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.blocks = [
|
||||
{
|
||||
id: 'block1',
|
||||
type: 'simple-block',
|
||||
left: 200,
|
||||
top: 200,
|
||||
inputs: [
|
||||
{ name: 'inputA' },
|
||||
{ name: 'inputB' }
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'block2',
|
||||
type: 'simple-block',
|
||||
left: 40,
|
||||
top: 40,
|
||||
outputs: [
|
||||
{ name: 'outputA' },
|
||||
],
|
||||
}
|
||||
];
|
||||
|
||||
this.connections = [
|
||||
{ srcBlock: 'block2', srcOutput: 'outputA', destBlock: 'block1', destInput: 'inputB' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('demo-app', DemoApp);
|
||||
43
demo/src/simple-block.js
Normal file
43
demo/src/simple-block.js
Normal file
@ -0,0 +1,43 @@
|
||||
/**
|
||||
@license
|
||||
Copyright (c) 2022 trading_peter
|
||||
This program is available under Apache License Version 2.0
|
||||
*/
|
||||
|
||||
import { TpLcBlock } from '../../tp-lc-block';
|
||||
import { html, css } from 'lit';
|
||||
|
||||
class SimpleBlock extends TpLcBlock {
|
||||
static get styles() {
|
||||
return [
|
||||
...TpLcBlock.blockStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: #11406b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
`
|
||||
];
|
||||
}
|
||||
|
||||
renderContent() {
|
||||
const { title } = this;
|
||||
|
||||
return html`
|
||||
${title}<br>
|
||||
${title}<br>
|
||||
${title}<br>
|
||||
${title}<br>
|
||||
${title}<br>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
title: { type: String },
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('simple-block', SimpleBlock);
|
||||
Reference in New Issue
Block a user