Drag appearance

English · Русский

Component options for @mes/aps@1.23.0. Prefix Settings names with schedule.; see how to fill in a record.

During operation dragging, floating follows the pointer and projected shows the prospective position on the chart. dragPhantom controls their text and appearance. The application provides drag data and saves the result.

Text and styles

Both dragPhantom.floating and dragPhantom.projected accept:

Field	JSON type	Effect
text	String	Replaces the operation label with fixed text
style	CSS property object	Adds/replaces properties such as fontWeight and backgroundColor
palette	State object	Colors/outlines for default, valid, and small

text and style are absent by default. The chart uses the operation label and calculates geometry. An empty text: "" also keeps the operation label; it does not hide it. Functions that compute text/styles require application code and cannot be supplied as Settings data.

Changing color, font or outline is safe for appearance. Overriding width, height, or coordinates replaces calculated geometry and can misrepresent the operation's prospective position.

Palette

Each state accepts optional strings border, backgroundColor, color, and boxShadow.

projected state	Condition	Default background	Default border
default	No suitable available interval	rgba(66,153,225,0.8)	1px solid #4299e1
valid	The whole operation fits the row's available interval	rgba(16,185,129,0.85)	1px solid #10b981
small	It overlaps the interval but extends beyond it	rgba(239,68,68,0.85)	1px solid #ef4444

floating declares the same palette but uses only default. color and boxShadow have no defaults. Properties apply in this order: calculated position/size, state palette, then style. A style property therefore overrides the same property in every palette state.

Valid-position outline

appSettings.drawPreferences.availabilabilityColor

CSS color of the dashed valid-position area during dragging. The spelling is the actual package key.

• Default: #dd0606.
• Visible only during dragging. See appearance for color values.

Example

Change pointer and valid-position colors while retaining the operation label:

{
  "dragPhantom": {
    "floating": {
      "palette": {
        "default": { "backgroundColor": "#245a81", "border": "1px solid #173e59" }
      }
    },
    "projected": {
      "palette": {
        "valid": { "backgroundColor": "#2d8a46", "border": "1px solid #1d5e2e" }
      },
      "style": { "fontWeight": "bold" }
    }
  }
}

The pointer element is blue. A fully fitting position is green with bold text. An overlapping operation that does not fit retains the default red appearance. Both elements keep the operation label.