Getting Started

There are four important major pieces to using the interactive design area framework to build a design experience:

• The SelectArea, which allows the user to draw a multiselect box, and fires events when that selected region changes.
• The PanArea, which allows the user to pan the design in all directions, and also allows the devloper to set the panned position.
• The DesignArea, which correlates to the area in which a user is allowed to make changes. There can be multiple design areas in a design experience
• The DesignLayer, which provides the stacking context for different things on a design engine such as item outlines, image previews, and clickable regions.

Each DesignArea can have many items, and each item might have components living in several different DesignLayers.

The demo below shows the minimal setup required to get a full interactive design area on the screen, albeit without any items. You can right click to pan the design area, and left click to make a selection.

Interactive Design Area Demo

import { css, cx } from '@emotion/css';
import { DesignArea, DesignLayer, PanArea, SelectArea } from '@design-stack-ct/ida-framework';
import React, { useState } from 'react';

const workAreaLayerStyle = css`
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: auto;
    overflow: hidden;
`;

/**
 * This component represents an example of an interactive design area layer.
 * By consuming the components provided in @design-stack/component-library/idaFramework
 * and your own custom components, you can add DesignLayers to each DesignArea in a way
 * that makes the outcome predictable (scene layer, item preview layer, panel mask layer).
 */
export function IDAExample() {
    const [pan, setPan] = useState({ x: 10, y: 10 });
    const zoomFactor = 8;

    const visiblePanels = [
        {
            id: 'test-panel',
            dimensions: {
                width: 91.8 * zoomFactor,
                height: 53.7 * zoomFactor,
            },
            position: {
                x: 0,
                y: 0,
            },
        },
    ];

    return (
        <div className={cx(workAreaLayerStyle, 'dsc-work-area-layer')}>
            <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                <SelectArea>
                    <PanArea panOffset={pan} panOffsetChange={setPan} allowUserPan={true} className="dsc-pan-area">
                        {visiblePanels.map((panel) => {
                            const { width, height } = panel.dimensions;
                            const { x, y } = panel.position;
                            return (
                                <DesignArea
                                    id={panel.id}
                                    width={width}
                                    height={height}
                                    style={{ top: y, left: x, position: 'absolute' }}
                                    key={panel.id}
                                >
                                    <DesignLayer name="business-card-scene">
                                        <div
                                            className={css`
                                                width: 100%;
                                                height: 100%;
                                                background: white;
                                                outline: 1px solid #c4cdd6;
                                                box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
                                            `}
                                        />
                                    </DesignLayer>
                                </DesignArea>
                            );
                        })}
                    </PanArea>
                </SelectArea>
            </div>
        </div>
    );
}

export const ExampleDesignExperienceScreen = () => (
    <div style={{ position: 'relative', background: 'lightgray', height: 550 }}>
        <IDAExample />
    </div>
);