flow: room editing
This commit is contained in:
parent
65d5430ab0
commit
06b1a6ec66
|
@ -41,7 +41,7 @@ const RoomComponent = ({
|
|||
const {uri, uuid} = useContext(Context);
|
||||
const dispatch = useDispatch();
|
||||
const flecks = useFlecks();
|
||||
const {Room} = flecks.get('$avocado/resource.resources');
|
||||
const {Room, Tiles} = flecks.get('$avocado/resource.resources');
|
||||
const previousResource = usePrevious(resource);
|
||||
const [events, setEvents] = useState();
|
||||
const [side, setSide] = useState(0);
|
||||
|
@ -53,31 +53,8 @@ const RoomComponent = ({
|
|||
setEvents(stage?.events());
|
||||
}, [setEvents]);
|
||||
useEffect(() => {
|
||||
if (room) {
|
||||
const load = async () => {
|
||||
await Promise.all(
|
||||
room.tiles.map(async (tiles, i) => {
|
||||
await tiles.load(resource.tiles[i]);
|
||||
const {area, tileSize} = tiles;
|
||||
const viewport = Vector.mul(area, tileSize);
|
||||
tiles.emit('update', Rectangle.compose([0, 0], viewport));
|
||||
}),
|
||||
);
|
||||
if (resource.entities.length !== previousResource.entities.length) {
|
||||
await room.entityList.load(resource.entities);
|
||||
return;
|
||||
}
|
||||
await Promise.all(
|
||||
Object.values(room.entities)
|
||||
.map(async (entity, i) => {
|
||||
await entity.load(resource.entities[i]);
|
||||
entity.renderTick(Infinity);
|
||||
}),
|
||||
);
|
||||
};
|
||||
load();
|
||||
}
|
||||
else {
|
||||
// First time, render the entire room.
|
||||
if (!room) {
|
||||
const loadRoom = async () => {
|
||||
const room = await Room.load({
|
||||
...resource,
|
||||
|
@ -90,6 +67,50 @@ const RoomComponent = ({
|
|||
};
|
||||
loadRoom();
|
||||
}
|
||||
// Otherwise, we'll update the room.
|
||||
else {
|
||||
const updateRoom = async () => {
|
||||
if (previousResource.entities !== resource.entities) {
|
||||
if (previousResource.entities.length !== resource.entities.length) {
|
||||
await room.entityList.load(resource.entities);
|
||||
}
|
||||
else {
|
||||
for (let i = 0; i < resource.entities.length; i++) {
|
||||
const element = resource.entities[i];
|
||||
if (element !== previousResource.entities[i]) {
|
||||
const entity = room.entityList.$$flatEntities[i];
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
await entity.load(element);
|
||||
entity.renderTick(Infinity);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (previousResource.tiles !== resource.tiles) {
|
||||
if (previousResource.tiles.length !== resource.tiles.length) {
|
||||
await room.loadTiles(resource.tiles);
|
||||
roomRenderable.renderChunksForExtent(Rectangle.compose([0, 0], room.size));
|
||||
}
|
||||
else {
|
||||
for (let i = 0; i < resource.tiles.length; i++) {
|
||||
const element = resource.tiles[i];
|
||||
if (element !== previousResource.tiles[i]) {
|
||||
const currentData = Tiles.inflate(element.data);
|
||||
const previousData = Tiles.inflate(previousResource.tiles[i].data);
|
||||
const updates = [];
|
||||
for (let j = 0; j < currentData.length; j++) {
|
||||
if (currentData[j] !== previousData[j]) {
|
||||
updates.push(i);
|
||||
}
|
||||
}
|
||||
room.tiles[i].emit('update', Tiles.whereFromUpdates(updates));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
updateRoom();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [resource, uri]);
|
||||
if (!roomRenderable) {
|
||||
|
|
|
@ -75,18 +75,24 @@ function EntitiesPage({
|
|||
return undefined;
|
||||
}
|
||||
const onValue = ({
|
||||
clientX,
|
||||
clientY,
|
||||
deltaY,
|
||||
target,
|
||||
position,
|
||||
type,
|
||||
}) => {
|
||||
const updatePosition = () => {
|
||||
const {left, top} = target.getBoundingClientRect();
|
||||
patch.diff(
|
||||
`/entities/${selectedEntityIndex}`,
|
||||
entity,
|
||||
merge(entity, {traits: {Positioned: {state: {x: clientX - left, y: clientY - top}}}}),
|
||||
merge(
|
||||
entity,
|
||||
{
|
||||
traits: {
|
||||
Positioned: {
|
||||
state: {x: Math.floor(position[0]), y: Math.floor(position[1])},
|
||||
},
|
||||
},
|
||||
},
|
||||
),
|
||||
);
|
||||
};
|
||||
switch (type) {
|
||||
|
|
|
@ -149,23 +149,10 @@ function TilesPage({
|
|||
room.tiles[currentLayer].$$data,
|
||||
Rectangle.compose(origin, room.tiles[currentLayer].area),
|
||||
);
|
||||
const [min, max] = [[Infinity, Infinity], [-Infinity, -Infinity]];
|
||||
for (let i = 0; i < updates.length; i++) {
|
||||
const update = updates[i];
|
||||
const [x, y] = [update % width, Math.floor(update / width)];
|
||||
const offset = Vector.sub([x, y], origin);
|
||||
if (x < min[0]) {
|
||||
min[0] = x;
|
||||
}
|
||||
else if (x > max[0]) {
|
||||
max[0] = x;
|
||||
}
|
||||
if (y < min[1]) {
|
||||
min[1] = y;
|
||||
}
|
||||
else if (y > max[1]) {
|
||||
max[1] = y;
|
||||
}
|
||||
let tileLocation;
|
||||
switch (fillMode) {
|
||||
case 0: {
|
||||
|
@ -192,7 +179,7 @@ function TilesPage({
|
|||
}
|
||||
$$data[update] = (tileLocation[1] * (viewport[0] / tileSize[0])) + tileLocation[0];
|
||||
}
|
||||
const where = Rectangle.compose(min, Vector.add([1, 1], Vector.sub(max, min)));
|
||||
const where = room.tiles[currentLayer].constructor.whereFromUpdates(updates);
|
||||
room.tiles[currentLayer].emit('update', where);
|
||||
};
|
||||
const onValue = (
|
||||
|
@ -203,7 +190,7 @@ function TilesPage({
|
|||
) => {
|
||||
const origin = Vector.floor(Vector.div(position, tileSize));
|
||||
const edit = () => {
|
||||
if (0 === room.tiles.length) {
|
||||
if (0 === resource.tiles.length) {
|
||||
return;
|
||||
}
|
||||
const {data: originalData} = room.tiles[currentLayer].toJSON();
|
||||
|
@ -311,7 +298,7 @@ function TilesPage({
|
|||
<div className={styles.layers}>
|
||||
<ul>
|
||||
{
|
||||
room.tiles.map((tiles, i) => (
|
||||
resource.tiles.map((tiles, i) => (
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<li key={i}>
|
||||
<button
|
||||
|
@ -329,9 +316,9 @@ function TilesPage({
|
|||
<span>Area</span>
|
||||
<span>
|
||||
[
|
||||
{tiles.width}
|
||||
{tiles.area[0]}
|
||||
{' x '}
|
||||
{tiles.height}
|
||||
{tiles.area[1]}
|
||||
]
|
||||
</span>
|
||||
</label>
|
||||
|
@ -349,15 +336,15 @@ function TilesPage({
|
|||
<span>Full size</span>
|
||||
<span>
|
||||
[
|
||||
{tiles.tileSize[0] * tiles.width}
|
||||
{tiles.tileSize[0] * tiles.area[0]}
|
||||
{' x '}
|
||||
{tiles.tileSize[1] * tiles.height}
|
||||
{tiles.tileSize[1] * tiles.area[1]}
|
||||
]
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<span>Tileset URI</span>
|
||||
<span>{tiles.atlas.image.uri}</span>
|
||||
<span>{tiles.tileImageUri}</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className={styles.visibility}>
|
||||
|
@ -438,14 +425,14 @@ function TilesPage({
|
|||
<span>Area</span>
|
||||
<VectorComponent
|
||||
onChange={() => {}}
|
||||
value={room.tiles[currentLayer].area}
|
||||
value={resource.tiles[currentLayer].area}
|
||||
/>
|
||||
</label>
|
||||
<label className={styles.tileSize}>
|
||||
<span>Tile size</span>
|
||||
<VectorComponent
|
||||
onChange={() => {}}
|
||||
value={room.tiles[currentLayer].tileSize}
|
||||
value={resource.tiles[currentLayer].tileSize}
|
||||
/>
|
||||
</label>
|
||||
<div className={styles.grower} />
|
||||
|
|
|
@ -12,9 +12,12 @@ export default class RoomRenderable extends Container {
|
|||
constructor(room, renderer) {
|
||||
super();
|
||||
this.lastExtent = [0, 0, 0, 0];
|
||||
this.room = room;
|
||||
this.renderer = renderer;
|
||||
this.entityListView = new EntityListView(room.entityList);
|
||||
this.tilesRenderables = room.tiles.map((tiles) => new TilesRenderable(tiles, renderer));
|
||||
room.on('tilesAdded', this.onTilesAdded, this);
|
||||
room.on('tilesRemoved', this.onTilesRemoved, this);
|
||||
this.addChildren(this.tilesRenderables);
|
||||
this.addChild(this.entityListView);
|
||||
this.sort();
|
||||
|
@ -25,11 +28,28 @@ export default class RoomRenderable extends Container {
|
|||
|
||||
destroy() {
|
||||
super.destroy();
|
||||
this.room.off('tilesAdded', this.onTilesAdded);
|
||||
this.room.off('tilesRemoved', this.onTilesRemoved);
|
||||
if (module.hot) {
|
||||
renderables.delete(this);
|
||||
}
|
||||
}
|
||||
|
||||
onTilesAdded(tiles) {
|
||||
const renderable = new TilesRenderable(tiles, this.renderer);
|
||||
this.tilesRenderables.push(renderable);
|
||||
this.addChild(renderable);
|
||||
}
|
||||
|
||||
onTilesRemoved(tiles) {
|
||||
const index = this.tilesRenderables.findIndex((renderable) => renderable.tiles === tiles);
|
||||
if (-1 === index) {
|
||||
return;
|
||||
}
|
||||
const [renderable] = this.tilesRenderables.splice(index, 1);
|
||||
this.removeChild(renderable);
|
||||
}
|
||||
|
||||
renderChunksForExtent(extent) {
|
||||
this.tilesRenderables.forEach((tilesRenderable) => {
|
||||
tilesRenderable.renderChunksForExtent(extent);
|
||||
|
|
|
@ -15,10 +15,10 @@ export default (flecks) => {
|
|||
);
|
||||
return class Room extends decorate(JsonResource) {
|
||||
|
||||
entityList;
|
||||
|
||||
static Renderable = RoomRenderable;
|
||||
|
||||
entityList;
|
||||
|
||||
tiles = [];
|
||||
|
||||
constructor() {
|
||||
|
@ -38,13 +38,18 @@ export default (flecks) => {
|
|||
return this.entityList.entities;
|
||||
}
|
||||
|
||||
addTiles(tiles) {
|
||||
this.tiles.push(tiles);
|
||||
this.startSynchronizing(tiles);
|
||||
this.emit('tilesAdded', tiles);
|
||||
}
|
||||
|
||||
findEntity(uuid) {
|
||||
return this.entityList.findEntity(uuid);
|
||||
}
|
||||
|
||||
async load(json = {}) {
|
||||
await super.load(json);
|
||||
const {Tiles} = flecks.get('$avocado/resource.resources');
|
||||
const {
|
||||
entities,
|
||||
size = [0, 0],
|
||||
|
@ -56,13 +61,19 @@ export default (flecks) => {
|
|||
this.startSynchronizing(this.entityList);
|
||||
this.size = size;
|
||||
if (tiles) {
|
||||
this.tiles = await Promise.all(tiles.map((tiles, i) => Tiles.load({s13nId: i, ...tiles})));
|
||||
this.tiles.forEach((tiles) => {
|
||||
this.startSynchronizing(tiles);
|
||||
});
|
||||
await this.loadTiles(tiles);
|
||||
}
|
||||
}
|
||||
|
||||
async loadTiles(tiles) {
|
||||
const {Tiles} = flecks.get('$avocado/resource.resources');
|
||||
this.removeAllTiles();
|
||||
(await Promise.all(tiles.map((json, i) => Tiles.load({s13nId: i, ...json}))))
|
||||
.forEach((tiles) => {
|
||||
this.addTiles(tiles);
|
||||
});
|
||||
}
|
||||
|
||||
onEntityAdded(entity) {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
entity.room = this;
|
||||
|
@ -77,10 +88,26 @@ export default (flecks) => {
|
|||
this.emit('entityRemoved', entity);
|
||||
}
|
||||
|
||||
removeAllTiles() {
|
||||
for (let i = this.tiles.length - 1; i >= 0; --i) {
|
||||
this.removeTiles(this.tiles[i]);
|
||||
}
|
||||
}
|
||||
|
||||
removeEntity(entity) {
|
||||
this.entityList.removeEntity(entity);
|
||||
}
|
||||
|
||||
removeTiles(tiles) {
|
||||
const index = this.tiles.indexOf(tiles);
|
||||
if (-1 === index) {
|
||||
return;
|
||||
}
|
||||
const [removed] = this.tiles.splice(index, 1);
|
||||
this.stopSynchronizing(removed);
|
||||
this.emit('tilesRemoved', removed);
|
||||
}
|
||||
|
||||
get s13nId() {
|
||||
return this.$$s13nId;
|
||||
}
|
||||
|
|
|
@ -124,6 +124,11 @@ export default (flecks) => {
|
|||
return this.constructor.indexHulls(indices, this.$$data, this.area);
|
||||
}
|
||||
|
||||
static inflate(data) {
|
||||
const {buffer, byteOffset, length} = inflate(Buffer.from(data, 'base64'));
|
||||
return new Uint16Array(buffer, byteOffset, length / 2);
|
||||
}
|
||||
|
||||
async load(json) {
|
||||
const {
|
||||
area,
|
||||
|
@ -137,8 +142,7 @@ export default (flecks) => {
|
|||
this.area = area;
|
||||
}
|
||||
if (data) {
|
||||
const {buffer, byteOffset, length} = inflate(Buffer.from(data, 'base64'));
|
||||
this.$$data = new Uint16Array(buffer, byteOffset, length / 2);
|
||||
this.$$data = this.constructor.inflate(data);
|
||||
}
|
||||
else if (area) {
|
||||
this.$$data = new Uint16Array(Vector.area(area));
|
||||
|
@ -298,6 +302,27 @@ export default (flecks) => {
|
|||
};
|
||||
}
|
||||
|
||||
static whereFromUpdates(updates) {
|
||||
const [min, max] = [[Infinity, Infinity], [-Infinity, -Infinity]];
|
||||
for (let i = 0; i < updates.length; i++) {
|
||||
const update = updates[i];
|
||||
const [x, y] = [update % this.width, Math.floor(update / this.width)];
|
||||
if (x < min[0]) {
|
||||
min[0] = x;
|
||||
}
|
||||
else if (x > max[0]) {
|
||||
max[0] = x;
|
||||
}
|
||||
if (y < min[1]) {
|
||||
min[1] = y;
|
||||
}
|
||||
else if (y > max[1]) {
|
||||
max[1] = y;
|
||||
}
|
||||
}
|
||||
return Rectangle.compose(min, Vector.add([1, 1], Vector.sub(max, min)));
|
||||
}
|
||||
|
||||
get zIndex() {
|
||||
return this.$$zIndex;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user