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()
{
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('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 { observer } from 'mobx-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 { DirectoryId, PostJson, RequestStatus } from '../../../Common/Request';
import { AppToaster } from '../Toaster';
@ -71,6 +71,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
currentPage: 1,
pageCount: 20
}
private _dragId = "";
private nodeEls: HTMLElement[];
constructor(props)
{
@ -103,6 +104,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
private handleSelectData = (e: React.FormEvent<HTMLInputElement>, data) =>
{
data.isChecked = e.currentTarget.checked;
if (e.currentTarget.checked)
this.needDeleteData.add(data);
else
@ -551,6 +553,8 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
break;
}
let dataIds = this.getSelectDataIds();
if (dataIds.length === 0 && this._dragId)
dataIds.push(this._dragId);
if (targetId && !isNaN(Number(targetId)) && dataIds.length > 0)
{
let url = "";
@ -562,15 +566,15 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
query.file_ids = dataIds;
break;
case DirectoryId.MaterialDir:
url = FileUrls.move;
url = MaterialUrls.move;
query.material_ids = dataIds;
break;
case DirectoryId.ToplineDir:
url = FileUrls.move;
url = ToplineUrls.move;
query.topline_ids = dataIds;
break;
case DirectoryId.TemplateDir:
url = FileUrls.move;
url = TemplateUrls.move;
query.module_ids = dataIds;
break;
default:
@ -654,6 +658,25 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
{
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 = () =>
{
for (let node of this.nodeEls)
@ -788,10 +811,7 @@ export class CommonPanel extends React.Component<ICommonPanelProps, ICommonPanel
</div>
<Card
className="img-lib"
onDragStart={e =>
{
if (this.needDeleteData.size === 0) e.preventDefault();
}}>
onDragStart={this.handleDragStart}>
{
React.Children.map(this.props.children, child =>
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 (
<li
key={file.file_id}
data-id={file.file_id}
>
<div
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 (
<li
key={mtl.image_id}
key={mtl.material_id}
data-id={mtl.material_id}
onDragStart={() => this.handleDragStart(mtl)}
>
<div

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

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

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

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

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

@ -52,7 +52,8 @@ export class TemplateList extends React.Component<ITemplateListProps> {
{
return (
<li
key={temp.file_id}
key={temp.module_id}
data-id={temp.module_id}
onMouseDown={(e) => this.handleMounseDown(e, temp)}
style={{
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.name = temp.name;
this.props.currentInfo.logo = temp.logo;
if (e.button === MouseKey.Right)
{
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 (
<li
key={tpline.topline_id}
data-id={tpline.topline_id}
onMouseDown={(e) => this.handleMounseDown(e, tpline)}
style={{
background: this.props.info.id === tpline.topline_id && "rgba(162, 186, 197, 0.34)",
}}
>
<div
draggable
onDoubleClick={() => this.handleDbClick(tpline)}
>
<svg

Write Preview
Loading…
Cancel
Save