cnhis-design-vue 3.1.23-beta.9 → 3.1.23

package/es/components/fabric-chart/src/hooks/useDraw.js

@@ -1 +1,182 @@
-export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup } from './useDraw2.js';
+import { fabric } from '../utils/index.js';
+
+const defaultStyle = {
+  evented: false,
+  selectable: false
+};
+const defaultBorderStyle = {
+  stroke: "#999",
+  strokeWidth: 1,
+  ...defaultStyle
+};
+const defaultLineStyle = {
+  stroke: "#000",
+  strokeWidth: 1,
+  strokeDashArray: [0, 0],
+  ...defaultStyle
+};
+const defaultRectStyle = {
+  fill: "transparent",
+  stroke: "#999",
+  strokeWidth: 1,
+  originX: "center",
+  originY: "center",
+  ...defaultStyle
+};
+const defaultTextStyle = {
+  fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
+  fontSize: 12,
+  fill: "#000",
+  centeredRotation: true,
+  originX: "center",
+  originY: "center",
+  lineHeight: 1,
+  ...defaultStyle
+};
+function drawLine(points, style) {
+  return new fabric.Line(points, {
+    ...defaultLineStyle,
+    ...style
+  });
+}
+function drawText([x, y], style) {
+  const text = new fabric.Text(String(style.value), {
+    ...defaultTextStyle,
+    left: x,
+    top: y,
+    ...style
+  });
+  return text;
+}
+function drawArrow([x, y1, y2], style, type = "down") {
+  const arrowLine = drawLine([x, y1, x, y2], {
+    strokeWidth: 1,
+    stroke: style.fill
+  });
+  const arrow = drawText([x + 0.5, type === "up" ? y2 - 3 : y2 + 3], {
+    value: "v",
+    originX: "center",
+    originY: "bottom",
+    fontSize: 16,
+    angle: type === "up" ? 180 : 0,
+    ...style
+  });
+  const arrowGroup = new fabric.Group([arrowLine, arrow], {
+    ...defaultStyle,
+    originX: "center",
+    originY: "top"
+  });
+  return arrowGroup;
+}
+function drawTextGroup(rectStyle, fontStyle, groupStyle) {
+  const rect = new fabric.Rect({
+    ...defaultRectStyle,
+    ...rectStyle
+  });
+  const { value = "\u6807\u9898", textAlign = "center", verticalAlign = "center" } = fontStyle;
+  const textLeft = rectStyle.width / 2;
+  const textTop = rectStyle.height / 2;
+  const texts = new fabric.Text(String(value), {
+    ...defaultTextStyle,
+    ...fontStyle,
+    ...textAlign == "left" || textAlign == "right" ? {
+      originX: textAlign,
+      left: textAlign == "left" ? -textLeft : textLeft
+    } : {},
+    ...verticalAlign == "top" || verticalAlign == "bottom" ? {
+      originY: verticalAlign,
+      top: verticalAlign == "top" ? -textTop : textTop
+    } : {}
+  });
+  return new fabric.Group([rect, texts], {
+    ...defaultStyle,
+    ...groupStyle
+  });
+}
+function drawPoint(type = "circle", style) {
+  const newStyle = {
+    originX: "center",
+    originY: "center",
+    hasControls: false,
+    hasBorders: false,
+    hoverCursor: "pointer",
+    ...style
+  };
+  const createCircleBorder = () => {
+    return new fabric.Circle({
+      objectCaching: false,
+      strokeWidth: style.strokeWidth || 1,
+      stroke: style.stroke || "red",
+      radius: style.radius || 5,
+      fill: "#fff"
+    });
+  };
+  switch (type) {
+    case "triangle":
+      return new fabric.Triangle({
+        width: 20,
+        height: 20,
+        strokeWidth: 1,
+        scale: 1,
+        ...newStyle
+      });
+    case "circle":
+      return new fabric.Circle({
+        objectCaching: false,
+        strokeWidth: 1,
+        radius: 5,
+        scale: 1,
+        ...newStyle
+      });
+    case "image":
+      return new fabric.Image(style.element, {
+        ...newStyle,
+        scale: 1
+      });
+    case "yemai": {
+      const createAdd = () => {
+        const width = ((style.radius || 5) + (style.strokeWidth || 1)) * 2;
+        const subLineStyle = {
+          stroke: style.strokeX || "blue",
+          strokeWidth: style.strokeWidthX || 1,
+          originX: "center",
+          originY: "center"
+        };
+        const line1 = new fabric.Line([0, width / 2, width, width / 2], subLineStyle);
+        const line2 = new fabric.Line([width / 2, 0, width / 2, width], subLineStyle);
+        return new fabric.Group([line1, line2]);
+      };
+      return new fabric.Group([createCircleBorder(), createAdd()], {
+        scale: 1,
+        ...newStyle
+      });
+    }
+    case "koumai": {
+      const left = (style.radius || 5) + (style.strokeWidth || 1);
+      const circle = new fabric.Circle({
+        objectCaching: false,
+        radius: style.radiusCircle || 2,
+        fill: style.fillCircle || "#000",
+        originX: "center",
+        originY: "center",
+        left,
+        top: left
+      });
+      return new fabric.Group([createCircleBorder(), circle], {
+        scale: 1,
+        ...newStyle
+      });
+    }
+    default:
+      style && Reflect.deleteProperty(style, "stroke");
+      return new fabric.Text(String(type), {
+        fontFamily: "\u5FAE\u8F6F\u96C5\u9ED1",
+        scale: 1,
+        fontSize: 14,
+        fill: "#000",
+        ...newStyle
+      });
+  }
+}
+
+export { defaultBorderStyle, defaultLineStyle, defaultRectStyle, defaultStyle, defaultTextStyle, drawArrow, drawLine, drawPoint, drawText, drawTextGroup };

package/es/components/fabric-chart/src/hooks/useEvent.js

@@ -1 +1,161 @@
-export { useCanvasEvent, useEvent } from './useEvent2.js';
+import { useEventListener } from '@vueuse/core';
+import { fabric } from '../utils/index.js';
+
+function useEvent(element) {
+  useEventListener(element.nextSibling, "contextmenu", (e) => {
+    e.preventDefault();
+    return false;
+  });
+}
+function useCanvasEvent(canvas, propItems, emits) {
+  const { originY, originX, endX, endY, iconsWidth, selectionStyle, topList } = propItems;
+  function drawRect(options, key) {
+    const { left, top, width, height } = options;
+    const rect = new fabric.Rect({
+      key,
+      left: left != null ? left : 0,
+      top: top != null ? top : 0,
+      width,
+      height,
+      stroke: "transparent",
+      fill: "transparent",
+      lockMovementX: true,
+      lockMovementY: true,
+      transparentCorners: false,
+      hasControls: false,
+      ...selectionStyle,
+      strokeWidth: 0
+    });
+    canvas.value.add(rect);
+    return rect;
+  }
+  let selections = [];
+  function initSelection() {
+    const selections2 = [];
+    selections2.push(
+      drawRect(
+        {
+          left: iconsWidth,
+          top: originY + 1,
+          width: originX - iconsWidth,
+          height: endY - originY - 3
+        },
+        "left"
+      )
+    );
+    let topY = 0;
+    topList.forEach((item, index) => {
+      if (index > 0) {
+        topY += propItems[`${topList[index - 1].key}Height`];
+      }
+      const commonOptions = {
+        top: topY + 1,
+        height: propItems[`${item.key}Height`] - 1
+      };
+      selections2.push(
+        drawRect(
+          {
+            left: iconsWidth,
+            width: endX - iconsWidth,
+            ...commonOptions
+          },
+          item.key + "All"
+        )
+      );
+      selections2.push(
+        drawRect(
+          {
+            left: iconsWidth,
+            width: originX - iconsWidth,
+            ...commonOptions
+          },
+          item.key + "Title"
+        )
+      );
+      selections2.push(
+        drawRect(
+          {
+            left: originX,
+            width: endX - originX,
+            ...commonOptions
+          },
+          item.key
+        )
+      );
+    });
+    selections2.push(
+      drawRect(
+        {
+          left: originX,
+          top: originY + 1,
+          width: endX - originX,
+          height: endY - originY - 3
+        },
+        "grid"
+      )
+    );
+    selections2.forEach((obj) => {
+      if (obj.key.endsWith("All")) {
+        obj.sendToBack();
+        obj.on("mouseup", (event) => {
+          const { button, pointer } = event;
+          if (button == 1) {
+            const _key = obj.key.replace("All", "");
+            const key = pointer.x <= originX ? _key + "Title" : _key;
+            obj.sendToBack();
+            select(key);
+            emits("select", key);
+          }
+        });
+      } else {
+        obj.on("mousedown", () => {
+          resetStrokeWidth();
+          setActiveObj(obj);
+          emits("select", obj.key);
+        });
+        setTimeout(() => {
+          obj.bringToFront();
+        });
+      }
+    });
+    canvas.value.renderAll();
+    return selections2;
+  }
+  function addSelectionListener() {
+    canvas.value.on("selection:cleared", selectionCB);
+    function selectionCB(event) {
+      const { deselected = [] } = event;
+      deselected.forEach((obj) => {
+        obj.set("strokeWidth", 0);
+        obj.key.endsWith("All") && obj.sendToBack();
+      });
+    }
+  }
+  function select(key) {
+    canvas.value.discardActiveObject().renderAll();
+    resetStrokeWidth();
+    const obj = selections == null ? void 0 : selections.find((obj2) => obj2.key === key);
+    setActiveObj(obj);
+    obj && canvas.value.setActiveObject(obj);
+  }
+  function init() {
+    if (typeof (selectionStyle == null ? void 0 : selectionStyle.evented) === "boolean" && !(selectionStyle == null ? void 0 : selectionStyle.evented))
+      return;
+    selections = initSelection();
+    addSelectionListener();
+  }
+  function resetStrokeWidth() {
+    selections.forEach((obj) => {
+      obj.set("strokeWidth", 0);
+      obj.key.endsWith("All") && obj.sendToBack();
+    });
+  }
+  function setActiveObj(obj) {
+    var _a;
+    obj == null ? void 0 : obj.bringToFront().set("strokeWidth", (_a = selectionStyle.strokeWidth) != null ? _a : 2);
+  }
+  init();
+  return { select };
+}
+
+export { useCanvasEvent, useEvent };

package/es/components/fabric-chart/src/hooks/useGrid.js

@@ -1 +1,50 @@
-export { default } from './useGrid2.js';
+import { onMounted, nextTick } from 'vue';
+import { fabric } from '../utils/index.js';
+import { drawLine } from './useDraw.js';
+
+function useGrid(canvas, propItems) {
+  var _a, _b;
+  const { gridYNumber, originY, grid, originX, endX, xCellWidth, yCellHeight, gridXNumber, endY } = propItems;
+  const yList = [];
+  const xList = [];
+  const mainList = /* @__PURE__ */ new Set();
+  for (let i = 0; i <= gridYNumber; i++) {
+    const y = originY + parseInt(String(yCellHeight * (gridYNumber - i)));
+    const style = i % grid.subYCell === 0 ? ((_a = grid.mainLineStyle) == null ? void 0 : _a.x) || {} : grid.subLineStyle || {};
+    const line = drawLine([originX, y, endX, y], style);
+    if (i % grid.subYCell === 0) {
+      mainList.add(line);
+    } else {
+      yList.push(line);
+    }
+  }
+  for (let i = 0; i <= gridXNumber; i++) {
+    const x = originX + parseInt(String(xCellWidth * i));
+    let style = grid.subLineStyle || {};
+    if (i % grid.subSecondXCell === 0) {
+      style = grid.subSecondLineStyle || {};
+    }
+    if (i % grid.subXCell === 0) {
+      style = ((_b = grid.mainLineStyle) == null ? void 0 : _b.y) || {};
+    }
+    const line = drawLine([x, originY, x, endY], style);
+    if (i % grid.subXCell === 0) {
+      mainList.add(line);
+    } else {
+      xList.push(line);
+    }
+  }
+  const group = new fabric.Group([...xList, ...yList, ...mainList], {
+    evented: false,
+    selectable: false
+  });
+  onMounted(() => {
+    nextTick(() => {
+      canvas.value.add(group);
+      canvas.value.sendToBack(group);
+      canvas.value.renderAll();
+    });
+  });
+}
+
+export { useGrid as default };