flekschas/piling.js

Expand sidebar

Closed this issue · 2 comments

flekschas commented

Right now the sidebar covers several essential properties but a lot more are not available.

Please go through all our properties and identify missing properties that can be controlled with checkbox, slider, or dropdown menu. This typically applies to all properties that support simple data types like boolean, number, string (or an array of those data types).

Once you have identified those properties please group them into meaningful and order them by their assumed usefulness. (E.g., all the lasso properties would go into the same group with a rather low usefulness).

Finally, please attach the missing grouped and sorted props as a comment for discussion. Eventually, after we decided on the grouping and order we need to add them to the sidebar.

eeeeenchanted commented

Label

  • pileLabel: dropdown?
  • pileLabelText: checkbox
  • pileLabelAlign: 'top', 'bottom'
  • pileLabelStackAlign: 'horizontal', 'vertical'
  • pileLabelFontSize: slider
  • pileLabelHeight: slider

Arrangement

  • arrangementOnPile: checkbox
  • forceDimReduction: checkbox
  • runDimReductionOnPiles: checkbox

darkMode: checkbox

Pile properties:

  • pileBorderSize: slider
  • pileCoverInvert: checkbox
  • pileCoverScale: slider
  • pileOpacity: [0, 1]
  • pileScale: slider
  • pileVisibilityItems: checkbox

Pile-item properties:

  • pileItemBrightness: [-1, 1]
  • pileItemInvert: checkbox
  • pileItemOpacity: [0, 1]

Preview properties:

  • previewPadding: slider
  • previewSpacing: slider
  • previewOffset: slider

Temp depile:
tempDepileDirection: 'horizontal', 'vertical'
tempDepileOneDNum: slider

Grid:

  • gridColor: a slider from white to black?
  • gridOpacity: [0, 1]
  • showGrid: checkbox

Lasso:

  • lassoFillColor: a slider from white to black?
  • lassoFillOpacity: [0, 1]
  • lassoShowStartIndicator: checkbox
  • lassoStartIndicatorOpacity: [0, 1]
  • lassoStrokeColor: a slider from white to black?
  • lassoStrokeOpacity: [0, 1]
  • lassoStrokeSize: slider

popupBackgroundOpacity: [0, 1]

color & opacity?

flekschas commented

Let's add the following properties to the sidebar:

Pile/Item":

  • pileItemOffset: 2 inputs
  • previewPadding: slider
  • previewSpacing: slider
  • previewOffset: slider

I suggest adding the above as the first section and include itemSize as the first property.

Label:

  • pileLabel: dropdown
  • pileLabelText: checkbox
  • pileLabelAlign: dropdown with top and bottom
  • pileLabelStackAlign: dropdown horizontal and vertical
  • pileLabelFontSize: slider
  • pileLabelHeight: slider

I suggest adding the label section as the last section.