Angular Application Problem

Question

Hello currently I am developing an integration using Angular to create a panel for dragging blocks. I am trying to follow the Angular guide provided by Lucid here:

https://developer.lucid.co/guides/#angular
However I am encountering a problem. My panel appears and I can see my blocks but when I try to drag a block it doesn't get placed on the canvas. I'm not sure how to implement the part described in "Step 6: Write your Angular app."
I'm unsure if this component is necessary to refresh the web page when I place a block. Please help me with this issue.

I didn't implement this code:

import {Injectable} from '@angular/core';
@Injectable() export class DataFromExtension {
public ids: string[] = [];
constructor() {
//Listen for lists of selected item IDs
window.addEventListener('message' (event) =>
{ if (event.data['ids']) { this.ids = event.data['ids']; } });
//Once ready to receive those messages ask the extension to refresh data
parent.postMessage('refresh' '*'); } }

Connor B · Accepted Answer

Are you able to see the shape on the canvas at any point? If not it may be that you are missing "this.client.loadBlockClasses([<your_block>])" when you first load up your extension/panel. If the problem is just the fact that the block isn't being placed (or removed from your cursor) on pointer up when over the canvas then it could be because you need to send a message back to your angular app to remove any listeners related to pointer-up/move:

private stopDrag() {
    ...

    window.document.removeEventListener('pointerup' this.documentPointerUp);
    window.document.removeEventListener('pointermove' this.documentPointerMove);
    this.stopCanvasDrag();  // This tells the extension code to call "this.viewport.cancelDraggingNewBlock()"
                            // which is needed to finalize the placement of the block.
}

Connor B · Answer

Hello! In order to drag a block from your Angular component to the canvas you need to send a message from your angular component to your extension with the following method:

parent.postMessage({message: 'drag'})

You then need to deal with that message in your panel extension code by utilizing the messageFromFrame() method:

protected async messageFromFrame(message: any) {
    if(message == 'drag'){
        const myBlock = await this.viewport.startDraggingNewBlock(...);
    }
}

For more details take a look at Step 7 of the angular guide: https://developer.lucid.co/guides/#step-7-bonus-add-drag-and-drop-functionality

Angular Application Problem

Comments

Reply

Reply

Create an account in the community

Login with SSO

Log in to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded