Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
What's new
10
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Open sidebar
Motion Bank
MB.js
Quasar Components MoSys
Commits
43a2ce1b
Commit
43a2ce1b
authored
Apr 12, 2019
by
Anton
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Update mosys grid editor and cells for new data model
parent
ece4fedb
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
166 additions
and
146 deletions
+166
-146
partials/Cell.vue
partials/Cell.vue
+15
-14
partials/CellEditor.vue
partials/CellEditor.vue
+9
-6
partials/GridDisplay.vue
partials/GridDisplay.vue
+2
-2
partials/GridEditor.vue
partials/GridEditor.vue
+131
-117
partials/GridEditorDefaultSource.vue
partials/GridEditorDefaultSource.vue
+9
-7
No files found.
partials/Cell.vue
View file @
43a2ce1b
<
template
lang=
"pug"
>
.cell-item-inner(:class="{'display-preview': preview, 'display-full': display}")
template(v-if="cell
TypeName
")
template(v-if="cell")
component(
:is="cell
TypeName
",
:is="cell
.component
",
:cell="cell",
:class="cellClasses",
:display="display",
...
...
@@ -21,21 +21,19 @@
import
cellTypes
from
'
./cells
'
export
default
{
props
:
[
'
cell
'
,
'
display
'
,
'
preview
'
,
'
annotation
'
],
props
:
[
'
annotation
'
,
'
display
'
,
'
preview
'
],
data
()
{
return
{
cell
:
undefined
,
selected
:
false
,
inViewPort
:
false
}
},
computed
:
{
cellTypeName
()
{
return
this
.
cell
.
type
?
this
.
cellTypeToClassName
(
this
.
cell
.
type
)
:
''
},
cellClasses
()
{
let
classes
=
[
'
cell-content
'
]
if
(
this
.
cell
)
{
if
(
this
.
cell
.
type
)
classes
.
push
(
`cell-type-
${
this
.
cell
.
type
.
toLowerCase
()}
`
)
if
(
this
.
cell
.
component
)
classes
.
push
(
`cell-type-
${
this
.
cell
.
component
.
toLowerCase
()}
`
)
if
(
this
.
cell
.
styleClass
)
{
classes
=
classes
.
concat
(
this
.
cell
.
styleClass
.
split
(
'
'
))
}
...
...
@@ -43,17 +41,23 @@
return
classes
}
},
mounted
()
{
watch
:
{
async
annotation
(
val
)
{
if
(
val
)
await
this
.
getCell
()
}
},
async
mounted
()
{
this
.
onScroll
()
this
.
$parent
.
$el
.
addEventListener
(
'
scroll
'
,
this
.
onScroll
,
false
)
if
(
this
.
cellTypeName
&&
cellTypes
.
hasOwnProperty
(
this
.
cellTypeName
)
===
false
)
{
throw
new
Error
(
'
This cell type is missing:
'
+
this
.
cell
.
type
)
}
if
(
this
.
annotation
)
await
this
.
getCell
()
},
beforeDestroy
()
{
this
.
$parent
.
$el
.
removeEventListener
(
'
scroll
'
,
this
.
onScroll
)
},
methods
:
{
async
getCell
()
{
this
.
cell
=
await
this
.
$store
.
dispatch
(
'
cells/get
'
,
this
.
annotation
.
body
.
source
.
id
)
},
onScroll
()
{
const
bounds
=
this
.
$el
.
getBoundingClientRect
(),
...
...
@@ -61,9 +65,6 @@
this
.
inViewPort
=
(
bounds
.
left
>=
0
&&
bounds
.
left
<=
boundsParent
.
width
)
||
(
bounds
.
right
>=
0
&&
bounds
.
right
<=
boundsParent
.
width
)
},
cellTypeToClassName
(
type
)
{
return
'
Cell
'
+
type
.
slice
(
0
,
1
).
toUpperCase
()
+
type
.
slice
(
1
).
replace
(
/
[^
a-z0-9
]
/ig
,
''
)
},
handleClick
()
{
this
.
selected
=
!
this
.
selected
},
...
...
partials/CellEditor.vue
View file @
43a2ce1b
...
...
@@ -257,12 +257,15 @@
}
},
async
updateCellContent
(
value
,
cell
,
path
)
{
const
destUuid
=
cell
.
_uuid
if
(
destUuid
)
{
const
annotation
=
await
this
.
$store
.
dispatch
(
'
annotations/get
'
,
destUuid
)
cell
[
path
]
=
value
annotation
.
body
.
value
=
JSON
.
stringify
(
cell
)
await
this
.
$store
.
dispatch
(
'
annotations/patch
'
,
[
destUuid
,
{
body
:
annotation
.
body
,
target
:
annotation
.
target
}])
if
(
cell
.
id
)
{
cell
.
data
[
path
]
=
value
await
this
.
$store
.
dispatch
(
'
cells/patch
'
,
[
cell
.
id
,
{
data
:
{
[
path
]:
value
}
}])
}
},
async
updateCellConfig
(
value
,
cell
,
path
)
{
if
(
cell
.
id
)
{
cell
.
config
[
path
]
=
value
await
this
.
$store
.
dispatch
(
'
cells/patch
'
,
[
cell
.
id
,
{
config
:
{
[
path
]:
value
}
}])
}
}
}
...
...
partials/GridDisplay.vue
View file @
43a2ce1b
...
...
@@ -5,7 +5,7 @@
div.cell-grid(:style="gridStyle")
template(v-for="(cell, index) in cells")
.cell-item(
:style="get
Cell
Style(cell)",
:style="get
Annotation
Style(cell)",
:title="cell.title")
cell(:cell="cell", display="display")
...
...
@@ -225,7 +225,7 @@
}
}
},
get
Cell
Style
(
cell
)
{
get
Annotation
Style
(
cell
)
{
return
{
'
grid-column-start
'
:
cell
.
x
,
'
grid-column-end
'
:
`span
${
cell
.
width
}
`
,
...
...
partials/GridEditor.vue
View file @
43a2ce1b
...
...
@@ -21,24 +21,23 @@
template(v-if="!resizingGrid")
template(v-for="(
cell
, index) in
cell
s")
template(v-for="(
annotation
, index) in
annotation
s")
.cell-item(
v-if="
cellUIStates[cell._uuid] && !cellUIStates[cell
._uuid].beingDragged",
v-if="
!annotationUIStates[annotation._uuid] || !annotationUIStates[annotation
._uuid].beingDragged",
draggable="true",
@dragstart="event => {handleCellDragStart(event,
cell
)}",
@dragend="event => {handleCellDragEnd(event,
cell
)}",
@dragstart="event => {handleCellDragStart(event,
annotation
)}",
@dragend="event => {handleCellDragEnd(event,
annotation
)}",
@contextmenu="handleCellContextMenu",
:style="getCellStyle(cell)",
:title="cell.title",
@click.prevent="event => {handleCellClick(event, cell)}",
:class="{selected: cellUIStates[cell._uuid] ? cellUIStates[cell._uuid].selected : false}",
:style="getAnnotationStyle(annotation)",
@click.prevent="event => {handleCellClick(event, annotation)}",
:class="{selected: annotationUIStates[annotation._uuid] ? annotationUIStates[annotation._uuid].selected : false}",
:key="`cell-${index}`")
cell(:
cell="cell
", preview)
cell(:
annotation="annotation
", preview)
div.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleCellResizerDragStart(event,
cell
)}",
@dragend="event => {handleCellResizerDragEnd(event,
cell
)}",
@dragexit="event => {handleCellResizerDragEnd(event,
cell
)}")
@dragstart="event => {handleCellResizerDragStart(event,
annotation
)}",
@dragend="event => {handleCellResizerDragEnd(event,
annotation
)}",
@dragexit="event => {handleCellResizerDragEnd(event,
annotation
)}")
q-icon(name="network cell")
q-context-menu
...
...
@@ -47,15 +46,15 @@
v-for="action in cellContextMenuActions",
:key="action.label",
v-close-overlay,
@click.native="event => {action.handler(event,
cell
)}")
@click.native="event => {action.handler(event,
annotation
)}")
q-item-main(:label="action.label")
template(v-for="(tmpCell, index) in tmpCells")
.cell-item.cell-item-tmp(:style="get
Cell
Style(tmpCell)", :key="`cell-tmp-${index}`")
.cell-item.cell-item-tmp(:style="get
Annotation
Style(tmpCell)", :key="`cell-tmp-${index}`")
cell(:cell="tmpCell")
template(v-else)
.cell-item(:style="get
Cell
Style({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
.cell-item(:style="get
Annotation
Style({x:0,y:0,width:1,height:1})", key="cell-grid-resizer")
div.cell-item-resize-handle(
draggable="true",
@dragstart="event => {handleGridResizerDragStart(event)}",
...
...
@@ -114,10 +113,11 @@
}
},
grid
:
undefined
,
annotations
:
undefined
,
gridMetadata
:
{},
cells
:
[],
tmpCells
:
[],
cell
UIStates
:
{},
annotation
UIStates
:
{},
gridDimensions
:
{
gridWidth
:
0
,
gridHeight
:
0
,
cellWidth
:
0
,
cellHeight
:
0
},
gridStyle
:
{},
contextMenuClickPosition
:
{},
...
...
@@ -165,7 +165,7 @@
},
watch
:
{
cells
()
{
this
.
update
Cell
UIStates
()
this
.
update
Annotation
UIStates
()
},
gridMetadata
()
{
this
.
updateGridDimensions
()
...
...
@@ -178,9 +178,22 @@
async
fetchData
()
{
if
(
this
.
gridUuid
)
{
this
.
grid
=
await
this
.
$store
.
dispatch
(
'
maps/get
'
,
this
.
gridUuid
)
await
this
.
fetchMetadataAnnotations
()
if
(
!
Object
.
keys
(
this
.
grid
.
config
).
length
)
{
this
.
grid
.
config
=
{
columns
:
10
,
rows
:
6
,
ratio
:
16
/
9.0
}
console
.
log
(
'
conf
'
,
this
.
grid
.
config
)
await
this
.
updateGridMetadataStore
()
}
this
.
updateGridDimensions
()
await
this
.
fetchCellAnnotations
()
const
{
items
}
=
await
this
.
$store
.
dispatch
(
'
annotations/find
'
,
{
'
target.id
'
:
this
.
grid
.
id
,
'
body.purpose
'
:
'
linking
'
,
'
body.type
'
:
'
Cell
'
})
this
.
annotations
=
items
}
},
handleGridResizerDragStart
(
event
)
{
...
...
@@ -189,28 +202,31 @@
async
handleGridResizerDragEnd
()
{
await
this
.
updateGridMetadataStore
()
},
handleCellResizerDragStart
(
event
,
cell
)
{
handleCellResizerDragStart
(
event
,
annotation
)
{
event
.
dataTransfer
.
setDragImage
(
nullImage
,
0
,
0
)
this
.
cellUIStates
[
cell
.
_uuid
].
beingResized
=
true
let
tmpCell
=
this
.
getTmpCell
(
cell
)
this
.
annotationUIStates
[
annotation
.
_uuid
].
beingResized
=
true
let
tmpCell
=
this
.
getTmpCell
(
annotation
)
this
.
tmpCells
.
push
(
tmpCell
)
},
handleCellResizerDragEnd
(
event
,
cell
)
{
async
handleCellResizerDragEnd
(
event
,
annotation
)
{
let
position
=
this
.
getGridPositionForEvent
(
event
)
cell
.
width
=
Math
.
max
(
1
,
1
+
position
.
x
-
cell
.
x
)
cell
.
height
=
Math
.
max
(
1
,
1
+
position
.
y
-
cell
.
y
)
this
.
cellUIStates
[
cell
.
_uuid
].
beingResized
=
false
let
parsed
=
annotation
.
target
.
selector
.
parse
(),
[
x
,
y
,
w
,
h
]
=
parsed
.
xywh
w
=
Math
.
max
(
1
,
1
+
position
.
x
-
x
)
h
=
Math
.
max
(
1
,
1
+
position
.
y
-
y
)
const
value
=
{
xywh
:
[
x
,
y
,
w
,
h
]
}
annotation
.
target
.
selector
.
value
=
value
this
.
annotationUIStates
[
annotation
.
_uuid
].
beingResized
=
false
this
.
tmpCells
=
[]
this
.
updateCellStore
(
cell
)
await
this
.
$store
.
dispatch
(
'
annotations/patch
'
,
[
annotation
.
id
,
{
target
:
{
selector
:
{
value
}
}
}]
)
},
handleCellClick
(
event
,
cell
)
{
this
.
cell
UIStates
[
cell
.
_uuid
].
selected
=
!
this
.
cell
UIStates
[
cell
.
_uuid
].
selected
this
.
annotation
UIStates
[
cell
.
_uuid
].
selected
=
!
this
.
annotation
UIStates
[
cell
.
_uuid
].
selected
this
.
updateSelectedCells
()
},
handleCellDragStart
(
event
,
cell
)
{
if
(
this
.
cellUIStates
[
cell
.
_uuid
].
beingResized
)
{
}
else
{
if
(
!
this
.
annotationUIStates
[
cell
.
_uuid
].
beingResized
)
{
event
.
dataTransfer
.
setData
(
'
text/plain
'
,
JSON
.
stringify
(
cell
))
event
.
dataTransfer
.
setDragImage
(
nullImage
,
0
,
0
)
let
elContainerBoundingBox
=
this
.
$el
.
getBoundingClientRect
()
...
...
@@ -219,14 +235,14 @@
x
:
(
event
.
clientX
-
elContainerBoundingBox
.
x
)
-
(
elBoundingBox
.
x
-
elContainerBoundingBox
.
x
),
y
:
(
event
.
clientY
-
elContainerBoundingBox
.
y
)
-
(
elBoundingBox
.
y
-
elContainerBoundingBox
.
y
)
}
this
.
cell
UIStates
[
cell
.
_uuid
].
draggingOffset
=
offset
this
.
cell
UIStates
[
cell
.
_uuid
].
beginDragged
=
true
this
.
annotation
UIStates
[
cell
.
_uuid
].
draggingOffset
=
offset
this
.
annotation
UIStates
[
cell
.
_uuid
].
beginDragged
=
true
}
let
tmpCell
=
this
.
getTmpCell
(
cell
)
this
.
tmpCells
.
push
(
tmpCell
)
},
handleCellDragEnd
(
event
,
cell
)
{
this
.
cell
UIStates
[
cell
.
_uuid
].
beingDragged
=
false
this
.
annotation
UIStates
[
cell
.
_uuid
].
beingDragged
=
false
},
// handleCellContextMenuClick () {
// },
...
...
@@ -235,7 +251,7 @@
// // this.$store.commit('mosys/setSourcesTab', 'tab-default-cells')
// },
async
handleCellContextMenuDelete
(
event
,
cell
)
{
this
.
cell
UIStates
[
cell
.
_uuid
].
selected
=
false
this
.
annotation
UIStates
[
cell
.
_uuid
].
selected
=
false
this
.
updateSelectedCells
()
this
.
cells
=
this
.
cells
.
filter
(
c
=>
c
!==
cell
)
await
this
.
$store
.
dispatch
(
'
annotations/delete
'
,
cell
.
_uuid
)
...
...
@@ -264,65 +280,87 @@
}
catch
(
e
)
{
/* dialog canceled */
}
},
handleGridDragOver
(
event
)
{
async
handleGridDragOver
(
event
)
{
let
_this
=
this
if
(
this
.
resizingGrid
)
{
const
position
=
this
.
getGridPositionForEvent
(
event
)
this
.
grid
Metadata
.
ratio
=
position
.
ox
/
(
position
.
oy
*
1.0
)
this
.
updateGrid
Dimensions
()
this
.
grid
.
config
.
ratio
=
position
.
ox
/
(
position
.
oy
*
1.0
)
await
this
.
updateGrid
MetadataStore
()
}
else
{
let
cell
=
Object
.
keys
(
this
.
cellUIStates
).
filter
(
uuid
=>
{
return
_this
.
cellUIStates
[
uuid
].
beginDragged
||
_this
.
cellUIStates
[
uuid
].
beingResized
}).
map
(
uuid
=>
{
return
_this
.
cellUIStates
[
uuid
].
cell
let
annotation
=
this
.
annotations
.
filter
(
annotation
=>
{
if
(
!
_this
.
annotationUIStates
[
annotation
.
_uuid
])
return
false
return
_this
.
annotationUIStates
[
annotation
.
_uuid
].
beginDragged
||
_this
.
annotationUIStates
[
annotation
.
_uuid
].
beingResized
}).
shift
()
let
offset
,
position
if
(
!
cell
)
{
cell
=
{
uuid
:
null
,
x
:
1
,
y
:
1
,
width
:
1
,
height
:
1
}
if
(
!
annotation
)
{
annotation
=
{
target
:
this
.
grid
.
get2DArea
([
1
,
1
],
[
1
,
1
])
}
position
=
this
.
getGridPositionForEvent
(
event
)
}
else
{
offset
=
this
.
cellUIStates
[
cell
.
_uuid
].
draggingOffset
offset
=
this
.
annotationUIStates
[
annotation
.
_uuid
].
draggingOffset
position
=
this
.
getGridPositionForEvent
(
event
,
offset
)
}
if
(
!
this
.
tmpCells
.
length
)
this
.
tmpCells
.
push
(
annotation
)
let
tmpCell
=
this
.
tmpCells
[
0
]
if
(
!
tmpCell
&&
this
.
tmpCells
.
length
===
0
)
{
tmpCell
=
this
.
getTmpCell
(
cell
)
this
.
tmpCells
.
push
(
tmpCell
)
}
const
parsed
=
tmpCell
.
target
.
selector
.
parse
()
if
(
event
.
dataTransfer
.
types
.
includes
(
'
text/plain
'
))
{
tmpCell
.
x
=
position
.
x
tmpCell
.
y
=
position
.
y
tmpCell
.
target
.
selector
.
value
=
{
xywh
:
[
position
.
x
,
position
.
y
]
}
parsed
.
xywh
[
0
]
=
position
.
x
parsed
.
xywh
[
1
]
=
position
.
y
event
.
preventDefault
()
}
else
{
tmpCell
.
width
=
Math
.
max
(
1
,
1
+
position
.
x
-
tmpCell
.
x
)
tmpCell
.
height
=
Math
.
max
(
1
,
1
+
position
.
y
-
tmpCell
.
y
)
parsed
.
xywh
[
2
]
=
Math
.
max
(
1
,
1
+
position
.
x
-
tmpCell
.
x
)
parsed
.
xywh
[
3
]
=
Math
.
max
(
1
,
1
+
position
.
y
-
tmpCell
.
y
)
}
tmpCell
.
target
.
selector
.
value
=
parsed
}
},
handleGridDragEnd
()
{
this
.
tmpCells
=
[]
},
handleGridDrop
(
event
)
{
let
cellDropped
=
event
.
dataTransfer
.
getData
(
'
text/plain
'
)
if
(
cellDropped
)
{
cellDropped
=
JSON
.
parse
(
cellDropped
)
let
cell
=
this
.
cells
.
find
(
c
=>
c
.
_uuid
===
cellDropped
.
_uuid
)
let
offset
,
position
if
(
cell
)
{
offset
=
this
.
cellUIStates
[
cell
.
_uuid
].
draggingOffset
position
=
this
.
getGridPositionForEvent
(
event
,
offset
)
async
handleGridDrop
(
event
)
{
let
dropData
=
event
.
dataTransfer
.
getData
(
'
text/plain
'
)
if
(
dropData
)
{
dropData
=
JSON
.
parse
(
dropData
)
let
annotation
=
this
.
cells
.
find
(
c
=>
c
.
id
===
dropData
.
id
)
const
{
x
,
y
}
=
this
.
getGridPositionForEvent
(
event
,
annotation
?
this
.
annotationUIStates
[
annotation
.
_uuid
].
draggingOffset
:
undefined
)
const
target
=
this
.
grid
.
get2DArea
([
x
,
y
],
[
1
,
1
])
if
(
annotation
)
{
annotation
.
target
.
selector
.
value
=
target
.
selector
.
value
await
this
.
$store
.
dispatch
(
'
annotations/patch
'
,
[
annotation
.
id
,
{
target
:
{
selector
:
{
value
:
target
.
selector
.
value
}
}
}])
console
.
debug
(
'
dropped existing annotation
'
,
annotation
)
}
else
{
cell
=
cellDropped
position
=
this
.
getGridPositionForEvent
(
event
)
const
{
data
,
config
,
component
}
=
dropData
,
cell
=
await
this
.
$store
.
dispatch
(
'
cells/post
'
,
{
data
,
config
,
component
})
annotation
=
await
this
.
$store
.
dispatch
(
'
annotations/post
'
,
{
body
:
{
type
:
'
Cell
'
,
purpose
:
'
linking
'
,
source
:
{
id
:
cell
.
id
}
},
target
})
console
.
debug
(
'
dropped new cell
'
,
cell
,
annotation
)
}
cell
.
x
=
position
.
x
cell
.
y
=
position
.
y
this
.
tmpCells
=
[]
this
.
updateCellStore
(
cell
)
//
this.updateCellStore(cell)
event
.
preventDefault
()
}
},
...
...
@@ -404,23 +442,23 @@
},
updateSelectedCells
()
{
const
_this
=
this
let
selectedCells
=
Object
.
keys
(
this
.
cell
UIStates
).
filter
(
k
=>
{
return
_this
.
cell
UIStates
[
k
].
selected
let
selectedCells
=
Object
.
keys
(
this
.
annotation
UIStates
).
filter
(
k
=>
{
return
_this
.
annotation
UIStates
[
k
].
selected
}).
map
(
k
=>
{
return
_this
.
cells
.
find
(
c
=>
c
.
_uuid
===
k
)
})
this
.
$store
.
commit
(
'
mosys/setSelectedCells
'
,
selectedCells
)
},
update
Cell
UIStates
()
{
let
new
Cell
UIStates
=
{}
this
.
cell
s
.
map
(
c
=>
{
new
Cell
UIStates
[
c
.
_uuid
]
=
{
update
Annotation
UIStates
()
{
let
new
Annotation
UIStates
=
{}
this
.
annotation
s
.
map
(
a
=>
{
new
Annotation
UIStates
[
a
.
_uuid
]
=
{
selected
:
false
,
beingResized
:
false
,
cell
:
c
annotation
:
a
}
})
this
.
cell
UIStates
=
new
Cell
UIStates
this
.
annotation
UIStates
=
new
Annotation
UIStates
this
.
updateSelectedCells
()
},
getTmpCell
(
cell
,
type
=
'
UIFeedback
'
)
{
...
...
@@ -445,13 +483,13 @@
updateGridDimensions
()
{
let
elWidth
=
this
.
$el
.
offsetWidth
let
elHeight
=
this
.
$el
.
offsetHeight
let
cellSizeRatio
=
this
.
grid
Metadata
.
ratio
let
cellSizeRatio
=
this
.
grid
.
config
.
ratio
let
gridHeight
=
elHeight
let
cellHeight
=
gridHeight
/
this
.
grid
Metadata
.
rows
let
cellHeight
=
gridHeight
/
this
.
grid
.
config
.
rows
let
cellWidth
=
elWidth
/
Math
.
round
(
elWidth
/
(
cellHeight
*
cellSizeRatio
))
let
gridWidth
=
cellWidth
*
this
.
grid
Metadata
.
columns
let
gridWidth
=
cellWidth
*
this
.
grid
.
config
.
columns
let
cellsPerWidth
=
elWidth
/
cellWidth
let
cellWidthMini
=
elWidth
/
this
.
grid
Metadata
.
columns
let
cellWidthMini
=
elWidth
/
this
.
grid
.
config
.
columns
let
gridHeightMini
=
cellWidthMini
/
cellSizeRatio
this
.
gridDimensions
=
{
full
:
{
...
...
@@ -465,7 +503,7 @@
},
mini
:
{
width
:
elWidth
,
height
:
gridHeightMini
*
this
.
grid
Metadata
.
rows
,
height
:
gridHeightMini
*
this
.
grid
.
config
.
rows
,
cell
:
{
width
:
cellWidthMini
,
height
:
gridHeightMini
...
...
@@ -517,30 +555,7 @@
}
return
null
}).
filter
(
cell
=>
cell
)
this
.
updateCellUIStates
()
},
async
fetchMetadataAnnotations
()
{
const
query
=
{
'
body.type
'
:
'
2DGridMetadata
'
,
'
target.id
'
:
this
.
grid
.
id
}
const
result
=
await
this
.
$store
.
dispatch
(
'
annotations/find
'
,
query
)
let
annotation
=
result
.
items
.
shift
()
if
(
annotation
)
{
let
metadata
=
JSON
.
parse
(
annotation
.
body
.
value
)
metadata
.
_uuid
=
annotation
.
_uuid
if
(
metadata
)
{
this
.
gridMetadata
=
metadata
}
}
else
{
this
.
gridMetadata
=
{
columns
:
10
,
rows
:
6
,
ratio
:
16
/
9.0
}
await
this
.
updateGridMetadataStore
()
}
this
.
updateAnnotationUIStates
()
},
getGridCellAnnotation
(
cell
)
{
return
{
...
...
@@ -553,8 +568,11 @@
id
:
this
.
grid
.
id
,
type
:
'
Map
'
,
selector
:
{
type
:
'
2DLocation
'
,
value
:
`x=
${
cell
.
x
}
&y=
${
cell
.
y
}
&width=
${
cell
.
width
}
&height=
${
cell
.
height
}
`
conformsTo
:
'
Media
'
,
type
:
'
FragmentSelector
'
,
value
:
{
// xywh: [x, y, width, height]
}
}
}
}
...
...
@@ -583,20 +601,16 @@
await
this
.
fetchCellAnnotations
()
},
async
updateGridMetadataStore
()
{
let
mapAnnotation
=
this
.
getGridMetadataAnnotation
(
this
.
grid
.
id
,
this
.
gridMetadata
)
if
(
this
.
gridMetadata
.
_uuid
)
{
await
this
.
$store
.
dispatch
(
'
annotations/patch
'
,
[
this
.
gridMetadata
.
_uuid
,
mapAnnotation
])
}
await
this
.
$store
.
dispatch
(
'
annotations/post
'
,
mapAnnotation
)
await
this
.
$store
.
dispatch
(
'
maps/patch
'
,
[
this
.
grid
.
id
,
{
config
:
this
.
grid
.
config
}])
this
.
updateGridDimensions
()
},
getCellStyle
(
cell
)
{
getAnnotationStyle
(
annotation
)
{
const
parsed
=
annotation
.
target
.
selector
.
parse
()
return
{
'
grid-column-start
'
:
cell
.
x
,
'
grid-column-end
'
:
`span
${
cell
.
width
}
`
,
'
grid-row-start
'
:
cell
.
y
,
'
grid-row-end
'
:
`span
${
cell
.
height
}
`
'
grid-column-start
'
:
parsed
.
xywh
[
0
]
,
'
grid-column-end
'
:
`span
${
parsed
.
xywh
[
2
]
}
`
,
'
grid-row-start
'
:
parsed
.
xywh
[
1
]
,
'
grid-row-end
'
:
`span
${
parsed
.
xywh
[
3
]
}
`
}
}
// setCellSet: function (cellSet) {
...
...
partials/GridEditorDefaultSource.vue
View file @
43a2ce1b
...
...
@@ -53,6 +53,7 @@
inputType
:
'
text
'
,
type
:
'
Title
'
,
label
:
'
Title Cell
'
,
component
:
'
CellTitle
'
,
help
:
''
,
error
:
false
,
errorMessage
:
''
,
...
...
@@ -62,6 +63,7 @@
inputType
:
'
textarea
'
,
type
:
'
Text
'
,
label
:
'
Text Cell
'
,
component
:
'
CellText
'
,
help
:
''
,
error
:
false
,
errorMessage
:
''
,
...
...
@@ -71,6 +73,7 @@
inputType
:
'
url
'
,
type
:
'
Video
'
,
label
:
'
Video Cell
'
,
component
:
'
CellVideo
'
,
help
:
'
Insert a URL to: a video file or a Vimeo / YouTube video page
'
,
error
:
false
,
errorMessage
:
'
Needs to be a valid URL
'
,
...
...
@@ -80,6 +83,7 @@
inputType
:
'
url
'
,
type
:
'
Image
'
,
label
:
'
Image Cell
'
,
component
:
'
CellImage
'
,
help
:
'
Insert a URL to an image file
'
,
error
:
false
,
errorMessage
:
'
Needs to be a valid URL
'
,
...
...
@@ -89,6 +93,7 @@
inputType
:
'
url
'
,
type
:
'
Internal-Link
'
,
label
:
'
Link Cell
'
,
component
:
'
CellInternalLink
'
,
help
:
'
Insert a URL to a page in this system
'
,
error
:
false
,
errorMessage
:
'
Needs to be a valid URL
'
,
...
...
@@ -98,6 +103,7 @@
inputType
:
'
url
'
,
type
:
'
IFrame
'
,
label
:
'
IFrame Cell
'
,
component
:
'
CellIFrame
'
,
help
:
'
Insert some URL
'
,
error
:
false
,
errorMessage
:
'
Needs to be a valid URL
'
,
...
...
@@ -122,13 +128,9 @@
this
.
handleItemChanged
(
inputField
.
value
,
item
)
}
const
resourceCell
=
{
uuid
:
null
,
type
:
item
.
type
,
x
:
1
,
y
:
1
,
width
:
1
,
height
:
1
,
content
:
item
.
value
data
:
{
content
:
item
.
value
},
config
:
{},
component
:
item
.
component
}
event
.
dataTransfer
.
setData
(
'
text/plain
'
,
JSON
.
stringify
(
resourceCell
))
},
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment