Angular Application Problem

  • 10 October 2023
  • 4 replies

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:

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 (['ids']) { this.ids =['ids']; } });
//Once ready to receive those messages ask the extension to refresh data
parent.postMessage('refresh' '*'); } }


Userlevel 1

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:

I appreciate your response and the guidance you provided. I followed the steps you mentioned including sending the 'drag' message from my Angular component and handling it in the messageFromFrame() method. However I'm still encountering an issue where the block doesn't get placed on the canvas when I receive the 'pointerup' message.

I have double-checked the coordinates and ensured that they are being passed correctly to this.viewport.dragPointerUp. I also verified that the maybeBlock object is properly configured with its properties.

I'm wondering if there might be any specific nuances or considerations related to the Lucidchart canvas that I should be aware of which could be causing this behavior. If there are any additional insights or suggestions to address this issue I would greatly appreciate it.

Thank you for your assistance!

Best regards.

Userlevel 1

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.

Thank you Connor the solution was that i received an object but in the tutorial they compare the object with a string i changed this and works. 

Thank for every thing