Skip to content

Commit

Permalink
refactor(demo): move state from PathUseCase to Steps class on `dr…
Browse files Browse the repository at this point in the history 
…aw-path` demo (#473)

- Make the properties of `PathUseCase` as private
- Move the `state` property and associated functions from `PathUseCase` to `Steps` class.
- Add JSDoc
  • Loading branch information
@csouchet
csouchet authored Mar 3, 2023
1 parent 369b3ec commit c90a3d3
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 78 deletions.
119 changes: 43 additions & 76 deletions demo/draw-path/js/path-use-case.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,15 @@
class PathUseCase extends UseCase {

_state;
#steps;

_steps;
#style;

_style;

_pathManager;
#pathManager;

constructor(getDiagram) {
super('path', getDiagram, true);

this._state = {
firstSelectedShape: undefined,
secondSelectedShape: undefined,
};

this._steps = new Steps();
this.#steps = new Steps();
}

/**
Expand All @@ -25,14 +18,14 @@ class PathUseCase extends UseCase {
_postLoadDiagram() {
const bpmnElementsRegistry = this._bpmnVisualization.bpmnElementsRegistry;

this._style = new Style(bpmnElementsRegistry);
this.#style = new Style(bpmnElementsRegistry);

const shapesWithoutEndEvent = this._getActivitiesGatewaysEventsWithoutEndEvents();
const shapesOfEndEvent = bpmnElementsRegistry.getElementsByKinds(bpmnvisu.ShapeBpmnElementKind.EVENT_END);
const allShapes = [...shapesWithoutEndEvent, ...shapesOfEndEvent];

const allEdges = bpmnElementsRegistry.getElementsByKinds(Object.values(bpmnvisu.FlowKind));
this._pathManager = new PathManager(allEdges);
this.#pathManager = new PathManager(allEdges);

const bpmnElementIdsOfEndEvent = this._getBpmnElementIds(shapesOfEndEvent);
const bpmnElementIdsWithoutEndEvent = this._getBpmnElementIds([...shapesWithoutEndEvent, ...allEdges]);
Expand All @@ -42,7 +35,7 @@ class PathUseCase extends UseCase {

document.getElementById('btn-reset').onclick = () => {
this._reset([...bpmnElementIdsOfEndEvent, ...bpmnElementIdsWithoutEndEvent]);
this._style.disablePointerOn(bpmnElementIdsOfEndEvent);
this.#style.disablePointerOn(bpmnElementIdsOfEndEvent);
};
}

Expand Down Expand Up @@ -88,48 +81,46 @@ class PathUseCase extends UseCase {

allShapes.forEach(item => {
const currentId = item.bpmnSemantic.id;
const filterForPath = path => path.sourceId === this._state.firstSelectedShape && path.targetId === currentId;
const filterForPath = path => path.sourceId === this.#steps.firstSelectedShapeId && path.targetId === currentId;

item.htmlElement.onclick = () => {
if (this._isEndEvent(item) && !this._hasOnlyOneSelectedShape()) {
if (this._isEndEvent(item) && !this.#steps.hasOnlyOneSelectedShape()) {
return;
}

if (this._hasTwoSelectedShapes()) {
if (this.#steps.hasTwoSelectedShapes()) {
this._reset(allBpmnElementsIds);
}

if (this._hasNoSelectedShape()) {
this._style.disableAllShapesAndEdgesExcept(allBpmnElementsIds, [currentId]);
this._style.highlight(currentId);
this._state.firstSelectedShape = currentId;
this._steps.goToStep2();
if (this.#steps.hasNoSelectedShape()) {
this.#style.disableAllShapesAndEdgesExcept(allBpmnElementsIds, [currentId]);
this.#style.highlight(currentId);
this.#steps.goToStep2(currentId);
} else { // Only one shape is selected
this._pathManager.doActionOnPath(filterForPath,(filteredPath) => {
this._style.highlight([filteredPath.edgeId, filteredPath.targetId]);
this._style.activatePointerOn(bpmnElementIdsWithoutEndEvent);
this._state.secondSelectedShape = currentId;
this._steps.goToStep3();
this.#pathManager.doActionOnPath(filterForPath,(filteredPath) => {
this.#style.highlight([filteredPath.edgeId, filteredPath.targetId]);
this.#style.activatePointerOn(bpmnElementIdsWithoutEndEvent);
this.#steps.goToStep3(currentId);
});
}
};
item.htmlElement.onmouseenter = () => {
if (this._hasOnlyOneSelectedShape()) {
this._pathManager.doActionOnPath(filterForPath, (filteredPath) => this._displayPossibleNextPath(filteredPath));
if (this.#steps.hasOnlyOneSelectedShape()) {
this.#pathManager.doActionOnPath(filterForPath, (filteredPath) => this._displayPossibleNextPath(filteredPath));
} else if (!this._isEndEvent(item)) {
this._style.displayPossibleNextElements(currentId);
this.#style.displayPossibleNextElements(currentId);
}
};
item.htmlElement.onmouseleave = () => {
if (this._hasOnlyOneSelectedShape()) {
this._pathManager.doActionOnPath(filterForPath, (filteredPath) => this._nonDisplayPossibleNextPath(filteredPath));
if (this.#steps.hasOnlyOneSelectedShape()) {
this.#pathManager.doActionOnPath(filterForPath, (filteredPath) => this._nonDisplayPossibleNextPath(filteredPath));
} else if (!this._isEndEvent(item)) {
this._style.nonDisplayPossibleNextElements(currentId);
this.#style.nonDisplayPossibleNextElements(currentId);
}
};
});

this._style.disablePointerOn(bpmnElementIdsOfEndEvent);
this.#style.disablePointerOn(bpmnElementIdsOfEndEvent);
}

/**
Expand All @@ -140,64 +131,40 @@ class PathUseCase extends UseCase {

allEdges.forEach(item => {
const currentId = item.bpmnSemantic.id;
const filterForPath = path => (this._hasOnlyOneSelectedShape() ? path.sourceId === this._state.firstSelectedShape : true) && path.edgeId === currentId;
const filterForPath = path => (this.#steps.hasOnlyOneSelectedShape() ? path.sourceId === this.#steps.firstSelectedShapeId : true) && path.edgeId === currentId;

item.htmlElement.onclick = () => {
if (this._hasTwoSelectedShapes()) {
if (this.#steps.hasTwoSelectedShapes()) {
this._reset(allBpmnElementsIds);
}

this._pathManager.doActionOnPath(filterForPath, (filteredPath) => {
if (this._hasNoSelectedShape()) {
this._style.disableAllShapesAndEdgesExcept(allBpmnElementsIds, [filteredPath.sourceId]);
this._style.highlight(filteredPath.sourceId);
this._state.firstSelectedShape = filteredPath.sourceId;
this.#pathManager.doActionOnPath(filterForPath, (filteredPath) => {
if (this.#steps.hasNoSelectedShape()) {
this.#style.disableAllShapesAndEdgesExcept(allBpmnElementsIds, [filteredPath.sourceId]);
this.#style.highlight(filteredPath.sourceId);
this.#steps.goToStep2(filteredPath.sourceId);
}
this._style.highlight([filteredPath.edgeId, filteredPath.targetId]);
this._style.activatePointerOn(bpmnElementIdsWithoutEndEvent);
this._state.secondSelectedShape = filteredPath.targetId;
this._steps.goToStep3();
this.#style.highlight([filteredPath.edgeId, filteredPath.targetId]);
this.#style.activatePointerOn(bpmnElementIdsWithoutEndEvent);
this.#steps.goToStep3(filteredPath.targetId);
});
};
item.htmlElement.onmouseenter = () => {
this._pathManager.doActionOnPath(filterForPath,(filteredPath) => this._displayPossibleNextPath(filteredPath));
this.#pathManager.doActionOnPath(filterForPath,(filteredPath) => this._displayPossibleNextPath(filteredPath));
};
item.htmlElement.onmouseleave = () => {
this._pathManager.doActionOnPath(filterForPath, (filteredPath) => this._nonDisplayPossibleNextPath(filteredPath));
this.#pathManager.doActionOnPath(filterForPath, (filteredPath) => this._nonDisplayPossibleNextPath(filteredPath));
};
});
}

/**
* @private
*/
_hasOnlyOneSelectedShape() {
return this._state.firstSelectedShape && !this._state.secondSelectedShape ;
}

/**
* @private
*/
_hasTwoSelectedShapes() {
return this._state.firstSelectedShape && this._state.secondSelectedShape;
}

/**
* @private
*/
_hasNoSelectedShape() {
return !this._state.firstSelectedShape;
}

/**
* @param {string[]|string} ids
* @private
*/
_reset(ids) {
this._style.reset(ids);
this._state.firstSelectedShape = undefined;
this._state.secondSelectedShape = undefined;
this._steps.reset();
this.#style.reset(ids);
this.#steps.reset();
}

/**
Expand All @@ -206,8 +173,8 @@ class PathUseCase extends UseCase {
*/
_displayPossibleNextPath(path) {
const ids = [path.edgeId, path.targetId];
!this._hasOnlyOneSelectedShape() ? ids.push(path.sourceId) : this._style.activatePointerOn(ids);
this._style.displayPossibleNextElements(ids);
!this.#steps.hasOnlyOneSelectedShape() ? ids.push(path.sourceId) : this.#style.activatePointerOn(ids);
this.#style.displayPossibleNextElements(ids);
}

/**
Expand All @@ -216,7 +183,7 @@ class PathUseCase extends UseCase {
*/
_nonDisplayPossibleNextPath(path) {
const ids = [path.edgeId, path.targetId];
!this._hasOnlyOneSelectedShape() ? ids.push(path.sourceId) : this._style.disablePointerOn(ids);
this._style.nonDisplayPossibleNextElements(ids);
!this.#steps.hasOnlyOneSelectedShape() ? ids.push(path.sourceId) : this.#style.disablePointerOn(ids);
this.#style.nonDisplayPossibleNextElements(ids);
}
}
42 changes: 40 additions & 2 deletions demo/draw-path/js/steps.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,55 @@
class Steps {

#state;

constructor() {
this.reset();
}

get firstSelectedShapeId() {
return this.#state.firstSelectedShapeId;
}

hasNoSelectedShape() {
return !this.#state.firstSelectedShapeId;
}

hasOnlyOneSelectedShape() {
return this.#state.firstSelectedShapeId && !this.#state.secondSelectedShapeId ;
}

hasTwoSelectedShapes() {
return this.#state.firstSelectedShapeId && this.#state.secondSelectedShapeId;
}

reset() {
this.#state = {
firstSelectedShapeId: undefined,
secondSelectedShapeId: undefined,
};
this._goToStep(1);
}

goToStep2(){
/**
* @param {string} firstSelectedShapeId
*/
goToStep2(firstSelectedShapeId){
this.#state.firstSelectedShapeId = firstSelectedShapeId;
this._goToStep(2);
}

goToStep3(){
/**
* @param {string} secondSelectedShapeId
*/
goToStep3(secondSelectedShapeId){
this.#state.secondSelectedShapeId = secondSelectedShapeId;
this._goToStep(3);
}

/**
* @param {number} index
* @private
*/
_goToStep(index) {
const stepItems = document.getElementsByClassName("step-item");
for (let stepItem of stepItems) {
Expand Down

0 comments on commit c90a3d3

Please sign in to comment.