excalidraw icon indicating copy to clipboard operation
excalidraw copied to clipboard

Locking text does not work with convertToExcalidrawElements

Open krzysztofMlczk opened this issue 2 years ago • 5 comments

Expected result

When creating text container from ExcalidrawElementSkeleton with convertToExcalidrawElements if label is explicitly locked from editing it should not be editable on the canvas.

Actual result

Text can be edited.

Minimal reproduction code:

const Wrapper = () => {
  const elements = convertToExcalidrawElements({
      x: 300,
      y: 300,
      width: 300,
      height: 300,
      backgroundColor: '#ffec99',
      fillStyle: 'solid',
      strokeWidth: 1,
      strokeStyle: 'solid',
      strokeColor: 'transparent',
      roughness: 0,
      type: 'rectangle',
      label: {
        text: 'Card content',
        fontFamily: FONT_FAMILY.Helvetica,
        locked: true, // LABEL IS EXPLICITLY LOCKED
        strokeColor: '#1e1e1e',
        groupIds: ['the id'],
      },
      groupIds: ['the id']
  })
  return (
    <Excalidraw initialData={{ elements }}/>
  )
}

krzysztofMlczk avatar Feb 13 '24 09:02 krzysztofMlczk

@krzysztofMlczk the label is not an independent element but a the part of a container (rectangle) in the above example. So instead rectangle should be locked. Can you try that and confirm if it works ?

ad1992 avatar Feb 14 '24 05:02 ad1992

@ad1992 Well your solution indeed locks editing of the rectangle including text, however it prevents me from moving the rectangle or scaling. Isn't there a way to only lock the text? Maybe we could consider adding locking only text for text containers?

krzysztofMlczk avatar Feb 15 '24 11:02 krzysztofMlczk

@ad1992 Well your solution indeed locks editing of the rectangle including text, however it prevents me from moving the rectangle or scaling. Isn't there a way to only lock the text? Maybe we could consider adding locking only text for text containers?

In text containers, text is no longer a separate element but part of the container itself hence locking just the text wouldn't make sense, either you lock the whole text container or you don't :)

However if you still want to lock just the text then you can create a separate text element instead of attaching a label to the container. That way both text and rectangle will be treated as separate elements.

ad1992 avatar Feb 15 '24 11:02 ad1992

@ad1992 right but then I lose benefits of text containers like automatic text wrapping when resizing right?

krzysztofMlczk avatar Feb 15 '24 12:02 krzysztofMlczk

@ad1992 right but then I lose benefits of text containers like automatic text wrapping when resizing right?

yes, you will lose the text container behavior. Curious to know, can you please elaborate on the use case of keeping the text locked while container editable ?

ad1992 avatar Feb 15 '24 12:02 ad1992