editable.resize Boolean|Object (default: true)

Defines the look-and-feel of the shape resizing handles.

Example - styling the resizing handles

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: {
      type: "tree"
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    }],
    editable: {
      resize: {
        handles: {
          fill: {
            color: "red",
            opacity: 0.5
          },
          height: 10,
          width: 10,
          stroke: {
            color:"blue",
            width:1,
            dashType:"dot"
          },
          hover: {
            fill: {
              color:"green",
              opcaity:.8
            },
            stroke: {
              color:"purple",
              width:5
            }
          }
        }
      }
    }
  });
</script>

editable.resize.handles Object

Specifies the settings of the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.fill String|Object

Specifies the fill settings of the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.fill.color String

Specifies the fill color of the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.fill.opacity Number (default: 1)

Specifies the fill opacity of the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.height Number

Specifies the height of the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.hover Object

Specifies the settings of the resizing handles on hovering over them. See the editable.resize configuration for an example.

editable.resize.handles.hover.fill String|Object

Specifies the fill settings on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.hover.fill.color String

Specifies the fill color on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.hover.fill.opacity Number (default: 1)

Specifies the fill opacity on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.hover.stroke Object

Specifies the stroke on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.hover.stroke.color String

Specifies the stroke color on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.hover.stroke.dashType String

Specifies the stroke dash type on hovering over the resizing handles. See the editable.resize configuration for an example.

The following dash types are supported:

• "dash" - A line that consists of dashes
• "dashDot" - A line that consists of a repeating pattern of dash-dot
• "dot" - A line that consists of dots
• "longDash" - A line that consists of a repeating pattern of long-dash
• "longDashDot" - A line that consists of a repeating pattern of long-dash-dot
• "longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
• "solid" - A solid line

editable.resize.handles.hover.stroke.width Number

Specifies the stroke color on hovering over the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.stroke Object

Specifies the stroke of the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.stroke.color String

Specifies the stroke color of the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.stroke.dashType String

Specifies the stroke dash type of the resizing handles. See the editable.resize configuration for an example.

The following dash types are supported:

• "dash" - A line that consists of dashes
• "dashDot" - A line that consists of a repeating pattern of dash-dot
• "dot" - A line that consists of dots
• "longDash" - A line that consists of a repeating pattern of long-dash
• "longDashDot" - A line that consists of a repeating pattern of long-dash-dot
• "longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
• "solid" - A solid line

editable.resize.handles.stroke.width Number

Specifies the stroke thickness of the resizing handles. See the editable.resize configuration for an example.

editable.resize.handles.width Number

Specifies the width of the resizing handles. See the editable.resize configuration for an example.