Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!534 #I13GF2 模块支持移动

Browse Source
pull/534/MERGE
ZoeLeeFZ 5 years ago committed by ChenX
parent a98bfd64d0
commit c9d9243781
8 changed files with 182 additions and 97 deletions
Show Stats Download Patch File Download Diff File

2
src/UI/Components/Modal/ModalsManage.tsx
Unescape View File

@ -69,7 +69,7 @@ export class ModalManage
private RegisterEvent() private RegisterEvent()
{ {
let overflow = this.m_ModalContainer.style.overflow; let overflow = this.m_ModalContainer.style.overflow;
this.m_ModalContainer.addEventListener('dragstart', e => e.preventDefault()); // this.m_ModalContainer.addEventListener('dragstart', e => e.preventDefault());
this.m_ModalContainer.addEventListener('keydown', e => this.OnKeyDown(e)); this.m_ModalContainer.addEventListener('keydown', e => this.OnKeyDown(e));
this.m_ModalContainer.addEventListener('focus', () => this.m_ModalContainer.addEventListener('focus', () =>
{ {

36
src/UI/Components/SourceManage/CommonPanel.tsx
Unescape View File

@ -2,7 +2,7 @@ import { Alignment, Button, Card, Checkbox, Classes, ContextMenu, Intent, ITreeN
import { observable, toJS } from 'mobx'; import { observable, toJS } from 'mobx';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import * as React from 'react'; import * as React from 'react';
import { DirUrl, FileUrls } from '../../../Common/HostUrl'; import { DirUrl, FileUrls, TemplateUrls, MaterialUrls, ToplineUrls } from '../../../Common/HostUrl';
import { MouseKey } from '../../../Common/KeyEnum'; import { MouseKey } from '../../../Common/KeyEnum';
import { DirectoryId, PostJson, RequestStatus } from '../../../Common/Request'; import { DirectoryId, PostJson, RequestStatus } from '../../../Common/Request';
import { AppToaster } from '../Toaster'; import { AppToaster } from '../Toaster';
@ -71,6 +71,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
currentPage: 1, currentPage: 1,
pageCount: 20 pageCount: 20
} }
private _dragId = "";
private nodeEls: HTMLElement[]; private nodeEls: HTMLElement[];
constructor(props) constructor(props)
{ {
@ -103,6 +104,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
private handleSelectData = (e: React.FormEvent<HTMLInputElement>, data) => private handleSelectData = (e: React.FormEvent<HTMLInputElement>, data) =>
{ {
data.isChecked = e.currentTarget.checked; data.isChecked = e.currentTarget.checked;
if (e.currentTarget.checked) if (e.currentTarget.checked)
this.needDeleteData.add(data); this.needDeleteData.add(data);
else else
@ -551,6 +553,8 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
break; break;
} }
let dataIds = this.getSelectDataIds(); let dataIds = this.getSelectDataIds();
if (dataIds.length === 0 && this._dragId)
dataIds.push(this._dragId);
if (targetId && !isNaN(Number(targetId)) && dataIds.length > 0) if (targetId && !isNaN(Number(targetId)) && dataIds.length > 0)
{ {
let url = ""; let url = "";
@ -562,15 +566,15 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
query.file_ids = dataIds; query.file_ids = dataIds;
break; break;
case DirectoryId.MaterialDir: case DirectoryId.MaterialDir:
url = FileUrls.move; url = MaterialUrls.move;
query.material_ids = dataIds; query.material_ids = dataIds;
break; break;
case DirectoryId.ToplineDir: case DirectoryId.ToplineDir:
url = FileUrls.move; url = ToplineUrls.move;
query.topline_ids = dataIds; query.topline_ids = dataIds;
break; break;
case DirectoryId.TemplateDir: case DirectoryId.TemplateDir:
url = FileUrls.move; url = TemplateUrls.move;
query.module_ids = dataIds; query.module_ids = dataIds;
break; break;
default: default:
@ -654,6 +658,25 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
{ {
this.nodeEls = Array.from(this.tree.querySelectorAll(".bp3-tree-node-content")); this.nodeEls = Array.from(this.tree.querySelectorAll(".bp3-tree-node-content"));
} }
private handleDragStart = (e: React.DragEvent<Element>) =>
{
this._dragId = "";
let el = e.target as Element;
while (el)
{
if (el.hasAttribute("data-id"))
{
this._dragId = el.getAttribute("data-id");
break;
}
if (el.classList.contains("img-lib"))
break;
el = el.parentElement;
}
if (this.needDeleteData.size === 0 && !this._dragId)
e.preventDefault();
}
private handleDragEnd = () => private handleDragEnd = () =>
{ {
for (let node of this.nodeEls) for (let node of this.nodeEls)
@ -788,10 +811,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
</div> </div>
<Card <Card
className="img-lib" className="img-lib"
onDragStart={e => onDragStart={this.handleDragStart}>
{
if (this.needDeleteData.size === 0) e.preventDefault();
}}>
{ {
React.Children.map(this.props.children, child => React.Children.map(this.props.children, child =>
child && React.cloneElement(child as React.DetailedReactHTMLElement<any, any>, child && React.cloneElement(child as React.DetailedReactHTMLElement<any, any>,

1
src/UI/Components/SourceManage/FileList.tsx
Unescape View File

@ -85,6 +85,7 @@ export class FileList extends React.Component<IFileListProps, {}> {
return ( return (
<li <li
key={file.file_id} key={file.file_id}
data-id={file.file_id}
> >
<div <div
className="look-mat" className="look-mat"

3
src/UI/Components/SourceManage/MaterialList.tsx
Unescape View File

@ -84,7 +84,8 @@ export class MaterialList extends React.Component<IImgListProps, {}> {
{ {
return ( return (
<li <li
key={mtl.image_id} key={mtl.material_id}
data-id={mtl.material_id}
onDragStart={() => this.handleDragStart(mtl)} onDragStart={() => this.handleDragStart(mtl)}
> >
<div <div

217
src/UI/Components/SourceManage/TexturePanel.less
Unescape View File

@ -1,69 +1,85 @@
.texturePanel{ .texturePanel {
height: 100%; height: 100%;
padding: 0; padding: 0;
&>div:first-child{
&>div:first-child {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.bp3-align-left{
flex:1; .bp3-align-left {
flex: 1;
} }
} }
&>div:last-child{
&>div:last-child {
height: calc(~"100% - 50px"); height: calc(~"100% - 50px");
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0; padding: 0;
.img-tree{
.img-tree {
width: 25%; width: 25%;
padding: 0; padding: 0;
overflow: auto; overflow: auto;
.bp3-tree{
.bp3-tree {
height: 100%; height: 100%;
box-shadow: none; box-shadow: none;
&>ul{
&>ul {
max-height: 95%; max-height: 95%;
overflow: auto; overflow: auto;
} }
.bp3-tree-node-content-1{
.bp3-tree-node-content-1 {
padding-left: 10px; padding-left: 10px;
} }
} }
} }
.img-lib{
.img-lib {
width: 75%; width: 75%;
padding: 0 10px; padding: 0 10px;
overflow: visible; overflow: visible;
position: relative; position: relative;
&>ul:first-child{
&>ul:first-child {
list-style: none; list-style: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0; padding: 0;
&>li{
&>li {
width: 20%; width: 20%;
padding: 5px; padding: 5px;
position: relative; position: relative;
.bp3-transition-container{
.bp3-transition-container {
z-index: 31; z-index: 31;
} }
&>.look-img .bp3-popover-target,.look-mat{
&>.look-img .bp3-popover-target,
.look-mat {
width: 100%; width: 100%;
height: 0px; height: 0px;
padding-bottom: 100%; padding-bottom: 100%;
overflow:hidden; overflow: hidden;
margin: 0; margin: 0;
position:relative; position: relative;
div{
div {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
img{
img {
position: absolute; position: absolute;
left: 0; left: 0;
} }
.apply-img-hint:hover:before{
.apply-img-hint:hover:before {
content: "双击应用图片"; content: "双击应用图片";
position: absolute; position: absolute;
left: 0; left: 0;
@ -76,96 +92,116 @@
opacity: 0.5; opacity: 0.5;
} }
} }
&>p{
&>p {
width: 70%; width: 70%;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
text-overflow:ellipsis text-overflow: ellipsis
} }
&>.bp3-control{
&>.bp3-control {
display: none; display: none;
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 10px;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
.bp3-control-indicator{
.bp3-control-indicator {
margin: 0; margin: 0;
vertical-align: baseline; vertical-align: baseline;
} }
} }
&>.selected{
&>.selected {
display: block; display: block;
} }
&>.bp3-popover-wrapper:not(:first-child){
&>.bp3-popover-wrapper:not(:first-child) {
position: absolute; position: absolute;
bottom: 20%; top: 0;
right: 0px; right: 0px;
.bp3-button{
.bp3-button {
display: none; display: none;
} }
svg{
svg {
color: #ff7373; color: #ff7373;
} }
} }
&:hover>.bp3-control{
&:hover>.bp3-control {
display: block; display: block;
} }
&:hover>.bp3-popover-wrapper .bp3-button{
&:hover>.bp3-popover-wrapper .bp3-button {
display: flex; display: flex;
} }
&>.bp3-popover-wrapper .bp3-active{
&>.bp3-popover-wrapper .bp3-active {
display: flex; display: flex;
} }
} }
&>.bp3-card>p{
&>.bp3-card>p {
position: static; position: static;
} }
} }
.mat-list:first-child{
li{ .mat-list:first-child {
li {
cursor: pointer; cursor: pointer;
} }
.look-mat{
user-select:none; .look-mat {
user-select: none;
} }
.hint:hover::before{
.hint:hover::before {
content: "双击编辑材质 拖至绘图区应用"; content: "双击编辑材质 拖至绘图区应用";
position: absolute; position: absolute;
left:20%; left: 20%;
top: 10px; top: 10px;
margin: auto; margin: auto;
width: 55%; width: 55%;
height: 30px; height: 30px;
opacity: 0.5; opacity: 0.5;
z-index: 1;
} }
&>li{
&>li {
text-align: center; text-align: center;
&>.bp3-popover-wrapper{
&>.bp3-popover-wrapper {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 0px; right: 0px;
} }
&>.bp3-control{
right: 10px; &>.bp3-control {
top: 100px; left: 10px;
top: 10px;
} }
&>p{
&>p {
width: 100%; width: 100%;
bottom: -10px; bottom: -10px;
} }
} }
} }
.bp3-dialog-container{
.bp3-dialog-container {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
z-index: 30; z-index: 30;
.bp3-dialog{
.bp3-dialog {
width: unset; width: unset;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -175,12 +211,14 @@
} }
} }
.upload{
.thumbnail{ .upload {
.thumbnail {
min-height: 200px; min-height: 200px;
position: relative; position: relative;
padding: 20px; padding: 20px;
.thumbnail-list{
.thumbnail-list {
list-style: none; list-style: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -189,29 +227,34 @@
margin-bottom: 10px; margin-bottom: 10px;
max-height: 400px; max-height: 400px;
overflow: auto; overflow: auto;
li{
li {
width: 110px; width: 110px;
height: 110px; height: 110px;
padding: 10px; padding: 10px;
position: relative; position: relative;
button{
button {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
svg{
svg {
color: #ff7373; color: #ff7373;
} }
} }
} }
} }
} }
.thumbnail>div.border{
.thumbnail>div.border {
display: block; display: block;
width:100%; width: 100%;
height:180px; height: 180px;
border: 2px dashed #ccc; border: 2px dashed #ccc;
} }
.uploadBtn{
.uploadBtn {
width: 100px; width: 100px;
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -225,38 +268,43 @@
margin: auto; margin: auto;
background: #137cbd; background: #137cbd;
} }
.bp3-dialog-footer-actions{
.bp3-dialog-footer-actions {
justify-content: space-between; justify-content: space-between;
&>div:first-child{
&>div:first-child {
line-height: 30px; line-height: 30px;
} }
} }
.bp3-dialog-body{
h5{ .bp3-dialog-body {
h5 {
padding-left: 20px; padding-left: 20px;
padding-top: 20px; padding-top: 20px;
} }
} }
} }
.newDir{ .newDir {
position: fixed; position: fixed;
top: 10%; top: 10%;
left: 33%; left: 33%;
z-index: 25; z-index: 25;
label.bp3-label{
label.bp3-label {
margin-bottom: 0 margin-bottom: 0
} }
} }
.pagination{ .pagination {
position: absolute; position: absolute;
bottom: 15px; bottom: 15px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%; width: 100%;
ul{
ul {
margin: 0; margin: 0;
list-style: none; list-style: none;
display: flex; display: flex;
@ -264,7 +312,8 @@
justify-content: center; justify-content: center;
padding-left: 0; padding-left: 0;
flex-wrap: wrap; flex-wrap: wrap;
li{
li {
border: 1px solid #137cbd; border: 1px solid #137cbd;
border-radius: 5px; border-radius: 5px;
height: 36px; height: 36px;
@ -274,56 +323,66 @@
line-height: 36px; line-height: 36px;
margin-right: 5px; margin-right: 5px;
} }
li.active{
li.active {
background: #137cbd; background: #137cbd;
} }
li.disabled{
li.disabled {
cursor: not-allowed; cursor: not-allowed;
color: #ccc; color: #ccc;
border-color: #ccc; border-color: #ccc;
} }
} }
.bp3-label{
.bp3-label {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0; margin: 0;
input{
input {
width: 35px; width: 35px;
margin: 0 5px; margin: 0 5px;
} }
} }
} }
.new-mat{ .new-mat {
position: fixed; position: fixed;
// top: 10%; // top: 10%;
// left: 50%; // left: 50%;
// z-index: 25; // z-index: 25;
outline: none; outline: none;
.link-shop{
&>div{ .link-shop {
&>div {
position: relative; position: relative;
.bp3-input-action{
.bp3-input-action {
top: 6px; top: 6px;
} }
ul{
ul {
font-size: 16px; font-size: 16px;
position: absolute; position: absolute;
top: 36px; top: 36px;
left: 0; left: 0;
width: 100%; width: 100%;
background:rgb(48, 64, 77); background: rgb(48, 64, 77);
li:hover{
li:hover {
background: #137cbd; background: #137cbd;
} }
} }
} }
} }
&>div:last-child{
&>div:last-child {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.bp3-button{
.bp3-button {
margin-right: 10px; margin-right: 10px;
} }
} }

10
src/UI/Components/Template/Template.less
Unescape View File

@ -41,13 +41,15 @@
text-align: center; text-align: center;
&>li { &>li {
padding: 0 10px; padding: 5px 10px 0 10px;
&>p { &>p {
width: 100px; width: 100px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis text-overflow: ellipsis;
margin: 0;
line-height: 1;
} }
} }
} }
@ -99,7 +101,7 @@
display: none; display: none;
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 10px; left: 10px;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 16px; height: 16px;
@ -117,7 +119,7 @@
&>.bp3-popover-wrapper:not(:first-child) { &>.bp3-popover-wrapper:not(:first-child) {
position: absolute; position: absolute;
bottom: 20%; top: 0px;
right: 0px; right: 0px;
.bp3-button { .bp3-button {

4
src/UI/Components/Template/TemplateList.tsx
Unescape View File

@ -52,7 +52,8 @@ export class TemplateList extends React.Component<ITemplateListProps> {
{ {
return ( return (
<li <li
key={temp.file_id} key={temp.module_id}
data-id={temp.module_id}
onMouseDown={(e) => this.handleMounseDown(e, temp)} onMouseDown={(e) => this.handleMounseDown(e, temp)}
style={{ style={{
background: this.props.currentInfo.id === temp.module_id && "rgba(162, 186, 197, 0.6)", background: this.props.currentInfo.id === temp.module_id && "rgba(162, 186, 197, 0.6)",
@ -132,7 +133,6 @@ export class TemplateList extends React.Component<ITemplateListProps> {
this.props.currentInfo.id = mid; this.props.currentInfo.id = mid;
this.props.currentInfo.name = temp.name; this.props.currentInfo.name = temp.name;
this.props.currentInfo.logo = temp.logo; this.props.currentInfo.logo = temp.logo;
if (e.button === MouseKey.Right) if (e.button === MouseKey.Right)
{ {
this.showContextMenu(e); this.showContextMenu(e);

2
src/UI/Components/Template/ToplineList.tsx
Unescape View File

@ -182,12 +182,14 @@ export class ToplineList extends React.Component<IToplineListProps, { isContextM
return ( return (
<li <li
key={tpline.topline_id} key={tpline.topline_id}
data-id={tpline.topline_id}
onMouseDown={(e) => this.handleMounseDown(e, tpline)} onMouseDown={(e) => this.handleMounseDown(e, tpline)}
style={{ style={{
background: this.props.info.id === tpline.topline_id && "rgba(162, 186, 197, 0.34)", background: this.props.info.id === tpline.topline_id && "rgba(162, 186, 197, 0.34)",
}} }}
> >
<div <div
draggable
onDoubleClick={() => this.handleDbClick(tpline)} onDoubleClick={() => this.handleDbClick(tpline)}
> >
<svg <svg

Write Preview
Loading…
Cancel
Save