Create draggable image & text elements

[danoszz]

To do

On /project page create a container where images or text (= rich elements) can be dragged in the HTML5 canvas of Konva.js

• Rich elements can be grouped per section
• Rich elements are draggable on mobile too
• Rich elements should not exceed containers boundaries
• Rich elements can be images and text

[RubenNijhuis]

Hi Daan,

Sorry to say but I do think I need some help with this. I tried to find a structure on how to do this, but I find it a bit too much. I have never done drag and drop and I am not really familiar with canvas nor Konva.js. I would like a small bit of guidance regarding this. Of course in the meantime, I will try to find more information or resources on how to do this so that I can at least learn some stuff on my own.

Sorry! 😅

[danoszz]

@RubenNijhuis let's forget about the drag and drop for now. Maybe focus on the elements to be imported in the canvas

You see here below that the component <Circle> and <StaticImage> are 'injected' in the canvas. So any type of component can be rendered on the canvas, it just needs to have an component.

<Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          {numbers.map(number => (
            <>
              {/* <Circle
                key={number.toString()}
                x={Math.random() * window.innerWidth}
                y={Math.random() * window.innerHeight}
                radius={50}
                fill={this.state.isDragging ? '#0000ed' : 'black'}
                opacity={0.8}
                draggable
                rotation={Math.random() * 10}
                shadowColor="rgba(0, 0, 0, 0.2)"
                shadowBlur={20}
                shadowOpacity={0.6}
                onDragStart={this.handleDragStart}
                onDragEnd={this.handleDragEnd}
              /> */}
              <StaticImage key={number.toString()} />
            </>
          ))}
        </Layer>
      </Stage>

So what I suggest:

• Make component for 'blog items' (image components), you can reuse the one on /home
• Inject them in the canvas like <StaticImage/>

[danoszz]

@RubenNijhuis please put task in progress pipeline

[RubenNijhuis]

I'll get onto it!