PropertyStack

[iamkeiryan]

Hi @artf,

I've been working on creating a custom UI for a box-shadow component. I'm using grapesjs/react.

Here's how I initialize the data:
Sector.tsx

 {
    id: 'effects',
    name: 'Effects',
    open: true,
    properties: [
      {
        property: 'box-shadow',
        type: 'stack',
        label: 'Box Shadow',
        properties: [
          {
            property: 'box-shadow-h',
            type: 'number',
            label: 'X-Offset',
            default: '0',
            units: ['px', '%', 'em', 'rem', 'vh', 'vw']
          },
          {
            property: 'box-shadow-v',
            label: 'Y-Offset',
            type: 'number',
            default: '0',
            units: ['px', '%', 'em', 'rem', 'vh', 'vw']
          },
          {
            property: 'box-shadow-blur',
            label: 'Blur',
            type: 'number',
            default: '5px',
            min: 0,
            units: ['px', '%', 'em', 'rem', 'vh', 'vw']
          },
          {
            property: 'box-shadow-spread',
            label: 'Spread',
            type: 'number',
            default: '0',
            units: ['px', '%', 'em', 'rem', 'vh', 'vw']
          },
          {
            property: 'box-shadow-color',
            type: 'color',
            label: 'Color',
            default: '#000000',
          },
          {
            property: 'box-shadow-type',
            type: 'select',
            label: 'Position',
            options: [
              {id: 'outset', label: 'Outside'},
              {id: 'inset', label: 'Inside'}
            ]
          },
        ]
      }
    ]
  }

StackField.tsx

export const StackField = ({ prop }: { prop: PropertyStack }) => {
  const layers = prop.getLayers(); // Each is { id, values, props }

  return (
    <>
      {layers.map((layer, i) => (
        <StackLayer key={i} index={i} layer={layer} />
      ))}
      <button onClick={() => prop.addLayer()}>Add Shadow</button>
    </>
  );
};

const StackLayer = ({
  index,
  layer,
}: {
  index: number;
  layer: any;
}) => {
  window.layer = layer;
  useEffect(() => {
    console.info('layer has updated!');
  }, [layer.prop.getValues()])


  return (
    <div className="border p-2 my-2">
      <div className="text-sm font-bold">Layer {index + 1}</div>
      <div className="text-sm font-bold">{Object.values(layer.prop.getValues()).join('  ')}</div>
      {layer.prop.getProperties().map((p: Property) => (
        <Input onChange={(e) => p.upValue(e.currentTarget.value)} />
      ))}

      <button onClick={() => layer.removeLayer(layer)}>Remove</button>
    </div>
  );
}

I've been playing around on how the upValues work and was able to implement the PropertyComposite. I tried debugging the values inside the layers, and they are updating normally. The issue is, when I try to check the values inside the layer, it's stale.

I'm not sure how does grapesjs handle it internally but I'm a bit lost on how it's working.

[artf]

You need to select the layer first, that you'd update the properties in the same way you update the PropertyComposite (eg. stackProperty.getProperty('property-name').upValue(...))