Skip to content

Commit

Permalink
showing hit area
Browse files Browse the repository at this point in the history
  • Loading branch information
@kleber-swf
kleber-swf committed Dec 6, 2021
1 parent 8ffa737 commit f9664a9
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 44 deletions.
9 changes: 4 additions & 5 deletions example/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ function create() {
child = el(DIST * 2, DIST * 0, SIZE, SIZE, parent, 'child-a0-p1');
child.pivot.set(SIZE, SIZE);
child.inputEnabled = true;
child.input.useHandCursor = true;
child.hitArea = new Phaser.Circle(0, 0, 200);

// .5 0
Expand Down Expand Up @@ -113,12 +114,10 @@ function create() {

child = el(DIST * 3, 100, SIZE * 2, SIZE * 2, parent, 'child');
child.pivot.set(SIZE * 1.5, SIZE * 1.5);
// child.pivot.set(SIZE, SIZE);
child.inputEnabled = true;
child.input.useHandCursor = true;
child.hitArea = new Phaser.Rectangle(-100, -100, 200, 200);
parent.setChildIndex(child, 0);
// game.tweens.create(child)
// .to({ angle: 360 }, 2000)
// .repeatAll(-1)
// .start();

child = el(DIST * 3, 500, SIZE, SIZE, parent, 'child-inverted');
child.scale.set(-1, -1);
Expand Down
12 changes: 11 additions & 1 deletion src/editor-view/selectors/gizmos/selection-gizmo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ phred-selection-gizmo {
border-right: none;
height: 100%;
}

.vertical {
width: 100%;
margin-top: -100vh;
Expand All @@ -71,4 +71,14 @@ phred-selection-gizmo {
height: 200vh;
}
}

.hit-area {
display: block;
position: absolute;
box-sizing: border-box;
padding: 0;
margin: 0;
border: 1px solid orange;
background-color: rgba(orange, 0.1);
}
}
127 changes: 97 additions & 30 deletions src/editor-view/selectors/gizmos/selection-gizmo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,36 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
public static readonly tagName = 'phred-selection-gizmo';
public readonly type = GIZMO_MOVE;

private _isOver = false;
private _rect: Rect = { x: 0, y: 0, width: 0, height: 0 };
private handlers: HTMLElement[] = [];
private pivotGizmo: HTMLElement;
private anchorGizmo: HTMLElement;
private guidesGizmo: HTMLElement;
private pivot: HTMLElement;
private anchor: HTMLElement;
private guides: HTMLElement;
private hitArea: HTMLElement;

private _pivot: Point = { x: 0, y: 0 };
private _anchor: Point = { x: 0, y: 0 };
private _object: PIXI.DisplayObject;
private _isOver = false;
private _showHitArea: boolean;
private _objectHitArea: { x: number, y: number, width: number, height: number, radius?: number };
private _rectCache: Rect = { x: 0, y: 0, width: 0, height: 0 };
private _pointCache1: Point = { x: 0, y: 0 };
private _pointCache2: Point = { x: 0, y: 0 };

public set visible(value: boolean) {
this.style.display = value && Editor.data.selectedObject ? 'block' : 'none';
}

public set showGuides(value: boolean) {
this.guidesGizmo.style.display = value ? 'block' : 'none';
this.guides.style.display = value ? 'block' : 'none';
}

public set showHitArea(value: boolean) {
this._showHitArea = value;
if (value) {
this.setupHitArea(this._object);
if (this._object) this.drawHitArea(this._object.worldScale);
} else {
this.setupHitArea(null);
}
}

public get isOver() { return this._isOver; }
Expand All @@ -39,6 +53,7 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {

this.createResizeHandlers(this.handlers);
this.createGuides();
this.createHitArea();
}

private createResizeHandlers(handlers: HTMLElement[]) {
Expand All @@ -54,48 +69,96 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
});
});

this.pivotGizmo = this.appendChild(document.createElement('div'));
this.pivotGizmo.classList.add('pivot');
this.pivot = this.appendChild(document.createElement('div'));
this.pivot.classList.add('pivot');

this.anchorGizmo = this.appendChild(document.createElement('div'));
this.anchorGizmo.classList.add('anchor');
this.anchor = this.appendChild(document.createElement('div'));
this.anchor.classList.add('anchor');
}

private createGuides() {
const el = this.appendChild(document.createElement('div'));
el.classList.add('guides');
el.appendChild(document.createElement('div')).classList.add('horizontal');
el.appendChild(document.createElement('div')).classList.add('vertical');
this.guidesGizmo = el;
this.guides = el;
}

public redraw(object: PIXI.DisplayObject) {
const bounds = object.getBounds();
private createHitArea() {
this.hitArea = this.appendChild(document.createElement('div'));
this.hitArea.classList.add('hit-area');
}

public redraw() {
if (!this._object) return;
const object = this._object;
const bounds = this._object.getBounds();
const scale = object.worldScale;

const { style, _rect, _pivot, _anchor } = this;
SelectionUtil.rectFromGameToArea(bounds, _rect);
style.left = _rect.x + 'px';
style.top = _rect.y + 'px';
style.width = _rect.width + 'px';
style.height = _rect.height + 'px';
const { style, _rectCache, _pointCache1 } = this;
SelectionUtil.rectFromGameToArea(bounds, _rectCache);
style.left = _rectCache.x + 'px';
style.top = _rectCache.y + 'px';
style.width = _rectCache.width + 'px';
style.height = _rectCache.height + 'px';

SelectionUtil.pointFromGameToArea(
object.pivot.x * Math.abs(scale.x),
object.pivot.y * Math.abs(scale.y),
_pivot
_pointCache1
);
this.pivotGizmo.style.transform = `translate(${_pivot.x}px, ${_pivot.y}px)`;
this.pivot.style.transform = `translate(${_pointCache1.x}px, ${_pointCache1.y}px)`;

if (object.anchor) {
SelectionUtil.pointFromGameToArea(
object.anchor.x * (object.width / object.scale.x),
object.anchor.y * (object.height / object.scale.y),
_anchor
_pointCache1
);
this.anchorGizmo.style.top = _anchor.y + 'px';
this.anchorGizmo.style.left = _anchor.x + 'px';
this.anchor.style.top = _pointCache1.y + 'px';
this.anchor.style.left = _pointCache1.x + 'px';
}

if (this._objectHitArea) this.drawHitArea(scale);
}

private setupHitArea(object: PIXI.DisplayObject) {
if (!object?.inputEnabled) {
this.hitArea.style.display = 'none';
this._objectHitArea = null;
return;
}

this.hitArea.style.display = 'block';
this._objectHitArea = object.hitArea as any
?? { x: 0, y: 0, width: object.width, height: object.height };
this.hitArea.style.borderRadius = this._objectHitArea.radius ? '50%' : '0';
}

private drawHitArea(scale: PIXI.Point) {
const { _pointCache1, _pointCache2 } = this;
const hitArea = this._objectHitArea;
SelectionUtil.pointFromGameToArea(hitArea.x * scale.x, hitArea.y * scale.y, _pointCache1);
const haStyle = this.hitArea.style;
if (hitArea.radius) {
SelectionUtil.pointFromGameToArea(
hitArea.radius * 2 * scale.x,
hitArea.radius * 2 * scale.y,
_pointCache2
);
haStyle.left = (_pointCache1.x - _pointCache2.x * 0.5) + 'px';
haStyle.top = (_pointCache1.y - _pointCache2.y * 0.5) + 'px';
} else {
SelectionUtil.pointFromGameToArea(
hitArea.width * scale.x,
hitArea.height * scale.y,
_pointCache2
);
haStyle.left = _pointCache1.x + 'px';
haStyle.top = _pointCache1.y + 'px';
}
haStyle.width = _pointCache2.x + 'px';
haStyle.height = _pointCache2.y + 'px';
}

public startMoving() {
Expand All @@ -111,12 +174,16 @@ export class SelectionGizmo extends HTMLElement implements Gizmo {
// #region Event Listeners

public onSelectionChanged(_origin: DataOrigin, object: PIXI.DisplayObject) {
if (object) {
this.visible = true;
this.anchorGizmo.style.display = object.anchor ? 'block' : 'none';
} else {
this._object = object;
if (!object) {
this.visible = false;
this._objectHitArea = null;
return;
}

this.anchor.style.display = object.anchor ? 'block' : 'none';
this.setupHitArea(this._showHitArea ? object : null);
this.visible = true;
}

public onMouseOver() { this._isOver = true; }
Expand Down
12 changes: 4 additions & 8 deletions src/editor-view/selectors/selection-area.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,7 @@ export class SelectionArea extends HTMLElement {
// #endregion

private update() {
if (Editor.data.selectedObject) {
this.gizmo.redraw(Editor.data.selectedObject);
}
this.gizmo.redraw();
}

// #region Event Handlers
Expand Down Expand Up @@ -133,11 +131,9 @@ export class SelectionArea extends HTMLElement {
return;
case 'guides':
this.gizmo.showGuides = value === true;
// return;
// case 'hitArea':
// this.gizmo.showHitArea = value === true;
// this._showHitArea = value === true;
// if (this._selectedObject) this.move(0, 0);
return;
case 'hitArea':
this.gizmo.showHitArea = value === true;
}
}

Expand Down

0 comments on commit f9664a9

Please sign in to comment.