@yorab/react-paint 0.2.2

package/dist/components/settings/ColorField.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@linaria/react");
+
+var _Button = _interopRequireDefault(require("../common/Button"));
+
+var _Panel = _interopRequireDefault(require("../common/Panel"));
+
+var _style = require("../../constants/style");
+
+var _icons = require("../../constants/icons");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledColor",
+  "class": "snh2jyk",
+  vars: {
+    "snh2jyk-0": [function (_ref) {
+      var color = _ref.color;
+      return color;
+    }]
+  }
+});
+var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledCustomColor",
+  "class": "sfm1cqx",
+  vars: {
+    "sfm1cqx-0": [function (_ref2) {
+      var color = _ref2.color;
+      return color;
+    }]
+  }
+});
+var StyledColorButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+  name: "StyledColorButton",
+  "class": "sttf061"
+});
+
+var ColorField = function ColorField(_ref3) {
+  var selectedSettings = _ref3.selectedSettings,
+      setSelectedSettings = _ref3.setSelectedSettings,
+      _ref3$title = _ref3.title,
+      title = _ref3$title === void 0 ? 'Choisissez une couleur' : _ref3$title,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      field = _ref3.field,
+      _ref3$value = _ref3.value,
+      value = _ref3$value === void 0 ? '' : _ref3$value,
+      valueChanged = _ref3.valueChanged;
+
+  var _useState = (0, _react.useState)(_fp["default"].uniqueId('settings_')),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      customKey = _useState2[0];
+
+  var handleChange = function handleChange(event) {
+    var parsedValue = _fp["default"].toNumber(event.target.value);
+
+    valueChanged(field, _fp["default"].isNaN(parsedValue) ? event.target.value : parsedValue);
+  };
+
+  var handleClick = function handleClick(value) {
+    valueChanged(field, value);
+  };
+
+  var togglePanel = function togglePanel() {
+    setSelectedSettings(function (prev) {
+      return prev === customKey ? undefined : customKey;
+    });
+  };
+
+  var isPanelVisible = selectedSettings === customKey;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    selected: isPanelVisible,
+    title: title,
+    disabled: disabled,
+    onClick: togglePanel
+  }, /*#__PURE__*/_react["default"].createElement(StyledColor, {
+    color: value === 'transparent' ? "url('data:image/svg+xml,".concat(_icons.encodedTransparentIcon, "')") : value
+  })), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+    title: title,
+    alignment: "left"
+  }, /*#__PURE__*/_react["default"].createElement("div", null, _style.STYLE_COLORS.map(function (color, index) {
+    return /*#__PURE__*/_react["default"].createElement(StyledColorButton, {
+      title: color,
+      key: index,
+      selected: color === value,
+      color: color,
+      onClick: function onClick() {
+        return handleClick(color);
+      }
+    }, /*#__PURE__*/_react["default"].createElement(StyledColor, {
+      color: color === 'transparent' ? "url('data:image/svg+xml,".concat(_icons.encodedTransparentIcon, "')") : color
+    }));
+  }), /*#__PURE__*/_react["default"].createElement(StyledColorButton, {
+    type: "color",
+    title: "Custom color",
+    selected: !_fp["default"].includes(value, _style.STYLE_COLORS),
+    value: value,
+    onChange: handleChange
+  }, /*#__PURE__*/_react["default"].createElement(StyledCustomColor, {
+    color: _fp["default"].includes(value, _style.STYLE_COLORS) ? 'black' : value
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: _icons.paletteIcon
+    }
+  }))))));
+};
+
+var _default = ColorField;
+exports["default"] = _default;

package/dist/components/settings/DeleteButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DrawableShape } from 'types/Shapes';
+declare type DeleteShapeButtonType = {
+    disabled?: boolean;
+    selectedShape: DrawableShape;
+    removeShape: (shape: DrawableShape) => void;
+};
+declare const DeleteButton: ({ disabled, selectedShape, removeShape }: DeleteShapeButtonType) => JSX.Element;
+export default DeleteButton;

package/dist/components/settings/DeleteButton.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = require("../../constants/icons");
+
+var _Button = _interopRequireDefault(require("../common/Button"));
+
+var DeleteButton = function DeleteButton(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      selectedShape = _ref.selectedShape,
+      removeShape = _ref.removeShape;
+
+  var handleRemove = function handleRemove() {
+    removeShape(selectedShape);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    title: "Delete",
+    disabled: disabled,
+    "data-disabled": +disabled,
+    onClick: handleRemove,
+    icon: _icons.trashIcon
+  });
+};
+
+var _default = DeleteButton;
+exports["default"] = _default;

package/dist/components/settings/FontFamilyField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type FontFamilyFieldType = {
+    selectedSettings: string | undefined;
+    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
+    disabled?: boolean;
+    defaultValue?: number | string | undefined;
+    valueChanged: (field: string, value: string | number) => void;
+};
+declare const FontFamilyField: ({ selectedSettings, setSelectedSettings, disabled, defaultValue, valueChanged }: FontFamilyFieldType) => JSX.Element;
+export default FontFamilyField;

package/dist/components/settings/FontFamilyField.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SelectField = _interopRequireDefault(require("./SelectField"));
+
+var _style = require("../../constants/style");
+
+var _react2 = require("@linaria/react");
+
+var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledOption",
+  "class": "smpmxx5",
+  vars: {
+    "smpmxx5-0": [function (_ref) {
+      var family = _ref.family;
+      return family;
+    }]
+  }
+});
+
+var FontFamilyOption = function FontFamilyOption(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledOption, {
+    family: children
+  }, children);
+};
+
+var FontFamilyField = function FontFamilyField(_ref3) {
+  var selectedSettings = _ref3.selectedSettings,
+      setSelectedSettings = _ref3.setSelectedSettings,
+      _ref3$disabled = _ref3.disabled,
+      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      defaultValue = _ref3.defaultValue,
+      valueChanged = _ref3.valueChanged;
+  return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    CustomOption: FontFamilyOption,
+    title: "Font",
+    disabled: disabled,
+    field: "style.fontFamily",
+    values: _style.STYLE_FONTS,
+    defaultValue: defaultValue,
+    valueChanged: valueChanged
+  });
+};
+
+var _default = FontFamilyField;
+exports["default"] = _default;

package/dist/components/settings/LayoutButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type LayoutButtonType = {
+    disabled: boolean;
+    withLayouts?: 'always' | 'never' | 'visible' | 'hidden';
+    toggleLayoutPanel: () => void;
+};
+declare const LayoutButton: ({ withLayouts, disabled, toggleLayoutPanel }: LayoutButtonType) => JSX.Element;
+export default LayoutButton;

package/dist/components/settings/LayoutButton.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@linaria/react");
+
+var _icons = require("../../constants/icons");
+
+var _Button = _interopRequireDefault(require("../common/Button"));
+
+var StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+  name: "StyleToggleLayoutButton",
+  "class": "sj7hhjx"
+});
+
+var LayoutButton = function LayoutButton(_ref) {
+  var withLayouts = _ref.withLayouts,
+      disabled = _ref.disabled,
+      toggleLayoutPanel = _ref.toggleLayoutPanel;
+  return /*#__PURE__*/_react["default"].createElement(StyleToggleLayoutButton, {
+    title: "Toggle layout",
+    "data-hidden": +(withLayouts === 'always' || withLayouts === 'never'),
+    disabled: disabled,
+    onClick: toggleLayoutPanel,
+    icon: _icons.layersIcon
+  });
+};
+
+var _default = LayoutButton;
+exports["default"] = _default;

package/dist/components/settings/Layouts.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DrawableShape } from 'types/Shapes';
+declare type LayoutsType = {
+    withGrid: boolean;
+    setWithGrid: React.Dispatch<React.SetStateAction<boolean>>;
+    disabled?: boolean;
+    shapes: DrawableShape[];
+    removeShape: (shape: DrawableShape) => void;
+    toggleShapeVisibility: (shape: DrawableShape) => void;
+    toggleShapeLock: (shape: DrawableShape) => void;
+    selectedShape: DrawableShape | undefined;
+    selectShape: (shape: DrawableShape) => void;
+    moveShapes: (firstShapeId: string, lastShapeId: string) => void;
+    withLayouts?: 'always' | 'never' | 'visible' | 'hidden';
+    isLayoutPanelShown: boolean;
+};
+declare const Layouts: ({ withGrid, setWithGrid, disabled, shapes, removeShape, toggleShapeVisibility, toggleShapeLock, selectedShape, moveShapes, selectShape, withLayouts, isLayoutPanelShown }: LayoutsType) => JSX.Element | null;
+export default Layouts;

package/dist/components/settings/Layouts.js

@@ -0,0 +1,218 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _useDrag2 = _interopRequireDefault(require("../../hooks/useDrag"));
+
+var _icons = require("../../constants/icons");
+
+var _style = require("../../utils/style");
+
+var _react2 = require("@linaria/react");
+
+var _Button = _interopRequireDefault(require("../common/Button"));
+
+var _Panel = _interopRequireDefault(require("../common/Panel"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var StyledLayouts = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledLayouts",
+  "class": "su3a8bs"
+});
+var StyledLayout = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledLayout",
+  "class": "szboplp"
+});
+var StyledVisibleButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+  name: "StyledVisibleButton",
+  "class": "sff5xt"
+});
+var StyledLockedButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+  name: "StyledLockedButton",
+  "class": "sj3bift"
+});
+var StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+  name: "StyledGridButton",
+  "class": "s10ip0a4"
+});
+var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledSeparator",
+  "class": "s1j9uq9o"
+});
+var StyledPanelLayouts = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
+  name: "StyledPanelLayouts",
+  "class": "s156ddbb"
+});
+var StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledScrollingContent",
+  "class": "s11gt4hl"
+});
+var StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyledPlaceholder",
+  "class": "s13cxqhq"
+});
+
+var Layout = function Layout(_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      shape = _ref.shape,
+      selected = _ref.selected,
+      layoutDragging = _ref.layoutDragging,
+      toggleShapeVisibility = _ref.toggleShapeVisibility,
+      toggleShapeLock = _ref.toggleShapeLock,
+      setLayoutDragging = _ref.setLayoutDragging,
+      handleRemove = _ref.handleRemove,
+      handleSelect = _ref.handleSelect,
+      onMoveShapes = _ref.onMoveShapes;
+  var ref = (0, _react.useRef)(null);
+
+  var onRemove = function onRemove(e) {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    handleRemove(shape);
+  };
+
+  var onSelect = function onSelect(e) {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    handleSelect(shape);
+  };
+
+  var onToggleShapeVisibility = function onToggleShapeVisibility(e) {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    toggleShapeVisibility(shape);
+  };
+
+  var onToggleShapeLock = function onToggleShapeLock(e) {
+    if (disabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    toggleShapeLock(shape);
+  };
+
+  var _useDrag = (0, _useDrag2["default"])({
+    disabled: disabled,
+    ref: ref,
+    shape: shape,
+    layoutDragging: layoutDragging,
+    setLayoutDragging: setLayoutDragging,
+    handleSelect: handleSelect,
+    onMoveShapes: onMoveShapes
+  }),
+      isOver = _useDrag.isOver;
+
+  return /*#__PURE__*/_react["default"].createElement(StyledLayout, {
+    "data-disabled": +disabled,
+    draggable: !disabled,
+    "data-is-dragging": +(layoutDragging === shape.id),
+    "data-is-over": +isOver,
+    onClick: onSelect,
+    "data-selected": +selected,
+    ref: ref
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: (0, _style.getShapePicture)(shape.type)
+    }
+  }), /*#__PURE__*/_react["default"].createElement(StyledSeparator, null), /*#__PURE__*/_react["default"].createElement(StyledVisibleButton, {
+    title: shape.visible ? 'Hide' : 'Show',
+    "data-visible": shape.visible !== false,
+    disabled: disabled,
+    onClick: onToggleShapeVisibility,
+    icon: shape.visible === false ? _icons.visibilityOffIcon : _icons.visibilityIcon
+  }), /*#__PURE__*/_react["default"].createElement(StyledLockedButton, {
+    title: shape.locked ? 'Locked' : 'Unlocked',
+    "data-locked": !!shape.locked,
+    disabled: disabled,
+    onClick: onToggleShapeLock,
+    icon: shape.locked ? _icons.lockedIcon : _icons.unlockedIcon
+  }));
+};
+
+var Layouts = function Layouts(_ref2) {
+  var withGrid = _ref2.withGrid,
+      setWithGrid = _ref2.setWithGrid,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      shapes = _ref2.shapes,
+      removeShape = _ref2.removeShape,
+      toggleShapeVisibility = _ref2.toggleShapeVisibility,
+      toggleShapeLock = _ref2.toggleShapeLock,
+      selectedShape = _ref2.selectedShape,
+      moveShapes = _ref2.moveShapes,
+      selectShape = _ref2.selectShape,
+      withLayouts = _ref2.withLayouts,
+      isLayoutPanelShown = _ref2.isLayoutPanelShown;
+
+  var _useState = (0, _react.useState)(undefined),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      layoutDragging = _useState2[0],
+      setLayoutDragging = _useState2[1];
+
+  var onToggleGrid = function onToggleGrid() {
+    setWithGrid(function (prev) {
+      return !prev;
+    });
+  };
+
+  return isLayoutPanelShown ? withLayouts === 'always' ? /*#__PURE__*/_react["default"].createElement(StyledLayouts, null, _fp["default"].map(function (shape) {
+    return /*#__PURE__*/_react["default"].createElement(Layout, {
+      key: shape.id,
+      shape: shape,
+      disabled: disabled,
+      layoutDragging: layoutDragging,
+      setLayoutDragging: setLayoutDragging,
+      selected: (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) === shape.id,
+      handleSelect: selectShape,
+      handleRemove: removeShape,
+      onMoveShapes: moveShapes,
+      toggleShapeVisibility: toggleShapeVisibility,
+      toggleShapeLock: toggleShapeLock
+    });
+  }, shapes)) : /*#__PURE__*/_react["default"].createElement(StyledPanelLayouts, {
+    title: "Layouts",
+    alignment: "right"
+  }, /*#__PURE__*/_react["default"].createElement(StyledScrollingContent, null, /*#__PURE__*/_react["default"].createElement(StyledGridButton, {
+    title: withGrid ? 'Grid on' : 'Grid off',
+    "data-grid": withGrid,
+    disabled: disabled,
+    onClick: onToggleGrid,
+    icon: withGrid ? _icons.gridOnIcon : _icons.gridOffIcon
+  }, "Toggle grid"), /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement(StyledLayouts, null, shapes.length === 0 ? /*#__PURE__*/_react["default"].createElement(StyledPlaceholder, null, "No layout yet") : _fp["default"].map(function (shape) {
+    return /*#__PURE__*/_react["default"].createElement(Layout, {
+      key: shape.id,
+      shape: shape,
+      disabled: disabled,
+      layoutDragging: layoutDragging,
+      setLayoutDragging: setLayoutDragging,
+      selected: (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) === shape.id,
+      handleSelect: selectShape,
+      handleRemove: removeShape,
+      onMoveShapes: moveShapes,
+      toggleShapeVisibility: toggleShapeVisibility,
+      toggleShapeLock: toggleShapeLock
+    });
+  }, shapes)))) : null;
+};
+
+var _default = Layouts;
+exports["default"] = _default;

package/dist/components/settings/LineArrowField.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type LineArrowType = {
+    selectedSettings: string | undefined;
+    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
+    disabled?: boolean;
+    defaultValue?: number | string | undefined;
+    valueChanged: (field: string, value: string | number) => void;
+};
+declare const LineArrowField: ({ selectedSettings, setSelectedSettings, disabled, defaultValue, valueChanged }: LineArrowType) => JSX.Element;
+export default LineArrowField;

package/dist/components/settings/LineArrowField.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SelectField = _interopRequireDefault(require("./SelectField"));
+
+var _style = require("../../constants/style");
+
+var _react2 = require("@linaria/react");
+
+var StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledLeftTriangle",
+  "class": "s1xxj4yl"
+});
+var StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledRightTriangle",
+  "class": "sbd6jc8"
+});
+var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledOption",
+  "class": "scawaat"
+});
+
+var LineArrowOption = function LineArrowOption(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledOption, {
+    "data-type": children
+  }, /*#__PURE__*/_react["default"].createElement(StyledLeftTriangle, null), /*#__PURE__*/_react["default"].createElement(StyledRightTriangle, null));
+};
+
+var LineArrowField = function LineArrowField(_ref2) {
+  var selectedSettings = _ref2.selectedSettings,
+      setSelectedSettings = _ref2.setSelectedSettings,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      defaultValue = _ref2.defaultValue,
+      valueChanged = _ref2.valueChanged;
+  return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    CustomOption: LineArrowOption,
+    title: "Fl\xE8ches",
+    disabled: disabled,
+    field: "style.lineArrow",
+    values: _style.STYLE_LINE_WITH_ARROW,
+    defaultValue: defaultValue,
+    valueChanged: valueChanged
+  });
+};
+
+var _default = LineArrowField;
+exports["default"] = _default;

package/dist/components/settings/LineTypeField.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+declare type LineTypeOptionType = {
+    children: string;
+};
+export declare const LineTypeOption: ({ children }: LineTypeOptionType) => JSX.Element;
+declare type LineTypeType = {
+    selectedSettings: string | undefined;
+    setSelectedSettings: React.Dispatch<React.SetStateAction<string | undefined>>;
+    disabled?: boolean;
+    defaultValue?: number | string | undefined;
+    valueChanged: (field: string, value: string | number) => void;
+};
+declare const LineTypeField: ({ selectedSettings, setSelectedSettings, disabled, defaultValue, valueChanged }: LineTypeType) => JSX.Element;
+export default LineTypeField;

package/dist/components/settings/LineTypeField.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LineTypeOption = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SelectField = _interopRequireDefault(require("./SelectField"));
+
+var _style = require("../../constants/style");
+
+var _react2 = require("@linaria/react");
+
+var StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledLine",
+  "class": "s1qssg4n"
+});
+var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+  name: "StyledOption",
+  "class": "se26iq6"
+});
+
+var LineTypeOption = function LineTypeOption(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledOption, {
+    "data-type": children
+  }, /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null));
+};
+
+exports.LineTypeOption = LineTypeOption;
+
+var LineTypeField = function LineTypeField(_ref2) {
+  var selectedSettings = _ref2.selectedSettings,
+      setSelectedSettings = _ref2.setSelectedSettings,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      defaultValue = _ref2.defaultValue,
+      valueChanged = _ref2.valueChanged;
+  return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
+    selectedSettings: selectedSettings,
+    setSelectedSettings: setSelectedSettings,
+    CustomOption: LineTypeOption,
+    title: "Type de traits",
+    disabled: disabled,
+    field: "style.lineDash",
+    values: _style.STYLE_LINE_DASH,
+    defaultValue: defaultValue,
+    valueChanged: valueChanged
+  });
+};
+
+var _default = LineTypeField;
+exports["default"] = _default;