Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge new box-model code into QtWebEngine conversion #3618

Closed
wants to merge 20 commits into from
Closed

Merge new box-model code into QtWebEngine conversion #3618

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
cfbeb0e
timeline: Fix id for ruler markers container
ferdnyc Jul 20, 2020
39aff20
Timeline: box-sizing, width:100% for track DIVs
ferdnyc Jul 20, 2020
aa081c4
Timeline: Unify border-handling, fix object sizing
ferdnyc Jul 20, 2020
c5683f6
Merge branch 'develop' into box-model
ferdnyc Jul 20, 2020
21cde98
Timeline: Shared CSS class styles all menu icons
ferdnyc Jul 21, 2020
bda8e86
CSS fixes to appease Codacy
ferdnyc Jul 21, 2020
6328779
timeline: Don't interpolate getThumbPath in ng-show
ferdnyc Jul 21, 2020
bc24a64
Move tlMultiSelect directive to separate file
ferdnyc Jul 22, 2020
438f22a
Move ng-cloak styling to HTML head
ferdnyc Jul 22, 2020
0b155e8
Eliminate getFooStyle() JS functions in ng-class
ferdnyc Jul 22, 2020
013791b
More CSS fixes
ferdnyc Jul 23, 2020
18c0210
timeline: Remove transition hover effect JS
ferdnyc Jul 23, 2020
c5d56e1
Merge branch 'new-webengine-support' into webengine-box-model
ferdnyc Jul 23, 2020
5b92dd1
timeline CSS: Format, fix ordering of rules
ferdnyc Jul 23, 2020
ae87a50
multiselect.js: Comment-declare globals
ferdnyc Jul 23, 2020
3a71845
Make SVG first default for razor, update styling
ferdnyc Jul 28, 2020
5d8a1f6
Merge remote-tracking branch 'upstream/new-webengine-support' into we…
ferdnyc Jul 28, 2020
17ffd01
Fix order of hover styling in CSS
ferdnyc Jul 30, 2020
4e25b39
Razor tool: Update cursor images + CSS, add debug
ferdnyc Jul 31, 2020
3423bf7
Remove razor-tool icon from resource file
ferdnyc Jul 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 31 additions & 29 deletions src/timeline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
<META name="license" content="GPLv3">
<link rel="icon" type="image/png" href="../images/openshot.png" />
<title>OpenShot Timeline</title>

<!-- JQuery & Angular -->
<link type="text/css" rel="stylesheet" href="media/css/jquery-ui.css" />
<link type="text/css" rel="stylesheet" href="media/css/ui-darkness/jquery-ui.theme.css" />
<script type="text/javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" src="media/js/jquery-ui.js"></script>
<script type="text/javascript" src="media/js/angular.min.js"></script>
<script type="text/javascript" src="media/js/angular-animate.min.js"></script>

<!-- OpenShot JavaScript Sources -->
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
Expand All @@ -25,18 +25,18 @@
<script type="text/javascript" src="js/directives/track.js"></script>
<script type="text/javascript" src="js/directives/clip.js"></script>
<script type="text/javascript" src="js/directives/transition.js"></script>
<script type="text/javascript" src="js/directives/misc.js"></script>
<script type="text/javascript" src="js/directives/misc.js"></script>
<script type="text/javascript" src="media/js/ui-bootstrap-tpls-0.7.0.min.js"></script>

<!-- OpenShot StyleSheets -->
<link type="text/css" rel="stylesheet" href="media/css/main.css" />
<link type="text/css" rel="stylesheet" href="media/css/debug.css" />
<link type="text/css" rel="stylesheet" href="media/css/debug.css" />

<!-- JQuery & Bootstrap StyleSheets -->
<link type="text/css" rel="stylesheet" href="media/css/bootstrap.min.css">
</head>
<body tl-body ng-controller="TimelineCtrl" ng-cloak>

<!-- RULER NAME (left of screen) -->
<div tl-rulertime id="ruler_label">
<div id="ruler_time">{{playheadTime.hour}}:{{playheadTime.min}}:{{playheadTime.sec}}:{{playheadTime.frame}}</div>
Expand All @@ -50,12 +50,12 @@
<!-- Ruler extends beyond tracks area at least for a width of vertical scroll bar (or more, like 50px here) -->
<canvas tl-ruler id="ruler" width="{{getTimelineWidth(1024) + 50}}" height="39"></canvas>

<!-- MARKERS -->
<span class="ruler_marker" id="marker_for_{{marker.id}}">
<!-- MARKERS -->
<span class="ruler_marker" id="markers_container">
<img ng-repeat="marker in project.markers" id="marker_{{marker.id}}_{{$index}}" ng-right-click="showMarkerMenu(marker.id)" style="position: absolute; bottom: 0px; left: {{(marker.position * pixelsPerSecond) - 6 }}px;" class="marker_icon" ng-src="media/images/markers/{{ marker.icon }}" draggable="false"/>
</span>
<br class="cleared">

<!-- PROGRESS BAR -->
<canvas id="progress" width="{{project.duration * pixelsPerSecond}}px" height="3px"></canvas>
</div>
Expand All @@ -65,7 +65,7 @@
<div id="track_controls">
<div ng-repeat="layer in project.layers.slice().reverse()" id="track_static_{{layer.number}}" ng-right-click="showTrackMenu(layer.id)" class="track_name">
<div class="track_top">
<div tl-clip-menu class="track_menu" ng-mousedown="showTrackMenu(layer.id)"></div>
<div tl-clip-menu class="track_menu menu_button" ng-mousedown="showTrackMenu(layer.id)"></div>
<span class="track_label">{{getTrackName(layer.label, project.layers.length - $index)}}</span><span ng-show="layer.lock" class="track_lock"></span>
</div>
</div>
Expand All @@ -75,13 +75,14 @@
<div tl-scrollable-tracks id="scrolling_tracks">
<div id="track-container" tl-track tl-multi-selectable style="width: {{getTimelineWidth(1024)}}px; padding-bottom: 2px;">
<!-- TRACKS -->
<div ng-repeat="layer in project.layers.slice().reverse()" id="track_{{layer.number}}" ng-right-click="showTimelineMenu($event, layer.number)" class="{{getTrackStyle(layer.lock)}}" style="width:{{getTimelineWidth(1024)}}px;">
<div ng-repeat="layer in project.layers.slice().reverse()" id="track_{{layer.number}}" ng-right-click="showTimelineMenu($event, layer.number)" class="{{getTrackStyle(layer.lock)}}">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another unexpected optimization: I noticed we were forcing the width of every track DIV with inline styling. But they're all in a container that's also forced with the exact same width. So I just added width: 100% to the track CSS, removed the inline styling, and let the container dictate the width of the tracks.

</div>

<!-- CLIPS -->
<div ng-hide tl-clip ng-repeat="clip in project.clips" id="clip_{{clip.id}}" ng-click="selectClip(clip.id, true, $event)" ng-right-click="showClipMenu(clip.id, $event)" class="clip droppable" ng-class="getClipStyle(clip)" style="width:{{(clip.end - clip.start) * pixelsPerSecond}}px; left:{{clip.position * pixelsPerSecond}}px; top:{{getTrackTop(clip.layer)}}px;z-index:{{1000 + $index}};">
<div ng-hide tl-clip ng-repeat="clip in project.clips" id="clip_{{clip.id}}" ng-click="selectClip(clip.id, true, $event)" ng-right-click="showClipMenu(clip.id, $event)" class="clip timeline_obj droppable" ng-class="getClipStyle(clip)" style="width:{{(clip.end - clip.start) * pixelsPerSecond}}px; left:{{clip.position * pixelsPerSecond}}px; top:{{getTrackTop(clip.layer)}}px;z-index:{{1000 + $index}};">
<div id="clip_border_{{clip.id}}" class="clip_border tl-border">
<div class="clip_top">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As small a thing as it is, inserting the extra <div class="tl-border"> is the big thing that makes all the difference.

By moving the borders to that <div> and unsetting box-sizing:border-box on the outer <div tl-clip>, the borders no longer alter the dimensions/placement of the main <div tl-clip>, which means all of the sizing/placement math becomes predictable and repeatable.

<div tl-clip-menu class="clip_menu" ng-show="!enable_razor" ng-mousedown="showClipMenu(clip.id, $event)" tooltip-enable="!enable_razor" tooltip="{{clip.title}}" tooltip-placement="bottom" tooltip-popup-delay="400"></div>
<div tl-clip-menu class="clip_menu menu_button" ng-show="!enable_razor" ng-mousedown="showClipMenu(clip.id, $event)" tooltip-enable="!enable_razor" tooltip="{{clip.title}}" tooltip-placement="bottom" tooltip-popup-delay="400"></div>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of the menus were using the same styling, so I created a shared .menu_button { } CSS stanza and applied it to all of them, eliminating the duplicated CSS.


<!-- CLIP EFFECTS -->
<div ng-show="!enable_razor" class="effect-container" id="effects_{{clip.id}}">
Expand All @@ -99,17 +100,19 @@
</div>
<br class="cleared">
<div ng-show="!clip.show_audio" class="thumb-container">
<img class="thumb thumb-start" ng-show="{{ getThumbPath(clip) }}" ng-src="{{ getThumbPath(clip) }}"/>
<img class="thumb thumb-start" ng-show="getThumbPath(clip)" ng-src="{{ getThumbPath(clip) }}"/>
</div>
<div ng-show="clip.show_audio" class="audio-container">
<canvas tl-audio height="46px" width="{{ (clip.end - clip.start) * pixelsPerSecond}}px" class="audio"></canvas>
</div>
</div>
</div>

<!-- TRANSITIONS -->
<div ng-hide tl-transition ng-repeat="transition in project.effects" id="transition_{{transition.id}}" ng-click="selectTransition(transition.id, true, $event)" ng-right-click="showTransitionMenu(transition.id, $event)" class="transition droppable" ng-class="getClipStyle(transition)" style="width:{{ (transition.end - transition.start) * pixelsPerSecond}}px; left:{{transition.position * pixelsPerSecond}}px; top:{{getTrackTop(transition.layer)}}px;z-index:{{5000 + $index}};">
<div ng-hide tl-transition ng-repeat="transition in project.effects" id="transition_{{transition.id}}" ng-click="selectTransition(transition.id, true, $event)" ng-right-click="showTransitionMenu(transition.id, $event)" class="transition timeline_obj droppable" ng-class="getClipStyle(transition)" style="width:{{ (transition.end - transition.start) * pixelsPerSecond}}px; left:{{transition.position * pixelsPerSecond}}px; top:{{getTrackTop(transition.layer)}}px;z-index:{{5000 + $index}};">
<div id="transition_border_{{transition.id}}" class="transition_border tl-border">
<div class="transition_top">
<div tl-clip-menu class="transition_menu" ng-show="!enable_razor" ng-mousedown="showTransitionMenu(transition.id, $event)"></div>
<div tl-clip-menu class="transition_menu menu_button" ng-show="!enable_razor" ng-mousedown="showTransitionMenu(transition.id, $event)"></div>
<!-- TRANSITION KEYFRAME POINTS -->
<div ng-repeat="(point, value) in getKeyframes(transition)" id="point_{{transition.id}}_{{point}}_{{$index}}" style="left: {{(((point - 1) / (project.fps.num / project.fps.den) - transition.start) * pixelsPerSecond)}}px;" class="point_region" ng-show="transition.selected "><div class="point_icon"></div></div>

Expand All @@ -118,6 +121,7 @@
</div>
<br class="cleared">
</div>
</div>

</div>

Expand All @@ -128,46 +132,46 @@
<div ng-show="snapline" class="snapping-line" style="height: {{ playhead_height }}px; left:{{ snapline_position}}px;"></div>

</div>


<!-- HIDDEN DEBUG SECTION -->
<script language="javascript">

</script>

<div ng-show="!Qt" class="gear" ng-click="toggleDebug()">
<img src="media/images/gear.png" width="40">
</div>

<div ng-show="debug" class="debug-window ui-corner-all">
<div class="debug-text ui-corner-all" style="width: 20%;">PROJECT DATA: <pre>pixels per second: {{pixelsPerSecond}} <br> playhead offset: {{playheadOffset}} <br> {{project | json}}</pre></div>
<div class="debug-text ui-corner-all" style="width: 70%;">ACTIONS:<br><br>
<div>
<p>Add Clips:</p>
<p>Add Clips:</p>
<input type="text" name="numClips" ng-model="numClips" size="5" style="width:100px;" placeholder="# of clips"/>
<button ng-click="addClips(numClips)">add clips</button> <br/>

<div style="height:1px;background-color:#cfcfcf;margin:15px;"></div>
<div>
<p>Scale:</p>
<p>Scale:</p>
<input id="scaleVal" ng-model="project.scale" style="width:100px;"><br><br>
<div db-slider></div>
</div>
<div style="height:1px;background-color:#cfcfcf;margin:15px;"></div>
<div>
<p>Add Marker:</p>
<p>Add Marker:</p>
<input type="text" name="markLoc" ng-model="markLoc" size="5" style="width:100px;" placeholder="loc of marker"/>
<button ng-click="addMarker(markLoc)">add marker</button> <br/>
</div>
<div style="height:1px;background-color:#cfcfcf;margin:15px;"></div>
<div>
<p>Add Effect:</p>
<p>Add Effect:</p>
<input type="text" name="clipNum" ng-model="clipNum" size="5" style="width:100px;" placeholder="clip #"/>
<button ng-click="addEffect(clipNum)">add effect</button> <br/>
</div>
<div style="height:1px;background-color:#cfcfcf;margin:15px;"></div>
<div>
<p>Change clip image:</p>
<p>Change clip image:</p>
<input type="text" name="startImage" ng-model="startImage" size="5" style="width:100px;" placeholder="start clip for #3"/>
<button ng-click="changeImage(startImage)">change img</button> <br/>
</div>
Expand All @@ -178,5 +182,3 @@
<!-- END DEBUG SECTION -->
</body>
</html>


15 changes: 0 additions & 15 deletions src/timeline/js/directives/clip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,21 +211,6 @@ App.directive("tlClip", function ($timeout) {
}
}
});

//handle hover over on the clip
element.hover(
function () {
if (!dragging) {
element.addClass("highlight_clip", 200, "easeInOutCubic");
}
},
function () {
if (!dragging) {
element.removeClass("highlight_clip", 200, "easeInOutCubic");
}
}
);

Comment on lines -214 to -228
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I knew I really wanted to get rid of this, because it was fighting with the rest of the CSS rules. You could even see it happening in the UI, clips would get into a state where mousing between them would cause borders to flash, or disappear momentarily and reappear — all sorts of issues. Plus, :hover styling is at this point a basic CSS feature, there's no reason it couldn't be used to create the hover effects without needing to add any extra JavaScript code.

//handle draggability of clip
element.draggable({
snap: ".track", // snaps to a track
Expand Down
10 changes: 6 additions & 4 deletions src/timeline/js/functions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,10 +298,12 @@ function moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, left
}

// Find closest nearby object, if any (for snapping)
var bounding_box_padding = 3; // not sure why this is needed, but it helps line everything up
var results = scope.getNearbyPosition([bounding_box.left, bounding_box.right + bounding_box_padding], 10.0, bounding_box.selected_ids);
Comment on lines -301 to -302
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doing away with box-sizing: border-box let me eliminate the bounding_box_padding adjustment to the lasso processing, which was only there (whether that comment knew it or not) to correct for the borders being included as part of the object dimensions.

var nearby_offset = results[0];
var snapline_position = results[1];
var [nearby_offset, snapline_position]
= scope.getNearbyPosition(
[bounding_box.left, bounding_box.right],
10.0, bounding_box.selected_ids);
// var nearby_offset = results[0];
// var snapline_position = results[1];
Comment on lines +301 to +306
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heh, forgot I even did that. Our JS code creates way too many temporary variables, as it's tossing around data. This eliminates one temporary array, which is something.


if (snapline_position) {
// Show snapping line
Expand Down
Loading