This is my own little framework based on webpack including typescript, static components and a compiler which compiles all files into 3.
- Create a repository based on this template
- Run
npm run startto watch the files - Run Liveserver on
/dist/index.html
- Run
npm run build - When everything is done, you'll see the project at
/dist
- Create a directory at
/src/components - Create the
/src/components/{name}/{name}.component.tsfile - Create the
/src/components/{name}/{name}.component.htmlfile - Paste this into the Typescript file and swap {name} with your component name:
import { Component } from '../../core/Component';
import template from './{name}.component.html';
@Component({
tag: 'app-{name}',
template,
})
export class {Name}Component { }- Add the component to the array at the
ComponentManager.managecall at/src/scripts/main.ts:
import "../styles/styles";
import { ComponentManager } from "../core/ComponentManager";
import { HeaderComponent } from "../components/header/header.component";
import { FooterComponent } from "../components/footer/footer.component";
import { BodyComponent } from "../components/body/body.component";
ComponentManager.manage([
HeaderComponent,
FooterComponent,
BodyComponent,
]);- Add the
madu-template-element, to your component html file. (If you changed the name in themadu-configuration.jsonuse that instead) - Add content to the used component.
Example:
<!--footer.component.html-->
<footer>
<p>This is an example footer</p>
<madu-template></madu-template>
</footer><!--index.html-->
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MaduChat</title>
</head>
<body>
<app-footer>
Everything here will be pasted into the madu-template component
</app-footer>
</body>
</html>- Create a
style-Tag at the end of your component html file. - Use
:scopeas pseudo element before you select your element
Example:
<footer>
<p>© Madu - <span id="year"></span></p>
</footer>
<style>
:scope footer {
display: flex;
align-items: center;
justify-content: center;
}
:scope p {
color: red;
}
</style>- Implement the
OnInitinterface - Add the
maduOnInitmethod to your component class. The first parameter is the HTMLElement that you created to paste your component/component.html into. - For example you can get every element of the single component and edit them.
Example:
@Component({
tag: 'app-footer',
template,
})
export class FooterComponent implements OnInit {
maduOnInit(element: HTMLElement): void {
const yearEl: HTMLElement = element.querySelector('#year');
yearEl.innerHTML = new Date().getFullYear().toString();
}
}- Create a canvas in the index.html or a component
<canvas id="canvas" width="720" height="420"></canvas>- If you want to use images, add them to the index.html and add following css to your code:
<!--index.html-->
<div class="canvas-images">
<img src="path/to/image.png" id="">
</div>// main.scss
div.canvas-images {
display: none;
}- Create a
Canvasinstance with the HTMLCanvasElement
import { Canvas } from "../core/canvas/Canvas";
const canvasElement: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById('canvas');
const canvas: Canvas = new Canvas(canvasElement);- If you dont, add the element image to your index.html like step 2 at "How to use canvas"
- Create a
CanvasElementinstance:
import { CanvasElement } from "../core/canvas/CanvasElement";
const x: number = 200;
const y: number = 200;
const image: HTMLImageELement = <HTMLImageElement>document.getElementById('madupng');
const width: number = 50;
const height: number = 50;
const duck1: CanvasElement = new CanvasElement(x, y, image, width, height);- Add the element to your canvas:
canvas.addElement(duck1);- You can edit the rendering element using the
CanvasElementinstance
- Create a
CanvasLineinstance:
import { CanvasCoords } from "../core/canvas/CanvasCoords";
import { CanvasLine } from './../core/canvas/CanvasLine';
const coords1: CanvasCoords = new CanvasCoords(20, 20);
const coords2: CanvasCoords = new CanvasCoords(30, 40);
const width: number = 20;
const style: string = 'yellow';
const line: CanvasLine = new CanvasLine([coords1, coords2], width, style);- Add the line to your canvas:
canvas.addLine(line);- You can edit the rendering line using the
CanvasLineinstance
- Call the
addLineBetweenElementsmethod on the canvas object
import { CanvasElement } from "../core/canvas/CanvasElement";
import { CanvasLine } from './../core/canvas/CanvasLine';
const duck1: CanvasElement = new CanvasElement(200, 200, <HTMLImageElement>document.getElementById('madupng'), 50, 50);
const duck2: CanvasElement = new CanvasElement(550, 150, <HTMLImageElement>document.getElementById('madupng'), 50, 50);
const line: CanvasLine = canvas.addLineBetweenElements(duck1, duck2, 10, 'yellow');- You can edit the rendering line using the
CanvasLineinstance
Firstly lines have automatically priority 0. Elements have automatically priority 1. That means that every elemement is automatically over every line. But if you want to change the priority of an element to a higher one to render it over everything, you can change the priority every time you want to.
- When creating an element or line, you can set the priority in the constructor
const duck1: CanvasElement = new CanvasElement(200, 200, <HTMLImageElement>document.getElementById('madupng'), 50, 50, 2);
const duck2: CanvasElement = new CanvasElement(550, 150, <HTMLImageElement>document.getElementById('madupng'), 50, 50, 6);
const line: CanvasLine = canvas.addLineBetweenElements(duck1, duck2, 10, 'yellow', 200);In this example the line will be rendered over duck2 and duck2 over duck1.
- Every time you want to set the priority of an element or line you can change the priority of the object
duck1.priority = 2;
duck2.priority = 3;
line.priority = 1;
In this example duck2 will be rendered over duck1 and duck1 over the line.
- After all, you call the render method on the canvas. It will render every elements and lines how often it can.
canvas.render();