@seafile/sdoc-editor 2.0.7 → 2.0.8-alpha.0

package/dist/basic-sdk/assets/css/dropdown-menu.css

@@ -8,10 +8,23 @@
   background-color: #ffff;
   max-height: 300px;
   max-width: 200px;
-  overflow: auto;
   padding: 8px 0px;
 }
 
+.sdoc-dropdown-menu .sdoc-seatable-selected-table-list-wrapper .sdoc-seatable-list-search-wrapper {
+  padding: 12px;
+}
+
+.sdoc-dropdown-menu .sdoc-seatable-selected-table-list-wrapper .sdoc-seatable-list-search-wrapper>input {
+  font-size: 12px;
+  max-height: 30px;
+}
+
+.sdoc-dropdown-menu .sdoc-seatable-selected-table-list-wrapper .sdoc-seatable-list-wrapper {
+  max-height: 230px;
+  overflow-y: auto;
+}
+
 .sdoc-dropdown-menu .sdoc-dropdown-menu-divider {
   width: 100%;
   height: 0;

package/dist/basic-sdk/extension/constants/element-type.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
+exports.WIKI_LINK = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SEATABLE_TABLE = exports.SEATABLE_COLUMN = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CHART = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
 const BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 const TITLE = exports.TITLE = 'title';
 const SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -43,6 +43,7 @@ const MENTION_TEMP = exports.MENTION_TEMP = 'mention_temp';
 const FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK_INSET_INPUT_TEMP = 'file_link_insert_input_temp';
 const QUICK_INSERT = exports.QUICK_INSERT = 'quick_insert';
 const VIDEO_LINK = exports.VIDEO_LINK = 'video_link';
+const CHART = exports.CHART = 'chart';
 const SEATABLE_COLUMN = exports.SEATABLE_COLUMN = 'seatable_column';
 const SEATABLE_TABLE = exports.SEATABLE_TABLE = 'seatable_table';
 const ASK_AI = exports.ASK_AI = 'ask_ai';

package/dist/basic-sdk/extension/constants/index.js

@@ -23,6 +23,12 @@ Object.defineProperty(exports, "CALL_OUT", {
     return _elementType.CALL_OUT;
   }
 });
+Object.defineProperty(exports, "CHART", {
+  enumerable: true,
+  get: function () {
+    return _elementType.CHART;
+  }
+});
 Object.defineProperty(exports, "CHECK_LIST_ITEM", {
   enumerable: true,
   get: function () {
@@ -128,12 +134,6 @@ Object.defineProperty(exports, "FILE_LINK_INSET_INPUT_TEMP", {
   }
 });
 exports.FILE_TYPE = void 0;
-Object.defineProperty(exports, "FIVE_COLUMN", {
-  enumerable: true,
-  get: function () {
-    return _elementType.FIVE_COLUMN;
-  }
-});
 Object.defineProperty(exports, "FONT", {
   enumerable: true,
   get: function () {
@@ -276,6 +276,7 @@ Object.defineProperty(exports, "MULTI_COLUMN", {
     return _elementType.MULTI_COLUMN;
   }
 });
+exports.MULTI_COLUMN_TYPE = void 0;
 Object.defineProperty(exports, "ORDERED_LIST", {
   enumerable: true,
   get: function () {
@@ -532,6 +533,7 @@ const INSERT_POSITION = exports.INSERT_POSITION = {
 };
 const LOCAL_IMAGE = exports.LOCAL_IMAGE = 'local-image';
 const LOCAL_VIDEO = exports.LOCAL_VIDEO = 'local-video';
+const MULTI_COLUMN_TYPE = exports.MULTI_COLUMN_TYPE = [_elementType.TWO_COLUMN, _elementType.THREE_COLUMN, _elementType.FOUR_COLUMN];
 const LIST_TYPE_ARRAY = exports.LIST_TYPE_ARRAY = [_elementType.UNORDERED_LIST, _elementType.ORDERED_LIST];
 const LIST_ITEM_CORRELATION_TYPE = exports.LIST_ITEM_CORRELATION_TYPE = [_elementType.UNORDERED_LIST, _elementType.ORDERED_LIST, _elementType.LIST_ITEM];
 const LIST_ITEM_SUPPORTED_TRANSFORMATION = exports.LIST_ITEM_SUPPORTED_TRANSFORMATION = [_elementType.UNORDERED_LIST, _elementType.ORDERED_LIST, 'left', 'center', 'right', _elementType.BLOCKQUOTE];

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -233,6 +233,11 @@ const MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = {
     iconClass: 'sdocfont sdoc-seatable-table',
     type: _elementType.SEATABLE_TABLE,
     text: 'SeaTable_table'
+  },
+  [_elementType.CHART]: {
+    id: `sdoc_${_elementType.CHART}`,
+    iconClass: 'sdocfont sdoc-chart',
+    text: 'Insert_chart'
   }
 };
 
@@ -297,6 +302,21 @@ const SIDE_TRANSFORM_MENUS_CONFIG = exports.SIDE_TRANSFORM_MENUS_CONFIG = [{
   iconClass: 'sdocfont sdoc-callout',
   type: _elementType.CALL_OUT,
   text: 'Callout'
+}, {
+  id: _elementType.TWO_COLUMN,
+  iconClass: 'sdocfont sdoc-multi-column',
+  type: _elementType.TWO_COLUMN,
+  text: 'Two_column'
+}, {
+  id: _elementType.THREE_COLUMN,
+  iconClass: 'sdocfont sdoc-multi-column',
+  type: _elementType.THREE_COLUMN,
+  text: 'Three_column'
+}, {
+  id: _elementType.FOUR_COLUMN,
+  iconClass: 'sdocfont sdoc-multi-column',
+  type: _elementType.FOUR_COLUMN,
+  text: 'Four_column'
 }];
 const SIDE_TRANSFORM_MENUS_SEARCH_MAP = exports.SIDE_TRANSFORM_MENUS_SEARCH_MAP = {
   [_elementType.PARAGRAPH]: 'Paragraph',

package/dist/basic-sdk/extension/plugins/chart/chart-edit-dialog/index.css

@@ -0,0 +1,21 @@
+.sdoc-chart-edit-dialog {
+	max-width: 1100px;
+	width: 1100px;
+	height: calc(100% - 56px);  
+}
+
+.sdoc-chart-edit-dialog .modal-content {
+	height: 100%;
+}
+  
+.sdoc-chart-edit-dialog .modal-body {
+	padding: 0;
+	overflow: hidden;
+	display: flex;
+}
+
+.sdoc-chart-edit-dialog .sdoc-chart-fullscreen-view {
+	width: 100%;
+	height: 600px;
+}
+  

package/dist/basic-sdk/extension/plugins/chart/chart-edit-dialog/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _DTableModalHeader2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableModalHeader"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactstrap = require("reactstrap");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
+var _seaChart = require("sea-chart");
+var _context = _interopRequireDefault(require("../../../../../context"));
+require("./index.css");
+const ChartEditDialog = _ref => {
+  var _window, _window$app, _window$app$state, _window2, _window2$app, _window2$app$state;
+  let {
+    editor,
+    element,
+    api,
+    isFullScreen,
+    onCloseEditDialog,
+    t
+  } = _ref;
+  const [statItemData, setStatItemData] = (0, _react.useState)(element.statItem || {});
+  const onSettingChange = (0, _react.useCallback)(setting => {
+    const newStatItemData = {
+      ...statItemData,
+      ...setting
+    };
+    setStatItemData(newStatItemData);
+  }, [statItemData]);
+  return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
+    className: "sdoc-chart-edit-dialog",
+    isOpen: true,
+    toggle: () => onCloseEditDialog(statItemData)
+  }, /*#__PURE__*/_react.default.createElement(_DTableModalHeader2.default, {
+    toggle: () => onCloseEditDialog(statItemData)
+  }, t(!isFullScreen ? 'Edit_chart' : 'Chart')), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+    className: (0, _classnames.default)({
+      'sdoc-chart-fullscreen-view': isFullScreen
+    })
+  }, !isFullScreen && /*#__PURE__*/_react.default.createElement(_seaChart.Editor, {
+    chart: statItemData,
+    config: _context.default.getSettings(),
+    api: api,
+    tables: editor.tables || [],
+    collaborators: editor.collaborators || [],
+    departments: ((_window = window) === null || _window === void 0 ? void 0 : (_window$app = _window.app) === null || _window$app === void 0 ? void 0 : (_window$app$state = _window$app.state) === null || _window$app$state === void 0 ? void 0 : _window$app$state.departments) || [],
+    isCalculateByView: true,
+    isRenderByD3: true,
+    onChange: onSettingChange
+  }), isFullScreen && /*#__PURE__*/_react.default.createElement(_seaChart.View, {
+    chart: statItemData,
+    api: api,
+    config: _context.default.getSettings(),
+    tables: editor.tables,
+    collaborators: editor.collaborators || [],
+    departments: ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$app = _window2.app) === null || _window2$app === void 0 ? void 0 : (_window2$app$state = _window2$app.state) === null || _window2$app$state === void 0 ? void 0 : _window2$app$state.departments) || [],
+    isCalculateByView: true,
+    isRenderByD3: true
+  })));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ChartEditDialog);

package/dist/basic-sdk/extension/plugins/chart/helpers.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelectedTable = exports.isInsertChartMenuDisabled = exports.isInit = exports.isInViewPort = exports.insertChart = exports.getChartDbMetaData = exports.generateChartNode = void 0;
+var _slate = require("@seafile/slate");
+var _seaChart = require("sea-chart");
+var _context = _interopRequireDefault(require("../../../../context"));
+var _core = require("../../core");
+var _constants = require("../../constants");
+const isInsertChartMenuDisabled = (editor, readonly) => {
+  if (readonly) return true;
+  const {
+    selection
+  } = editor;
+  if (selection === null) return true;
+  if (!_slate.Range.isCollapsed(selection)) return true;
+  const [match] = _slate.Editor.nodes(editor, {
+    match: n => {
+      let type = (0, _core.getNodeType)(n);
+      if (!type && (0, _core.isTextNode)(n) && n.id) {
+        const parentNode = (0, _core.getParentNode)(editor.children, n.id);
+        type = (0, _core.getNodeType)(parentNode);
+      }
+      if (type === _constants.CODE_BLOCK) return true;
+      if (type === _constants.TABLE) return true;
+      if (type.startsWith('header')) return true;
+      if (_slate.Editor.isVoid(editor, n)) return true;
+      return false;
+    },
+    universal: true
+  });
+  if (match) return true;
+  return false;
+};
+exports.isInsertChartMenuDisabled = isInsertChartMenuDisabled;
+const generateChartNode = editor => {
+  const element = (0, _core.generateEmptyElement)(_constants.CHART);
+  const initConfig = {
+    option: {
+      id: element.id,
+      table_id: editor.tables[0]._id,
+      // Default first table
+      view_id: editor.tables[0].views[0]._id // Default first view
+    },
+    tables: []
+  };
+  const model = new _seaChart.ChartModel(initConfig.option, initConfig.tables);
+  return {
+    ...element,
+    statItem: {
+      ...model,
+      type: model.config.type
+    }
+  };
+};
+exports.generateChartNode = generateChartNode;
+const insertChart = editor => {
+  const chartNode = generateChartNode(editor);
+  const path = _slate.Editor.path(editor, editor.selection);
+  _slate.Transforms.insertNodes(editor, chartNode, {
+    at: [path[0]]
+  });
+};
+exports.insertChart = insertChart;
+const isInViewPort = element => {
+  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+  const {
+    top
+  } = element.getBoundingClientRect();
+  return top >= 0 && top <= viewHeight;
+};
+exports.isInViewPort = isInViewPort;
+const getChartDbMetaData = async (statItem, dtableBases, sql) => {
+  const {
+    base_id
+  } = statItem;
+  const integrationConfig = dtableBases === null || dtableBases === void 0 ? void 0 : dtableBases.find(item => item.base_api_token === base_id);
+  if (integrationConfig) {
+    const dtableServer = await _context.default.getDtableServer(integrationConfig);
+    const res = await _context.default.getDbMetaData(dtableServer, sql);
+    return res;
+  }
+};
+exports.getChartDbMetaData = getChartDbMetaData;
+const isInit = statItem => {
+  const {
+    base_id
+  } = statItem;
+  if (!base_id) {
+    return true;
+  }
+  return false;
+};
+exports.isInit = isInit;
+const isSelectedTable = (statItem, dtableBases) => {
+  const {
+    base_id,
+    table_id,
+    table_name
+  } = statItem;
+  return base_id && table_id && table_name && (dtableBases === null || dtableBases === void 0 ? void 0 : dtableBases.length) > 0;
+};
+exports.isSelectedTable = isSelectedTable;

package/dist/basic-sdk/extension/plugins/chart/hover-menu/index.css

@@ -0,0 +1,55 @@
+.sdoc-chart-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: auto;
+}
+  
+.sdoc-chart-hover-menu-container .hover-menu-container {
+  height: 36px;
+  padding: 7px 8px;
+  background-color: #fff;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container > span:not(:last-of-type) {
+  padding-right: 6px;
+  border-right: 1px solid #e5e5e5;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  font-size: 12px;
+  color: #212529;
+  padding: 0 5px;
+  border-radius: 2px;
+  min-width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container .op-item:hover {
+  color: #212529;
+  text-decoration: none;
+  background: #f1f1f1;
+}
+
+.sdoc-chart-hover-menu-container .op-group-item:last-child .op-item {
+  margin-left: 8px;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container .active {
+  background: #f1f1f1;
+}
+
+.sdoc-chart-hover-menu-container .hover-menu-container .icon-font {
+  font-size: 12px;
+  color: #999999;
+}

package/dist/basic-sdk/extension/plugins/chart/hover-menu/index.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _commons = require("../../../commons");
+var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
+require("./index.css");
+const ChartHoverMenu = _ref => {
+  let {
+    menuPosition,
+    onEditChart,
+    onFullscreen,
+    t
+  } = _ref;
+  const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setIsShowTooltip(true);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "sdoc-chart-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: "sdoc_chart_edit",
+    role: "button",
+    className: "op-item",
+    onClick: onEditChart
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-rename icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_chart_edit",
+    placement: "top",
+    fade: true
+  }, t('Edit_chart')))), /*#__PURE__*/_react.default.createElement("span", {
+    className: "op-group-item"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    id: "sdoc_chart_full_screen_mode",
+    role: "button",
+    className: "op-item",
+    onClick: onFullscreen
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-fullscreen icon-font"
+  }), isShowTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    target: "sdoc_chart_full_screen_mode",
+    placement: "top",
+    fade: true
+  }, t('Full_screen_mode')))))));
+};
+var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(ChartHoverMenu);

package/dist/basic-sdk/extension/plugins/chart/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElem = _interopRequireDefault(require("./render-elem"));
+const ChartPlugin = {
+  type: _constants.CHART,
+  nodeType: 'element',
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: [_renderElem.default]
+};
+var _default = exports.default = ChartPlugin;

package/dist/basic-sdk/extension/plugins/chart/menu/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = require("../helpers");
+var _constants = require("../../../constants");
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+const ChartMenu = _ref => {
+  let {
+    editor,
+    readonly,
+    toggle
+  } = _ref;
+  const disabled = (0, _helpers.isInsertChartMenuDisabled)(editor, readonly);
+  const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.CHART];
+  const onInsertChart = (0, _react.useCallback)(() => {
+    (0, _helpers.insertChart)(editor);
+    toggle && toggle();
+  }, [editor, toggle]);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
+    disabled: disabled,
+    menuConfig: menuConfig,
+    onClick: onInsertChart
+  });
+};
+var _default = exports.default = ChartMenu;

package/dist/basic-sdk/extension/plugins/chart/plugin.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _constants = require("../../constants");
+const withChart = editor => {
+  const {
+    isVoid
+  } = editor;
+  const newEditor = editor;
+
+  // Rewrite isVoid
+  newEditor.isVoid = elem => {
+    const {
+      type
+    } = elem;
+    if (type === _constants.CHART) {
+      return true;
+    }
+    return isVoid(elem);
+  };
+  return newEditor;
+};
+var _default = exports.default = withChart;

package/dist/basic-sdk/extension/plugins/chart/render-elem.css

@@ -0,0 +1,61 @@
+.sdoc-chart-container {
+	width: 100%;
+	height: 300px;
+	padding: 8px;
+	cursor: pointer;
+}
+  
+.sdoc-chart-container .sdoc-chart-view {
+	position: relative;
+	background-color: #f5f5f5;
+	width: 100%;
+	height: 100%;
+	padding: 10px;
+}
+
+.sdoc-chart-container .sdoc-chart-view .sdoc-chart-view-content {
+	width: 100%;
+	height: 100%;
+}
+  
+.sdoc-chart-container .active {
+	box-shadow: 0 0 0 2px #007bff;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect {
+  display: inline-block;
+	width: 8px;
+	height: 8px;
+	background-color: #007bff;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect-lt {
+	position: absolute;
+	left: -5px;
+	top: -5px;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect-lb {
+	position: absolute;
+	left: -5px;
+	bottom: -5px;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect-rt {
+	position: absolute;
+	right: -5px;
+	top: -5px;
+}
+
+.sdoc-chart-container .active .sdoc-chart-view-rect-rb {
+	position: absolute;
+	right: -5px;
+	bottom: -5px;
+}
+
+.sdoc-chart-container .sdoc-chart-view .sdoc-chart-tip {
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	position: absolute;
+}