-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fc76f58
commit d3fbd27
Showing
1 changed file
with
41 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,57 @@ | ||
# Overview | ||
|
||
This repository contains classes used across the PlayCanvas Editor and PCUI. These classes are used in data binding and history (undo, redo). | ||
The PlayCanvas Observer is a powerful JavaScript library for managing and observing changes to objects. It allows tracking modifications to nested properties, emitting events on changes, and maintaining state consistency. This is particularly useful in applications where state management and change tracking are critical, such as in data-driven interfaces or collaborative applications. | ||
|
||
# Installing | ||
## Installing | ||
|
||
To build a UMD module of the library run: | ||
``` | ||
npm install | ||
npm run build | ||
To install the NPM package, do: | ||
|
||
npm install @playcanvas/observer --save-dev | ||
|
||
## Usage | ||
|
||
### Creating an Observer | ||
|
||
```javascript | ||
import Observer from 'playcanvas-observer'; | ||
|
||
const data = { | ||
name: 'John', | ||
age: 30, | ||
address: { | ||
city: 'New York', | ||
zip: '10001' | ||
} | ||
}; | ||
|
||
const observer = new Observer(data); | ||
``` | ||
|
||
The built file will be a UMD module located at `dist/index.js`. | ||
### Listening for Changes | ||
|
||
# Events | ||
You can listen for changes to specific properties using the `on` method: | ||
|
||
Base class for event emitters. Allows emitting events and attaching event handlers. | ||
```javascript | ||
observer.on('address.city:set', (newValue, oldValue) => { | ||
console.log(`City changed from ${oldValue} to ${newValue}`); | ||
}); | ||
|
||
observer.set('address.city', 'San Francisco'); // Logs: City changed from New York to San Francisco | ||
``` | ||
|
||
# Observer | ||
## Building | ||
|
||
Responsible for editing an object that contains JSON data. The class emits events when properties change. | ||
To generate a UMD and ESM build of the Observer library, run: | ||
|
||
# ObserverList | ||
npm install | ||
npm run build | ||
|
||
A list of observers with similar functionality and events. | ||
The UMD build is `dist/index.js`. The ESM build is `dist/index.mjs`. | ||
|
||
# ObserverHistory | ||
## API Docs | ||
|
||
Records undo / redo when an Observer changes. | ||
To build the API reference manual, run: | ||
|
||
# History | ||
npm run docs | ||
|
||
Responsible for keeping track of history actions (for undo / redo). | ||
A pre-built API reference many is hosted [here](https://api.playcanvas.com/modules/Observer.html). |