🎨 تسلط بر ادغام Angular-React: چگونه از tldraw بدون از دست دادن ذهن خود استفاده کنید!

Summarize this content to 400 words in Persian Lang

مقدمه

اگر شما یک توسعه دهنده Angular هستید که به دنیای React چشم دوخته است، ممکن است احساس کنید که گربه ای به پارک سگ راه می رود. tldraw-بچه باحال در بلوک React- به نظر می رسد ارزش ریسک کردن را دارد. اما چگونه می توان آنها را وادار کرد که به خوبی با هم بازی کنند؟ با استفاده از اجزای وب، واسطه نهایی که به Angular و React اجازه می دهد به جای سایه انداختن دست بدهند. 🚀

کامپوننت های وب چیست؟

یک عنصر HTML جادویی را تصور کنید که برای آن مهم نیست چه کسی آن را ساخته است – فقط کار می کند. این یک جزء وب برای تو این مانند سوئیس چارچوب های وب، خنثی و آماده برای میانجیگری است.

ویژگی های کلیدی:

عناصر سفارشی: برچسب های خود را مانند .

Shadow DOM: سبک‌های شما را از به هم ریختن سبک دیگران محافظت می‌کند (اینجا درام خواهر و برادر وجود ندارد!).

قالب های HTML: یک بار آن را بسازید، در همه جا دوباره از آن استفاده کنید (بله، مانند لگوها).

r2wc چیست؟

فکر کن r2wc به عنوان مترجم بین React و بقیه وب. کامپوننت‌های React شما را در یک عنصر سفارشی دنج قرار می‌دهد که حتی Angular هم می‌تواند آن را درک کند. 😎

چگونه کار می کند:

کامپوننت React خود را بردارید. 🧑‍🎨
آن را با آن بپیچید r2wc. 🛁
آن را به عنوان یک عنصر سفارشی با نامی جذاب ثبت کنید . 🏷️

راهنمای گام به گام

مرحله 1: موارد مورد نیاز را نصب کنید

اسباب بازی های جالب را با:

npm install @r2wc/react-to-web-component @tldraw/tldraw react react-dom

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: به Angular اجازه دهید از اجزای وب مطلع شود

این را به ماژول Angular خود اضافه کنید تا Angular در مورد عناصر سفارشی جدید شما نگران نشود:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;

@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent],
})
export class AppModule {}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: Styles tldraw را اضافه کنید

شما نمی توانید بدون سبک طراحی کنید، درست است؟ اضافه کنید tldrawاستایل های برنامه Angular شما.

باز کنید angular.json و موارد زیر را در آرایه سبک ها قرار دهید:

“styles”: [
“src/global.scss”,
“node_modules/tldraw/tldraw.css”
]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: وارد کردن tldraw بر اساس نسخه Angular

برای Angular 15 و بالاتر:

import r2wc from “@r2wc/react-to-web-component”;
import { Tldraw, getSnapshot } from “@tldraw/tldraw”;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

import r2wc from “../../node_modules/@r2wc/react-to-web-component/dist/react-to-web-component.js”;
import { Tldraw, getSnapshot } from “../../node_modules/tldraw/dist-esm/index.mjs”;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

زیرا تایپ اسکریپت Angular کاملاً برای استفاده از tldraw آماده نیست. 🙃 این راه‌حل ضروری است زیرا tldraw از ویژگی‌های TypeScript استفاده می‌کند که نسخه‌های Angular قدیمی‌تر به‌طور کامل از آن‌ها پشتیبانی نمی‌کنند.

مرحله 5: tldraw.js را ایجاد کنید

یک فایل به نام ایجاد کنید tldraw.js برای تبدیل tldraw کامپوننت را به یک کامپوننت وب واکنش دهید.

این معجون جادویی است که tldraw را به یک مؤلفه وب تبدیل می کند:

import r2wc from “@r2wc/react-to-web-component”;
import { Tldraw, getSnapshot } from “@tldraw/tldraw”;

const TldrawComponent = r2wc(Tldraw, {
props: {
forceMobile: “boolean”,
snapshot: “json”,
onMount: “function”,
},
});

customElements.define(“tl-draw”, TldrawComponent);

export const getSnapshot1 = getSnapshot;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این کامپوننت tldraw را بسته بندی می کند و آن را به عنوان یک عنصر سفارشی با نام تعریف می کند.

مرحله 6: از Web Component در Angular استفاده کنید

در اینجا نحوه استفاده شما آمده است در برنامه Angular شما

HTML (app.component.html):

style=”width: 100vw; height: 95vh”>

(click)=”handleSaveChanges()”
[ngStyle]=”{
position: ‘absolute’,
top: ’44px’,
right: ‘0.5em’,
padding: ‘8px 16px’,
zIndex: 100,
backgroundColor: hasUnsavedChanges ? ‘#007bff’ : ‘#ccc’,
cursor: hasUnsavedChanges ? ‘pointer’ : ‘not-allowed’,
opacity: hasUnsavedChanges ? 1 : 0.6
}”
>
Save

[forceMobile]=”true”
[snapshot]=”snapshot”
[onMount]=”onMountEvent”
>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

TypeScript (app.component.ts):

import { Component, OnInit } from ‘@angular/core’;
import { getSnapshot1 } from ‘./path-to-tldraw.js’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.scss’],
})
export class AppComponent implements OnInit {
hasUnsavedChanges = false;
snapshot: any;
editor: any;

onMountEvent = (editor: any) => {
this.editor = editor;
editor.store.listen(this.handleChangeEvent, { source: ‘user’, scope: ‘all’ });
};

handleChangeEvent = (change: any) => {
if (
Object.keys(change.changes.added).length ||
Object.keys(change.changes.updated).length ||
Object.keys(change.changes.removed).length
) {
this.hasUnsavedChanges = true;
}
};

handleSaveChanges = () => {
const snapshot = getSnapshot1(this.editor.store);
console.log(‘Snapshot saved:’, snapshot);
this.hasUnsavedChanges = false;
localStorage.setItem(‘drawingSnapshot’, JSON.stringify(snapshot));
};

ngOnInit() {
const savedSnapshot = localStorage.getItem(‘drawingSnapshot’);
this.snapshot = savedSnapshot ? JSON.parse(savedSnapshot) : {};
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، شما برای استفاده از tldraw در برنامه Angular خود آماده اید! 🎉

خوراکی های کلیدی

نقشه برداری لوازم جانبی: از طریق React props به ویژگی‌های Angular-friendly تبدیل می‌شوند r2wc. به عنوان مثال:

[forceMobile]=”true”
[snapshot]=”snapshot”
[onMount]=”onMountEvent”
>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مدیریت رویداد: از اتصالات زاویه ای برای رسیدگی به رویدادهایی مانند [onMount]”onMountEvent”.

عکس های فوری FTW: ذخیره و بازیابی حالت ترسیم با استفاده از getSnapshot.

شما با موفقیت شکاف React-Angular را از بین بردید! 🎉

گوچاهای معمولی

سازگاری TypeScript: اگر خطا می بینید، سعی کنید TypeScript را به یک نسخه سازگار کاهش دهید.
سبک های گمشده: اگر بوم شما شکسته به نظر می رسد، بررسی کنید angular.json برای اطمینان tldraw.css به آرایه سبک ها اضافه می شود.
عدم تطابق پایه: را دوبار چک کنید props شی در tldraw.js برای اطمینان از ویژگی هایی مانند forceMobile به درستی در معرض دید قرار می گیرند.

نتیجه گیری

تا زمانی که کارتان تمام شود، برنامه Angular شما به شکلی منعطف می شود که انگار برای انجام آن به دنیا آمده است. چه کسی گفته است که React و Angular نمی توانند با هم کنار بیایند؟ با کمی کمک از r2wc، شما به تازگی آن را انجام داده اید. برو، به خودت 5 امتیاز بده! 🖐️🎉

npm install @r2wc/react-to-web-component @tldraw/tldraw react react-dom

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}

"styles": [
  "src/global.scss",
  "node_modules/tldraw/tldraw.css"
]

import r2wc from "@r2wc/react-to-web-component";
import { Tldraw, getSnapshot } from "@tldraw/tldraw";

import r2wc from "../../node_modules/@r2wc/react-to-web-component/dist/react-to-web-component.js";
import { Tldraw, getSnapshot } from "../../node_modules/tldraw/dist-esm/index.mjs";

import r2wc from "@r2wc/react-to-web-component";
import { Tldraw, getSnapshot } from "@tldraw/tldraw";

const TldrawComponent = r2wc(Tldraw, {
  props: {
    forceMobile: "boolean",
    snapshot: "json",
    onMount: "function",
  },
});

customElements.define("tl-draw", TldrawComponent);

export const getSnapshot1 = getSnapshot;

 style="width: 100vw; height: 95vh">
  
    (click)="handleSaveChanges()"
    [ngStyle]="{
      position: 'absolute',
      top: '44px',
      right: '0.5em',
      padding: '8px 16px',
      zIndex: 100,
      backgroundColor: hasUnsavedChanges ? '#007bff' : '#ccc',
      cursor: hasUnsavedChanges ? 'pointer' : 'not-allowed',
      opacity: hasUnsavedChanges ? 1 : 0.6
    }"
  >
    Save
  
  
    [forceMobile]="true"
    [snapshot]="snapshot"
    [onMount]="onMountEvent"
  >

import { Component, OnInit } from '@angular/core';
import { getSnapshot1 } from './path-to-tldraw.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  hasUnsavedChanges = false;
  snapshot: any;
  editor: any;

  onMountEvent = (editor: any) => {
    this.editor = editor;
    editor.store.listen(this.handleChangeEvent, { source: 'user', scope: 'all' });
  };

  handleChangeEvent = (change: any) => {
    if (
      Object.keys(change.changes.added).length ||
      Object.keys(change.changes.updated).length ||
      Object.keys(change.changes.removed).length
    ) {
      this.hasUnsavedChanges = true;
    }
  };

  handleSaveChanges = () => {
    const snapshot = getSnapshot1(this.editor.store);
    console.log('Snapshot saved:', snapshot);
    this.hasUnsavedChanges = false;
    localStorage.setItem('drawingSnapshot', JSON.stringify(snapshot));
  };

  ngOnInit() {
    const savedSnapshot = localStorage.getItem('drawingSnapshot');
    this.snapshot = savedSnapshot ? JSON.parse(savedSnapshot) : {};
  }
}

    [forceMobile]="true"
    [snapshot]="snapshot"
    [onMount]="onMountEvent"
>