elementModel.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. /* eslint-disable no-unused-vars */
  2. import { deepCopy, getNumList } from "./plugins/utils";
  3. import { getModel as getCardHeadModel } from "./elements/card-head/model";
  4. import { getModel as getTopicHeadModel } from "./elements/topic-head/model";
  5. // element
  6. import { getModel as createLines } from "./elements/lines/model";
  7. import { getModel as createLine } from "./elements/line/model";
  8. import { getModel as createText } from "./elements/text/model";
  9. import { getModel as createImage } from "./elements/image/model";
  10. import { getModel as createGrids } from "./elements/grids/model";
  11. import {
  12. getModel as createComposition,
  13. getFullModel as getCompositionElements,
  14. } from "./elements/composition/model";
  15. import {
  16. getModel as createFillQuestion,
  17. getFullModel as getFillQuesitonElements,
  18. } from "./elements/fill-question/model";
  19. import {
  20. getModel as createFillLine,
  21. getFullModel as getFillLineElements,
  22. } from "./elements/fill-line/model";
  23. import {
  24. getModel as createExplain,
  25. getFullModel as getExplainElements,
  26. } from "./elements/explain/model";
  27. import { getModel as createForbidArea } from "./elements/forbid-area/model";
  28. // page relate ------------------- >
  29. // 页面
  30. const PAGE = {
  31. type: "PAGE",
  32. pageSize: "A3",
  33. columnNumber: 2,
  34. columnGap: 20,
  35. locators: [],
  36. globals: [],
  37. columns: [],
  38. };
  39. // 可编辑栏
  40. const COLUMN = {
  41. type: "COLUMN",
  42. x: "",
  43. y: "",
  44. w: "",
  45. h: "",
  46. isFull: false, // 是否已经填满元素
  47. elements: [],
  48. };
  49. // 定位点
  50. const LOCATOR = {
  51. type: "LOCATOR",
  52. x: "",
  53. y: "",
  54. w: "",
  55. h: "",
  56. };
  57. // available infos
  58. const EDITABLE_ELEMENT = [
  59. "LINE_HORIZONTAL",
  60. "LINE_VERTICAL",
  61. "LINES",
  62. "TEXT",
  63. "IMAGE",
  64. "GRIDS",
  65. ];
  66. const OTHER_ELEMENT = ["TOPIC_HEAD", "CARD_HEAD"];
  67. const EDITABLE_TOPIC = ["FILL_QUESTION", "FILL_LINE", "EXPLAIN", "COMPOSITION"];
  68. const EDITABLE_NOT_TOPIC = ["FORBID_AREA"];
  69. const ELEMENT_INFOS = {
  70. LINES: {
  71. name: "多横线",
  72. getModel: createLines,
  73. },
  74. LINE_HORIZONTAL: {
  75. name: "横线",
  76. getModel: () => createLine("HORIZONTAL"),
  77. },
  78. LINE_VERTICAL: {
  79. name: "竖线",
  80. getModel: () => createLine("VERTICAL"),
  81. },
  82. TEXT: {
  83. name: "文本",
  84. getModel: createText,
  85. },
  86. IMAGE: {
  87. name: "图片",
  88. getModel: createImage,
  89. },
  90. GRIDS: {
  91. name: "网格",
  92. getModel: createGrids,
  93. },
  94. FILL_QUESTION: {
  95. name: "选择题",
  96. getModel: createFillQuestion,
  97. },
  98. FILL_LINE: {
  99. name: "填空题",
  100. getModel: createFillLine,
  101. },
  102. EXPLAIN: {
  103. name: "解答题",
  104. getModel: createExplain,
  105. },
  106. COMPOSITION: {
  107. name: "作文题",
  108. getModel: createComposition,
  109. },
  110. FORBID_AREA: {
  111. name: "禁答区",
  112. getModel: createForbidArea,
  113. },
  114. };
  115. const ELEMENT_LIST = EDITABLE_ELEMENT.map((type) => {
  116. return {
  117. ...ELEMENT_INFOS[type],
  118. type,
  119. };
  120. });
  121. const TOPIC_LIST = EDITABLE_TOPIC.map((type) => {
  122. return {
  123. ...ELEMENT_INFOS[type],
  124. type,
  125. };
  126. });
  127. const NOT_TOPIC_LIST = EDITABLE_NOT_TOPIC.map((type) => {
  128. return {
  129. ...ELEMENT_INFOS[type],
  130. type,
  131. };
  132. });
  133. // 获取元件默认数据结构
  134. const getElementModel = (type) => {
  135. return ELEMENT_INFOS[type].getModel();
  136. };
  137. const getElementName = (type) => {
  138. return ELEMENT_INFOS[type].name;
  139. };
  140. const getLocators = (pageNo) => {
  141. return {
  142. top: [
  143. {
  144. id: `locator-${pageNo}-00`,
  145. ...LOCATOR,
  146. },
  147. {
  148. id: `locator-${pageNo}-01`,
  149. ...LOCATOR,
  150. },
  151. ],
  152. bottom: [
  153. {
  154. id: `locator-${pageNo}-10`,
  155. ...LOCATOR,
  156. },
  157. ],
  158. };
  159. };
  160. // 创建新页面
  161. const getNewPage = (pageNo, { pageSize, columnNumber }) => {
  162. let npage = deepCopy(PAGE);
  163. npage.pageSize = pageSize;
  164. npage.columnNumber = columnNumber;
  165. if (
  166. (pageSize === "A3" && columnNumber === 4) ||
  167. (pageSize === "A4" && columnNumber === 2)
  168. ) {
  169. npage.columnGap = 10;
  170. }
  171. npage.locators = getLocators(pageNo);
  172. npage.columns = getNumList(columnNumber).map((item, index) => {
  173. return deepCopy(COLUMN);
  174. });
  175. return npage;
  176. };
  177. export {
  178. getElementModel,
  179. getElementName,
  180. getNewPage,
  181. getCardHeadModel,
  182. getTopicHeadModel,
  183. getFillQuesitonElements,
  184. getFillLineElements,
  185. getExplainElements,
  186. getCompositionElements,
  187. ELEMENT_LIST,
  188. TOPIC_LIST,
  189. NOT_TOPIC_LIST,
  190. EDITABLE_TOPIC,
  191. EDITABLE_NOT_TOPIC,
  192. OTHER_ELEMENT,
  193. };