Node Style Authoring Rules

Draggable

Whether mousedown on a node and drag moves content on the canvas

// Node properties
export interface INodeProps {
  itemName: string;
  itemColor: string;
  img: string;
  itemDesc?: string;
  selected: boolean;
  hovered: boolean;
  error: boolean;
  // Draggable; enabled by default
  draggable?: boolean;
}

// To override draggable on nodeProps: INodeProps for a specific shape:
const DemoNode = (props: INodeProps) => {
  return (
    <Shape>
      <Rect name="border-wrapper" draggable={false} style={{ 
        borderRadius: 4, 
      }}>
        <Text name="border-wrapper-text">Content</Text>
      </Rect>
    </Shape>
  )
}

export default DemoNode;

Opacity

• Opacity properties include opacity, fillOpacity, and strokeOpacity; applicable to Rect and Image;
• fillOpacity and strokeOpacity take precedence over opacity;
• Opacity also depends on parent-child nesting: child opacity = parent opacity × own opacity; default is globalAlpha, or 1 if unset;

• opacity: Number in range [0, 1]
• fillOpacity: Number in range [0, 1]
• strokeOpacity: Number in range [0, 1]

export interface IOpacityStyle {
  opacity?: number;
  fillOpacity?: number;
  strokeOpacity?: number;
}

const DemoNode = (props: INodeProps) => {
  return (
    <Shape>
      <Rect name="border-wrapper" draggable={false} style={{ 
        borderRadius: 4, 
        opacity: 0.5,
        fillOpacity: 0.5,
        strokeOpacity: 0.5,
      }}>
        <Text name="border-wrapper-text">Content</Text>
      </Rect>
    </Shape>
  )
}