From 2e4d0e4edb6b892223dce6513c9e0f8a24fa970d Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期六, 02 三月 2024 14:20:29 +0800
Subject: [PATCH] #
---
/dev/null | 0
zy-asrs-flow/src/pages/map/components/edit.jsx | 24 +++++++++++++++++++++++-
zy-asrs-flow/src/pages/map/index.jsx | 20 ++++++++++++++------
3 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/zy-asrs-flow/src/pages/map/components/edit.jsx b/zy-asrs-flow/src/pages/map/components/edit.jsx
index 2345e13..aea4a97 100644
--- a/zy-asrs-flow/src/pages/map/components/edit.jsx
+++ b/zy-asrs-flow/src/pages/map/components/edit.jsx
@@ -1,10 +1,30 @@
import React, { useState, useRef, useEffect } from 'react';
import { Col, Form, Modal, Row, Checkbox, Image, Tree, Drawer, Space, Button, Card } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
+import * as PIXI from 'pixi.js';
import agv from '/public/img/map/agv.svg'
const Edit = (props) => {
+ const [dragging, setDragging] = useState(false);
+ const [dragImage, setDragImage] = useState(null);
+
+ useEffect(() => {
+ const handleMouseMove = (e) => {
+ if (dragging) {
+ props.onDrop(e.clientX, e.clientY);
+ setDragging(false);
+ props.onCancel();
+ }
+ };
+ window.addEventListener('mousemove', handleMouseMove);
+ return () => window.removeEventListener('mousemove', handleMouseMove);
+ }, [dragging, props.onDrop, props.onCancel]);
+
+ const onDragStart = (e) => {
+ setDragging(true)
+ };
+
return (
<>
<Drawer
@@ -23,10 +43,12 @@
}
>
<Card>
- <Image
+ <Image
src={agv}
width='50px'
preview={false}
+ draggable="true"
+ onDragStart={onDragStart}
/>
</Card>
</Drawer>
diff --git a/zy-asrs-flow/src/pages/map/core.js b/zy-asrs-flow/src/pages/map/core.js
deleted file mode 100644
index e69de29..0000000
--- a/zy-asrs-flow/src/pages/map/core.js
+++ /dev/null
diff --git a/zy-asrs-flow/src/pages/map/index.jsx b/zy-asrs-flow/src/pages/map/index.jsx
index bf98ffb..09b068c 100644
--- a/zy-asrs-flow/src/pages/map/index.jsx
+++ b/zy-asrs-flow/src/pages/map/index.jsx
@@ -51,6 +51,11 @@
height: window.innerHeight,
});
+ let mapContainer = new PIXI.Container();
+ mapContainer.name = "mapContainer";
+ mapContainer.data = {};
+ app.stage.addChild(mapContainer);
+
React.useEffect(() => {
const handleResize = () => {
setWindowSize({
@@ -66,12 +71,6 @@
app.stage.hitArea = app.screen;
globalThis.__PIXI_APP__ = app;
mapRef.current.appendChild(app.view);
-
- // mapContainer ------------------------------
- const mapContainer = new PIXI.Container();
- mapContainer.name = "mapContainer";
- mapContainer.data = {};
- app.stage.addChild(mapContainer);
const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
const bunny = new PIXI.Sprite(texture);
@@ -102,6 +101,14 @@
setEditModalVisible(true);
}
+ const onDrop = (x, y) => {
+ const bunny = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png');
+ bunny.anchor.set(0.5);
+ bunny.x = x;
+ bunny.y = y;
+ app.stage.addChild(bunny);
+ }
+
return (
<>
<Layout className={styles.layout}>
@@ -123,6 +130,7 @@
}
}
refCurr={mapRef.current}
+ onDrop={onDrop}
/>
</>
)
--
Gitblit v1.9.1