From 67c49a26a464360b56250769d585943c3b27a6aa Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Tue, 23 Jul 2024 08:26:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
build/optimize.ts | 2 +-
public/verify.json | 2 +-
src/views/select/basic/index.vue | 159 +++++----------------------
src/views/select/basic/line.ts | 33 ++++++
src/views/select/basic/rect.ts | 41 +++++++
src/views/select/basic/stageEvent.ts | 93 ++++++++++++++++
6 files changed, 196 insertions(+), 134 deletions(-)
create mode 100644 src/views/select/basic/line.ts
create mode 100644 src/views/select/basic/rect.ts
create mode 100644 src/views/select/basic/stageEvent.ts
diff --git a/build/optimize.ts b/build/optimize.ts
index 790fb79..4a19294 100644
--- a/build/optimize.ts
+++ b/build/optimize.ts
@@ -27,7 +27,7 @@ const include = [
// 'sortablejs',
// 'swiper/vue',
// 'mint-filter',
- // '@vueuse/core',
+ '@vueuse/core',
// 'vue3-danmaku',
// 'v-contextmenu',
// 'vue-pdf-embed',
diff --git a/public/verify.json b/public/verify.json
index 005990e..c5f085b 100644
--- a/public/verify.json
+++ b/public/verify.json
@@ -1 +1 @@
-{"version":1721175662341}
\ No newline at end of file
+{"version":1721355798048}
\ No newline at end of file
diff --git a/src/views/select/basic/index.vue b/src/views/select/basic/index.vue
index d97539f..7b984be 100644
--- a/src/views/select/basic/index.vue
+++ b/src/views/select/basic/index.vue
@@ -1,153 +1,48 @@
-
-
diff --git a/src/views/select/basic/line.ts b/src/views/select/basic/line.ts
new file mode 100644
index 0000000..169e34f
--- /dev/null
+++ b/src/views/select/basic/line.ts
@@ -0,0 +1,33 @@
+import { Stage } from 'konva/lib/Stage';
+import { Layer } from 'konva/lib/Layer';
+import Konva from 'konva/lib';
+
+export const drawLine = (stage: Stage, layer: Layer) => {
+ const xSnaps = Math.round(stage.width() / 50);
+ const ySnaps = Math.round(stage.height() / 50);
+ const cellWidth = stage.width() / xSnaps;
+ const cellHeight = stage.height() / ySnaps;
+
+ for (let i = 0; i < xSnaps; i++) {
+ const xLine = new Konva.Line({
+ x: i * cellWidth,
+ points: [0, 0, 0, stage.height()],
+ stroke: '#96e04d',
+ strokeWidth: 1,
+ id: 'line',
+ });
+ layer.add(xLine);
+ }
+
+ for (let i = 0; i < ySnaps; i++) {
+ layer.add(
+ new Konva.Line({
+ y: i * cellHeight,
+ points: [0, 0, stage.width(), 0],
+ stroke: '#96e04d',
+ strokeWidth: 1,
+ id: 'line',
+ }),
+ );
+ }
+};
diff --git a/src/views/select/basic/rect.ts b/src/views/select/basic/rect.ts
new file mode 100644
index 0000000..6e1ecf0
--- /dev/null
+++ b/src/views/select/basic/rect.ts
@@ -0,0 +1,41 @@
+import { Layer } from 'konva/lib/Layer';
+import Konva from 'konva/lib';
+
+export const rect1 = (parent: Layer) => {
+ const rect = new Konva.Rect({
+ x: 60,
+ y: 60,
+ width: 100,
+ height: 90,
+ fill: 'red',
+ name: 'rect',
+ draggable: true,
+ });
+
+ parent.add(rect);
+ return rect;
+};
+export const rect2 = (parent: Layer) => {
+ const rect = new Konva.Rect({
+ x: 180,
+ y: 200,
+ width: 100,
+ height: 200,
+ fill: 'green',
+ name: 'rect',
+ draggable: true,
+ });
+
+ parent.add(rect);
+ return rect;
+};
+
+export const selectionRectangle = (layer: Layer) => {
+ const selectionRectangle = new Konva.Rect({
+ fill: 'rgba(0,0,255,0.5)',
+ visible: false,
+ listening: false,
+ });
+ layer.add(selectionRectangle);
+ return selectionRectangle;
+};
diff --git a/src/views/select/basic/stageEvent.ts b/src/views/select/basic/stageEvent.ts
new file mode 100644
index 0000000..3d3f42c
--- /dev/null
+++ b/src/views/select/basic/stageEvent.ts
@@ -0,0 +1,93 @@
+import Konva from 'konva/lib';
+import { Stage } from 'konva/lib/Stage';
+import { Rect } from 'konva/lib/shapes/Rect';
+import { Transformer } from 'konva/lib/shapes/Transformer';
+
+export const stageEvent = (stage: Stage, selectionRectangle: Rect, tr: Transformer) => {
+ let x1 = 0,
+ y1 = 0,
+ x2 = 0,
+ y2 = 0;
+ let selecting = false;
+ stage.on('mousedown touchstart', e => {
+ e.evt.preventDefault();
+
+ x1 = stage.getPointerPosition()!.x;
+ y1 = stage.getPointerPosition()!.y;
+ x2 = stage.getPointerPosition()!.x;
+ y2 = stage.getPointerPosition()!.y;
+
+ selectionRectangle.width(0);
+ selectionRectangle.height(0);
+ selecting = true;
+ });
+
+ stage.on('mousemove touchmove', e => {
+ if (!selecting) return;
+ e.evt.preventDefault();
+
+ x2 = stage.getPointerPosition()!.x;
+ y2 = stage.getPointerPosition()!.y;
+
+ selectionRectangle.setAttrs({
+ visible: true,
+ x: Math.min(x1, x2),
+ y: Math.min(y1, y2),
+ width: Math.abs(x2 - x1),
+ height: Math.abs(y2 - y1),
+ });
+ });
+
+ stage.on('mouseup touchend', e => {
+ selecting = false;
+ if (!selectionRectangle.visible()) return;
+ e.evt.preventDefault();
+
+ // update visibility in timeout, so we can check it in click event
+ selectionRectangle.visible(false);
+ let shapes = stage.find('.rect');
+ let box = selectionRectangle.getClientRect();
+ let selected = shapes.filter(shape => Konva.Util.haveIntersection(box, shape.getClientRect()));
+ tr.nodes(selected);
+ });
+
+ // clicks should select/deselect shapes
+ stage.on('click tap', function (e) {
+ // if we are selecting with rect, do nothing
+ if (selectionRectangle.visible()) {
+ return;
+ }
+
+ // if click on empty area - remove all selections
+ if (e.target === stage) {
+ tr.nodes([]);
+ return;
+ }
+
+ // do nothing if clicked NOT on our rectangles
+ if (!e.target.hasName('rect')) {
+ return;
+ }
+
+ // do we pressed shift or ctrl?
+ const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+ const isSelected = tr.nodes().indexOf(e.target) >= 0;
+
+ if (!metaPressed && !isSelected) {
+ // if no key pressed and the node is not selected
+ // select just one
+ tr.nodes([e.target]);
+ } else if (metaPressed && isSelected) {
+ // if we pressed keys and node was selected
+ // we need to remove it from selection:
+ const nodes = tr.nodes().slice(); // use slice to have new copy of array
+ // remove node from array
+ nodes.splice(nodes.indexOf(e.target), 1);
+ tr.nodes(nodes);
+ } else if (metaPressed && !isSelected) {
+ // add the node into selection
+ const nodes = tr.nodes().concat([e.target]);
+ tr.nodes(nodes);
+ }
+ });
+};