create-loader is the underlying whiteboard content rendering module that serves create and can be used for third-party

Use 👌

npm

npm install @uiuing/creat-loader

link

cd creat-loader && npm link

cd your-project && npm link creat-loader

Use this way

import createLoader from 'creat-loader';

const state = {
  // Content configuration, please see `type` for details.
}

// Same parameters as document.querySelector, and you can also put in HTMLElement objects directly.
const el = '#app'

const app = createLoader(state).mount(el)

Design and implementation ☁️

creat-loader Module catalogue structure design 🤔

• support provides rendering etc. basic rendering/ functions requiring high reuse, similar to generic templates.

• components are responsible for providing the required graphic components and for graphics, e.g. text, rectangles.

• classFile Its core requirement is to be responsible for events and operations, such as mouse event listening, history operations, and rendering operations.

• common is responsible for common calculations and basic data, such as coordinate calculations, key storage, and data diff calculations.

• The API encapsulates everything into a class that requires a lot of code, equivalent to a collection of all code that provides an operation/mount/message publish and subscribe interface to the outside world

• index cooperates with type for type specification of all interfaces, similar to Vue's createApp(app).mount('#app') and React's ReactDOM.createPortal(child, container).

creat-loader Module internal implementation design ✨

creat-loader Data synchronisation design with modular collaboration ✏️

Use of technology 📚

• Code Specification: ESLint + Prettier

• Code Standards: Airbnb

• Programming Languages: TypeScript

• Rendering method: Canvas

• Subscribe to publish: eventemitter3

• Module Packaging: Rollup