Editor dde texto en angulas (HTML)

 Hola , los tiempo cambian  y pues bueno en un proyecto nesesite un editor de texto, en mis recuerdo  pensaba que existian varios, estos como librerias .js, claro en tiempo del auje de PHP

Pero hoy en día la cosa cambio a mal cada libreria requiere integración y unas hasta pagos si bien las gratuitas se agradecen no logre acomodarla para lo que queria intente de 1000 formas y nada pero bueno....

Al final opte por una propiea asi tambien comparto esta para quien nesesite un editor sencillo de texto pero que retorne HTML por debajo sin tantan cosa 

En un componente se  crea el siguiente código:

textHtml: string = "";

// Editor-----------

@ViewChild('editor') editor!: ElementRef;

format(command: string) {

document.execCommand(command, false);

this.editor.nativeElement.focus();

}

initEditor() {

this.editor.nativeElement.innerHTML = this.textHtml;

}

changeFontFamily(event: Event) {

const font = (event.target as HTMLSelectElement).value;

document.execCommand('fontName', false, font);

this.editor.nativeElement.focus();

}

changeFontSize(event: Event) {

const size = (event.target as HTMLSelectElement).value;

document.execCommand('fontSize', false, size);

this.editor.nativeElement.focus();

}

changeTextColor(event: Event) {

const color = (event.target as HTMLInputElement).value;

document.execCommand('foreColor', false, color);

this.editor.nativeElement.focus();

}

insertTable() {

const table = document.createElement('table');

table.style.width = '100%';

table.style.borderCollapse = 'collapse';

for (let i = 0; i < 3; i++) {

const row = table.insertRow();

for (let j = 0; j < 3; j++) {

const cell = row.insertCell();

cell.innerHTML = '';

cell.style.border = '1px solid #000';

cell.style.padding = '8px';

}

}

const selection = window.getSelection();

const range = selection!.getRangeAt(0);

range.insertNode(table);

this.editor.nativeElement.focus();

}

onInput(event: Event) {

const content = this.editor.nativeElement.innerHTML;

this.textHtml = content;

}

En el html del componenete:

<div class="editor-toolbar">

<button (click)="format('bold')">Negrita</button>

<button (click)="format('underline')">Subrayado</button>

<button (click)="format('justifyLeft')">Alinear Izquierda</button>

<button (click)="format('justifyCenter')">Centrar</button>

<button (click)="format('justifyRight')">Alinear Derecha</button>

<button (click)="format('justifyFull')">Justificar</button>

<select (change)="changeFontFamily($event)">

<option value="">Seleccionar Fuente</option>

<option value="Arial">Arial</option>

<option value="Courier New">Courier New</option>

<option value="Georgia">Georgia</option>

<option value="Times New Roman">Times New Roman</option>

<option value="Verdana">Verdana</option>

</select>

<select (change)="changeFontSize($event)">

<option value="">Seleccionar Tamaño</option>

<option value="2">2</option>

<option value="4">4</option>

<option value="6">6</option>

<option value="8">8</option>

<option value="10">10</option>

</select>

<input type="color" (input)="changeTextColor($event)" title="Cambiar color de texto" />

<br>

<button (click)="insertTable()">Insertar Tabla</button>

Fila<input type="number" value="1" min="1" max="5">

Columnas<input type="number" value="1" min="1" max="5">

</div>

<div class="editor" contenteditable="true" (input)="onInput($event)" #editor></div>

NOTA: en caso de cargar data en el editor recordar que este este ya instanciado para ello en el componente use: this.textHtml = this.data.contenido;

setTimeout(() => {

this.initEditor();

}, 400);

Crea una cotización Para tu empresa

Este desarrollo en HTML con JAVASCRIPT

Es muy sencillo y guarda archivos en local y asi mismo carga esos archivos lo dejo publico para quien nesesite una solicio de software para cotizar gratis. 

https://github.com/guitarradeluis1/CotizadorLocal.git

Agregar escena 2d En una escena 3D Godot 4

Pensando en mi proximo poryecto quiero realizar un juego 2.5D (basicamente 3D con sprite 2D), pero al momento de querer agregar otra mecanica 2D que suceda por encima de la ecena 3D me enrede por tal motivo comparto lo conseguido con una demo realizada .

1.  Se crea la escena 3D dependiendo como lo ordenes ten en cuenta la camara 3D esta es importante
   
   
   
   
   
   
2. Crearemos otra escena esta como Nodo principal Camara2D el cual empatara y se mostrara en la camara 3D, dentro de esta escena podra programar como si fuera un juego 2D
   
   
   
   
   
   
3. Luego de esto en la Carama3D puedes agregar como nodo Hijo la ecena 2D se po isntancia o directamente
   
   
   
   
   

Cualquier duda comenta intentare ayudar

Un Buen profesor

 Listo , Para quienes cren que lansar un videojuego es facil...
No pero es satisfactorio, este poryecto enpeso como un experimento para aprender Godot

Aqui mi primer juego

https://gamejolt.com/games/agoodteacher/860505

Crear y animas esqueleto godot 4.1

 Bueno creando mi juego uso usa secuencia de imagnese (sprite sheet) si bien es facil en este post doy un tutorial simplificado para animar una imagen a medida

No creo usar esta tecnica en mi juego, pero todo conosimiento nuevo es bueno

# Crear esqueleto 2D
Para su creación se usa una sola imagen la cual se recorta través 
de poliginos pero esto puede ser opcional

-> Recorte imagen con poliginos:
 	1: Se crea el Nodo “Polygon2D” 
	2: En este nodo se agrega la textura (imagen)
	3: En el menu superiors (serca al icono de mouse o mover)
	esta la opción UV se Leda
	4: En las opciones superiores usar  “Puntos” con el lápiz
	se selecciona el corte de la imagen y Aceptar
	5: Luego de Aceptar se mostrara en pantalla recortado

Para el ejemplo se usa los siguientes nodos
	
	Node2D
	    	|
		- Polígonos (Node2D)
		|	|
		|	- Polygon2D (Para crea el brazo el cuerpo y demás)
		|	- …….
		|
		- Skeleton2D
			|
			- Bone2D
			-  … Se comienza creando desde la cintura y conectando
			los huesos unidos también por jerarquía de nodos

-> Esqueleto 
Se usa con los nodos  “Skeleton2D -> Bone2D” 
El nodo Bone2D se contra por jerarquía y ordenado creando el esqueleto

** Si el esqueleto no se use y se quiere alargar se usa la propiedad
	“Auto Calcula” = False y se puede mover sus dimensiones

** Cuando el Nodo Bone2D solicite “POSE DE DE DESCANSO” este se
Establece en el nodo pare “Skeleton2D” en las opciones superiores
cerca al mouse, mover y demas

-> Conectar esqueleto a los polígonos
	1: En los polígonos se ingresa a la propiedad “Skeleton”
	2: Luego en las opciones superior se usa “UV”
	3: pestaña “Huesos”
	4: El botón “sincronizar hueso con polígonos”
	5: Selecciona el hueso este cambia de color para saber cual es
	6: Los puntos negro se les cambia de color acorde a la unión
	Blanco: influye el hueso | Gris: intermedio | Negro: no influye
	** Es como pintar entre mas Click  más peso agrega y mas blanco
 
-----------------------

Godot 4.1 Sistema dialogos

 Ya hace mucho no escribo, bueno e intentado retomar interesoes propios y con el tema de Unity y Godot  que a ocurrido por estos tiempo e notado que no e aportado mucho, a pesar que uso Godot ya hace un tiempo.

Desarrollo un juego en Godot 4.1 y ponde en este post como genere mi sistema de Dialogo puede ayudar a algun desarrollador o incluso si alguien puede mejorarlo estaria feliz 

1. De sarrolle la ecena pensando como cualquier novela grafia en su parte interior se muestra el jugador con su dialogo

Para este los nodos son pocos pero los nesesarios (La advertencia es por el orden pero no influye o me da error)

Lo interesante es que al ser un juego pequeño el "AnimatedSprite2D" me permite tener todos los personajes y sus secuancias listas 

Para esta ecena la agrege a un grupo en mi caso "dialogo" para cuando el jugador coliciones y detecte este grupo active la ecena permitiendo pausar el movimiento pero ver el dialogo del personaje

Para animar el texto en la ecena carga la data (uso un JSON) y la animación acorde a algunos parametros.

La animacion los nombre y los dialogos se identifican con las propiedades de quien colociona, esta en la colicion que agrege al jugador, simplente instancia la ecena

Como resultado....

ROl