Skip to content
This repository has been archived by the owner on Oct 18, 2024. It is now read-only.

Commit

Permalink
Merge pull request #680 from SuperViz/lab
Browse files Browse the repository at this point in the history
Little bug fixes
  • Loading branch information
carlossantos74 authored May 22, 2024
2 parents cda5f79 + 0fc0dad commit 2b3c23f
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 75 deletions.
4 changes: 3 additions & 1 deletion src/components/comments/canvas-pin-adapter/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,12 @@ export class CanvasPin implements PinAdapter {
* @returns {void}
* */
public destroy(): void {
this.isActive = false;
this.removeListeners();
this.removeAnnotationsPins();
this.pins = new Map();
this.divWrapper.remove();
this.divWrapper = null;
this.onPinFixedObserver.destroy();
this.onPinFixedObserver = null;
this.canvas.style.cursor = 'default';
Expand Down Expand Up @@ -255,7 +257,7 @@ export class CanvasPin implements PinAdapter {
this.renderTemporaryPin();
}

requestAnimationFrame(this.animate);
this.animateFrame = requestAnimationFrame(this.animate);
};

/**
Expand Down
29 changes: 15 additions & 14 deletions src/components/form-elements/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -394,15 +394,15 @@ export class FormElements extends BaseComponent {

this.room?.emit(FieldEvents.INTERACTION + target.id, {
fieldId: target.id,
color: this.localParticipant.slot.color,
color: this.localParticipant.slot?.color,
});

const canSync = this.canSyncContent(target.id);
if (!canSync) return;

const payload: InputPayload & FocusPayload = {
value: target.value,
color: this.localParticipant.slot.color,
color: this.localParticipant.slot?.color,
fieldId: target.id,
showOutline: this.canUpdateColor(target.id),
syncContent: canSync,
Expand Down Expand Up @@ -604,16 +604,17 @@ export class FormElements extends BaseComponent {
timestamp,
...params
}: SocketEvent<InputPayload>) => {
if (syncContent && this.canSyncContent(fieldId)) {
this.publish(FieldEvents.CONTENT_CHANGE, {
value,
fieldId,
attribute,
userId: presence.id,
userName: presence.name,
timestamp,
});

if (syncContent && this.canSyncContent(fieldId) && presence.id !== this.localParticipant.id) {
this.fields[fieldId][attribute] = value;
this.publish(FieldEvents.CONTENT_CHANGE, {
value,
fieldId,
attribute,
userId: presence.id,
userName: presence.name,
timestamp,
});
}

if (showOutline && this.canUpdateColor(fieldId)) {
Expand Down Expand Up @@ -659,10 +660,10 @@ export class FormElements extends BaseComponent {
);
}

private canSyncContent(fieldId: string): boolean {
private canSyncContent = (fieldId: string): boolean => {
return (
(!this.flags.disableRealtimeSync && this.enabledRealtimeSyncFields[fieldId] !== false) ||
this.enabledRealtimeSyncFields[fieldId]
!!this.enabledRealtimeSyncFields[fieldId]
);
}
};
}
1 change: 1 addition & 0 deletions src/components/who-is-online/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ const generateMockParticipant = ({
name,
disableDropdown,
isPrivate,
avatar: {},
},
};

Expand Down
4 changes: 3 additions & 1 deletion src/components/who-is-online/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ export class WhoIsOnline extends BaseComponent {

this.room.presence.get((list) => {
const dataList = list
.filter((participant) => participant.data['id'])
.filter((participant) => participant.data['id'] && participant.data['avatar'])
.map(({ data }: { data: any }) => {
const tooltip = this.getTooltipData(data);
const controls = this.getControls(data);
Expand All @@ -183,6 +183,8 @@ export class WhoIsOnline extends BaseComponent {
};
}) as WhoIsOnlineParticipant[];

if (!dataList.length) return;

const localParticipantIndex = dataList.findIndex((participant) => {
return participant.id === this.localParticipantId;
});
Expand Down
24 changes: 15 additions & 9 deletions src/web-components/comments/components/comment-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
return this.shadowRoot!.querySelector('.comments__input__textarea') as HTMLTextAreaElement;
}

private get mentionButton() {
return this.shadowRoot!.querySelector('.mention-button') as HTMLButtonElement;
}

private get sendBtn() {
return this.shadowRoot!.querySelector('.comments__input__send-button') as HTMLButtonElement;
}
Expand Down Expand Up @@ -145,7 +149,7 @@ export class CommentsCommentInput extends WebComponentsBaseElement {

updated(changedProperties: Map<string, any>) {
if (changedProperties.has('mode') && this.mode === CommentMode.EDITABLE) {
this.focusInput()
this.focusInput();
this.updateHeight();
this.sendBtn.disabled = false;
this.btnActive = true;
Expand Down Expand Up @@ -199,13 +203,13 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
if (this.commentInput?.value.length === 0) this.btnActive = false;
else this.btnActive = true;

if (e.data === null) return;

this.autoCompleteHandler.setInput(e);
const caretIndex = this.autoCompleteHandler.getSelectionStart();
const keyData = this.autoCompleteHandler.getLastKeyBeforeCaret(caretIndex);
const keyIndex = keyData?.keyIndex ?? -1;

if (caretIndex === -1) return;

let searchText = this.autoCompleteHandler.searchMention(caretIndex, keyIndex);
let position = this.autoCompleteHandler.getSelectionPosition();

Expand Down Expand Up @@ -350,6 +354,9 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
private onTextareaLoseFocus = (e) => {
const target = e.explicitOriginalTarget?.parentNode?.host;

const mentionBtn = this.mentionButton;
if (mentionBtn === e.explicitOriginalTarget || mentionBtn === e.relatedTarget) return;

// explicitOriginalTarget is for Firefox
// relatedTarget is for Chrome
if (
Expand Down Expand Up @@ -459,12 +466,11 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
></superviz-comments-mention-list>
<div class="sv-hr"></div>
<div class="comments__input__options">
<button class="icon-button icon-button--medium icon-button--clickable">
<superviz-icon
name="mention"
@click=${this.addAtSymbolInCaretPosition}
size="sm"
></superviz-icon>
<button
@click=${this.addAtSymbolInCaretPosition}
class="mention-button icon-button icon-button--medium icon-button--clickable"
>
<superviz-icon name="mention" size="sm"></superviz-icon>
</button>
<div class="comment-input-options">
${this.commentInputOptions()} ${this.commentInputEditableOptions()}
Expand Down
35 changes: 17 additions & 18 deletions src/web-components/comments/components/mention-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export class CommentsMentionList extends WebComponentsBaseElement {
}

static styles = styles;
declare participants: ParticipantByGroupApi[]

declare participants: ParticipantByGroupApi[];

static properties = {
participants: { type: Object },
Expand All @@ -27,39 +27,39 @@ export class CommentsMentionList extends WebComponentsBaseElement {
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
if (_changedProperties.has('participants') && this.participants.length > 0) {
this.showMentionList();
return
return;
}

this.hideMentionList();
}

showMentionList = () => {
const mentionList = this.shadowRoot?.getElementById('mention-list');
mentionList?.style.setProperty('display', 'block');
mentionList?.style.setProperty('display', 'block');
mentionList?.style.setProperty('margin-top', '1px');
mentionList.addEventListener('wheel', this.stopHandleZoom);
}
};

hideMentionList = () => {
const mentionList = this.shadowRoot?.getElementById('mention-list');
mentionList.removeEventListener('wheel', this.stopHandleZoom);
mentionList?.style.setProperty('display', 'none');
}
mentionList?.style.setProperty('display', 'none');
};

private selectParticipant = (participant) => {
this.emitEvent('participant-selected', participant, {
bubbles: false,
composed: false,
})
});

this.hideMentionList()
}
this.hideMentionList();
};

private stopHandleZoom = (event) => {
const menu = this.shadowRoot?.getElementById('mention-list');
menu.scrollTop += event.deltaY;
event.preventDefault();
}
};

private getAvatar(participant: ParticipantByGroupApi) {
if (participant.avatar) {
Expand All @@ -74,19 +74,18 @@ export class CommentsMentionList extends WebComponentsBaseElement {
protected render() {
const mentionItem = (participant) => html`
<div class="mention-item" @click=${() => this.selectParticipant(participant)}>
${this.getAvatar(participant)}
${this.getAvatar(participant)}
<div class="avatar-type">${participant.name}</div>
</div>
`
`;

return html`
<div id="mention-list">
${repeat(
this.participants,
(participant: ParticipantByGroupApi) => participant.id,
(participant) => html`
${mentionItem(participant)}
`)}
this.participants,
(participant: ParticipantByGroupApi) => participant.id,
(participant) => html` ${mentionItem(participant)} `,
)}
</div>
`;
}
Expand Down
4 changes: 2 additions & 2 deletions src/web-components/comments/css/mention-list.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { css } from 'lit';

export const mentionListStyle = css`
#mention-list {
position: absolute;
position: fixed;
z-index: 1;
max-height: 200px;
overflow-y: auto;
Expand All @@ -12,7 +12,7 @@ export const mentionListStyle = css`
width: 216px;
text-align: -webkit-center;
border-radius: 2px;
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.30);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.3);
padding-top: 4px;
padding-bottom: 4px;
/* Stiling scroll WebKit (Firefox) */
Expand Down
64 changes: 34 additions & 30 deletions src/web-components/comments/utils/mention-handler.ts
Original file line number Diff line number Diff line change
@@ -1,66 +1,70 @@
import { ParticipantByGroupApi } from '../../../common/types/participant.types';


const MENTION_ACTION = {
SHOW: 'show',
HIDE: 'hide'
}
HIDE: 'hide',
};

const DEFAULT_HIDE_MENTION_LIST = {
action: MENTION_ACTION.HIDE,
mentions: [],
findDigitParticipant: false,
}
};

type hideMentionList = {
action: string;
mentions: ParticipantByGroupApi[];
findDigitParticipant: boolean
findDigitParticipant: boolean;
};

const matchParticipant = (name: string, position, participantList: ParticipantByGroupApi[]): hideMentionList => {
let mentionList = []
const matchParticipant = (
name: string,
position,
participantList: ParticipantByGroupApi[],
): hideMentionList => {
let mentionList = [];

mentionList = participantList?.filter((participant: ParticipantByGroupApi) => participant?.email)
mentionList = participantList?.filter((participant: ParticipantByGroupApi) => participant?.email);
if (name.length > 0) {
mentionList = mentionList
.filter((participant: ParticipantByGroupApi) => participant?.name
.toLowerCase()
.search(name.toLowerCase()) !== -1
);
if (name === mentionList[0]?.name?.toLowerCase()) {
const mentions = prepareMentionList(mentionList, position);
return {
action: MENTION_ACTION.HIDE,
mentions,
findDigitParticipant: true
}
}
mentionList = mentionList.filter(
(participant: ParticipantByGroupApi) =>
participant?.name.toLowerCase().search(name.toLowerCase()) !== -1,
);

if (name === mentionList[0]?.name?.toLowerCase()) {
const mentions = prepareMentionList(mentionList, position);
return {
action: MENTION_ACTION.HIDE,
mentions,
findDigitParticipant: true,
};
}
}

if (!(mentionList?.length > 0)) {
return DEFAULT_HIDE_MENTION_LIST
return DEFAULT_HIDE_MENTION_LIST;
}

const mentions = prepareMentionList(mentionList, position);

return {
action: MENTION_ACTION.SHOW,
mentions,
findDigitParticipant: false
}
}
findDigitParticipant: false,
};
};

const prepareMentionList = (users: ParticipantByGroupApi[], position): ParticipantByGroupApi[] => {
return users.map((user: ParticipantByGroupApi) => ({
id: user.id,
name: user.name,
avatar: user.avatar,
email: user.email,
position
}))
}
position,
}));
};

export default {
matchParticipant: (name, position, participantList: ParticipantByGroupApi[]) => matchParticipant(name, position, participantList),
}
matchParticipant: (name, position, participantList: ParticipantByGroupApi[]) =>
matchParticipant(name, position, participantList),
};

0 comments on commit 2b3c23f

Please sign in to comment.