@progress/kendo-themes-html 14.7.0-dev.14 → 14.7.0-dev.16

package/src/imageeditor/templates/imageeditor-frames.tsx

@@ -1,4 +1,5 @@
-import { ImageEditor, ImageEditorPane, ImageEditorOptionPreview, ImageEditorPreviewThumbnail } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorOptionPreview, ImageEditorPreviewThumbnail, ImageEditorCanvas } from "..";
+import { IMAGEEDITOR_ADAPTIVE_CANVAS_SIZE, IMAGEEDITOR_CANVAS_SIZE } from "../constants";
 import { Button } from "../../button";
 import { NumericTextbox } from "../../numerictextbox";
 import { ColorPicker } from "../../colorpicker";
@@ -7,174 +8,147 @@ import { Form, FormField, Fieldset } from "../../form";
 import { Icon } from "../../icon";
 import { Slider } from "../../slider";
 
-const framesSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" aria-label="Shapes"></Button>,
-    <div className="k-separator" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" selected aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
-const FrameSlider = ({ id, label, value }: { id: string; label: string; value: number }) => (
-    <FormField
-        label={label}
-        editorId={id}
-        editor={
-            <div className="k-imageeditor-field-row">
-                <Slider
-                    style={{ flex: 1, "--kendo-slider-start": 0, "--kendo-slider-end": value } as React.CSSProperties}
-                    aria-label={label}
-                    showButtons={false}
-                    showTicks={false}
-                    value={value}
-                    min={0}
-                    max={100}
-                />
-                <NumericTextbox
-                    id={id}
-                    style={{ width: "80px", flex: "none" }}
-                    showClearButton={false}
-                    showSpinButton={false}
-                    value={String(value)}
-                />
-            </div>
-        }
-    />
-);
-
-const frameStylePreviews: { [key: string]: React.CSSProperties } = {
-    none: {},
-    single: { border: "3px dashed #b0e855", borderRadius: "4px" },
-    multiple: { border: "3px dashed #b0e855", borderRadius: "4px" }
-};
-
-const FrameStylePreview = ({ styleKey, label, selected }: { styleKey: string; label: string; selected: boolean }) => (
-    <ImageEditorOptionPreview selected={selected} aria-label={label}>
-        <ImageEditorPreviewThumbnail label={label} style={frameStylePreviews[styleKey]}>
-            {styleKey === "multiple" && (
-                <span style={{
-                    position: "absolute",
-                    inset: "6px",
-                    border: "3px dashed #b0e855",
-                    borderRadius: "1px",
-                    boxSizing: "border-box",
-                    pointerEvents: "none"
-                }}></span>
-            )}
-        </ImageEditorPreviewThumbnail>
-    </ImageEditorOptionPreview>
-);
-
 export const ImageEditorFrames = ({
     style = "none",
     imageRoundness = 0,
+    isPristine = style === "none" && imageRoundness === 0,
     framesAmount = 3,
-    frameThickness = 12,
-    frameRoundness = style === "multiple" ? 40 : 16,
-    offset = 12,
+    frameThickness = 0,
+    frameRoundness = 0,
+    offset = 0,
     strokeColor = "#b0e855",
+    adaptive,
+    canvas = adaptive ? IMAGEEDITOR_ADAPTIVE_CANVAS_SIZE : IMAGEEDITOR_CANVAS_SIZE,
+    imageSrc,
     ...props
-}: any) => {
-    const framePadding = 0;
-
-    return (
-        <ImageEditor
-            sidebarItems={framesSidebarItems}
-            actionPane={
-                <ImageEditorPane title="Frame" actions={
-                    <>
-                        <Button>Reset</Button>
-                        <Button themeColor="primary">Apply</Button>
-                    </>
-                }>
-                    <Form tag="div">
+}: any) => (
+    <ImageEditor
+        adaptive={adaptive}
+        activeTool="Frame"
+        actionPane={
+            <ImageEditorPane title="Frame" adaptive={adaptive} confirmDisabled={isPristine} actions={
+                <>
+                    <Button disabled={isPristine}>Reset</Button>
+                    <Button themeColor="primary" disabled={isPristine}>Apply</Button>
+                </>
+            }>
+                <Form tag="div">
+                    <FormField
+                        label="Frame Style"
+                        editor={
+                            <div className="k-imageeditor-option-grid">
+                                <ImageEditorOptionPreview selected={style === "none"} aria-label="None">
+                                    <ImageEditorPreviewThumbnail label="None" imageSrc={imageSrc} />
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={style === "single"} aria-label="Single">
+                                    <ImageEditorPreviewThumbnail label="Single" imageSrc={imageSrc} style={{ border: "3px dashed #b0e855", borderRadius: "4px" }} />
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={style === "multiple"} aria-label="Multiple">
+                                    <ImageEditorPreviewThumbnail label="Multiple" imageSrc={imageSrc} style={{ border: "3px dashed #b0e855", borderRadius: "4px" }}>
+                                        <span style={{
+                                            position: "absolute",
+                                            inset: "6px",
+                                            border: "3px dashed #b0e855",
+                                            borderRadius: "1px",
+                                            boxSizing: "border-box",
+                                            pointerEvents: "none"
+                                        }}></span>
+                                    </ImageEditorPreviewThumbnail>
+                                </ImageEditorOptionPreview>
+                            </div>
+                        }
+                    />
+                    <FormField
+                        label="Image Roundness"
+                        editorId="frame-image-roundness"
+                        editor={
+                            <div className="k-imageeditor-field-row">
+                                <Slider style={{ flex: 1, "--kendo-slider-start": 0, "--kendo-slider-end": imageRoundness } as React.CSSProperties} aria-label="Image Roundness" showButtons={false} showTicks={false} value={imageRoundness} min={0} max={100} />
+                                <NumericTextbox id="frame-image-roundness" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(imageRoundness)} />
+                            </div>
+                        }
+                    />
+                    {style === "multiple" && (
                         <FormField
-                            label="Frame Style"
+                            label="Frames Amount"
+                            editorId="frame-frames-amount"
                             editor={
-                                <div className="k-imageeditor-option-grid">
-                                    <FrameStylePreview styleKey="none" label="None" selected={style === "none"} />
-                                    <FrameStylePreview styleKey="single" label="Single" selected={style === "single"} />
-                                    <FrameStylePreview styleKey="multiple" label="Multiple" selected={style === "multiple"} />
-                                </div>
+                                <NumericTextbox id="frame-frames-amount" showClearButton={false} showSpinButton={false} value={String(framesAmount)} />
                             }
                         />
-                        <FrameSlider id="frame-image-roundness" label="Image Roundness" value={imageRoundness} />
-                        {style === "multiple" && (
+                    )}
+                    {style !== "none" && (
+                        <>
                             <FormField
-                                label="Frames Amount"
-                                editorId="frame-frames-amount"
+                                label="Frame Thickness"
+                                editorId="frame-thickness"
                                 editor={
-                                    <NumericTextbox id="frame-frames-amount" showClearButton={false} value={String(framesAmount)} />
+                                    <div className="k-imageeditor-field-row">
+                                        <Slider style={{ flex: 1, "--kendo-slider-start": 0, "--kendo-slider-end": frameThickness } as React.CSSProperties} aria-label="Frame Thickness" showButtons={false} showTicks={false} value={frameThickness} min={0} max={100} />
+                                        <NumericTextbox id="frame-thickness" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(frameThickness)} />
+                                    </div>
                                 }
                             />
-                        )}
-                        {style !== "none" && (
-                            <>
-                                <FrameSlider id="frame-thickness" label="Frame Thickness" value={frameThickness} />
-                                <FrameSlider id="frame-roundness" label="Frame Roundness" value={frameRoundness} />
-                                <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
-                                    <FormField
-                                        label="Stroke Type"
-                                        editor={ <DropdownList id="frame-stroke-type" value="Dashed" aria-label="Stroke Type" /> }
-                                    />
-                                    <FormField
-                                        label="Offset"
-                                        editorId="frame-offset"
-                                        editor={ <NumericTextbox id="frame-offset" showSpinButton={false} value={String(offset)} prefix={<Icon icon="max-width" />} /> }
-                                    />
-                                </Fieldset>
+                            <FormField
+                                label="Frame Roundness"
+                                editorId="frame-roundness"
+                                editor={
+                                    <div className="k-imageeditor-field-row">
+                                        <Slider style={{ flex: 1, "--kendo-slider-start": 0, "--kendo-slider-end": frameRoundness } as React.CSSProperties} aria-label="Frame Roundness" showButtons={false} showTicks={false} value={frameRoundness} min={0} max={100} />
+                                        <NumericTextbox id="frame-roundness" style={{ width: "80px", flex: "none" }} showClearButton={false} showSpinButton={false} value={String(frameRoundness)} />
+                                    </div>
+                                }
+                            />
+                            <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
                                 <FormField
-                                    label="Stroke Color"
-                                    editor={ <ColorPicker id="frame-stroke-color" value={strokeColor} aria-label="Stroke Color" /> }
+                                    label="Stroke Type"
+                                    editor={ <DropdownList id="frame-stroke-type" value="Dashed" aria-label="Stroke Type" /> }
                                 />
-                            </>
-                        )}
-                    </Form>
-                </ImageEditorPane>
-            }
+                                <FormField
+                                    label="Offset"
+                                    editorId="frame-offset"
+                                    editor={ <NumericTextbox id="frame-offset" showClearButton={false} showSpinButton={false} value={String(offset)} prefix={<Icon icon="max-width" />} /> }
+                                />
+                            </Fieldset>
+                            <FormField
+                                label="Stroke Color"
+                                editor={ <ColorPicker id="frame-stroke-color" value={strokeColor} aria-label="Stroke Color" /> }
+                            />
+                        </>
+                    )}
+                </Form>
+            </ImageEditorPane>
+        }
 
-            children={
-                style === "none" ? (
-                    <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover", borderRadius: `${imageRoundness}px` }}></canvas>
-                ) : (
-                    <div style={{ position: "relative", width: `${494 + framePadding * 2}px`, height: `${307 + framePadding * 2}px` }}>
-                        <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{
-                            position: "absolute", top: `${framePadding}px`, left: `${framePadding}px`,
-                            backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover",
-                            borderRadius: `${imageRoundness}px`
-                        }}></canvas>
-                        {/* inner ring sits flush on the image edge, overlaying it */}
+        children={
+            style === "none" ? (
+                <ImageEditorCanvas {...canvas} imageSrc={imageSrc} style={{ borderRadius: `${imageRoundness}px` }} />
+            ) : (
+                <div style={{ position: "relative", width: `${canvas.width}px`, height: `${canvas.height}px` }}>
+                    <ImageEditorCanvas {...canvas} imageSrc={imageSrc} style={{ position: "absolute", top: 0, left: 0, borderRadius: `${imageRoundness}px` }} />
+                    {/* inner ring sits flush on the image edge, overlaying it */}
+                    <div style={{
+                        position: "absolute",
+                        top: 0, left: 0,
+                        width: `${canvas.width}px`, height: `${canvas.height}px`,
+                        border: `${frameThickness}px dashed ${strokeColor}`,
+                        borderRadius: `${frameRoundness}px`,
+                        boxSizing: "border-box",
+                        pointerEvents: "none"
+                    }}></div>
+                    {style === "multiple" && (
                         <div style={{
                             position: "absolute",
-                            top: `${framePadding}px`, left: `${framePadding}px`,
-                            width: "494px", height: "307px",
+                            top: `${frameThickness + offset}px`, left: `${frameThickness + offset}px`,
+                            width: `${canvas.width - (frameThickness + offset) * 2}px`, height: `${canvas.height - (frameThickness + offset) * 2}px`,
                             border: `${frameThickness}px dashed ${strokeColor}`,
-                            borderRadius: `${frameRoundness}px`,
+                            borderRadius: `${Math.max(frameRoundness - frameThickness - offset, 0)}px`,
                             boxSizing: "border-box",
                             pointerEvents: "none"
                         }}></div>
-                        {style === "multiple" && (
-                            <div style={{
-                                position: "absolute",
-                                top: `${framePadding + frameThickness + offset}px`, left: `${framePadding + frameThickness + offset}px`,
-                                width: `${494 - (frameThickness + offset) * 2}px`, height: `${307 - (frameThickness + offset) * 2}px`,
-                                border: `${frameThickness}px dashed ${strokeColor}`,
-                                borderRadius: `${Math.max(frameRoundness - frameThickness - offset, 0)}px`,
-                                boxSizing: "border-box",
-                                pointerEvents: "none"
-                            }}></div>
-                        )}
-                    </div>
-                )
-            }
-            {...props} />
-    );
-};
+                    )}
+                </div>
+            )
+        }
+        {...props} />
+);

package/src/imageeditor/templates/imageeditor-insert-line-adaptive.tsx

@@ -0,0 +1,3 @@
+import { ImageEditorInsertLine } from "./imageeditor-insert-line";
+
+export const ImageEditorInsertLineAdaptive = (props: any) => <ImageEditorInsertLine adaptive {...props} />;

package/src/imageeditor/templates/imageeditor-insert-line.tsx

@@ -1,5 +1,6 @@
-import { ImageEditor, ImageEditorPane } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
+import { ToolbarSeparator } from "../../toolbar";
 import { ButtonGroup } from "../../button-group";
 import { NumericTextbox } from "../../numerictextbox";
 import { ColorPicker } from "../../colorpicker";
@@ -10,22 +11,6 @@ import { InputSuffixText } from "../../input";
 import { Slider } from "../../slider";
 import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
 
-const insertLineSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" selected aria-label="Shapes"></Button>,
-    <div className="k-separator" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
 export const ImageEditorInsertLine = ({
     selected = false,
     strokeColor = "#000000",
@@ -34,18 +19,32 @@ export const ImageEditorInsertLine = ({
     startPoint = "None",
     endPoint = "None",
     opacity = 100,
+    adaptive,
+    imageSrc,
     ...props
 }: any) => (
     <ImageEditor
-        sidebarItems={insertLineSidebarItems}
+        adaptive={adaptive}
+        activeTool="Shapes"
+        toolbarItems={adaptive && selected ? (
+            <>
+                <Button fillMode="flat" icon="squares-overlapping-plus" aria-label="Duplicate"></Button>
+                <Button fillMode="flat" icon="pencil" aria-label="Edit"></Button>
+                <ToolbarSeparator></ToolbarSeparator>
+                <Button fillMode="flat" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                <Button fillMode="flat" icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                <ToolbarSeparator></ToolbarSeparator>
+                <Button fillMode="flat" icon="trash" aria-label="Delete"></Button>
+            </>
+        ) : undefined}
         actionPane={
-            <ImageEditorPane title="Shapes and Lines" actions={
+            <ImageEditorPane title="Shapes and Lines" adaptive={adaptive} confirmDisabled={!selected} actions={
                 <>
-                    <Button>Remove</Button>
-                    <Button themeColor="primary">Insert</Button>
+                    <Button disabled={!selected}>Remove</Button>
+                    <Button themeColor="primary" disabled={!selected}>Insert</Button>
                 </>
             }>
-                <SegmentedControl thumbStyles={{ width: "50%", left: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                <SegmentedControl thumbStyles={{ width: "50%", left: "50%" }} stretched aria-label="Shape or Line">
                     <SegmentedControlButton icon="shapes">Shape</SegmentedControlButton>
                     <SegmentedControlButton icon="shape-line" selected>Line</SegmentedControlButton>
                 </SegmentedControl>
@@ -59,7 +58,7 @@ export const ImageEditorInsertLine = ({
                         <FormField
                             label="Stroke Width"
                             editorId="line-stroke-width"
-                            editor={ <NumericTextbox id="line-stroke-width" showSpinButton={false} value={String(strokeWidth)} prefix={<Icon icon="border-width" />} /> }
+                            editor={ <NumericTextbox id="line-stroke-width" showClearButton={false} showSpinButton={false} value={String(strokeWidth)} prefix={<Icon icon="border-width" />} /> }
                         />
                     </Fieldset>
                     <FormField
@@ -78,7 +77,7 @@ export const ImageEditorInsertLine = ({
                     </Fieldset>
                     <FormField
                         label="Opacity"
-                        editor={ <NumericTextbox id="line-opacity" showSpinButton={false} value={`${opacity}%`} prefix={<Icon icon="transparency" />} aria-label="Opacity" /> }
+                        editor={ <NumericTextbox id="line-opacity" showClearButton={false} showSpinButton={false} value={`${opacity}%`} prefix={<Icon icon="transparency" />} aria-label="Opacity" /> }
                     />
                     <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
                         <FormField
@@ -154,7 +153,7 @@ export const ImageEditorInsertLine = ({
         }
 
         children={
-            <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+            <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
         }
         {...props} />
 );

package/src/imageeditor/templates/imageeditor-insert-shape-adaptive.tsx

@@ -0,0 +1,3 @@
+import { ImageEditorInsertShape } from "./imageeditor-insert-shape";
+
+export const ImageEditorInsertShapeAdaptive = (props: any) => <ImageEditorInsertShape adaptive {...props} />;

package/src/imageeditor/templates/imageeditor-insert-shape.tsx

@@ -1,5 +1,6 @@
-import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview } from "..";
+import { ImageEditor, ImageEditorPane, ImageEditorOptionList, ImageEditorOptionPreview, ImageEditorCanvas } from "..";
 import { Button } from "../../button";
+import { ToolbarSeparator } from "../../toolbar";
 import { ButtonGroup } from "../../button-group";
 import { Combobox } from "../../combobox";
 import { NumericTextbox } from "../../numerictextbox";
@@ -10,36 +11,6 @@ import { InputSuffixText } from "../../input";
 import { Slider } from "../../slider";
 import { SegmentedControl, SegmentedControlButton } from "../../segmented-control";
 
-const insertShapeSidebarItems = [
-    <Button fillMode="flat" key="sidebar-button-1" icon="image-resize" aria-label="Resize"></Button>,
-    <Button fillMode="flat" key="sidebar-button-2" icon="crop" aria-label="Crop"></Button>,
-    <Button fillMode="flat" key="sidebar-button-3" icon="rotate" aria-label="Rotate"></Button>,
-    <div className="k-separator" key="sidebar-separator-1"></div>,
-    <Button fillMode="flat" key="sidebar-button-4" icon="free-text" aria-label="Text"></Button>,
-    <Button fillMode="flat" key="sidebar-button-5" icon="shapes" selected aria-label="Shapes"></Button>,
-    <div className="k-separator" key="sidebar-separator-2"></div>,
-    <Button fillMode="flat" key="sidebar-button-6" icon="drop-half-pixelated" aria-label="Blur"></Button>,
-    <Button fillMode="flat" key="sidebar-button-7" icon="sliders-horizontal" aria-label="Adjustments"></Button>,
-    <Button fillMode="flat" key="sidebar-button-8" icon="circles-three-intersecting" aria-label="Filters"></Button>,
-    <div className="k-separator" key="sidebar-separator-3"></div>,
-    <Button fillMode="flat" key="sidebar-button-9" icon="frame-corners" aria-label="Frame"></Button>,
-    <Button fillMode="flat" key="sidebar-button-10" icon="circle-half-tilted" aria-label="Shadow"></Button>
-];
-
-const shapeTypes = [
-    { label: "Square", icon: "checkbox" },
-    { label: "Rectangle", icon: "rectangle-shape" },
-    { label: "Circle", icon: "circle-shape" },
-    { label: "Oval", icon: "oval-shape" },
-    { label: "Triangle", icon: "kpi-status-hold" },
-    { label: "Star", icon: "star" },
-    { label: "Heart", icon: "heart" },
-    { label: "Diamond", icon: "kpi-status-deny" },
-    { label: "Hexagon", icon: "hexagon-shape" },
-    { label: "Pentagon", icon: "pentagon-shape" },
-    { label: "Arrow", icon: "arrow-right" }
-];
-
 export const ImageEditorInsertShape = ({
     selected = false,
     shapeType = "Oval",
@@ -49,19 +20,33 @@ export const ImageEditorInsertShape = ({
     textColor = "#000000",
     fontFamily = "Trebuchet MS",
     fontSize = 48,
-    alignment = "center",
+    alignment,
+    adaptive,
+    imageSrc,
     ...props
 }: any) => (
     <ImageEditor
-        sidebarItems={insertShapeSidebarItems}
+        adaptive={adaptive}
+        activeTool="Shapes"
+        toolbarItems={adaptive && selected ? (
+            <>
+                <Button fillMode="flat" icon="squares-overlapping-plus" aria-label="Duplicate"></Button>
+                <Button fillMode="flat" icon="pencil" aria-label="Edit"></Button>
+                <ToolbarSeparator></ToolbarSeparator>
+                <Button fillMode="flat" icon="flip-horizontal" aria-label="Flip Horizontal"></Button>
+                <Button fillMode="flat" icon="flip-vertical" aria-label="Flip Vertical"></Button>
+                <ToolbarSeparator></ToolbarSeparator>
+                <Button fillMode="flat" icon="trash" aria-label="Delete"></Button>
+            </>
+        ) : undefined}
         actionPane={
-            <ImageEditorPane title="Shapes and Lines" actions={
+            <ImageEditorPane title="Shapes and Lines" adaptive={adaptive} confirmDisabled={!selected} actions={
                 <>
-                    <Button>Remove</Button>
-                    <Button themeColor="primary">Insert</Button>
+                    <Button disabled={!selected}>Remove</Button>
+                    <Button themeColor="primary" disabled={!selected}>Insert</Button>
                 </>
             }>
-                <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line" style={{ flexShrink: 0 }}>
+                <SegmentedControl thumbStyles={{ width: "50%" }} stretched aria-label="Shape or Line">
                     <SegmentedControlButton icon="shapes" selected>Shape</SegmentedControlButton>
                     <SegmentedControlButton icon="shape-line">Line</SegmentedControlButton>
                 </SegmentedControl>
@@ -70,15 +55,73 @@ export const ImageEditorInsertShape = ({
                     <FormField
                         label="Type"
                         editor={
-                            <ImageEditorOptionList scrollable scrollingPosition="both">
-                                {shapeTypes.map((shape) => (
-                                    <ImageEditorOptionPreview key={shape.label} selected={shape.label === shapeType}>
-                                        <div className="k-imageeditor-option-content">
-                                            <Icon icon={shape.icon} />
-                                            <span className="k-imageeditor-option-label">{shape.label}</span>
-                                        </div>
-                                    </ImageEditorOptionPreview>
-                                ))}
+                            <ImageEditorOptionList scrollable>
+                                <ImageEditorOptionPreview selected={shapeType === "Square"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="checkbox" />
+                                        <span className="k-imageeditor-option-label">Square</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Rectangle"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="rectangle-shape" />
+                                        <span className="k-imageeditor-option-label">Rectangle</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Circle"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="circle-shape" />
+                                        <span className="k-imageeditor-option-label">Circle</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Oval"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="oval-shape" />
+                                        <span className="k-imageeditor-option-label">Oval</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Triangle"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="kpi-status-hold" />
+                                        <span className="k-imageeditor-option-label">Triangle</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Star"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="star" />
+                                        <span className="k-imageeditor-option-label">Star</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Heart"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="heart" />
+                                        <span className="k-imageeditor-option-label">Heart</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Diamond"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="kpi-status-deny" />
+                                        <span className="k-imageeditor-option-label">Diamond</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Hexagon"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="hexagon-shape" />
+                                        <span className="k-imageeditor-option-label">Hexagon</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Pentagon"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="pentagon-shape" />
+                                        <span className="k-imageeditor-option-label">Pentagon</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
+                                <ImageEditorOptionPreview selected={shapeType === "Arrow"}>
+                                    <div className="k-imageeditor-option-content">
+                                        <Icon icon="arrow-right" />
+                                        <span className="k-imageeditor-option-label">Arrow</span>
+                                    </div>
+                                </ImageEditorOptionPreview>
                             </ImageEditorOptionList>
                         }
                     />
@@ -90,7 +133,7 @@ export const ImageEditorInsertShape = ({
                         <FormField
                             label="Stroke Width"
                             editorId="shape-stroke-width"
-                            editor={ <NumericTextbox id="shape-stroke-width" showSpinButton={false} value={String(strokeWidth)} prefix={<Icon icon="border-width" />} /> }
+                            editor={ <NumericTextbox id="shape-stroke-width" showClearButton={false} showSpinButton={false} value={String(strokeWidth)} prefix={<Icon icon="border-width" />} /> }
                         />
                     </Fieldset>
                     <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
@@ -106,13 +149,13 @@ export const ImageEditorInsertShape = ({
                     <FormField
                         label="Font Family"
                         editorId="shape-font-family"
-                        editor={ <Combobox disabled={!selected} id="shape-font-family" prefix={<Icon icon="font-family" />} value={fontFamily} /> }
+                        editor={ <Combobox disabled={!selected} id="shape-font-family" showClearButton={false} prefix={<Icon icon="font-family" />} value={fontFamily} /> }
                     />
                     <Fieldset layout="grid" cols={2} gutters={{ cols: "16px" }}>
                         <FormField
                             label="Font Size"
                             editorId="shape-font-size"
-                            editor={ <NumericTextbox disabled={!selected} id="shape-font-size" showSpinButton={false} value={String(fontSize)} prefix={<Icon icon="font-size" />} /> }
+                            editor={ <NumericTextbox disabled={!selected} id="shape-font-size" showClearButton={false} showSpinButton={false} value={String(fontSize)} prefix={<Icon icon="font-size" />} /> }
                         />
                         <FormField
                             label="Alignment"
@@ -212,7 +255,7 @@ export const ImageEditorInsertShape = ({
         }
 
         children={
-            <canvas width="494" height="307" role="img" aria-label="Image being edited" style={{ backgroundImage: "url('/packages/html/assets/sofia.jpg')", backgroundSize: "cover" }}></canvas>
+            <ImageEditorCanvas adaptive={adaptive} imageSrc={imageSrc} />
         }
         {...props} />
 );

package/src/imageeditor/templates/imageeditor-insert-text-adaptive.tsx

@@ -0,0 +1,3 @@
+import { ImageEditorInsertText } from "./imageeditor-insert-text";
+
+export const ImageEditorInsertTextAdaptive = (props: any) => <ImageEditorInsertText adaptive {...props} />;