Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/reset of interactions #586

Merged
merged 2 commits into from
Nov 20, 2024
Merged

Fix/reset of interactions #586

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd5e01e
fix: fix reset of interactions
xile611 Nov 19, 2024
67d9f57
docs: update changlog of rush
xile611 Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: fix reset of interactions
  • Loading branch information
@xile611
xile611 committed Nov 19, 2024
commit cd5e01e6bf3461413dadbb019cd58ae3cb6ac521
2 changes: 1 addition & 1 deletion packages/vgrammar-core/src/interactions/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export abstract class BaseInteraction<T extends IBaseInteractionOptions> {
}

reset(element?: IElement | IGlyphElement) {
// do nothing
// do nothing
}

protected dispatchEvent(type: 'start' | 'reset' | 'update' | 'end', params: any) {
Expand Down
14 changes: 12 additions & 2 deletions packages/vgrammar-core/src/interactions/element-active-by-legend.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,19 +62,29 @@ export class ElementActiveByLegend extends BaseInteraction<ElementActiveByLegend
});
}

reset() {
resetAll() {
this._marks.forEach(mark => {
mark.elements.forEach(el => {
el.removeState(this.options.state);
});
});
}

reset(element?: InteractionEvent['element']) {
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.removeState(this.options.state);
}
} else {
this.resetAll();
}
}

handleStart = (e: InteractionEvent) => {
this.start(e.detail?.data?.id);
};

handleReset = (e: InteractionEvent) => {
this.reset();
this.resetAll();
};
}
14 changes: 9 additions & 5 deletions packages/vgrammar-core/src/interactions/element-active.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { InteractionStateEnum } from '../graph/enums';
import type { ElementActiveOptions, IMark, IView, InteractionEvent } from '../types';
import type { ElementActiveOptions, IElement, IMark, IView, InteractionEvent } from '../types';
import { BaseInteraction } from './base';

export class ElementActive extends BaseInteraction<ElementActiveOptions> {
Expand All @@ -13,6 +13,7 @@ export class ElementActive extends BaseInteraction<ElementActiveOptions> {
};
options: ElementActiveOptions;
protected _marks?: IMark[];
protected _prevActiveElement?: IElement;

constructor(view: IView, options?: ElementActiveOptions) {
super(view, options);
Expand All @@ -39,14 +40,17 @@ export class ElementActive extends BaseInteraction<ElementActiveOptions> {
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.addState(this.options.state);
this._prevActiveElement = element;
}
}
}

reset(element: InteractionEvent['element']) {
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.removeState(this.options.state);
reset(element?: InteractionEvent['element']) {
const el = element ?? this._prevActiveElement;

if (el) {
if (this._marks && this._marks.includes(el.mark)) {
el.removeState(this.options.state);
}
}
}
Expand Down
21 changes: 14 additions & 7 deletions packages/vgrammar-core/src/interactions/element-highlight-by-group.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export class ElementHighlightByGroup extends BaseInteraction<ElementHighlightOpt
];
}

clearPrevElements() {
resetAll() {
const states = [this.options.highlightState, this.options.blurState];

this._marks.forEach(mark => {
Expand Down Expand Up @@ -74,11 +74,13 @@ export class ElementHighlightByGroup extends BaseInteraction<ElementHighlightOpt
}
}

reset(element: InteractionEvent['element']) {
const hasActiveElement = element && this._marks && this._marks.includes(element.mark);

if (hasActiveElement) {
this.clearPrevElements();
reset(element?: InteractionEvent['element']) {
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.removeState([this.options.highlightState, this.options.blurState]);
}
} else {
this.resetAll();
}
}

Expand All @@ -87,6 +89,11 @@ export class ElementHighlightByGroup extends BaseInteraction<ElementHighlightOpt
};

handleReset = (e: InteractionEvent) => {
this.reset(e.element);
const element = e.element;
const hasActiveElement = element && this._marks && this._marks.includes(element.mark);

if (hasActiveElement) {
this.resetAll();
}
};
}
33 changes: 8 additions & 25 deletions packages/vgrammar-core/src/interactions/element-highlight-by-key.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export class ElementHighlightByKey extends BaseInteraction<ElementHighlightOptio
];
}

clearPrevElements() {
resetAll() {
const states = [this.options.highlightState, this.options.blurState];

this._marks.forEach(mark => {
Expand Down Expand Up @@ -74,30 +74,13 @@ export class ElementHighlightByKey extends BaseInteraction<ElementHighlightOptio
}
}

reset(element: InteractionEvent['element']) {
if (element && this._marks && this._marks.includes(element.mark)) {
const highlightKey = element.key;

if (isNil(highlightKey)) {
return;
reset(element?: InteractionEvent['element']) {
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.removeState([this.options.highlightState, this.options.blurState]);
}
this._marks.forEach(mark => {
mark.elements.forEach(el => {
const isHighlight = el.key === highlightKey;

if (isHighlight) {
el.updateStates({
[this.options.blurState]: false,
[this.options.highlightState]: true
});
} else {
el.updateStates({
[this.options.blurState]: true,
[this.options.highlightState]: false
});
}
});
});
} else {
this.resetAll();
}
}

Expand All @@ -109,7 +92,7 @@ export class ElementHighlightByKey extends BaseInteraction<ElementHighlightOptio
const hasActiveElement = e.element && this._marks && this._marks.includes(e.element.mark);

if (hasActiveElement) {
this.clearPrevElements();
this.resetAll();
}
};
}
17 changes: 14 additions & 3 deletions packages/vgrammar-core/src/interactions/element-highlight-by-legend.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,20 +70,31 @@ export class ElementHighlightByLegend extends BaseInteraction<ElementHighlightBy
});
}

reset() {
const states = [this.options.blurState, this.options.highlightState];
resetAll() {
const states = [this.options.highlightState, this.options.blurState];

this._marks.forEach(mark => {
mark.elements.forEach(el => {
el.removeState(states);
});
});
}

reset(element?: InteractionEvent['element']) {
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.removeState([this.options.highlightState, this.options.blurState]);
}
} else {
this.resetAll();
}
}

handleStart = (e: InteractionEvent, element: IElement | IGlyphElement) => {
this.start(e.detail?.data?.id);
};

handleReset = (e: InteractionEvent) => {
this.reset();
this.resetAll();
};
}
14 changes: 12 additions & 2 deletions packages/vgrammar-core/src/interactions/element-highlight-by-name.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export class ElementHighlightByName extends BaseInteraction<ElementHighlightByNa
});
}

reset() {
resetAll() {
const states = [this.options.blurState, this.options.highlightState];

this._marks.forEach(mark => {
Expand All @@ -87,6 +87,16 @@ export class ElementHighlightByName extends BaseInteraction<ElementHighlightByNa
});
}

reset(element?: InteractionEvent['element']) {
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.removeState([this.options.highlightState, this.options.blurState]);
}
} else {
this.resetAll();
}
}

handleStart = (e: InteractionEvent, element: IElement | IGlyphElement) => {
const shoudStart = this.options.shouldStart ? this.options.shouldStart(e) : this._filterByName(e);
if (shoudStart) {
Expand All @@ -99,7 +109,7 @@ export class ElementHighlightByName extends BaseInteraction<ElementHighlightByNa
const shoudReset = this.options.shouldReset ? this.options.shouldReset(e) : this._filterByName(e);

if (shoudReset) {
this.reset();
this.resetAll();
}
};
}
35 changes: 22 additions & 13 deletions packages/vgrammar-core/src/interactions/element-highlight.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export class ElementHighlight extends BaseInteraction<ElementHighlightOptions> {
return events;
}

clearPrevElements() {
resetAll() {
const { highlightState, blurState } = this.options;

if (this._lastElement) {
Expand Down Expand Up @@ -95,21 +95,17 @@ export class ElementHighlight extends BaseInteraction<ElementHighlightOptions> {

this.dispatchEvent('start', { elements: [element], options: this.options });
} else if (this._lastElement && this._resetType === 'view') {
this.clearPrevElements();
this.resetAll();
}
}

reset(element: InteractionEvent['element']) {
if (!this._statedElements || !this._statedElements.length) {
return;
}

const hasActiveElement = element && this._marks && this._marks.includes(element.mark);

if (this._resetType === 'view' && !hasActiveElement) {
this.clearPrevElements();
} else if (this._resetType === 'self' && hasActiveElement) {
this.clearPrevElements();
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.removeState([this.options.highlightState, this.options.blurState]);
}
} else {
this.resetAll();
}
}

Expand All @@ -118,6 +114,19 @@ export class ElementHighlight extends BaseInteraction<ElementHighlightOptions> {
};

handleReset = (e: InteractionEvent) => {
this.reset(e.element);
if (!this._statedElements || !this._statedElements.length) {
return;
}
const element = e.element;

if (element) {
const hasActiveElement = this._marks && this._marks.includes(element.mark);

if (this._resetType === 'view' && !hasActiveElement) {
this.resetAll();
} else if (this._resetType === 'self' && hasActiveElement) {
this.resetAll();
}
}
};
}
36 changes: 21 additions & 15 deletions packages/vgrammar-core/src/interactions/element-select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export class ElementSelect extends BaseInteraction<ElementSelectOptions> {
return events;
}

clearPrevElements = () => {
resetAll = () => {
const { state, reverseState } = this.options;

if (this._statedElements && this._statedElements.length) {
Expand All @@ -81,7 +81,17 @@ export class ElementSelect extends BaseInteraction<ElementSelectOptions> {
};

handleReset = (e: InteractionEvent) => {
this.reset(e.element);
if (!this._statedElements || !this._statedElements.length) {
return;
}
const element = e.element;
const hasActiveElement = element && this._marks && this._marks.includes(element.mark);

if (this._resetType.includes('view') && !hasActiveElement) {
this.resetAll();
} else if (this._resetType.includes('self') && hasActiveElement) {
this.resetAll();
}
};

start(element: InteractionEvent['element']) {
Expand All @@ -94,7 +104,7 @@ export class ElementSelect extends BaseInteraction<ElementSelectOptions> {
if (newStatedElements && newStatedElements.length) {
this._statedElements = this.updateStates(newStatedElements, this._statedElements, state, reverseState);
} else {
this.clearPrevElements();
this.resetAll();
}
}
} else {
Expand All @@ -113,26 +123,22 @@ export class ElementSelect extends BaseInteraction<ElementSelectOptions> {

if (this._resetType.includes('timeout')) {
this._timer = setTimeout(() => {
this.clearPrevElements();
this.resetAll();
}, this.options.triggerOff as number) as unknown as number;
}
}
} else if (this._resetType.includes('view') && this._statedElements && this._statedElements.length) {
this.clearPrevElements();
this.resetAll();
}
}

reset(element: InteractionEvent['element']) {
if (!this._statedElements || !this._statedElements.length) {
return;
}

const hasActiveElement = element && this._marks && this._marks.includes(element.mark);

if (this._resetType.includes('view') && !hasActiveElement) {
this.clearPrevElements();
} else if (this._resetType.includes('self') && hasActiveElement) {
this.clearPrevElements();
if (element) {
if (this._marks && this._marks.includes(element.mark)) {
element.removeState([this.options.state, this.options.reverseState]);
}
} else {
this.resetAll();
}
}
}