box-annotations 4.0.0-beta.8 → 4.0.1-beta.1

package/src/drawing/DrawingAnnotations.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import DecoratedDrawingPath from './DecoratedDrawingPath';
+import DrawingList from './DrawingList';
+import DrawingCreator from './DrawingCreator';
+import DrawingPathGroup from './DrawingPathGroup';
+import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
+import DrawingSVGGroup from './DrawingSVGGroup';
+import PopupDrawingToolbar, { PopupBaseRef } from '../components/Popups/PopupDrawingToolbar';
+import { AnnotationDrawing, PathGroup } from '../@types';
+import { CreatorItemDrawing, CreatorStatus } from '../store';
+import './DrawingAnnotations.scss';
+
+export type Props = {
+    activeAnnotationId: string | null;
+    addDrawingPathGroup: (pathGroup: PathGroup) => void;
+    annotations: AnnotationDrawing[];
+    canShowPopupToolbar: boolean;
+    color: string;
+    drawnPathGroups: Array<PathGroup>;
+    isCreating: boolean;
+    location: number;
+    redoDrawingPathGroup: () => void;
+    resetDrawing: () => void;
+    setActiveAnnotationId: (annotationId: string | null) => void;
+    setReferenceId: (uuid: string) => void;
+    setStaged: (staged: CreatorItemDrawing | null) => void;
+    setStatus: (status: CreatorStatus) => void;
+    setupDrawing: (location: number) => void;
+    stashedPathGroups: Array<PathGroup>;
+    undoDrawingPathGroup: () => void;
+};
+
+const DrawingAnnotations = (props: Props): JSX.Element => {
+    const {
+        activeAnnotationId,
+        addDrawingPathGroup,
+        annotations,
+        canShowPopupToolbar,
+        color,
+        drawnPathGroups,
+        isCreating,
+        location,
+        redoDrawingPathGroup,
+        resetDrawing,
+        setActiveAnnotationId,
+        setReferenceId,
+        setStaged,
+        setStatus,
+        setupDrawing,
+        stashedPathGroups,
+        undoDrawingPathGroup,
+    } = props;
+    const [isDrawing, setIsDrawing] = React.useState<boolean>(false);
+    const [stagedRootEl, setStagedRootEl] = React.useState<DrawingSVGRef | null>(null);
+    const hasDrawnPathGroups = drawnPathGroups.length > 0;
+    const hasStashedPathGroups = stashedPathGroups.length > 0;
+    const hasPathGroups = hasDrawnPathGroups || hasStashedPathGroups;
+    const popupDrawingToolbarRef = React.useRef<PopupBaseRef>(null);
+    const stagedGroupRef = React.useRef<SVGGElement>(null);
+    const { current: drawingSVGGroup } = stagedGroupRef;
+
+    const handleAnnotationActive = (annotationId: string | null): void => {
+        setActiveAnnotationId(annotationId);
+    };
+    const handleDelete = (): void => {
+        resetDrawing();
+    };
+    const handleDrawingMount = (uuid: string): void => {
+        setReferenceId(uuid);
+    };
+    const handleRedo = (): void => {
+        redoDrawingPathGroup();
+    };
+    const handleReply = (): void => {
+        setStaged({ location, pathGroups: drawnPathGroups });
+        setStatus(CreatorStatus.staged);
+    };
+    const handleStart = (): void => {
+        setupDrawing(location);
+        setStatus(CreatorStatus.started);
+        setIsDrawing(true);
+    };
+    const handleStop = (pathGroup: PathGroup): void => {
+        addDrawingPathGroup(pathGroup);
+        setIsDrawing(false);
+    };
+    const handleUndo = (): void => {
+        undoDrawingPathGroup();
+    };
+    React.useEffect(() => {
+        const { current: popup } = popupDrawingToolbarRef;
+        if (popup?.popper && drawnPathGroups.length) {
+            popup.popper.update();
+        }
+    }, [drawnPathGroups]);
+
+    return (
+        <>
+            <DrawingList
+                activeId={activeAnnotationId}
+                annotations={annotations}
+                className="ba-DrawingAnnotations-list"
+                onSelect={handleAnnotationActive}
+            />
+
+            {hasPathGroups && (
+                <DrawingSVG ref={setStagedRootEl} className="ba-DrawingAnnotations-target">
+                    {/* Group element to capture the bounding box around the drawn path groups */}
+                    <DrawingSVGGroup ref={stagedGroupRef} onMount={handleDrawingMount}>
+                        {drawnPathGroups.map(({ clientId: pathGroupClientId, paths, stroke }) => (
+                            <DrawingPathGroup key={pathGroupClientId} rootEl={stagedRootEl} stroke={stroke}>
+                                {/* Use the children render function to pass down the calculated strokeWidthWithBorder value */}
+                                {strokeWidthWithBorder =>
+                                    paths.map(({ clientId: pathClientId, points }) => (
+                                        <DecoratedDrawingPath
+                                            key={pathClientId}
+                                            borderStrokeWidth={strokeWidthWithBorder}
+                                            isDecorated
+                                            points={points}
+                                        />
+                                    ))
+                                }
+                            </DrawingPathGroup>
+                        ))}
+                    </DrawingSVGGroup>
+                </DrawingSVG>
+            )}
+
+            {isCreating && (
+                <DrawingCreator
+                    className="ba-DrawingAnnotations-creator"
+                    color={color}
+                    onStart={handleStart}
+                    onStop={handleStop}
+                />
+            )}
+
+            {isCreating && hasPathGroups && drawingSVGGroup && canShowPopupToolbar && (
+                <PopupDrawingToolbar
+                    ref={popupDrawingToolbarRef}
+                    canComment={hasDrawnPathGroups}
+                    canRedo={hasStashedPathGroups}
+                    canUndo={hasDrawnPathGroups}
+                    className={classNames('ba-DrawingAnnotations-toolbar', { 'ba-is-drawing': isDrawing })}
+                    onDelete={handleDelete}
+                    onRedo={handleRedo}
+                    onReply={handleReply}
+                    onUndo={handleUndo}
+                    reference={drawingSVGGroup}
+                />
+            )}
+        </>
+    );
+};
+
+export default DrawingAnnotations;

package/src/drawing/DrawingAnnotationsContainer.tsx

@@ -0,0 +1,66 @@
+import { connect } from 'react-redux';
+import DrawingAnnotations from './DrawingAnnotations';
+import withProviders from '../common/withProviders';
+import {
+    addDrawingPathGroupAction,
+    getDrawingDrawnPathGroupsForLocation,
+    getStashedDrawnPathGroupsForLocation,
+    redoDrawingPathGroupAction,
+    resetDrawingAction,
+    undoDrawingPathGroupAction,
+} from '../store/drawing';
+import { AnnotationDrawing, PathGroup } from '../@types';
+import {
+    AppState,
+    CreatorStatus,
+    getActiveAnnotationId,
+    getAnnotationMode,
+    getAnnotationsForLocation,
+    getColor,
+    getCreatorStatus,
+    Mode,
+    setActiveAnnotationIdAction,
+    setReferenceIdAction,
+    setStagedAction,
+    setStatusAction,
+} from '../store';
+import { isDrawing } from './drawingUtil';
+import { setupDrawingAction } from './actions';
+
+export type Props = {
+    activeAnnotationId: string | null;
+    annotations: AnnotationDrawing[];
+    color: string;
+    canShowPopupToolbar: boolean;
+    drawnPathGroups: Array<PathGroup>;
+    isCreating: boolean;
+    stashedPathGroups: Array<PathGroup>;
+};
+
+export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+    const creatorStatus = getCreatorStatus(state);
+
+    return {
+        activeAnnotationId: getActiveAnnotationId(state),
+        annotations: getAnnotationsForLocation(state, location).filter(isDrawing),
+        color: getColor(state),
+        canShowPopupToolbar: creatorStatus === CreatorStatus.started,
+        drawnPathGroups: getDrawingDrawnPathGroupsForLocation(state, location),
+        isCreating: getAnnotationMode(state) === Mode.DRAWING && creatorStatus !== CreatorStatus.pending,
+        stashedPathGroups: getStashedDrawnPathGroupsForLocation(state, location),
+    };
+};
+
+export const mapDispatchToProps = {
+    addDrawingPathGroup: addDrawingPathGroupAction,
+    redoDrawingPathGroup: redoDrawingPathGroupAction,
+    resetDrawing: resetDrawingAction,
+    setActiveAnnotationId: setActiveAnnotationIdAction,
+    setReferenceId: setReferenceIdAction,
+    setStaged: setStagedAction,
+    setStatus: setStatusAction,
+    setupDrawing: setupDrawingAction,
+    undoDrawingPathGroup: undoDrawingPathGroupAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withProviders(DrawingAnnotations));

package/src/drawing/DrawingCreator.scss

@@ -0,0 +1,9 @@
+.ba-DrawingCreator {
+    cursor: crosshair; // For legacy browsers like IE11
+}
+
+.ba-DrawingCreator-current {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}

package/src/drawing/DrawingCreator.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import classNames from 'classnames';
+import { bdlBoxBlue } from 'box-ui-elements/es/styles/variables';
+import DrawingPath, { DrawingPathRef } from './DrawingPath';
+import DrawingPathGroup from './DrawingPathGroup';
+import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
+import PointerCapture, { PointerCaptureRef, Status as DrawingStatus } from '../components/PointerCapture';
+import { getDrawingCursor } from './DrawingCursor';
+import { getPathCommands } from './drawingUtil';
+import { PathGroup, Position } from '../@types';
+import './DrawingCreator.scss';
+
+export type Props = {
+    className?: string;
+    color?: string;
+    onStart: () => void;
+    onStop: (pathGroup: PathGroup) => void;
+    size?: number;
+};
+
+export const defaultStrokeColor = bdlBoxBlue;
+export const defaultStrokeSize = 4;
+
+export default function DrawingCreator({
+    className,
+    color = defaultStrokeColor,
+    onStart,
+    onStop,
+    size = defaultStrokeSize,
+}: Props): JSX.Element {
+    const [drawingStatus, setDrawingStatus] = React.useState<DrawingStatus>(DrawingStatus.init);
+    const capturedPointsRef = React.useRef<Array<Position>>([]);
+    const creatorElRef = React.useRef<PointerCaptureRef>(null);
+    const drawingDirtyRef = React.useRef<boolean>(false);
+    const drawingPathRef = React.useRef<DrawingPathRef>(null);
+    const drawingSVGRef = React.useRef<DrawingSVGRef>(null);
+    const renderHandleRef = React.useRef<number | null>(null);
+    const stroke = { color, size };
+
+    const getPoints = React.useCallback((): Array<Position> => {
+        const { current: creatorEl } = creatorElRef;
+        const { current: points } = capturedPointsRef;
+
+        if (!creatorEl || !points.length) {
+            return [];
+        }
+
+        const { height, width } = creatorEl.getBoundingClientRect();
+        const { size: minSize } = stroke;
+        const MAX_X = width - minSize;
+        const MAX_Y = height - minSize;
+
+        return points.map(({ x, y }) => ({
+            x: (Math.min(MAX_X, Math.max(minSize, x)) / width) * 100,
+            y: (Math.min(MAX_Y, Math.max(minSize, y)) / height) * 100,
+        }));
+    }, [stroke]);
+
+    const getPosition = (x: number, y: number): [number, number] => {
+        const { current: creatorEl } = creatorElRef;
+
+        if (!creatorEl) {
+            return [x, y];
+        }
+
+        // Calculate the new position based on the mouse position less the page offset
+        const { left, top } = creatorEl.getBoundingClientRect();
+        return [x - left, y - top];
+    };
+
+    // Drawing Lifecycle Callbacks
+    const startDraw = (x: number, y: number): void => {
+        const [x1, y1] = getPosition(x, y);
+
+        setDrawingStatus(DrawingStatus.dragging);
+
+        capturedPointsRef.current = [{ x: x1, y: y1 }];
+        drawingDirtyRef.current = true;
+    };
+
+    const stopDraw = React.useCallback((): void => {
+        const adjustedPoints = getPoints();
+
+        // If there is only one point in the points array, it is likely the user clicked
+        // instead of dragging a path so this is not considered a path group.
+        if (!adjustedPoints || adjustedPoints.length <= 1) {
+            return;
+        }
+
+        setDrawingStatus(DrawingStatus.init);
+
+        capturedPointsRef.current = [];
+        drawingDirtyRef.current = true;
+
+        onStop({
+            paths: [{ points: adjustedPoints }],
+            stroke,
+        });
+    }, [getPoints, onStop, setDrawingStatus, stroke]);
+
+    const updateDraw = React.useCallback(
+        (x: number, y: number): void => {
+            const [x2, y2] = getPosition(x, y);
+            const { current: points } = capturedPointsRef;
+
+            points.push({ x: x2, y: y2 });
+            drawingDirtyRef.current = true;
+
+            if (drawingStatus !== DrawingStatus.drawing) {
+                setDrawingStatus(DrawingStatus.drawing);
+                onStart();
+            }
+        },
+        [drawingStatus, onStart, setDrawingStatus],
+    );
+
+    // Event Handlers
+    const renderStep = (callback: () => void): void => {
+        renderHandleRef.current = window.requestAnimationFrame(callback);
+    };
+    const renderPath = (): void => {
+        const { current: isDirty } = drawingDirtyRef;
+        const { current: svgPath } = drawingPathRef;
+
+        if (isDirty && svgPath) {
+            svgPath.setAttribute('d', getPathCommands(getPoints()));
+
+            drawingDirtyRef.current = false;
+        }
+
+        renderStep(renderPath);
+    };
+
+    React.useEffect(() => {
+        if (drawingStatus !== DrawingStatus.init) {
+            renderStep(renderPath);
+        }
+
+        return () => {
+            const { current: renderHandle } = renderHandleRef;
+
+            // Cancel the render loop
+            if (renderHandle) {
+                window.cancelAnimationFrame(renderHandle);
+            }
+        };
+    }, [drawingStatus]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    React.useEffect(() => {
+        const { current: element } = creatorElRef;
+
+        if (!element) {
+            return;
+        }
+
+        // Safari doesn't support continuous switching custom cursors
+        // So we do "custom -> crosshair -> custom" to solve it
+        // The UX is the same, since it's too fast to feel the switching
+        element.style.cursor = 'crosshair';
+        element.style.cursor = getDrawingCursor(color);
+    }, [color, creatorElRef]);
+
+    return (
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        <PointerCapture
+            ref={creatorElRef}
+            className={classNames(className, 'ba-DrawingCreator')}
+            data-testid="ba-DrawingCreator"
+            onDrawStart={startDraw}
+            onDrawStop={stopDraw}
+            onDrawUpdate={updateDraw}
+            status={drawingStatus}
+        >
+            {drawingStatus !== DrawingStatus.init && (
+                <DrawingSVG ref={drawingSVGRef} className="ba-DrawingCreator-current">
+                    <DrawingPathGroup rootEl={drawingSVGRef.current} stroke={stroke}>
+                        <DrawingPath ref={drawingPathRef} />
+                    </DrawingPathGroup>
+                </DrawingSVG>
+            )}
+        </PointerCapture>
+    );
+}

package/src/drawing/DrawingCursor.ts

@@ -0,0 +1,23 @@
+const getDrawingCursor = (color: string): string => {
+    const encodedSvg = encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' viewBox='0 0 32 32'>
+    <defs>
+      <path id='ba-DrawingCursor-b' d='M23.0868949,12.6610542 L21.7362465,14.0116939 C21.5985448,14.1493947 21.3758783,14.1493947 21.2381766,14.0116939 L17.9860729,10.7596114 C17.8483713,10.6219106 17.8483713,10.3992455 17.9860729,10.2615447 L19.3367214,8.91090502 C19.8845983,8.36303166 20.7752645,8.36303166 21.3260713,8.91090502 L23.0868949,10.6717173 C23.6377017,11.2195906 23.6377017,12.1102511 23.0868949,12.6610542 Z M16.825863,11.4217471 L9.13214756,19.1154126 L8.51102507,22.6751246 C8.4260602,23.1556124 8.8450249,23.5716446 9.32551588,23.4896101 L12.8852509,22.8655618 L20.5789664,15.1718963 C20.7166681,15.0341955 20.7166681,14.8115304 20.5789664,14.6738296 L17.3268627,11.4217471 C17.1862312,11.2840463 16.9635647,11.2840463 16.825863,11.4217471 Z M12.1352162,18.4562067 C11.974076,18.2950675 11.974076,18.0372447 12.1352162,17.8761055 L16.6471438,13.3642072 C16.8082841,13.203068 17.0661085,13.203068 17.2272488,13.3642072 C17.388389,13.5253464 17.388389,13.7831692 17.2272488,13.9443084 L12.7153212,18.4562067 C12.5541809,18.6173459 12.2963565,18.6173459 12.1352162,18.4562067 L12.1352162,18.4562067 Z M11.0775501,20.9201719 L12.4838652,20.9201719 L12.4838652,21.9836908 L10.5941293,22.3147587 L9.6829543,21.4035896 L10.0140243,19.513866 L11.0775501,19.513866 L11.0775501,20.9201719 Z'/>
+      <filter id='ba-DrawingCursor-a' width='196.7%' height='196.7%' x='-48.3%' y='-41.7%' filterUnits='objectBoundingBox'>
+        <feMorphology in='SourceAlpha' operator='dilate' radius='.75' result='shadowSpreadOuter1'/>
+        <feOffset dy='1' in='shadowSpreadOuter1' result='shadowOffsetOuter1'/>
+        <feGaussianBlur in='shadowOffsetOuter1' result='shadowBlurOuter1' stdDeviation='2'/>
+        <feComposite in='shadowBlurOuter1' in2='SourceAlpha' operator='out' result='shadowBlurOuter1'/>
+        <feColorMatrix in='shadowBlurOuter1' values='0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.24647618 0'/>
+      </filter>
+    </defs>
+    <g fill='none' stroke-linejoin='round'>
+      <use fill='#000' filter='url(#ba-DrawingCursor-a)' xlink:href='#ba-DrawingCursor-b'/>
+      <path fill='${color}' fill-rule='evenodd' stroke='#FFF' stroke-width='.75' d='M16.8075762,10.9097054 L21.119532,14.6460363 L13.0730631,23.2133559 L9.38862666,23.8592613 C9.02061417,23.9220923 8.67630709,23.7937251 8.44046,23.5578795 C8.23387707,23.3512979 8.11025348,23.0623685 8.12610763,22.7471873 L8.14160649,22.6106659 L8.78311611,18.9341134 L16.8075762,10.9097054 Z M10.3290377,19.888866 L10.0859707,21.276275 L10.7214427,21.9117429 L12.1088652,21.6686767 L12.1088652,21.2951719 L10.7025501,21.2951719 L10.3290377,19.888866 Z M16.912308,13.6293731 L12.4003804,18.1412714 L12.3922785,18.1528739 L12.3922785,18.1528739 L12.389361,18.1661561 C12.389361,18.1753081 12.3934679,18.1841284 12.4003804,18.1910408 C12.4072938,18.1979542 12.4161155,18.2020611 12.4252687,18.2020611 C12.4344219,18.2020611 12.4432436,18.1979542 12.450157,18.1910408 L12.450157,18.1910408 L16.9620846,13.6791425 L16.9701864,13.66754 L16.9701864,13.66754 L16.973104,13.6542578 C16.973104,13.6384287 16.9537538,13.6286304 16.912308,13.6293731 L16.912308,13.6293731 Z M20.3302976,8.125 C20.7859086,8.125 21.2419828,8.29834457 21.5912354,8.64573912 L21.5912354,8.64573912 L23.3513511,10.4058452 C23.7004504,10.7530854 23.875,11.2089541 23.875,11.6652871 C23.875,12.1211084 23.7008005,12.577481 23.3520591,12.9262201 L23.3520591,12.9262201 L21.7544376,14.5238313 L17.4797801,10.8169258 L19.0500461,8.66761683 C19.3996549,8.30599451 19.8646885,8.125 20.3302976,8.125 Z'/>
+    </g>
+  </svg>`);
+
+    // x-offset is 6, y-offset is 22, fallback cursor is crosshair
+    return `url("data:image/svg+xml,${encodedSvg}") 6 22, crosshair`;
+};
+
+export { getDrawingCursor };

package/src/drawing/DrawingList.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import DrawingSVG, { DrawingSVGRef } from './DrawingSVG';
+import DrawingTarget from './DrawingTarget';
+import useIsListInteractive from '../common/useIsListInteractive';
+import { AnnotationDrawing } from '../@types';
+import { checkValue } from '../utils/util';
+import { getShape } from './drawingUtil';
+
+export type Props = {
+    activeId?: string | null;
+    annotations: AnnotationDrawing[];
+    className?: string;
+    onSelect?: (annotationId: string | null) => void;
+};
+
+export function filterDrawing({ target: { path_groups: pathGroups } }: AnnotationDrawing): boolean {
+    return pathGroups.every(({ paths }) =>
+        paths.every(({ points }) => points.every(({ x, y }) => checkValue(x) && checkValue(y))),
+    );
+}
+
+export function sortDrawing({ target: targetA }: AnnotationDrawing, { target: targetB }: AnnotationDrawing): number {
+    const { height: heightA, width: widthA } = getShape(targetA.path_groups);
+    const { height: heightB, width: widthB } = getShape(targetB.path_groups);
+
+    // If B is smaller, the result is negative.
+    // So, A is sorted to an index lower than B, which means A will be rendered first at bottom
+    return heightB * widthB - heightA * widthA;
+}
+
+export function DrawingList({ activeId = null, annotations, className, onSelect = noop }: Props): JSX.Element {
+    const [rootEl, setRootEl] = React.useState<DrawingSVGRef | null>(null);
+    const isListening = useIsListInteractive();
+
+    return (
+        <DrawingSVG
+            ref={setRootEl}
+            className={classNames(className, { 'is-listening': isListening })}
+            data-resin-component="drawingList"
+        >
+            {annotations
+                .filter(filterDrawing)
+                .sort(sortDrawing)
+                .map(({ id, target }) => (
+                    <DrawingTarget
+                        key={id}
+                        annotationId={id}
+                        isActive={activeId === id}
+                        onSelect={onSelect}
+                        rootEl={rootEl}
+                        target={target}
+                    />
+                ))}
+        </DrawingSVG>
+    );
+}
+
+export default React.memo(DrawingList);

package/src/drawing/DrawingManager.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import BaseManager, { Props } from '../common/BaseManager';
+import DrawingAnnotationsContainer from './DrawingAnnotationsContainer';
+
+export default class DrawingListManager extends BaseManager {
+    decorate(): void {
+        this.reactEl.classList.add('ba-Layer--drawing');
+        this.reactEl.dataset.testid = 'ba-Layer--drawing';
+    }
+
+    render(props: Props): void {
+        ReactDOM.render(<DrawingAnnotationsContainer location={this.location} {...props} />, this.reactEl);
+    }
+}

package/src/drawing/DrawingPath.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export type Props = React.SVGProps<DrawingPathRef> & {
+    pathCommands?: string;
+};
+
+export type DrawingPathRef = SVGPathElement;
+
+const DrawingPath = (props: Props, ref: React.Ref<SVGPathElement>): JSX.Element => {
+    const { pathCommands, ...rest } = props;
+
+    return <path ref={ref} d={pathCommands} strokeLinecap="round" vectorEffect="non-scaling-stroke" {...rest} />;
+};
+
+export { DrawingPath as DrawingPathBase };
+
+export default React.forwardRef(DrawingPath);

package/src/drawing/DrawingPathGroup.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { DrawingSVGRef } from './DrawingSVG';
+import { isVectorEffectSupported } from './drawingUtil';
+import { Stroke } from '../@types';
+
+export type ChildrenRenderFunction = (strokeWidthWithBorder: number) => React.ReactNode;
+
+export type Props = {
+    children?: React.ReactNode | ChildrenRenderFunction;
+    isActive?: boolean;
+    rootEl: DrawingSVGRef | null;
+    stroke: Stroke;
+};
+
+export const DRAWING_BORDER_WIDTH = 1;
+
+export const DrawingPathGroup = ({
+    children,
+    isActive = false,
+    rootEl,
+    stroke: { color, size },
+}: Props): JSX.Element => {
+    let strokeWidth = size;
+    // A line has two sides and each side needs a border, so add DRAWING_BORDER_WIDTH * 2
+    let strokeWidthWithBorder = strokeWidth + DRAWING_BORDER_WIDTH * 2;
+
+    // "vector-effect: non-scaling-stroke" prevents stroke width to be scaled
+    // However, IE/Edge doesn't support it, so we have to manually inverse scale the stroke width
+    if (!isVectorEffectSupported()) {
+        if (!rootEl) {
+            return <g className="ba-DrawingPathGroup" />;
+        }
+        const { clientWidth } = rootEl;
+        const scale = clientWidth / 100; // SVG viewbox is 100 * 100
+        strokeWidth /= scale;
+        strokeWidthWithBorder /= scale;
+    }
+
+    return (
+        <g
+            className={classNames('ba-DrawingPathGroup', { 'is-active': isActive })}
+            fill="transparent"
+            stroke={color}
+            strokeWidth={strokeWidth}
+        >
+            {typeof children === 'function' ? children(strokeWidthWithBorder) : children}
+        </g>
+    );
+};
+
+export default DrawingPathGroup;

package/src/drawing/DrawingSVG.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+import * as uuid from 'uuid';
+import SVGFilterContext from './SVGFilterContext';
+
+export type Props = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+export type DrawingSVGRef = SVGSVGElement;
+
+export function DrawingSVG({ className, children, ...rest }: Props, ref: React.Ref<DrawingSVGRef>): JSX.Element {
+    const { current: filterID } = React.useRef(`ba-DrawingSVG-shadow_${uuid.v4()}`);
+
+    return (
+        <svg
+            ref={ref}
+            className={classNames('ba-DrawingSVG', className)}
+            preserveAspectRatio="none"
+            viewBox="0 0 100 100"
+            {...rest}
+        >
+            <defs>
+                <filter filterUnits="userSpaceOnUse" id={filterID}>
+                    <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
+                </filter>
+            </defs>
+            <SVGFilterContext.Provider value={filterID}>{children}</SVGFilterContext.Provider>
+        </svg>
+    );
+}
+
+export default React.forwardRef(DrawingSVG);

package/src/drawing/DrawingSVGGroup.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import useMountId from '../common/useMountId';
+
+export type Props = React.SVGAttributes<SVGGElement> & {
+    children?: React.ReactNode;
+    onMount?: (uuid: string) => void;
+};
+
+export type DrawingSVGGroup = SVGGElement;
+
+export function DrawingSVGGroup(props: Props, ref: React.Ref<DrawingSVGGroup>): JSX.Element {
+    const { children, onMount = noop, ...rest } = props;
+    const uuid = useMountId(onMount);
+
+    return (
+        <g ref={ref} data-ba-reference-id={uuid} {...rest}>
+            {children}
+        </g>
+    );
+}
+
+export default React.forwardRef(DrawingSVGGroup);

package/src/drawing/DrawingTarget.scss

@@ -0,0 +1,11 @@
+.ba-DrawingTarget {
+    outline: none;
+
+    &:hover {
+        cursor: pointer;
+
+        .ba-DecoratedDrawingPath-decoration {
+            opacity: 1;
+        }
+    }
+}